diff --git a/packages/commercetools/theme/tests/e2e/fixtures/test-data/e2e-breadcrumbs.json b/packages/commercetools/theme/tests/e2e/fixtures/test-data/e2e-breadcrumbs.json new file mode 100644 index 0000000000..cdb7497803 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/packages/commercetools/theme/tests/e2e/integration/e2e-breadcrumbs.spec.ts b/packages/commercetools/theme/tests/e2e/integration/e2e-breadcrumbs.spec.ts new file mode 100644 index 0000000000..9e73abad04 --- /dev/null +++ b/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]); + }); + }); + }); +}); diff --git a/packages/commercetools/theme/tests/e2e/pages/category.ts b/packages/commercetools/theme/tests/e2e/pages/category.ts index fb0d67887b..c06c0d3f30 100644 --- a/packages/commercetools/theme/tests/e2e/pages/category.ts +++ b/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 { diff --git a/packages/commercetools/theme/tests/e2e/pages/components/breadcrumbs.ts b/packages/commercetools/theme/tests/e2e/pages/components/breadcrumbs.ts new file mode 100644 index 0000000000..15979593d9 --- /dev/null +++ b/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(); diff --git a/packages/commercetools/theme/tests/e2e/pages/factory.ts b/packages/commercetools/theme/tests/e2e/pages/factory.ts index a0ff7997d4..00b23c5320 100644 --- a/packages/commercetools/theme/tests/e2e/pages/factory.ts +++ b/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) { diff --git a/packages/core/nuxt-theme-module/theme/pages/Category.vue b/packages/core/nuxt-theme-module/theme/pages/Category.vue index 9511628c32..219dfc5f0a 100644 --- a/packages/core/nuxt-theme-module/theme/pages/Category.vue +++ b/packages/core/nuxt-theme-module/theme/pages/Category.vue @@ -1,6 +1,7 @@