@faststore/core 2.2.0-alpha.5 → 2.2.0-alpha.7

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
-$ faststore generate-graphql -c
 $ partytown copylib ./public/~partytown
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
+$ faststore generate-graphql -c
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
 Attention: Next.js now collects completely anonymous telemetry regarding usage.
@@ -23,27 +23,27 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.19 kB         197 kB
+┌ ● /                                      8.27 kB         126 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             4.84 kB         210 kB
+├ ● /[...slug]                             4.29 kB         139 kB
 ├   └ css/527e334fa69cf40a.css             1.85 kB
-├ ● /[slug]/p                              11.4 kB         205 kB
-├   └ css/7ca374e5534a3f68.css             11.3 kB
-├ ○ /404                                   1.19 kB         114 kB
-├ ● /500                                   1.21 kB         114 kB
-├ ● /account                               670 B           113 kB
+├ ● /[slug]/p                              11 kB           135 kB
+├   └ css/1b48021b9c503e72.css             11.4 kB
+├ ○ /404                                   1.19 kB         110 kB
+├ ● /500                                   1.21 kB         110 kB
+├ ● /account                               668 B           110 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/health/live                       0 B            77.9 kB
 ├ λ /api/health/ready                      0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
-├ ● /checkout                              657 B           113 kB
-├ ● /login                                 1.09 kB         114 kB
-└ ● /s                                     4.58 kB         129 kB
+├ ● /checkout                              655 B           110 kB
+├ ● /login                                 1.09 kB         110 kB
+└ ● /s                                     4.57 kB         124 kB
 + First Load JS shared by all              81 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
-  ├ chunks/pages/_app-6d0e6ab9a4dd8106.js  6.45 kB
-  ├ chunks/webpack-00c7bb6e48f23dff.js     2.29 kB
+  ├ chunks/pages/_app-7db7de3d205714be.js  6.45 kB
+  ├ chunks/webpack-bed5a9784a3af4e8.js     2.25 kB
   └ css/9e76fef1c9ca89af.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,25 +1,25 @@
 $ tsdx test
 ts-jest[versions] (WARN) Version 29.1.0 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=25.0.0 <26.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 4.9.4 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=3.4.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
-PASS test/server/index.test.ts (10.653s)
+PASS test/server/index.test.ts (8.881s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (8ms)
-      ✓ should return a valid GraphQL schema contain all expected types (21ms)
+      ✓ should return a valid GraphQL schema (6ms)
+      ✓ should return a valid GraphQL schema contain all expected types (12ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (9ms)
-    Third Party API Extension
       ✓ getTypeDefsFromFolder function should return an Array (7ms)
+    Third Party API Extension
+      ✓ getTypeDefsFromFolder function should return an Array (5ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (41ms)
+      ✓ should return a valid merged GraphQL schema (35ms)
     Envelop
-      ✓ should exist with its plugins (50ms)
-      ✓ should handle options and execute (256ms)
+      ✓ should exist with its plugins (34ms)
+      ✓ should handle options and execute (548ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        11.664s
+Time:        9.653s
 Ran all test suites.

package/README.md

@@ -100,7 +100,7 @@ A quick look at the top-level files and directories you'll see in a NextJS proje
     ├── __generated__
     ├── babel.config.js
     ├── cypress
-    ├── cypress.json
+    ├── cypress.config.ts
     ├── lighthouserc.js
     ├── public
     ├── pull_request_template.md
@@ -136,7 +136,7 @@ A quick look at the top-level files and directories you'll see in a NextJS proje
 
 15. **`cypress`**: End to End(e2e) tests using Cypress. Most of the scenarios are covered here. Add your custom flows to avoid regressions
 
-16. **`cypress.json`**: [Cypress configuration file](https://docs.cypress.io/guides/references/configuration)
+16. **`cypress.config.ts`**: [Cypress configuration file](https://docs.cypress.io/guides/references/configuration)
 
 17. **`lighthouserc.js`**: Configures [Google Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci). This is where you can turn on/off lighthouse assertions to be used by Lighthouse CI Bot/hook
 
@@ -412,7 +412,7 @@ Looking for more guidance? Full documentation for FastStore lives [on this GitHu
 
 ## ⚡ Performance & QA
 
-This project has strict performance budgets. Right out of the box, this project performs around 95 on Google's Page Speed Insights website, which usually is way more strict than your laptop's chrome lighthouse. Every time you commit to the repository, our QA bots will run and evaluate your code quality. We recommend you NEVER put in production a code that breaks any of the bots. If a bot breaks and still you need to put the code into production, change the bot config (`lighthouserc.js`, `cypress.json`) to make it pass and merge. This way you ensure your website will keep performing well during the years to come.
+This project has strict performance budgets. Right out of the box, this project performs around 95 on Google's Page Speed Insights website, which usually is way more strict than your laptop's chrome lighthouse. Every time you commit to the repository, our QA bots will run and evaluate your code quality. We recommend you NEVER put in production a code that breaks any of the bots. If a bot breaks and still you need to put the code into production, change the bot config (`lighthouserc.js`, `cypress.config.ts`) to make it pass and merge. This way you ensure your website will keep performing well during the years to come.
 
 ## Adding third party scripts
 

package/cms/faststore/sections.json

@@ -1374,6 +1374,18 @@
             }
           }
         },
+        "notAvailableButton": {
+          "title": "Not Available Button",
+          "description": "Shown when a SKU is not available",
+          "type": "object",
+          "properties": {
+            "title": {
+              "title": "Title",
+              "type": "string",
+              "default": "Not Available"
+            }
+          }
+        },
         "shippingSimulator": {
           "title": "Shipping Simulation",
           "type": "object",

package/cypress/global.js

@@ -13,3 +13,11 @@ export const options = {
     }
   },
 }
+
+// TODO: Bring back these rules when the components with missing/wrong role is found.
+export const disabledA11yRules = {
+  rules: {
+    region: { enabled: false },
+    'aria-allowed-role': { enabled: false },
+  },
+}

package/cypress/integration/a11y.test.js

@@ -4,6 +4,7 @@
  * Cypress tests for a11y (accessibility)
  */
 
+import { disabledA11yRules } from '../global'
 import { cypress } from '../../faststore.config'
 
 const { pages } = cypress
@@ -13,7 +14,7 @@ describe('Accessibility tests', () => {
     cy.clearIDB()
   })
 
-  it.skip('checks a11y for collection page', () => {
+  it('checks a11y for collection page', () => {
     cy.visit(pages.collection)
     cy.waitForHydration()
 
@@ -21,16 +22,10 @@ describe('Accessibility tests', () => {
     cy.getById('product-link').should('exist')
 
     cy.injectAxe()
-
-    // TODO: Bring back the `aria-allowed-role` when the component with the missing/wrong role is found.
-    cy.checkA11y(null, {
-      rules: {
-        'aria-allowed-role': { enabled: false },
-      },
-    })
+    cy.checkA11y(null, disabledA11yRules)
   })
 
-  it.skip('checks a11y for product page', () => {
+  it('checks a11y for product page', () => {
     cy.visit(pages.pdp)
     cy.waitForHydration()
 
@@ -38,26 +33,14 @@ describe('Accessibility tests', () => {
     cy.getById('buy-button').should('exist')
 
     cy.injectAxe()
-
-    // TODO: Bring back the `aria-allowed-role` when the component with the missing/wrong role is found.
-    cy.checkA11y(null, {
-      rules: {
-        'aria-allowed-role': { enabled: false },
-      },
-    })
+    cy.checkA11y(null, disabledA11yRules)
   })
 
-  it.skip('checks a11y for home page', () => {
+  it('checks a11y for home page', () => {
     cy.visit(pages.home)
     cy.waitForHydration()
 
     cy.injectAxe()
-
-    // TODO: Bring back the `aria-allowed-role` when the component with the missing/wrong role is found.
-    cy.checkA11y(null, {
-      rules: {
-        'aria-allowed-role': { enabled: false },
-      },
-    })
+    cy.checkA11y(null, disabledA11yRules)
   })
 })

package/cypress/integration/analytics.test.js

@@ -65,68 +65,60 @@ describe('add_to_cart event', () => {
   }
 
   context('when adding a product to the cart', () => {
-    it.skip('adds add_to_cart event in the data layer at product description page', () => {
+    it('adds add_to_cart event in the data layer at product description page', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 
       cy.itemsInCart(0)
 
       // Add to cart
-      cy.getById('buy-button')
-        .should('be.visible')
-        .scrollIntoView({ duration: 500 })
-        .then(() => {
-          cy.getById('buy-button')
-            .click({ force: true })
-            .then(($btn) => {
-              cy.itemsInCart(1)
-              const skuId = $btn.attr('data-sku')
-
-              testAddToCartEvent({ skuId, numberOfEvents: 1 })
-            })
+      cy.getById('buy-button').as('buy-button')
+      cy.get('@buy-button').contains('Add to Cart').and('be.visible')
+      cy.get('@buy-button')
+        .trigger('click', { force: true, cancelable: false })
+        .then(($btn) => {
+          cy.itemsInCart(1)
+
+          const skuId = $btn.attr('data-sku')
+          testAddToCartEvent({ skuId, numberOfEvents: 1 })
         })
     })
   })
 
   context('when increasing product quantity', () => {
-    it.skip('adds add_to_cart event in the data layer at quantity increase in the minicart', () => {
+    it('adds add_to_cart event in the data layer at quantity increase in the minicart', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 
       cy.itemsInCart(0)
 
       // Add to cart
-      cy.getById('buy-button')
-        .should('be.visible')
-        .scrollIntoView({ duration: 500 })
-        .then(() => {
-          cy.getById('buy-button')
-            .click({ force: true })
-            .then(($btn) => {
-              cy.itemsInCart(1)
-              const skuId = $btn.attr('data-sku')
+      cy.getById('buy-button').as('buy-button')
+      cy.get('@buy-button').contains('Add to Cart').and('be.visible')
+      cy.get('@buy-button')
+        .trigger('click', { force: true, cancelable: false })
+        .then(($btn) => {
+          cy.itemsInCart(1)
+          const skuId = $btn.attr('data-sku')
+
+          testAddToCartEvent({ skuId, numberOfEvents: 1 })
+        })
 
-              testAddToCartEvent({ skuId, numberOfEvents: 1 })
+      cy.get(
+        '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
+      ).trigger('click', { force: true, cancelable: false })
 
-              cy.get(
-                '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
-              )
-                .click()
-                .then(() => {
-                  cy.itemsInCart(2)
+      cy.get('@buy-button').then(($btn) => {
+        cy.itemsInCart(2)
+        const skuId = $btn.attr('data-sku')
 
-                  testAddToCartEvent({ skuId, numberOfEvents: 2 })
-                })
-            })
-        })
+        testAddToCartEvent({ skuId, numberOfEvents: 2 })
+      })
     })
   })
 })
 
 describe('remove_from_cart event', () => {
-  beforeEach(() => {
-    cy.clearIDB()
-  })
   const testRemoveFromCartEvent = ({ skuId, numberOfEvents, quantity }) => {
     cy.window().then((window) => {
       const { dataLayer } = window
@@ -152,46 +144,41 @@ describe('remove_from_cart event', () => {
   }
 
   context('when removing a product from cart', () => {
-    it.skip('adds remove_from_cart event in the data layer', () => {
+    it('adds remove_from_cart event in the data layer', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 
       cy.itemsInCart(0)
 
       // Add item to cart
-      cy.getById('buy-button')
-        .should('be.visible')
-        .scrollIntoView({ duration: 500 })
-        .then(() => {
-          cy.getById('buy-button')
-            .click({ force: true })
-            .then(() => {
-              cy.itemsInCart(1)
-              cy.getById('checkout-button')
-                .should('be.visible')
-                .should('be.enabled')
-              cy.itemsInCart(1)
+      cy.getById('buy-button').as('buy-button')
+      cy.get('@buy-button').contains('Add to Cart').should('be.visible')
+      cy.get('@buy-button').trigger('click')
 
-              // Remove the added item
-              cy.getById('remove-from-cart-button')
-                .click({ force: true })
-                .then(($btn) => {
-                  cy.itemsInCart(0)
-                  const skuId = $btn.attr('data-sku')
+      cy.getById('fs-cart-sidebar').should('be.visible')
 
-                  testRemoveFromCartEvent({
-                    skuId,
-                    numberOfEvents: 1,
-                    quantity: 1,
-                  })
-                })
-            })
+      cy.itemsInCart(1)
+
+      // Remove the added item
+      cy.getById('remove-from-cart-button').as('remove-from-cart-button')
+      cy.get('@remove-from-cart-button')
+        .click({ force: true })
+        .then(($btn) => {
+          cy.itemsInCart(0)
+
+          const skuId = $btn.attr('data-sku')
+
+          testRemoveFromCartEvent({
+            skuId,
+            quantity: 1,
+            numberOfEvents: 1,
+          })
         })
     })
   })
 
   context('when decreasing product quantity', () => {
-    it.skip('adds remove_from_cart event in the data layer at quantity decrease in the minicart', () => {
+    it('adds remove_from_cart event in the data layer at quantity decrease in the minicart', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 
@@ -238,7 +225,7 @@ describe('remove_from_cart event', () => {
 })
 
 describe('view_item event', () => {
-  it.skip('add view_item event in data layer', () => {
+  it('add view_item event in data layer', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -253,7 +240,7 @@ describe('view_item event', () => {
 })
 
 describe('select_item event', () => {
-  it.skip('select_item has the right properties', () => {
+  it('select_item has the right properties', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -284,7 +271,7 @@ describe('select_item event', () => {
 })
 
 describe('view_item_list event', () => {
-  it.skip('is sent when viewing the PLP', () => {
+  it('is sent when viewing the PLP', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -306,7 +293,7 @@ describe('view_item_list event', () => {
     })
   })
 
-  it.skip('is sent when viewing a products shelf', () => {
+  it('is sent when viewing a products shelf', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -325,7 +312,7 @@ describe('view_item_list event', () => {
       })
   })
 
-  it.skip('is sent when viewing a product tiles', () => {
+  it('is sent when viewing a product tiles', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -346,7 +333,7 @@ describe('view_item_list event', () => {
 })
 
 describe('search event', () => {
-  it.skip('raises search', () => {
+  it('raises search', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -366,7 +353,7 @@ describe('search event', () => {
 })
 
 describe('view_cart event', () => {
-  it.skip('is fired when the minicart is opened (without items)', () => {
+  it('is fired when the minicart is opened (without items)', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
@@ -375,6 +362,8 @@ describe('view_cart event', () => {
 
     dataLayerHasEvent('view_cart')
 
+    cy.itemsInCart(0)
+
     cy.window().then((window) => {
       const event = window.dataLayer.find(
         ({ event: eventName }) => eventName === 'view_cart'
@@ -385,27 +374,29 @@ describe('view_cart event', () => {
     })
   })
 
-  it.skip('is fired when the minicart is opened (with items)', () => {
+  it('is fired when the minicart is opened (with items)', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
-    cy.getById('buy-button')
-      .should('be.visible')
-      .scrollIntoView({ duration: 500 })
-      .then(() => {
-        cy.getById('buy-button').click({ force: true })
-        cy.getById('fs-cart-sidebar').should('be.visible')
+    cy.itemsInCart(0)
 
-        dataLayerHasEvent('view_cart')
+    cy.getById('buy-button').as('buy-button')
+    cy.get('@buy-button').contains('Add to Cart').should('be.visible')
+    cy.get('@buy-button').trigger('click', { force: true, cancelable: false })
 
-        cy.window().then((window) => {
-          const event = window.dataLayer.find(
-            ({ event: eventName }) => eventName === 'view_cart'
-          )
+    cy.getById('fs-cart-sidebar').should('be.visible')
 
-          expect(event.ecommerce.value).to.equal(950)
-          expect(event.ecommerce.items.length).to.equal(1)
-        })
-      })
+    dataLayerHasEvent('view_cart')
+
+    cy.itemsInCart(1)
+
+    cy.window().then((window) => {
+      const event = window.dataLayer.find(
+        ({ event: eventName }) => eventName === 'view_cart'
+      )
+
+      expect(event.ecommerce.value).to.equal(950)
+      expect(event.ecommerce.items.length).to.equal(1)
+    })
   })
 })

package/cypress/integration/cart.test.js

@@ -14,7 +14,7 @@ describe('Cart Sidebar', () => {
     cy.clearIDB()
   })
 
-  it.skip('toggles cart sidebar', () => {
+  it('toggles cart sidebar', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -25,7 +25,7 @@ describe('Cart Sidebar', () => {
   })
 
   context('when opening the cart sidebar', () => {
-    it.skip('should not scroll the background page', () => {
+    it('should not scroll the background page', () => {
       cy.visit(pages.home, options)
       cy.waitForHydration()
 
@@ -49,7 +49,7 @@ describe('On product description pages', () => {
   })
 
   context('when adding a product to cart', () => {
-    it.skip('successfully adds the product', () => {
+    it('successfully adds the product', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 
@@ -85,7 +85,7 @@ describe('On product description pages', () => {
   })
 
   context('when removing a product from cart', () => {
-    it.skip('successfully removes the product', () => {
+    it('successfully removes the product', () => {
       cy.visit(pages.pdp, options)
       cy.waitForHydration()
 

package/cypress/integration/plp.test.js

@@ -14,7 +14,7 @@ describe('Search page Filters and Sorting options', () => {
     cy.clearIDB()
   })
 
-  it.skip('Applies filters after click', () => {
+  it('Applies filters after click', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -56,7 +56,7 @@ describe('Search page Filters and Sorting options', () => {
       })
   })
 
-  it.skip('Sort products by price_asc', () => {
+  it('Sort products by price_asc', () => {
     cy.visit(pages.collection_2, options)
     cy.waitForHydration()
 
@@ -81,7 +81,7 @@ describe('Search page Filters and Sorting options', () => {
     })
   })
 
-  it.skip('Sort products by price_desc', () => {
+  it('Sort products by price_desc', () => {
     cy.visit(pages.collection_2, options)
     cy.waitForHydration()
     const priceId = '[data-fs-product-grid] [data-testid="price"]'
@@ -111,7 +111,7 @@ describe('Infinite Scroll pagination', () => {
     cy.clearIDB()
   })
 
-  it.skip('Shows more products when requested', () => {
+  it('Shows more products when requested', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -138,7 +138,7 @@ describe('Infinite Scroll pagination', () => {
     })
   })
 
-  it.skip('Sticks to last seen page on plp pagination', () => {
+  it('Sticks to last seen page on plp pagination', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -209,7 +209,7 @@ describe('Infinite Scroll pagination', () => {
   })
 
   // Tests: https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly
-  it.skip('Changes the page being viewed on scroll', () => {
+  it('Changes the page being viewed on scroll', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 

package/cypress/integration/search.test.js

@@ -15,7 +15,7 @@ describe('Search input', () => {
   })
 
   context('when search for generic term', () => {
-    it.skip('opens the search page', () => {
+    it('opens the search page', () => {
       const term = 'shirt'
 
       cy.visit(pages.home, options)