diff --git a/tests/acceptance/product-details-test.js b/tests/acceptance/product-details-test.js index 42c52e16..4b4f5e57 100644 --- a/tests/acceptance/product-details-test.js +++ b/tests/acceptance/product-details-test.js @@ -128,4 +128,30 @@ module('Acceptance | product details', function (hooks) { ]); }); }); + + module('nest-product-details, v1', function (nestedHooks) { + nestedHooks.beforeEach(function () { + assignVariants({ + 'nest-product-details': 'v1', + }); + }); + + test('A user cannot visit the product-details route', async function (assert) { + await visit('/product-details/1'); + + assert.strictEqual( + currentURL(), + '/products/1', + 'We redirect the user to the products.product route.', + ); + + assert.areProductDetailsCorrect({ + 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/tests/acceptance/products-test.js b/tests/acceptance/products-test.js index aac41147..e6e9dfb4 100644 --- a/tests/acceptance/products-test.js +++ b/tests/acceptance/products-test.js @@ -177,4 +177,119 @@ module('Acceptance | products', function (hooks) { ]); }); }); + + module('nest-product-details, v1', function (nestedHooks) { + nestedHooks.beforeEach(function () { + assignVariants({ + 'nest-product-details': 'v1', + }); + }); + + test('A user can visit the products route', async function (assert) { + await visit('/products'); + + assert.strictEqual( + currentURL(), + '/products', + 'The user is on the products route.', + ); + + assert + .dom('[data-test-field="Filter by name"]') + .exists({ count: 1 }, 'The user sees the filter by name field.'); + + assert + .dom('[data-test-field="Sort by"]') + .exists({ count: 1 }, 'The user sees the sort by field.'); + + assert.areProductsCorrect([ + 'Vanilla Ice Cream Cake', + 'Ember.js Stickers', + 'Black Forest Cake', + ]); + }); + + test('A user can filter and sort products', async function (assert) { + await visit('/products'); + await fillIn('[data-test-field="Filter by name"]', 'cake'); + + assert.strictEqual( + currentURL(), + '/products?name=cake', + 'The user is on the products route.', + ); + + assert.areProductsCorrect([ + 'Vanilla Ice Cream Cake', + 'Black Forest Cake', + ]); + + await selectByLabel('[data-test-field="Sort by"]', 'Name: A to Z'); + + assert.strictEqual( + currentURL(), + '/products?name=cake&sortBy=name%3Aasc', + 'The user is on the products route.', + ); + + assert.areProductsCorrect([ + 'Black Forest Cake', + 'Vanilla Ice Cream Cake', + ]); + + await fillIn('[data-test-field="Filter by name"]', ''); + + assert.strictEqual( + currentURL(), + '/products?sortBy=name%3Aasc', + 'The user is on the products route.', + ); + + assert.areProductsCorrect([ + 'Black Forest Cake', + 'Ember.js Stickers', + 'Vanilla Ice Cream Cake', + ]); + + await click('[data-test-button="Clear"]'); + + assert.strictEqual( + currentURL(), + '/products', + 'The user is on the products route.', + ); + + assert.areProductsCorrect([ + 'Vanilla Ice Cream Cake', + 'Ember.js Stickers', + 'Black Forest Cake', + ]); + }); + + test('A user can check a product', async function (assert) { + await visit('/products'); + + const products = findAll('[data-test-product-card]'); + + await click(products[0].querySelector('[data-test-link="Learn More"]')); + + assert.strictEqual( + currentURL(), + '/products/1', + 'The user is on the products.product route.', + ); + + assert.areProductDetailsCorrect({ + description: 'Made with organic herbs', + name: 'Vanilla Ice Cream Cake', + price: '$40', + rating: '4.5 out of 5 stars', + seller: "Amy's", + }); + + assert + .dom('[data-test-link="Back"]') + .doesNotExist('The user should not see the back link.'); + }); + }); }); diff --git a/tests/acceptance/products/product-test.js b/tests/acceptance/products/product-test.js index 5b823c03..8f2b7560 100644 --- a/tests/acceptance/products/product-test.js +++ b/tests/acceptance/products/product-test.js @@ -1,4 +1,6 @@ -import { currentURL, visit } from '@ember/test-helpers'; +import { click, currentURL, findAll, visit } from '@ember/test-helpers'; +import { a11yAudit } from 'ember-a11y-testing/test-support'; +import { getPageTitle } from 'ember-page-title/test-support'; import { assignVariants, setupApplicationTest, @@ -64,4 +66,79 @@ module('Acceptance | products/product', function (hooks) { }); }); }); + + module('nest-product-details, v1', function (nestedHooks) { + nestedHooks.beforeEach(function () { + assignVariants({ + 'nest-product-details': 'v1', + }); + }); + + test('Accessibility audit', async function (assert) { + await visit('/products/1'); + await a11yAudit(); + + assert.strictEqual( + getPageTitle(), + 'Vanilla Ice Cream Cake | Products | Ember Workshop', + 'We render the correct page title.', + ); + }); + + test('A user can visit the products.product route', async function (assert) { + await visit('/products/1'); + + assert.strictEqual( + currentURL(), + '/products/1', + 'The user is on the products.product route.', + ); + + assert.areProductDetailsCorrect({ + 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) { + await visit('/products/1'); + + const products = findAll('[data-test-product-card]'); + + await click(products[2].querySelector('[data-test-link="Learn More"]')); + + assert.strictEqual( + currentURL(), + '/products/3', + 'The user is on the products.product route.', + ); + + assert.areProductDetailsCorrect({ + 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) { + await visit('/products/not-a-valid-id'); + + assert.strictEqual( + currentURL(), + '/products', + 'We redirect the user to the products route.', + ); + + assert.areProductsCorrect([ + 'Vanilla Ice Cream Cake', + 'Ember.js Stickers', + 'Black Forest Cake', + ]); + }); + }); });