test(os-159): added e2e tests for breadcrumbs (#6267)

* Sync `release-2.4` with `release/next` (#6237)

* test(os-159): added e2e tests for breadcrumbs on category page

* Update packages/commercetools/theme/tests/e2e/integration/e2e-breadcrumbs.spec.ts

packages/commercetools/theme/tests/e2e/fixtures/test-data/e2e-breadcrumbs.json

@@ -0,0 +1,16 @@
+{
+  "Should display breadcrumbs list properly - category": {
+    "category": "women",
+    "expectedLength": 2
+  },
+  "Should display breadcrumbs list properly - subcategory": {
+    "category": "women",
+    "subcategory": "women-clothing",
+    "expectedLength": 3
+  },
+  "Should display breadcrumbs list properly - nested subcategory": {
+    "category": "women",
+    "subcategory": "women-clothing-jackets",
+    "expectedLength": 4
+  }
+}

packages/commercetools/theme/tests/e2e/integration/e2e-breadcrumbs.spec.ts

@@ -0,0 +1,40 @@
+import page from '../pages/factory';
+
+const testsCases = [
+  'category',
+  'subcategory',
+  'nested subcategory'
+];
+
+const breadcrumbsNames = [
+  'Home',
+  'Women',
+  'Clothing',
+  'Jackets'
+];
+
+context(['regression'], 'Breadcrumbs', () => {
+  beforeEach(function () {
+    cy.fixture('test-data/e2e-breadcrumbs').then((fixture) => {
+      this.fixtures = {
+        data: fixture
+      };
+    });
+  });
+
+  testsCases.forEach(testCase => {
+    it(`Should display breadcrumbs list properly - ${testCase}`, function () {
+      const data = this.fixtures.data[this.test.title];
+      const category = page.category(data.category, data.subcategory);
+
+      category.visit();
+
+      page.components.breadcrumbs.container.should('not.be.empty');
+      page.components.breadcrumbs.listItems.should('have.length', data.expectedLength);
+
+      page.components.breadcrumbs.listItems.each((item, index) => {
+        expect(item.text()).to.contain(breadcrumbsNames[index]);
+      });
+    });
+  });
+});

packages/commercetools/theme/tests/e2e/pages/category.ts

@@ -6,11 +6,13 @@ type View = 'tiles' | 'list'
 export class Category extends Base {
 
   private readonly _category: string;
+  private readonly _subcategory: string;
   private _view: View = 'tiles';
 
-  constructor(category?: string) {
+  constructor(category?: string, subcategory?: string) {
     super();
     if (category) this._category = category;
+    if (subcategory) this._subcategory = subcategory;
   }
 
   set view(view: View) {
@@ -25,8 +27,12 @@ export class Category extends Base {
     return this._category;
   }
 
+  get subcategory(): string {
+    return this._subcategory;
+  }
+
   get path(): string {
-    return `/c/${this.category}`;
+    return `/c/${this.category}${this.subcategory ? `/${this.subcategory}` : ''}`;
   }
 
   get products(): Cypress.Chainable {

packages/commercetools/theme/tests/e2e/pages/components/breadcrumbs.ts

@@ -0,0 +1,14 @@
+import { el } from '../utils/element';
+
+class Breadcrumbs {
+
+  get container(): Cypress.Chainable {
+    return el('breadcrumbs');
+  }
+
+  get listItems(): Cypress.Chainable {
+    return el('breadcrumbs', '.sf-breadcrumbs__list-item');
+  }
+}
+
+export default new Breadcrumbs();

packages/commercetools/theme/tests/e2e/pages/factory.ts

@@ -1,4 +1,5 @@
 import { Billing, Payment, Shipping, ThankYou } from './checkout';
+import Breadcrumbs from './components/breadcrumbs';
 import Cart from './components/cart-sidebar';
 import LoginModal from './components/login-modal';
 import Home from './home';
@@ -19,7 +20,8 @@ const page = {
   get components() {
     return {
       cart: Cart,
-      loginModal: LoginModal
+      loginModal: LoginModal,
+      breadcrumbs: Breadcrumbs
     };
   },
 
@@ -34,8 +36,8 @@ const page = {
     };
   },
 
-  category(category?: string) {
-    return new Category(category);
+  category(category?: string, subcategory?: string) {
+    return new Category(category, subcategory);
   },
 
   product(id?: string, slug?: string) {

packages/core/nuxt-theme-module/theme/pages/Category.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="category">
     <SfBreadcrumbs
+      v-e2e="'breadcrumbs'"
       class="breadcrumbs desktop-only"
       :breadcrumbs="breadcrumbs"
     />