test(quantic): support e2e testing with LWS and with Locker Service w…

…ith Playwright (#4711) ## [SFINT-5796](https://coveord.atlassian.net/browse/SFINT-5796) ### Summary This PR adds support for end-to-end (E2E) testing in both **Lightning Web Security (LWS)** and **Locker Service** environments. The changes ensure that Playwright tests can run seamlessly across these configurations, improving test coverage and reliability for Quantic components. --- #### Key Changes 1. **Playwright Configuration Updates**: - Added projects for both LWS-enabled and Locker Service environments. - Configured `baseURL` for each environment using environment variables: - `Quantic__LWS_enabled_URL` for LWS-enabled. - `Quantic__LWS_disabled_URL` for Locker Service. 2. **GitHub Actions Workflow**: - Updated the **e2e Quantic workflow** to include Playwright tests. - Tests now run automatically in the CI pipeline for both configurations (LWS-enabled and Locker Service), but without using a matrix strategy (This will come next) 3. **Documentation**: - Updated README with instructions for running Playwright tests locally in both LWS and Locker Service environments. --- #### Testing Instructions 1. Run the following commands locally to test each configuration: - **LWS-enabled**: ```bash npx playwright test --project=LWS-enabled ``` - **Locker Service**: ```bash npx playwright test --project=LWS-disabled ``` #### Next Steps - Transition to a matrix strategy in the GitHub Actions workflow as the number of Playwright tests increases. - Expand test coverage to additional Quantic components for both LWS and Locker Service configurations. https://github.com/coveo/ui-kit/actions/runs/12043295059?pr=4711 <img width="776" alt="Screenshot 2024-11-27 at 9 16 37 AM" src="https://github.com/user-attachments/assets/ace2a33d-71ea-4c64-adfc-0f625df5c934"> [SFINT-5796]: https://coveord.atlassian.net/browse/SFINT-5796?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Simon Milord <simon.milord@gmail.com> Co-authored-by: Frederic Beaudoin <fbeaudoin@coveo.com>
coveo · Dec 4, 2024 · 4368ee0 · 4368ee0
1 parent 8f4b54d
commit 4368ee0
Show file tree

Hide file tree

Showing 13 changed files with 267 additions and 55 deletions.
diff --git a/.github/actions/e2e-quantic/action.yml → ...ub/actions/e2e-quantic-cypress/action.yml b/.github/actions/e2e-quantic/action.yml → ...ub/actions/e2e-quantic-cypress/action.yml
@@ -1,4 +1,4 @@
-name: 'Quantic E2E tests'
+name: 'Quantic Cypress E2E tests'
 description: 'Runs Cypress tests for Quantic'
 inputs:
   github-token:

diff --git a/.github/actions/e2e-quantic-playwright/action.yml b/.github/actions/e2e-quantic-playwright/action.yml
@@ -0,0 +1,20 @@
+name: 'Quantic Playwright E2E tests'
+description: 'Runs Playwright tests for Quantic'
+runs:
+  using: composite
+  steps:
+    - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
+      with:
+        path: packages/quantic/.env
+        key: quantic-playwright-env-${{ github.sha }}
+    - name: Run Playwright Tests
+      run: |
+        npx playwright install --with-deps
+        npx playwright test
+      shell: bash
+      working-directory: ./packages/quantic
+    - uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4
+      with:
+        name: quantic-playwright-report
+        path: packages/quantic/playwright-report
+        retention-days: 5
diff --git a/.github/actions/e2e-quantic-setup/action.yml b/.github/actions/e2e-quantic-setup/action.yml
@@ -14,7 +14,8 @@ runs:
       shell: bash
     - run: |
         echo "${{ inputs.jwtkey }}" > server.key
-        npx --no-install ts-node scripts/build/deploy-community.ts --ci
+        npx --no-install ts-node scripts/build/deploy-community.ts --ci --scratch-org-def-path=./config/lws-disabled-scratch-def.json
+        npx --no-install ts-node scripts/build/deploy-community.ts --ci --scratch-org-def-path=./config/lws-enabled-scratch-def.json
         rm server.key
       shell: bash
       working-directory: ./packages/quantic
@@ -28,3 +29,7 @@ runs:
       with:
         path: packages/quantic/cypress/plugins/config
         key: quantic-cypress-config-${{ github.sha }}
+    - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
+      with:
+        path: packages/quantic/.env
+        key: quantic-playwright-env-${{ github.sha }}
diff --git a/.github/workflows/e2e-quantic.yml b/.github/workflows/e2e-quantic.yml
@@ -22,8 +22,8 @@ jobs:
         with:
           clientid: ${{ secrets.SFDX_AUTH_CLIENT_ID }}
           jwtkey: ${{ secrets.SFDX_AUTH_JWT_KEY }}
-  e2e-quantic-test:
-    name: 'Run e2e tests on Quantic'
+  e2e-quantic-cypress-test:
+    name: 'Run Cypress e2e tests on Quantic'
     needs: e2e-quantic-setup
     runs-on: ubuntu-latest
     strategy:
@@ -44,12 +44,25 @@ jobs:
 
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/e2e-quantic
+      - uses: ./.github/actions/e2e-quantic-cypress
         with:
           spec: ${{ matrix.spec }}
+  e2e-quantic-playwright-test:
+    name: 'Run Playwright e2e tests on Quantic'
+    needs: e2e-quantic-cypress-test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@91182cccc01eb5e619899d80e4e971d6181294a7 # v2.10.1
+        with:
+          egress-policy: audit
+
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/e2e-quantic-playwright
   e2e-quantic-cleanup:
     if: cancelled() || failure() || success()
-    needs: e2e-quantic-test
+    needs: e2e-quantic-playwright-test
     runs-on: ubuntu-latest
     steps:
       - name: Harden Runner
@@ -60,5 +73,8 @@ jobs:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - uses: ./.github/actions/setup
       - uses: ./.github/actions/setup-sfdx
-      - run: npx --no-install ts-node packages/quantic/scripts/build/delete-org.ts
+      - run: |
+          npx --no-install ts-node scripts/build/delete-org.ts --scratch-org-def-path=./config/lws-disabled-scratch-def.json
+          npx --no-install ts-node scripts/build/delete-org.ts --scratch-org-def-path=./config/lws-enabled-scratch-def.json
         shell: bash
+        working-directory: ./packages/quantic
diff --git a/packages/quantic/README.md b/packages/quantic/README.md
@@ -55,48 +55,64 @@ Or you can run the individual commands below.
 - Make sure you are in the `packages/quantic` root folder.
 - Run this command to create the default scratch org. `npm run scratch:create`.
 - In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create a Default Scratch Org.
-- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias "LWC"`
-- `LWC` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
+- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/lws-enabled-scratch-def.json --alias Quantic__LWS_enabled`
+- `Quantic__LWS_enabled` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
 
 #### Deploy the Quantic code
 
 - Run this command from the command line. `sf project deploy start --source-dir force-app/main`.
 
 ## Testing
 
-### Deploy the Quantic Examples Community
+### Deploy the Quantic Examples Communities
 
-Example components are available as a Salesforce community (Digital Experience) allowing you to experiment with Quantic components.
+Example components are available as Salesforce communities (Digital Experiences), allowing you to experiment with Quantic components in two separate environments: one with Lightning Web Security (LWS) enabled and one with LWS disabled.
 
-To setup the community in the `LWC` scratch org, run:
+To set up both communities in scratch orgs, run:
 
 ```bash
 npm run setup:examples
 ```
 
-This script creates, configures, and deploys everything required to have fully working examples. The community URL is provided at the end of the script output, as in the following example:
+This script creates, configures, and deploys everything required to have fully working examples in **two scratch orgs**:
+
+- An org with **LWS enabled**.
+- An org with **LWS disabled**.
+
+At the end of the script, the URLs for the two communities are provided, as in the following example:
 
 ```
-...
 
-The 'Quantic Examples' community is ready, you can access it at the following URL:
-https://your-salesforce-scratch-org-instance.force.com/examples
+The 'Quantic Examples' community (LWS enabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-enabled-scratch-org-instance.force.com/examples
+
+The 'Quantic Examples' community (LWS disabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-disabled-scratch-org-instance.force.com/examples
 
 To open Cypress, run:
 npm run e2e:watch
 ```
 
-Once the community has been deployed, you can deploy the `main` or `example` components only when needed. To do so, run:
+Once the community has been deployed, you can deploy the `main` or `example` components to a specific org only when needed by running the corresponding commands:
+
+```bash
+npm run deploy:main --target-org Quantic__LWS_enabled
+npm run deploy:examples --target-org Quantic__LWS_enabled
+```
+
+You can replace Quantic\_\_LWS_enabled with your target org alias. For example:
 
 ```bash
-npm run deploy:main
-npm run deploy:examples
+npm run deploy:main --target-org MyCustomOrg
+npm run deploy:examples --target-org MyCustomOrg
 ```
 
 ### Run Cypress for Quantic Components
 
 **Note** Before attempting to run [Cypress](https://docs.cypress.io) tests, make sure the `Quantic Examples` community is deployed as described in the previous section.
 
+**Note** Cypress tests run on the org with **LWS enabled**, aliased as `Quantic__LWS_enabled`.
+
 To learn how to add tests, see [adding tests](./docs/adding-tests.md).
 
 - All the tests will need to be under folder `cypress/integration`.
@@ -119,6 +135,30 @@ To get the [detailed report](./docs/detailed-reporting.md), run:
 npm run e2e:detailed
 ```
 
+### Run Playwright for Quantic Components
+
+**Note** Before attempting to run [Playwright](https://playwright.dev/) tests, make sure the `Quantic Examples` community is deployed as described in the previous section in both orgs, the one where LWS is enabled and the one where it is disabled.
+
+**Note** For more information on how to add tests, please refer to our [Quantic Testing Strategy](https://github.com/coveo/ui-kit/blob/master/packages/quantic/decisions/0001-testing-strategy.md), which provides detailed guidelines on testing Quantic components.
+
+To run Playwright tests, run:
+
+```bash
+npm run e2e:playwright:
+```
+
+To run Playwright tests only for the scratch org where LWS is enabled, run:
+
+```bash
+npm run e2e:playwright:lws-enabled
+```
+
+To run Playwright tests only for the scratch org where LWS is disabled, run:
+
+```bash
+npm run e2e:playwright:lws-disabled
+```
+
 ### Run LWC unit tests for Quantic Components
 
 To run LWC unit tests directly in your console, run:

diff --git a/packages/quantic/config/lws-disabled-scratch-def.json b/packages/quantic/config/lws-disabled-scratch-def.json
@@ -0,0 +1,22 @@
+{
+  "orgName": "Quantic__LWS_disabled",
+  "edition": "Developer",
+  "features": ["Communities"],
+  "settings": {
+    "experienceBundleSettings": {
+      "enableExperienceBundleMetadata": true
+    },
+    "communitiesSettings": {
+      "enableNetworksEnabled": true
+    },
+    "languageSettings": {
+      "enableTranslationWorkbench": true,
+      "enableEndUserLanguages": true
+    },
+    "securitySettings": {
+      "sessionSettings": {
+        "lockerServiceNext": false
+      }
+    }
+  }
+}
diff --git a/...s/quantic/config/project-scratch-def.json → ...antic/config/lws-enabled-scratch-def.json b/...s/quantic/config/project-scratch-def.json → ...antic/config/lws-enabled-scratch-def.json
@@ -1,5 +1,5 @@
 {
-  "orgName": "quantic local",
+  "orgName": "Quantic__LWS_enabled",
   "edition": "Developer",
   "features": ["Communities"],
   "settings": {
@@ -12,6 +12,11 @@
     "languageSettings": {
       "enableTranslationWorkbench": true,
       "enableEndUserLanguages": true
+    },
+    "securitySettings": {
+      "sessionSettings": {
+        "lockerServiceNext": true
+      }
     }
   }
 }
diff --git a/packages/quantic/docs/adding-tests.md b/packages/quantic/docs/adding-tests.md
@@ -10,6 +10,8 @@ Let's say you just finished coding a `quantic-greeting` component, which display
 <!-- Which outputs: Hello Alex! -->
 ```
 
+**Note**: The following example assumes all steps are performed on a scratch org aliased as `Quantic__LWS_enabled`.
+
 ## Update the Quantic Examples Community
 
 Now, say that you wish to make this component available in the `Quantic Examples` community. Further, say you want to add end to end tests to prevent any regression. To achieve that, you want a community page containing your example component, and a configuration panel allowing users to modify the component's options. In this case, you want to test the `name` option.
@@ -99,21 +101,21 @@ Next, execute the following steps:
 1. Deploy the example components to your org.
 
    ```bash
-   npm run deploy:examples
+   npm run deploy:examples --target-org Quantic__LWS_enabled
    ```
 
 2. Open the community builder, then create a `Quantic Greeting` page and drop your `exampleQuanticGreeting` component into it. Don't forget to also update the community home page to add a link to your page.
 
 3. Publish your changes and validate that everything works as expected.
 
    ```
-   sf community publish --target-org LWC --name "Quantic Examples"
+    sf community publish --target-org Quantic__LWS_enabled --name "Quantic Examples"
    ```
 
 It is now time to backup the changes you made to the community. Run:
 
 ```bash
-sf project retrieve start --target-org LWC --manifest quantic-examples-community/package.xml --output-dir temp --wait 10
+  sf project retrieve start --target-org Quantic__LWS_enabled --manifest quantic-examples-community/package.xml --output-dir temp --wait 10
 ```
 
 Executing this command will download the community metadata from your org and save it as `temp/unpackaged.zip`.

diff --git a/packages/quantic/package.json b/packages/quantic/package.json
@@ -28,11 +28,15 @@
     "e2e:watch": "cypress open --browser chrome --e2e",
     "e2e": "cypress run --browser chrome",
     "e2e:detailed": "cypress run --browser chrome --headless --reporter cypress/reporters/detailed-reporter.js",
-    "scratch:create": "sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias \"LWC\"",
-    "setup:examples": "../../node_modules/.bin/ts-node scripts/build/deploy-community.ts",
-    "deploy:main": "sf project deploy start --target-org LWC --source-dir force-app/main",
-    "deploy:examples": "sf project deploy start --target-org LWC --source-dir force-app/examples",
-    "scratch:dev": "npm run scratch:create && npm run deploy:main && npm run setup:examples",
+    "e2e:playwright": "npx playwright test",
+    "e2e:playwright:lws-enabled": "npx playwright test --project=LWS-enabled",
+    "e2e:playwright:lws-disabled": "npx playwright test --project=LWS-disabled",
+    "scratch:create": "sf org create scratch --set-default --definition-file config/lws-enabled-scratch-def.json --alias Quantic__LWS_enabled",
+    "setup:examples": "npm run create:lws-enabled && npm run create:lws-disabled",
+    "create:lws-enabled": "../../node_modules/.bin/ts-node scripts/build/deploy-community.ts --scratch-org-def-path=./config/lws-enabled-scratch-def.json",
+    "create:lws-disabled": "../../node_modules/.bin/ts-node scripts/build/deploy-community.ts --scratch-org-def-path=./config/lws-disabled-scratch-def.json",
+    "deploy:main": "sf project deploy start --source-dir force-app/main --target-org",
+    "deploy:examples": "sf project deploy start --source-dir force-app/examples --target-org",
     "prebuild:doc": "mkdirp docs/out",
     "build:doc": "jsdoc -c jsdoc-config.json",
     "publish:sfdx": "../../node_modules/.bin/ts-node scripts/build/create-package.ts --remove-translations",

diff --git a/packages/quantic/playwright.config.ts b/packages/quantic/playwright.config.ts
@@ -28,26 +28,24 @@ export default defineConfig({
     : [['html'], ['list']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.BASE_URL,
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
 
-  /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: {...devices['Desktop Chrome']},
+      name: 'LWS-enabled',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.Quantic__LWS_enabled_URL,
+      },
+    },
+    {
+      name: 'LWS-disabled',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.Quantic__LWS_disabled_URL,
+      },
     },
-    // {
-    //   name: 'firefox',
-    //   use: {...devices['Desktop Firefox']},
-    // },
-    // {
-    //   name: 'webkit',
-    //   use: {...devices['Desktop Safari']},
-    // },
   ],
 });
diff --git a/packages/quantic/scripts/build/delete-org.ts b/packages/quantic/scripts/build/delete-org.ts
@@ -1,4 +1,8 @@
 import {StepLogger, StepsRunner} from './util/log';
+import {
+  getOrgNameFromScratchDefFile,
+  getScratchOrgDefPath,
+} from './util/scratchOrgDefUtils';
 import * as sfdx from './util/sfdx-commands';
 
 interface Options {
@@ -22,11 +26,13 @@ const resetOrgAlias = async (log: StepLogger, options: Options) => {
 };
 
 (async function () {
-  const options = {
-    alias: 'LWC',
-  };
-
   try {
+    const scratchOrgDefPath = getScratchOrgDefPath(process.argv);
+    const orgName = getOrgNameFromScratchDefFile(scratchOrgDefPath);
+    const options = {
+      alias: orgName,
+    };
+
     await new StepsRunner()
       .add(async (log) => await deleteScratchOrg(log, options))
       .add(async (log) => await resetOrgAlias(log, options))