Skip to content

Commit

Permalink
Merge branch 'develop' into feature-passwordless-social-login
Browse files Browse the repository at this point in the history
  • Loading branch information
@yunakim714
yunakim714 authored Feb 5, 2025
2 parents 960d851 + 4467268 commit d84a358
Show file tree
Hide file tree
Showing 48 changed files with 290 additions and 145 deletions.
48 changes: 32 additions & 16 deletions .github/workflows/e2e.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,22 @@ jobs:
fail-fast: false
matrix:
# Run all matrix env at once because we will not deploy demo app to MRT.
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: ubuntu-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down Expand Up @@ -58,18 +62,22 @@ jobs:
# Run one matrix env at a time because we need to deploy each app to MRT and run e2e tests there
max-parallel: 1
matrix:
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: ubuntu-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down Expand Up @@ -155,18 +163,22 @@ jobs:
# Run one matrix env at a time because we need to deploy each app to MRT and run e2e tests there
max-parallel: 1
matrix:
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: ubuntu-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down Expand Up @@ -251,18 +263,22 @@ jobs:
max-parallel: 1
matrix:
# Run all matrix env at once because we will not deploy demo app to MRT.
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: ubuntu-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down
35 changes: 21 additions & 14 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,21 +44,24 @@ jobs:
strategy:
fail-fast: false
matrix:
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: ubuntu-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
# The current recommended version for Managed Runtime:
# https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html
IS_MRT_NODE: ${{ matrix.node == 20 && matrix.npm == 10 }}
IS_MRT_NODE: ${{ matrix.node == 22 && matrix.npm == 10 }}
steps:
- name: Checkout
uses: actions/checkout@v3
Expand Down Expand Up @@ -141,21 +144,25 @@ jobs:
strategy:
fail-fast: false
matrix:
node: [16, 18, 20]
npm: [8, 9, 10]
exclude: # node 16 is not compatible with npm 10
node: [16, 18, 20, 22]
npm: [8, 9, 10, 11]
exclude: # node 16 with npm 10/11 and node 18 with npm 11 are not compatible
- node: 16
npm: 10
- node: 16
npm: 11
- node: 18
npm: 11
runs-on: windows-latest
env:
# The "default" npm is the one that ships with a given version of node.
# For more: https://nodejs.org/en/download/releases/
# (We also use this env var for making sure a step runs once for the current node version)
# Note: For node 18, the default was npm 9 until v18.19.0, when it became npm 10
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) }}
IS_DEFAULT_NPM: ${{ (matrix.node == 16 && matrix.npm == 8) || (matrix.node == 18 && matrix.npm == 10) || (matrix.node == 20 && matrix.npm == 10) || (matrix.node == 22 && matrix.npm == 10) }}
# The current recommended version for Managed Runtime:
# https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html
IS_MRT_NODE: ${{ matrix.node == 20 && matrix.npm == 10 }}
IS_MRT_NODE: ${{ matrix.node == 22 && matrix.npm == 10 }}
steps:
- name: Checkout
uses: actions/checkout@v3
Expand Down Expand Up @@ -196,7 +203,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 20
node-version: 22

- name: Setup Ubuntu Machine
uses: "./.github/actions/setup_ubuntu"
Expand Down Expand Up @@ -295,7 +302,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 20
node-version: 22

- name: Setup Windows Machine
uses: "./.github/actions/setup_windows"
Expand Down Expand Up @@ -339,7 +346,7 @@ jobs:
strategy:
fail-fast: false
matrix:
node: [20] # Should match node version supported by MRT.
node: [22] # Should match node version supported by MRT.
runs-on: ubuntu-latest
steps:
- name: Checkout
Expand Down
51 changes: 39 additions & 12 deletions e2e/scripts/pageHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,26 @@ const { expect } = require("@playwright/test");
const config = require("../config");
const { getCreditCardExpiry } = require("../scripts/utils.js")

/**
* Give an answer to the consent tracking form.
*
* Note: the consent tracking form hovers over some elements in the app. This can cause a test to fail.
* Run this function after a page.goto to release the form from view.
*
* @param {Object} page - Object that represents a tab/window in the browser provided by playwright
* @param {Boolean} dnt - Do Not Track value to answer the form. False to enable tracking, True to disable tracking.
*/
export const answerConsentTrackingForm = async (page, dnt = false) => {
if (await page.locator('text=Tracking Consent').count() > 0) {
var text = 'Accept'
if (dnt)
text = 'Decline'
const answerButton = page.locator('button:visible', { hasText: text });
await expect(answerButton).toBeVisible();
await answerButton.click();
}
}

/**
* Navigates to the `Cotton Turtleneck Sweater` PDP (Product Detail Page) on mobile
* with the black variant selected
Expand All @@ -11,6 +31,7 @@ const { getCreditCardExpiry } = require("../scripts/utils.js")
export const navigateToPDPMobile = async ({page}) => {
// Home page
await page.goto(config.RETAIL_APP_HOME);
await answerConsentTrackingForm(page)

await page.getByLabel("Menu", { exact: true }).click();

Expand Down Expand Up @@ -64,6 +85,7 @@ export const navigateToPDPMobile = async ({page}) => {
*/
export const navigateToPDPDesktop = async ({page}) => {
await page.goto(config.RETAIL_APP_HOME);
await answerConsentTrackingForm(page)

await page.getByRole("link", { name: "Womens" }).hover();
const topsNav = await page.getByRole("link", { name: "Tops", exact: true });
Expand Down Expand Up @@ -172,6 +194,7 @@ export const addProductToCart = async ({page, isMobile = false}) => {
export const registerShopper = async ({page, userCredentials, isMobile = false}) => {
// Create Account and Sign In
await page.goto(config.RETAIL_APP_HOME + "/registration");
await answerConsentTrackingForm(page)

await page.waitForLoadState();

Expand All @@ -188,10 +211,13 @@ export const registerShopper = async ({page, userCredentials, isMobile = false})
await page
.locator("input#password")
.fill(userCredentials.password);


// Best Practice: await the network call and assert on the network response rather than waiting for pageLoadState()
// to avoid race conditions from lock in pageLoadState being released before network call resolves
const tokenResponsePromise=page.waitForResponse('**/shopper/auth/v1/organizations/**/oauth2/token')
await page.getByRole("button", { name: /Create Account/i }).click();

await page.waitForLoadState();
await tokenResponsePromise;
expect((await tokenResponsePromise).status()).toBe(200);

await expect(
page.getByRole("heading", { name: /Account Details/i })
Expand All @@ -214,6 +240,8 @@ export const registerShopper = async ({page, userCredentials, isMobile = false})
*/
export const validateOrderHistory = async ({page}) => {
await page.goto(config.RETAIL_APP_HOME + "/account/orders");
await answerConsentTrackingForm(page)

await expect(
page.getByRole("heading", { name: /Order History/i })
).toBeVisible();
Expand All @@ -237,6 +265,7 @@ export const validateOrderHistory = async ({page}) => {
*/
export const validateWishlist = async ({page}) => {
await page.goto(config.RETAIL_APP_HOME + "/account/wishlist");
await answerConsentTrackingForm(page)

await expect(
page.getByRole("heading", { name: /Wishlist/i })
Expand Down Expand Up @@ -264,19 +293,17 @@ export const validateWishlist = async ({page}) => {
export const loginShopper = async ({page, userCredentials}) => {
try {
await page.goto(config.RETAIL_APP_HOME + "/login");
await answerConsentTrackingForm(page)

await page.locator("input#email").fill(userCredentials.email);
await page
.locator("input#password")
.fill(userCredentials.password);

const tokenResponsePromise=page.waitForResponse('**/shopper/auth/v1/organizations/**/oauth2/token')
await page.getByRole("button", { name: /Sign In/i }).click();

await page.waitForLoadState();

// redirected to Account Details page after logging in
await expect(
page.getByRole("heading", { name: /Account Details/i })
).toBeVisible({ timeout: 2000 });
return true;
await tokenResponsePromise;
return await tokenResponsePromise.status() === 200;
} catch {
return false;
}
Expand Down Expand Up @@ -328,7 +355,7 @@ export const socialLoginShopper = async ({page}) => {
*/
export const searchProduct = async ({page, query, isMobile = false}) => {
await page.goto(config.RETAIL_APP_HOME);

await answerConsentTrackingForm(page)
// For accessibility reasons, we have two search bars
// one for desktop and one for mobile depending on your device type
const searchInputs = page.locator('input[aria-label="Search for products..."]');
Expand Down
Loading

0 comments on commit d84a358

Please sign in to comment.