create tests for the collections, add new locators, data-testids, fun…

…ctions

.env.local-example

@@ -23,5 +23,6 @@ PLAYWRIGHT_PRODUCT_NAME='Mesh Gym Shorts'
 PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK='An Exceptional Tee for Men'
 PLAYWRIGHT_PRODUCT_SIZE_OUTOFSTOCK='XS'
 PLAYWRIGHT_PRODUCT_COLOR_OUTOFSTOCK='Gray'
-PLAYWRIGHT_COLLECTION_NAME='men'
+PLAYWRIGHT_COLLECTION_NAME='Men'
+PLAYWRIGHT_BRAND_NAME='Nike'
 

e2e/constants.ts

@@ -14,3 +14,4 @@ export const INVALID_PHONE_NUMBER = faker.string.numeric(5);
 export const VALID_PHONE_NUMBER = '+1' + faker.string.numeric(10);
 export const USER_NAME = 'test';
 export const MESSAGE = faker.lorem.sentence();
+export const BRAND_NAME = process.env.PLAYWRIGHT_BRAND_NAME;

e2e/page-objects/collections-page.ts

@@ -9,4 +9,8 @@ export class CollectionsPage {
 
   productItems = () => this.page.getByTestId('product-item');
   getProductByName = (productName: string) => this.productItems().getByText(productName);
+  collectionsDialog = () => this.page.getByTestId('collection-popup-dialog');
+  collectionSection = () => this.page.getByTestId('collection-section');
+  brandsSection = () => this.collectionSection().filter({ hasText: 'Brands' }).getByRole('list');
+  getBrandByName = (brand: string) => this.brandsSection().getByText(brand, { exact: true });
 }

e2e/tests/collections.spec.ts

@@ -0,0 +1,45 @@
+import { test } from '../fixtures';
+import { expect } from 'playwright/test';
+import { BRAND_NAME, COLLECTION_NAME, COLLECTIONS_ENDPOINT, HOMEPAGE_ENDPOINT } from '../constants';
+import { getCollectionEndpoint } from '../utils';
+
+test.describe('Collections page', () => {
+  test.beforeEach('Navigate to the home page and open collection menu', async ({ page, collectionsPage }) => {
+    if (!COLLECTION_NAME) {
+      test.skip(!COLLECTION_NAME, 'PLAYWRIGHT_COLLECTION_NAME was not defined');
+      return;
+    }
+
+    await page.goto(HOMEPAGE_ENDPOINT);
+    await page.getByTestId('nav-bar').getByRole('button', { name: COLLECTION_NAME, exact: true }).click();
+    await collectionsPage.collectionsDialog().waitFor();
+  });
+
+  test('Verify user can navigate to the collection', async ({ page, collectionsPage }) => {
+    await collectionsPage
+      .collectionsDialog()
+      .locator('a', { hasText: `Shop all ${COLLECTION_NAME}` })
+      .click();
+    await page.waitForURL(getCollectionEndpoint());
+
+    await page.getByRole('heading', { name: COLLECTION_NAME, exact: true }).waitFor();
+    await expect(collectionsPage.productItems()).not.toHaveCount(0);
+  });
+
+  test('Verify user can navigate to the collection by brand name', async ({ page, collectionsPage }) => {
+    if (!BRAND_NAME) {
+      test.skip(!BRAND_NAME, 'PLAYWRIGHT_BRAND_NAME was not defined');
+      return;
+    }
+
+    await collectionsPage.brandsSection().hover();
+    await collectionsPage.getBrandByName(BRAND_NAME).click();
+    await page.waitForURL(COLLECTIONS_ENDPOINT + BRAND_NAME.toLowerCase());
+
+    await page.getByRole('heading', { name: BRAND_NAME, exact: true }).waitFor();
+    await expect(collectionsPage.productItems()).not.toHaveCount(0);
+    for (const product of await collectionsPage.productItems().all()) {
+      await expect(product).toContainText(BRAND_NAME, { ignoreCase: true });
+    }
+  });
+});

e2e/tests/shopping-cart.spec.ts

@@ -1,21 +1,21 @@
 import { test } from '../fixtures';
 import {
   COLLECTION_NAME,
-  COLLECTIONS_ENDPOINT,
   PRODUCT_COLOR_OUTOFSTOCK,
   PRODUCT_NAME,
   PRODUCT_OUTOFSTOCK,
   PRODUCT_SIZE_OUTOFSTOCK
 } from '../constants';
 import { expect } from 'playwright/test';
+import { getCollectionEndpoint } from '../utils';
 
 test.describe('Shopping cart', () => {
   test.beforeEach('Navigate to the Collections page', async ({ page }) => {
     if (!COLLECTION_NAME) {
       test.skip(!COLLECTION_NAME, 'PLAYWRIGHT_COLLECTION_NAME was not defined');
       return;
     }
-    await page.goto(COLLECTIONS_ENDPOINT + COLLECTION_NAME);
+    await page.goto(getCollectionEndpoint());
   });
 
   test('User is able to add product to cart', async ({ page, collectionsPage, shoppingCart, productPage }) => {

e2e/utils.ts

@@ -0,0 +1,9 @@
+import { COLLECTION_NAME, COLLECTIONS_ENDPOINT } from './constants';
+
+export function transformStringToSlug(string: string) {
+  return string.toLowerCase().replace(/\s+/g, '-');
+}
+
+export function getCollectionEndpoint() {
+  return COLLECTIONS_ENDPOINT + transformStringToSlug(`${COLLECTION_NAME}`);
+}

src/features/Navigation/NavigationTop/components/TopLinks.tsx

@@ -32,7 +32,7 @@ const SectionWithPopover = ({ section }: { section: NavigationSection }) => (
             {/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
             <div className="absolute inset-0 top-1/2 bg-white shadow" aria-hidden="true" />
 
-            <div className="relative bg-background">
+            <div className="relative bg-background" data-testid="collection-popup-dialog">
               <div className="max-w-7xl mx-auto px-8 pt-10">
                 {section.link && (
                   <NextLink href={section.link.href} className="text-primary-700 hover:text-primary-800">
@@ -41,7 +41,7 @@ const SectionWithPopover = ({ section }: { section: NavigationSection }) => (
                 )}
                 <div className="grid grid-cols-4 items-start gap-y-10 gap-x-8 pt-10 pb-12">
                   {section.subsections?.map((subsection, subsectionIdx) => (
-                    <div key={`${subsection.name}-${subsectionIdx}`}>
+                    <div key={`${subsection.name}-${subsectionIdx}`} data-testid="collection-section">
                       <p id={`desktop-featured-heading-${subsectionIdx}`} className="font-medium text-body-900">
                         {subsection.name}
                       </p>