Day 3: Created error and loading routes

my-app/app/controllers/error.ts

@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default class ErrorController extends Controller {
+  declare model: any;
+}

my-app/app/controllers/products/error.ts

@@ -3,5 +3,7 @@ import Controller from '@ember/controller';
 import styles from './error.css';
 
 export default class ProductsErrorController extends Controller {
+  declare model: any;
+
   styles = styles;
 }

my-app/app/templates/error.hbs

@@ -0,0 +1,5 @@
+<Ui::Page @title="error.hbs">
+  <p data-test-error-message>
+    {{or this.model (t "routes.error.default-message")}}
+  </p>
+</Ui::Page>

my-app/app/templates/loading.hbs

@@ -0,0 +1,7 @@
+<Ui::Page @title="loading.hbs">
+  <img
+    alt=""
+    data-test-loading-icon
+    src="/assets/loading.svg"
+  />
+</Ui::Page>

my-app/app/templates/products/error.hbs

@@ -0,0 +1,5 @@
+<div class={{this.styles.container}}>
+  <p data-test-error-message>
+    {{or this.model (t "routes.error.default-message")}}
+  </p>
+</div>

my-app/app/templates/products/loading.hbs

@@ -0,0 +1,7 @@
+<div class={{this.styles.container}}>
+  <img
+    alt=""
+    data-test-loading-icon
+    src="/assets/loading.svg"
+  />
+</div>

my-app/tests/acceptance/products/error-test.ts

@@ -0,0 +1,43 @@
+import { visit } from '@ember/test-helpers';
+import { Response } from 'miragejs';
+import {
+  type ApplicationTestContext,
+  setupApplicationTest,
+  setupExperiments,
+} from 'my-app/tests/helpers';
+import { module, test } from 'qunit';
+
+interface TestContext extends ApplicationTestContext {}
+
+module('Acceptance | products/error', function (hooks) {
+  setupApplicationTest(hooks);
+  setupExperiments(hooks, {
+    'nest-product-details': 'v1',
+  });
+
+  hooks.beforeEach(function (this: TestContext) {
+    this.server.get('/products/:id', () => {
+      return new Response(500, {}, { errors: ['Some server error'] });
+    });
+
+    this.server.create('product', {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: Assume that Mirage works
+      categoryId: 'cake',
+      description: 'Made with organic herbs',
+      name: 'Vanilla Ice Cream Cake',
+      price: 40,
+      rating: 4.5,
+      seller: "Amy's",
+      shortDescription: 'Made with organic herbs',
+    });
+  });
+
+  test('A user can see the error message', async function (assert) {
+    await visit('/products/1');
+
+    assert
+      .dom('[data-test-error-message]')
+      .exists({ count: 1 }, 'The user sees the error message.');
+  });
+});

my-app/tests/acceptance/products/loading-test.ts

@@ -0,0 +1,42 @@
+import { settled, visit, waitFor } from '@ember/test-helpers';
+import {
+  type ApplicationTestContext,
+  setupApplicationTest,
+  setupExperiments,
+} from 'my-app/tests/helpers';
+import { module, test } from 'qunit';
+
+interface TestContext extends ApplicationTestContext {}
+
+module('Acceptance | products/loading', function (hooks) {
+  setupApplicationTest(hooks);
+  setupExperiments(hooks, {
+    'nest-product-details': 'v1',
+  });
+
+  hooks.beforeEach(function (this: TestContext) {
+    this.server.create('product', {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: Assume that Mirage works
+      categoryId: 'cake',
+      description: 'Made with organic herbs',
+      name: 'Vanilla Ice Cream Cake',
+      price: 40,
+      rating: 4.5,
+      seller: "Amy's",
+      shortDescription: 'Made with organic herbs',
+    });
+  });
+
+  test('A user can see the loading icon', async function (assert) {
+    visit('/products/1');
+
+    await waitFor('[data-test-loading-icon]');
+
+    assert
+      .dom('[data-test-loading-icon]')
+      .exists({ count: 1 }, 'The user can see the loading icon.');
+
+    await settled();
+  });
+});