@faststore/core 22.42.6

package/cypress/integration/plp.test.js

@@ -0,0 +1,224 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+/**
+ * Cypress tests for PLP
+ */
+
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
+
+describe('Search page Filters and Sorting options', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  it('Applies filters after click', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    // Apply filters
+    cy.getById('open-filter-button')
+      .click()
+      .get(
+        `[data-testid=mobile-store-filter-accordion-item][data-type=StoreFacetBoolean]>[data-testid=mobile-store-filter-accordion-button]`
+      )
+      .first()
+      .click()
+      .getById('mobile-store-filter-accordion-panel-checkbox')
+      .should('exist')
+      .first()
+      .click()
+      .then(($checkbox) => {
+        const value = $checkbox.attr('data-value')
+        // const quantity = $checkbox.attr('data-quantity')
+
+        cy.getById('filter-slider-button-apply')
+          .click()
+
+          .then(() => {
+            // Check if the filter applied actually ended up in the URL
+            cy.location('href').should((loc) => {
+              expect(loc).to.include(value)
+            })
+          })
+        // TODO: This test if flaky because the facets are lazy. We should fix this in another PR
+        // Check if the filter applied actually brought the number of products it said it would
+        // .getById('total-product-count')
+        // .should('exist')
+        // .parent()
+        // .then(($countDiv) => {
+        //   const count = $countDiv.attr('data-count')
+
+        //   expect(Number(count)).to.eq(Number(quantity))
+        // })
+      })
+  })
+
+  it('Sort products by price_asc', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    const priceId = '[data-fs-product-grid] [data-testid="price"]'
+
+    cy.getById('product-gallery').within(() => {
+      cy.getById('search-sort')
+        .should('exist')
+        .select('price_asc')
+        .then(() => {
+          cy.get(priceId).should(($prices) => {
+            const prices = Cypress._.map($prices, (price) =>
+              Number(price.attributes['data-value'].value)
+            )
+
+            const sorted = Cypress._.sortBy(prices, Cypress._.identity)
+
+            expect(prices).to.have.length.gt(0)
+            expect(prices).to.deep.equal(sorted)
+          })
+        })
+    })
+  })
+
+  it('Sort products by price_desc', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+    const priceId = '[data-fs-product-grid] [data-testid="price"]'
+
+    cy.getById('product-gallery').within(() => {
+      cy.getById('search-sort')
+        .should('exist')
+        .select('price_desc')
+        .then(() => {
+          cy.get(priceId).should(($prices) => {
+            const prices = Cypress._.map($prices, (price) =>
+              Number(price.attributes['data-value'].value)
+            )
+
+            const sorted = Cypress._.sortBy(prices, (x) => -x)
+
+            expect(prices).to.have.length.gt(0)
+            expect(prices).to.deep.equal(sorted)
+          })
+        })
+    })
+  })
+})
+
+describe('Infinite Scroll pagination', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  it('Shows more products when requested', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    cy.getById('product-gallery').within(() => {
+      cy.getById('store-product-card')
+        .should('exist')
+        .should('have.length.gt', 0)
+        .then(($links) => {
+          const before = $links.length
+
+          cy.getById('show-more')
+            .should('exist')
+            .click()
+            .then(() => {
+              cy.getById('store-product-card')
+                .should('have.length.gte', before)
+                .then(($products) => {
+                  const after = $products.length
+
+                  expect(before).to.be.lte(after)
+                })
+            })
+        })
+    })
+  })
+
+  it('Sticks to last seen page on plp pagination', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    cy.get('[data-testid=product-gallery] [data-testid=store-product-card]')
+      .should('exist')
+      .should('have.length.gt', 0)
+      .then(($links) => {
+        // Number of products before showMore is clicked
+        const before = $links.length
+
+        cy.getById('show-more')
+          .should('exist')
+          .click()
+          // Go up the page
+          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
+          .first()
+          .scrollIntoView({ duration: 1000 })
+
+          // Go down the page
+          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
+          .last()
+          .scrollIntoView({ duration: 1000 })
+          .then(() => {
+            // Ensure it waits for the new page after clicking "show more"
+            cy.location('search').should('match', /page=1$/)
+
+            // The skuId of the last product on the page
+            let skuIdBeforeNavigate
+
+            cy.get(
+              '[data-testid=product-gallery] [data-testid=store-product-card]'
+            )
+              // Number of products after showMore is clicked should be higher
+              .should('have.length.gte', before)
+              .last()
+              .then(($card) => {
+                skuIdBeforeNavigate = $card.attr('data-fs-product-card-sku')
+              })
+              .click()
+              .then(() => {
+                // make sure we are on the pdp
+                cy.location('pathname').should('match', /\/p$/)
+                // make sure pdp is fully iteractive
+                cy.getById('buy-button').should('exist')
+              })
+              .then(() => {
+                cy.go('back')
+                  .get(
+                    '[data-testid=product-gallery] [data-testid=store-product-card]'
+                  )
+                  .last()
+                  .then(($card) => {
+                    const skuIdAfterNavigate = $card.attr(
+                      'data-fs-product-card-sku'
+                    )
+
+                    expect(skuIdBeforeNavigate).to.eq(skuIdAfterNavigate)
+                    expect(skuIdAfterNavigate).to.exist
+                  })
+              })
+          })
+      })
+  })
+
+  // Tests: https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly
+  it('Changes the page being viewed on scroll', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    cy.getById('show-more').should('exist').click()
+
+    cy.scrollTo('top')
+      .location('search')
+      .should('match', /page=0$/)
+
+    cy.get('[data-testid=product-gallery] [data-testid=store-product-card]')
+      .last()
+      .scrollIntoView({ duration: 1000 })
+      .location('search')
+      .should('match', /page=1$/)
+  })
+})

package/cypress/integration/search.test.js

@@ -0,0 +1,38 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+/**
+ * Cypress tests for Search Input
+ */
+
+import { options } from '../global'
+import { cypress } from '../../store.config'
+
+const { pages } = cypress
+
+describe('Search input', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  context('when search for generic term', () => {
+    it('opens the search page', () => {
+      const term = 'shirt'
+
+      cy.visit(pages.home, options)
+      cy.waitForHydration()
+
+      cy.getById('store-input-mobile-button').click({ force: true })
+
+      cy.getById('store-input-mobile')
+        .click()
+        .type(term)
+        .within(() => {
+          cy.getById('store-button').click()
+        })
+
+      cy.location('search').should((loc) => {
+        expect(loc).to.include(`q=${term}`)
+      })
+    })
+  })
+})

package/cypress/integration/seo.test.js

@@ -0,0 +1,318 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+/**
+ * Cypress tests for testing Seo tags, like canonicals, index/noindex and structured data
+ *
+ * TODO: Improve structured data validaton by actually using schema.org's schemas
+ */
+
+import { options } from '../global'
+import { cypress, storeUrl } from '../../store.config'
+
+const { pages } = cypress
+
+describe('Home Page Seo', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  it('has meta/canonical/link tags', () => {
+    cy.visit(pages.home, options)
+    cy.waitForHydration()
+
+    cy.title().should('exist')
+    cy.get('meta[name="description"]').should('exist')
+    cy.get('meta[name="robots"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('index,follow')
+      })
+    cy.get('link[rel="canonical"]')
+      .should('exist')
+      .should(($link) => {
+        expect($link.attr('href')).to.eq(storeUrl)
+      })
+  })
+
+  it('has structured data', () => {
+    cy.visit(pages.home, options)
+    cy.waitForHydration()
+
+    cy.get('script[type="application/ld+json"]')
+      .should('exist')
+      .should(($el) => {
+        const jsonld = JSON.parse($el.text())
+
+        expect(jsonld['@context']).to.eq('https://schema.org')
+        expect(jsonld['@type']).to.eq('WebSite')
+      })
+  })
+
+  it('has OpenGraph tags', () => {
+    cy.visit(pages.home, options)
+    cy.waitForHydration()
+
+    cy.get('meta[property="og:type"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('website')
+      })
+
+    cy.get('meta[property="og:title"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:description"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+  })
+})
+
+describe('Product Page Seo', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  it('has meta/canonical/link tags', () => {
+    cy.visit(pages.pdp, options)
+    cy.waitForHydration()
+
+    cy.title().should('exist')
+    cy.get('meta[name="description"]').should('exist')
+    cy.get('meta[name="robots"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('index,follow')
+      })
+    cy.get('link[rel="canonical"]')
+      .should('exist')
+      .should(($link) => {
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.pdp}`)
+      })
+  })
+
+  it('has structured data', () => {
+    cy.visit(pages.pdp, options)
+    cy.waitForHydration()
+
+    // Assert there is at least one Product and BreadcrumbList on structured data tags
+    cy.get('script[type="application/ld+json"]')
+      .should('exist')
+      .should(($el) => {
+        const [...jsons] = $el.map((idx) => JSON.parse($el[idx].innerHTML))
+
+        jsons.forEach((x) => {
+          expect(x['@context']).to.eq('https://schema.org')
+        })
+
+        expect(jsons.find((json) => json['@type'] === 'Product')).to.not.null
+        expect(jsons.find((json) => json['@type'] === 'BreadcrumbList')).to.not
+          .null
+      })
+  })
+
+  it('has OpenGraph tags', () => {
+    cy.visit(pages.pdp, options)
+    cy.waitForHydration()
+
+    cy.get('meta[property="og:url"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:type"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('og:product')
+      })
+
+    cy.get('meta[property="og:title"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:image"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:image:alt"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="product:price:amount"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+  })
+})
+
+describe('Collection Page Seo', () => {
+  beforeEach(() => {
+    cy.clearIDB()
+  })
+
+  it('has meta/canonical/link tags', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    cy.title().should('exist')
+    cy.get('meta[name="description"]').should('exist')
+    cy.get('meta[name="robots"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('index,follow')
+      })
+    cy.get('link[rel="canonical"]')
+      .should('exist')
+      .should(($link) => {
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
+      })
+  })
+
+  it('has structured data', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    // Assert there is at least one BreadcrumbList on structured data tags
+    cy.get('script[type="application/ld+json"]')
+      .should('exist')
+      .should(($el) => {
+        const [...jsons] = $el.map((idx) => JSON.parse($el[idx].innerHTML))
+
+        jsons.forEach((x) => {
+          expect(x['@context']).to.eq('https://schema.org')
+        })
+
+        expect(jsons.find((json) => json['@type'] === 'BreadcrumbList')).to.not
+          .null
+      })
+  })
+
+  it('has OpenGraph tags', () => {
+    cy.visit(pages.collection, options)
+    cy.waitForHydration()
+
+    cy.get('meta[property="og:type"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('website')
+      })
+
+    cy.get('meta[property="og:title"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:description"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+  })
+})
+
+describe('Filtered Collection Page Seo', () => {
+  it('has canonical pointing to parent url', () => {
+    cy.visit(pages.collection_filtered, options)
+    cy.waitForHydration()
+
+    cy.get('link[rel="canonical"]')
+      .should('exist')
+      .should(($link) => {
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
+      })
+  })
+
+  it('has structured data', () => {
+    cy.visit(pages.collection_filtered, options)
+    cy.waitForHydration()
+
+    // Assert there is at least one BreadcrumbList on structured data tags
+    cy.get('script[type="application/ld+json"]')
+      .should('exist')
+      .should(($el) => {
+        const [...jsons] = $el.map((idx) => JSON.parse($el[idx].innerHTML))
+
+        jsons.forEach((x) => {
+          expect(x['@context']).to.eq('https://schema.org')
+        })
+
+        expect(jsons.find((json) => json['@type'] === 'BreadcrumbList')).to.not
+          .null
+      })
+  })
+
+  it('has OpenGraph tags', () => {
+    cy.visit(pages.collection_filtered, options)
+    cy.waitForHydration()
+
+    cy.get('meta[property="og:type"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('website')
+      })
+
+    cy.get('meta[property="og:title"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:description"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+  })
+})
+
+describe('Search Page Seo', () => {
+  it('has meta/canonical/link tags', () => {
+    cy.visit(pages.search, options)
+    cy.waitForHydration()
+
+    cy.title().should('exist')
+    cy.get('meta[name="description"]').should('exist')
+    cy.get('meta[name="robots"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('noindex,follow')
+      })
+    cy.get('link[rel="canonical"]').should('not.exist')
+  })
+
+  it('has OpenGraph tags', () => {
+    cy.visit(pages.search, options)
+    cy.waitForHydration()
+
+    cy.get('meta[property="og:type"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.eq('website')
+      })
+
+    cy.get('meta[property="og:title"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+
+    cy.get('meta[property="og:description"]')
+      .should('exist')
+      .should(($el) => {
+        expect($el.attr('content')).to.be.a('string')
+      })
+  })
+})

package/cypress/plugins/index.js

@@ -0,0 +1,41 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+const codeCoveragePlugin = require('@cypress/code-coverage/task')
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  codeCoveragePlugin(on, config)
+
+  on('task', {
+    log(message) {
+      // eslint-disable-next-line no-console
+      console.log(message)
+
+      return null
+    },
+    table(message) {
+      // eslint-disable-next-line no-console
+      console.table(message)
+
+      return null
+    },
+  })
+
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  return config
+}

package/cypress/support/commands.js

@@ -0,0 +1,70 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import 'cypress-wait-until'
+
+function logToTerminal(violations) {
+  cy.task('log', `${violations.length} accessibility violation(s) detected`)
+  cy.task(
+    'table',
+    violations.map(({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    }))
+  )
+}
+
+Cypress.Commands.overwrite(
+  'checkA11y',
+  // eslint-disable-next-line max-params
+  (originalFn, context, options, callback) => {
+    return originalFn(context, options, callback ?? logToTerminal)
+  }
+)
+
+Cypress.Commands.add('getById', (selector, ...args) => {
+  return cy.get(`[data-testid=${selector}]`, ...args)
+})
+
+Cypress.Commands.add('waitForHydration', () => {
+  return cy.window().should((win) => {
+    expect(
+      win.performance.getEntriesByName('Next.js-hydration')
+    ).to.have.length(1)
+  })
+})
+
+Cypress.Commands.add('clearIDB', () => {
+  return indexedDB.deleteDatabase('keyval-store')
+})
+
+Cypress.Commands.add('itemsInCart', (count) => {
+  return cy.getById('cart-toggle').should(($toggle) => {
+    expect($toggle.attr('data-items')).to.eq(count.toString())
+  })
+})

package/cypress/support/index.js

@@ -0,0 +1,3 @@
+import 'cypress-axe'
+import './commands'
+import '@testing-library/cypress/add-commands'

package/cypress.json

@@ -0,0 +1,9 @@
+{
+  "baseUrl": "http://localhost:3000/",
+  "retries": 0,
+  "video": true,
+  "trashAssetsBeforeRuns": true,
+  "screenshotOnRunFailure": true,
+  "viewportWidth": 1000,
+  "viewportHeight": 600
+}