chore: add integration tests

// TODO

.eslintignore

@@ -1,4 +1,6 @@
 packages/*/docs
 node_modules
 dist
-**/__tests__/*.node.test.ts
+**/__tests__/*.node.test.ts
+playwright
+coverage

.eslintrc.js

@@ -123,11 +123,12 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
   },
   overrides: [
     // Disable all tsdoc checking in test files
     {
-      files: ['*.test.*[t|j]s*', '*.fixtures.*[t|j]s*'],
+      files: ['*.test.*[t|j]s*', '*.fixtures.*[t|j]s*', 'tests/e2e/**/*.*'],
       rules: {
         'tsdoc/syntax': 'off',
         // We use const xxx = () => {} many times in tests.

.github/workflows/CI.yml

@@ -1,7 +1,7 @@
 name: CI
 
 # Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the main and next branches
+# events but only for the main, next and v1 branches
 on:
   push:
     branches:
@@ -17,33 +17,123 @@ on:
       - '**/docs/**'
       - '**.md'
 
-# Setup concurrency to the ref (branch / tag) that triggered the workflow
 concurrency: ci-${{ github.ref }}
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "CI"
-  CI:
-    # The type of runner that the job will run on
+  # This job will run the minimal checks: linting, unit tests and type checking.
+  BasicChecks:
+    name: Basic Checks
+
     runs-on: ubuntu-latest
     # Do not run if the pull request is a draft
     if: ${{ !github.event.pull_request.draft && !contains(github.event.commits[0].message, '[skip build]') }}
 
-    # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@farfetch'
+          cache: 'yarn'
+          always-auth: true
+
+      - name: Install dependencies
+        run: yarn install --ignore-engines --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Unit Tests
+        run: yarn test --ci
+
+      - name: Type checking
+        run: yarn ci:types
+
+  # This job will run integration tests, possibly only the critical ones if the branch is master or next
+  IntegrationTests:
+    name: Integration Tests
+
+    runs-on: ubuntu-latest
+
+    env: 
+      PROXY_TARGET: ${{ secrets.E2E_TESTS_PROXY_TARGET }}
+      TEST_ACCOUNT_USERNAME: ${{ secrets.E2E_TESTS_ACCOUNT_USERNAME }}
+      TEST_ACCOUNT_PASSWORD: ${{ secrets.E2E_TESTS_ACCOUNT_PASSWORD }}
+
+    # Do not run if the pull request is a draft
+    if: ${{ !github.event.pull_request.draft && !contains(github.event.commits[0].message, '[skip build]') }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@farfetch'
+          cache: 'yarn'
+          always-auth: true
+
+      - name: Install dependencies
+        run: yarn install --ignore-engines --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Update version and build packages
+        run: yarn ci:release --dry-run && yarn build && yarn build:copy-package-json
+
+      - name: Build test application
+        run: yarn test:e2e:build
+
+      - name: Setup host alias
+        run: |
+          sudo echo "127.0.0.1 development.blackandwhite-ff.com" | sudo tee -a /etc/hosts
+
+      - name: Start server
+        run: yarn test:e2e:server &
+
+      - name: Sleep to wait for server to start
+        run: sleep 5
+
+      - name: Run critical tests
+        run: yarn test:e2e:run:critical
+
+      - name: Run non critical tests
+        if: ${{ github.ref != 'refs/heads/master' && github.ref != 'refs/heads/next' }}
+        run: yarn test:e2e:run:non-critical
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: tests/e2e/report
+          retention-days: 30
+
+  # This will make a release after the dependant checks are finished and
+  # it is in a branch that allows publishing (master and next).
+  Release: 
+    runs-on: ubuntu-latest
+
+    # Do not run if the pull request is a draft
+    if: ${{ !github.event.pull_request.draft && !contains(github.event.commits[0].message, '[skip build]') }}
+
+    needs: [BasicChecks, IntegrationTests]
+    steps:
       # Use fetch-depth: 0 so that all tags and branches are fetched
       # Use persist-credentials: false so that the make release step uses another personal access
       # token which has admin access and can push the version commit without the restriction
       # of creating a pull-request.
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
           persist-credentials: false
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14'
+          node-version: '20'
           registry-url: 'https://registry.npmjs.org'
           scope: '@farfetch'
           cache: 'yarn'
@@ -77,15 +167,6 @@ jobs:
       - name: Install dependencies
         run: yarn install --ignore-engines --frozen-lockfile
 
-      - name: Lint
-        run: yarn lint
-
-      - name: Test
-        run: yarn test --ci
-
-      - name: Type checking
-        run: yarn ci:types
-
       # Only make a release if it is a run of the 'main' or 'next' branches
       # or a pull request that contains a 'chore: make release' message
       - name: Make release
@@ -102,4 +183,4 @@ jobs:
           GIT_AUTHOR_EMAIL: ${{ secrets.RELEASE_BOT_GIT_EMAIL }}
           GIT_COMMITTER_NAME: ${{ secrets.RELEASE_BOT_GIT_NAME }}
           GIT_COMMITTER_EMAIL: ${{ secrets.RELEASE_BOT_GIT_EMAIL }}
-        run: yarn ci:release
+        run: yarn ci:release

.github/workflows/UpdateSnapshots.yml

@@ -0,0 +1,83 @@
+# This workflow's goal is forcing an update of the reference snapshots used
+# by Playwright tests. It runs whenever you post a new pull request comment
+# that strictly matches the "/update-snapshots".
+# From a high-level perspective, it works like this:
+# 1. Because of a GitHub Action limitation, this workflow is triggered on every
+#    comment posted on a issue or pull request. We manually interrupt it unless
+#    the comment content strictly matches "/update-snapshots" and we're in a
+#    pull request.
+# 2. Use the GitHub API to grab the information about the branch name and SHA of
+#    the latest commit of the current pull request.
+# 3. Update the Playwright reference snapshots based on the UI of this branch.
+# 4. Commit the newly generated Playwright reference snapshots into this branch.
+name: Update Snapshots
+
+on:
+  # It looks like you can't target PRs-only comments:
+  # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_comment-use-issue_comment
+  # So we must run this workflow every time a new comment is added to issues
+  # and pull requests
+  issue_comment:
+    types: [created]
+
+jobs:
+  updatesnapshots:
+    name: Update Snapshots
+    # Run this job only on comments of pull requests that strictly match
+    # the "/update-snapshots" string
+    if: ${{ github.event.issue.pull_request && github.event.comment.body == '/update-snapshots'}}
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout and do a deep fetch to load all commit IDs
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      # This is needed for lerna to commit and push the
+      # new version when making a release
+      - name: Checkout the source branch in a pull request for lerna
+        env:
+          HEAD_REF: ${{ github.head_ref }}
+        run: git checkout "$HEAD_REF"
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@farfetch'
+          cache: 'yarn'
+          always-auth: true
+
+      - name: Install dependencies
+        run: yarn install --ignore-engines --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Update version and build packages
+        run: yarn ci:release --dry-run && yarn build && yarn build:copy-package-json
+
+      - name: Build test application
+        run: yarn test:e2e:build
+
+      - name: Setup host alias
+        run: |
+          sudo echo "127.0.0.1 development.blackandwhite-ff.com" | sudo tee -a /etc/hosts
+
+      - name: Start server
+        run: yarn test:e2e:server &
+
+      - name: Sleep to wait for server to start
+        run: sleep 5
+
+      - name: Run critical tests
+        run: yarn test:e2e:run:critical
+
+      - name: Run non critical tests
+        if: ${{ github.ref != 'refs/heads/master' && github.ref != 'refs/heads/next' }}
+        run: yarn test:e2e:run:non-critical
+
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "chore: Update Snapshots [skip ci]"

.gitignore

@@ -10,14 +10,14 @@ junit.xml
 coverage/
 node_modules/
 
-**/package-lock.json
-**/dist
-**/docs
-**/.cache
-!/docs/contributing
-
-**/types/**/build
+package-lock.json
+dist/
+.cache/
 
 .eslintcache
 
 *.tsbuildinfo
+
+build/
+playwright/
+report/

cert.pem

@@ -0,0 +1,27 @@
+-----BEGIN CERTIFICATE-----
+MIIEnTCCAwWgAwIBAgIRANsUm+o6x+zXg4Y2aq0D1bgwDQYJKoZIhvcNAQELBQAw
+ga8xHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTFCMEAGA1UECww5YnJ1
+bm8uYS5vbGl2ZWlyYUBGRlBUTU1QM1dDNzIwIChCcnVubyBBbGV4YW5kcmUgT2xp
+dmVpcmEpMUkwRwYDVQQDDEBta2NlcnQgYnJ1bm8uYS5vbGl2ZWlyYUBGRlBUTU1Q
+M1dDNzIwIChCcnVubyBBbGV4YW5kcmUgT2xpdmVpcmEpMB4XDTI0MDEwODA5NTcy
+OFoXDTI2MDQwODA4NTcyOFowbTEnMCUGA1UEChMebWtjZXJ0IGRldmVsb3BtZW50
+IGNlcnRpZmljYXRlMUIwQAYDVQQLDDlicnVuby5hLm9saXZlaXJhQEZGUFRNTVAz
+V0M3MjAgKEJydW5vIEFsZXhhbmRyZSBPbGl2ZWlyYSkwggEiMA0GCSqGSIb3DQEB
+AQUAA4IBDwAwggEKAoIBAQDWR/Yv5TyrHS4IQJzOSu21HpVYzZ+eClF5VOeyAwm+
+MVvKjgApoG9AOMqJAMF9qlWsAOGqRPiXRXE4Q2txXt125f+cwLK+K72QrGzgnNuN
+UYOU0nU42VWvrEf/1r7HT+qDgU/G0gS5ehFhSudGlzkWMEGnCeSjVci3QhZ6cqP3
+18ezPYiWGVm/L8QUM878Gh8hNGV05W/djp8FJuMT69AL7MZj5FHIy9+aDWeXl7M8
+M2kwNCwKqXwOeXfA6gsfz6YkMg/d8599GB9+yJNQAC9EbfqW76TezD7AJUWJ8qdw
+liXBMVx1qNTvs5F5I592b37e1NWwhbU/Pd4agoGuBnXfAgMBAAGjdTBzMA4GA1Ud
+DwEB/wQEAwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBSQcdAM
+4NXwIpdwJIxbn8hUuzyy0jArBgNVHREEJDAigiBkZXZlbG9wbWVudC5ibGFja2Fu
+ZHdoaXRlLWZmLmNvbTANBgkqhkiG9w0BAQsFAAOCAYEANxSSLJaSlVeljh2JXiai
+qGxTBVLwBfcnkkSI1tF3IIFw0Lbjju6pDpi6RjQL1Q6TxjCS0a2LmZpnd6ofGH/X
+eCUo0cz04fygKSnhPJ/qG7qgh+rZuA9Nv7bkw0gFBiqGFAOm9e2P7p1RCU77tFPh
+mBNGRheiShtxdu47B9F39WwmOxNqPataM6XfGGhkJCI7qxF8VLngaLfyyi8zVd/u
+gAqw/6suXKY86kbcqOFJxQ+Z3IKMwvaetU83tRhYzn8bbO7ZyT0lEJ8OBStXY8sP
+Lxqa9c+BPBTd3TvjVyMo4OWGGkKi6kEswAKUnc8ebYDmj2YfQtesyD47q3uZ1fdU
+LaZETXaoqnuncKEPwez+jNDcU/qutrsXLxqcpzcZuMG5sKKb+qADkrqjwdA9QBG1
+rWadjJySkkRdiB+hvRxrT65aJ/QnHiesdGv2fXxW2Bk0PhW1MEUx5FBdxAx6q51o
+ZrYr3hbldC0IF0EsekX4H2e+Ul26p/1yBnp096rYd1Ia
+-----END CERTIFICATE-----

jest.config.js

@@ -26,8 +26,10 @@ module.exports = {
   snapshotSerializers: ['./tests/axiosErrorSerializer.mts'],
   // The test environment that will be used for testing
   testEnvironment: 'jsdom',
+  // Patterns to ignore
+  testPathIgnorePatterns: ['/node_modules/', 'dist', 'e2e'],
   // The regexp pattern or array of patterns that Jest uses to detect test files
-  testRegex: ['.+\\.test.[jt]s(x?)$', '!dist'],
+  testRegex: ['.+\\.test.[jt]s(x?)$'],
   // Indicates whether the coverage information should be collected while executing the test
   collectCoverage: true,
   // An array of glob patterns indicating a set of files for which coverage information should be collected
@@ -48,6 +50,7 @@ module.exports = {
     'packages/react/src/analytics/integrations/Forter/loadForterScriptForSiteId.ts',
     'packages/redux/src/entities/schemas',
     '__fixtures__',
+    'e2e',
   ],
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {

key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDWR/Yv5TyrHS4I
+QJzOSu21HpVYzZ+eClF5VOeyAwm+MVvKjgApoG9AOMqJAMF9qlWsAOGqRPiXRXE4
+Q2txXt125f+cwLK+K72QrGzgnNuNUYOU0nU42VWvrEf/1r7HT+qDgU/G0gS5ehFh
+SudGlzkWMEGnCeSjVci3QhZ6cqP318ezPYiWGVm/L8QUM878Gh8hNGV05W/djp8F
+JuMT69AL7MZj5FHIy9+aDWeXl7M8M2kwNCwKqXwOeXfA6gsfz6YkMg/d8599GB9+
+yJNQAC9EbfqW76TezD7AJUWJ8qdwliXBMVx1qNTvs5F5I592b37e1NWwhbU/Pd4a
+goGuBnXfAgMBAAECggEBAL3vfXXI4TTfoYzpENT+r6Nqn4DeisyAYuWEb/dnH/y5
+LZ7mrZg4QESR0l0MEXZ9RIE5Ks5NYnhbslbn09Xi+7VHe4KLgCR3Cwmw/LU/9JBY
+H6ULw6IHax9TO2K4C9UJrlqwhXE7ebqaS8uMpGH66zwSvC7+4u4wvMBL0TbqZRLq
+Tm9Axg0HTUHM9Bf1mfL9/aAXhLlgYW2DpNsYwZEMFPziFq/+PtE++SIC5Cd5d0KV
+nmsv2vAqxNalOKzSbRIuPFPsgzVd/qr0RShieLY5o3Dtdk60JXh+Nf56b7KvXNvo
+ktXDvKwicmgaA0KmZSHuHUjttBNMBfX4GMd9EMmLNDkCgYEA2/8CiMSAAjMsmjN3
+xlvHftW5BYe9Q63VFRB9hk/uWddmZ03KXRTFGVtj3gIqQXespKy2J7+9X0RB3I66
+cIVwfCnseIBUppA2BsOWJqHX/C5HyD6EageTYO+koXZjVRpjQ+1cTkNcnUY2GPsL
+uccLD60TM11YriXyJBxOEjnm+BUCgYEA+VmDkgfyjbdAcRNm2D/Uex44/8XuSyQL
+1NEGXLoO+7vXmLS2zUt04OtwMKNXei9B1dDfFidVajDE+RxgOJiD3LqO0d4YBTZA
+6z61bEj2+MbQBgUwRPpmNOnTslPlRoDH0FFEYm89a9CoF6hDqJGwWcf5RVpc8m46
+tVGxns/IHyMCgYBiDzz18YCNenn7Ec3loKs/ocwi5uo57JX6GauZ3q8DZLvEeCwn
+aUahktbk8lobbFiL3mAjP5gNisNAqG36EcCd16IL5EfXJpiuUyfueF1pjsd4PkWP
+bWkH4EmlnruQB38PnBF04Rm7ELy0TdJgMJSBnEfesVEB7vALoII8JYsKMQKBgCB9
+DEqLpIvYc5oIGB9W+b1s66pPxMOfl7cL4RNV3rvn9qhb63GGQl1H7982eSBfZemR
+BHAjgdqLLi7zBop5PL0WxaMMl/6d2gmMqyDHxP4XEWWnaWmjYovEZ6PVkIsGHoLD
+A/D7Y3pXvn8OmnotOVgJWS4zHucre5TCZy01D3MXAoGBAKuf56LxUjgyGK5LnXvN
+4aC50epwdHPwR6iCAA87p/NCrzTlN2gu/f4+OurFytkVmmAfgFYGZCkd0mSuu8rh
+8KT0A+VkDL/xUyAJ+0zwhddtf3vTdRKtbcMXXUfjlTrCmc+3vj952DLrkD5aCzFD
+nbCyQ8YrEUI9nU+JmrQWwsHR
+-----END PRIVATE KEY-----