Day 3. Created a custom assertion for the product-details route

ijlee2 · Oct 9, 2023 · e79dcc1 · e79dcc1
1 parent 1343f3a
commit e79dcc1
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 89 deletions.
diff --git a/my-app/tests/acceptance/product-details-test.ts b/my-app/tests/acceptance/product-details-test.ts
@@ -3,6 +3,7 @@ import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { getPageTitle } from 'ember-page-title/test-support';
 import {
   type ApplicationTestContext,
+  assertProductDetails,
   assertProducts,
   setupApplicationTest,
   setupExperiments,
@@ -77,28 +78,13 @@ module('Acceptance | product details', function (hooks) {
         'The user is on the product-details route.',
       );
 
-      assert
-        .dom('[data-test-field="Name"]')
-        .hasText('Vanilla Ice Cream Cake', 'The user sees the correct name.');
-
-      assert
-        .dom('[data-test-field="Description"]')
-        .hasText(
-          'Made with organic herbs',
-          'The user sees the correct description.',
-        );
-
-      assert
-        .dom('[data-test-field="Price"]')
-        .hasText('$40', 'The user sees the correct price.');
-
-      assert
-        .dom('[data-test-field="Rating"]')
-        .hasText('4.5 out of 5 stars', 'The user sees the correct rating.');
-
-      assert
-        .dom('[data-test-field="Seller"]')
-        .hasText("Amy's", 'The user sees the correct seller.');
+      assertProductDetails(assert, {
+        description: 'Made with organic herbs',
+        name: 'Vanilla Ice Cream Cake',
+        price: '$40',
+        rating: '4.5 out of 5 stars',
+        seller: "Amy's",
+      });
     });
 
     test('A user can check another product', async function (assert) {
@@ -127,28 +113,13 @@ module('Acceptance | product details', function (hooks) {
         'The user is on the product-details route.',
       );
 
-      assert
-        .dom('[data-test-field="Name"]')
-        .hasText('Black Forest Cake', 'The user sees the correct name.');
-
-      assert
-        .dom('[data-test-field="Description"]')
-        .hasText(
-          'A chocolate sponge cake with a rich cherry filling',
-          'The user sees the correct description.',
-        );
-
-      assert
-        .dom('[data-test-field="Price"]')
-        .hasText('$70', 'The user sees the correct price.');
-
-      assert
-        .dom('[data-test-field="Rating"]')
-        .hasText('5 out of 5 stars', 'The user sees the correct rating.');
-
-      assert
-        .dom('[data-test-field="Seller"]')
-        .hasText('The local Konditorei', 'The user sees the correct seller.');
+      assertProductDetails(assert, {
+        description: 'A chocolate sponge cake with a rich cherry filling',
+        name: 'Black Forest Cake',
+        price: '$70',
+        rating: '5 out of 5 stars',
+        seller: 'The local Konditorei',
+      });
     });
 
     test('When a user checks a product that does not exist, we redirect them to the products route', async function (assert) {

diff --git a/my-app/tests/acceptance/products-test.ts b/my-app/tests/acceptance/products-test.ts
@@ -3,6 +3,7 @@ import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { getPageTitle } from 'ember-page-title/test-support';
 import {
   type ApplicationTestContext,
+  assertProductDetails,
   assertProducts,
   selectByLabel,
   setupApplicationTest,
@@ -157,28 +158,13 @@ module('Acceptance | products', function (hooks) {
         'The user is on the product-details route.',
       );
 
-      assert
-        .dom('[data-test-field="Name"]')
-        .hasText('Vanilla Ice Cream Cake', 'The user sees the correct name.');
-
-      assert
-        .dom('[data-test-field="Description"]')
-        .hasText(
-          'Made with organic herbs',
-          'The user sees the correct description.',
-        );
-
-      assert
-        .dom('[data-test-field="Price"]')
-        .hasText('$40', 'The user sees the correct price.');
-
-      assert
-        .dom('[data-test-field="Rating"]')
-        .hasText('4.5 out of 5 stars', 'The user sees the correct rating.');
-
-      assert
-        .dom('[data-test-field="Seller"]')
-        .hasText("Amy's", 'The user sees the correct seller.');
+      assertProductDetails(assert, {
+        description: 'Made with organic herbs',
+        name: 'Vanilla Ice Cream Cake',
+        price: '$40',
+        rating: '4.5 out of 5 stars',
+        seller: "Amy's",
+      });
 
       await click('[data-test-link="Back"]');
 

diff --git a/my-app/tests/acceptance/products/product-test.ts b/my-app/tests/acceptance/products/product-test.ts
@@ -1,6 +1,7 @@
 import { currentURL, visit } from '@ember/test-helpers';
 import {
   type ApplicationTestContext,
+  assertProductDetails,
   setupApplicationTest,
   setupExperiments,
 } from 'my-app/tests/helpers';
@@ -63,28 +64,13 @@ module('Acceptance | products/product', function (hooks) {
         'We redirect the user to the product-details route.',
       );
 
-      assert
-        .dom('[data-test-field="Name"]')
-        .hasText('Vanilla Ice Cream Cake', 'The user sees the correct name.');
-
-      assert
-        .dom('[data-test-field="Description"]')
-        .hasText(
-          'Made with organic herbs',
-          'The user sees the correct description.',
-        );
-
-      assert
-        .dom('[data-test-field="Price"]')
-        .hasText('$40', 'The user sees the correct price.');
-
-      assert
-        .dom('[data-test-field="Rating"]')
-        .hasText('4.5 out of 5 stars', 'The user sees the correct rating.');
-
-      assert
-        .dom('[data-test-field="Seller"]')
-        .hasText("Amy's", 'The user sees the correct seller.');
+      assertProductDetails(assert, {
+        description: 'Made with organic herbs',
+        name: 'Vanilla Ice Cream Cake',
+        price: '$40',
+        rating: '4.5 out of 5 stars',
+        seller: "Amy's",
+      });
     });
   });
 });
diff --git a/my-app/tests/helpers/routes/products.ts b/my-app/tests/helpers/routes/products.ts
@@ -1,4 +1,4 @@
-import { findAll } from '@ember/test-helpers';
+import { find, findAll } from '@ember/test-helpers';
 
 export function assertProducts(
   assert: Assert,
@@ -27,3 +27,37 @@ export function assertProducts(
       .hasText(name, `The user sees the correct product. (${i + 1})`);
   }
 }
+
+export function assertProductDetails(
+  assert: Assert,
+  expectedValues: {
+    description: string;
+    name: string;
+    price: string;
+    rating: string;
+    seller: string;
+  },
+): void {
+  const container = find('[data-test-product-details]')!;
+  const { description, name, price, rating, seller } = expectedValues;
+
+  assert
+    .dom('[data-test-field="Name"]', container)
+    .hasText(name, 'The user sees the correct name.');
+
+  assert
+    .dom('[data-test-field="Description"]', container)
+    .hasText(description, 'The user sees the correct description.');
+
+  assert
+    .dom('[data-test-field="Price"]', container)
+    .hasText(price, 'The user sees the correct price.');
+
+  assert
+    .dom('[data-test-field="Rating"]', container)
+    .hasText(rating, 'The user sees the correct rating.');
+
+  assert
+    .dom('[data-test-field="Seller"]', container)
+    .hasText(seller, 'The user sees the correct seller.');
+}