chore: add integration tests

// TODO

.eslintrc.js

@@ -127,7 +127,7 @@ module.exports = {
   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,113 @@ 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.
+  SimpleChecks:
     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: '16'
+          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:
+    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:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '16'
+          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 all tests
+        if: ${{ github.ref != 'refs/heads/master' && github.ref != 'refs/heads/next' }}
+        run: yarn test:e2e:run
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-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: [SimpleChecks, 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: '16'
           registry-url: 'https://registry.npmjs.org'
           scope: '@farfetch'
           cache: 'yarn'
@@ -77,15 +157,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 +173,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

.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-----

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-----

package.json

@@ -20,7 +20,7 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=14",
+    "node": ">=16",
     "npm": ">=6.4.1"
   },
   "scripts": {
@@ -32,13 +32,18 @@
     "postinstall": "patch-package",
     "format": "prettier --write '**/*.{js,ts,jsx,tsx,mts,mjs,cjs,json,md}'",
     "test": "rimraf coverage && yarn clean:build && jest",
+    "test:e2e:build": "cross-env TS_NODE_PROJECT=\"tests/e2e/tsconfig.json\" node --loader ts-node/esm node_modules/webpack-cli/bin/cli.js --config tests/e2e/webpack.config.ts",
+    "test:e2e:server": "tests/e2e/scripts/start-local-server.sh",
+    "test:e2e:run": "playwright test --config=tests/e2e/playwright.config.ts",
+    "test:e2e:run:critical": "playwright test --config=tests/e2e/playwright.config.ts --project=critical",
     "prepare": "husky install",
     "yalc:publish": "scripts/yalc-publish.sh",
     "yalc:push": "scripts/yalc-push.sh",
     "ci:types": "yarn ci:types:runtime && yarn ci:types:tests",
     "ci:types:runtime": "lerna run --concurrency 4 --no-bail --parallel --scope \"@farfetch/*\" ci:types",
     "ci:types:tests": "tsc -p tsconfig.ci.tests.json",
     "ci:release": "scripts/release.sh",
+    "ci:release:dry-run": "yarn ci:release --dry-run",
     "dev:link": "lerna run --concurrency 1 --stream --scope \"@farfetch/*\" dev:link",
     "dev:unlink": "lerna exec --concurrency 1 --stream --scope \"@farfetch/*\" 'cd dist && yarn unlink'",
     "release:git": "scripts/release-git.sh"
@@ -50,6 +55,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@commitlint/cli": "^17.0.1",
     "@commitlint/config-conventional": "^17.0.0",
+    "@playwright/test": "^1.40.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^13.3.0",
     "@types/invariant": "^2.2.34",
@@ -61,11 +67,15 @@
     "@types/redux-mock-store": "^1.0.3",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "3.4.0",
+    "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.53.0",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.3",
     "browserslist-config-google": "^2.0.0",
     "core-js": "^3.6.5",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.9.1",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
@@ -81,21 +91,34 @@
     "faker": "^5.5.3",
     "fs-extra": "^10.1.0",
     "gitpkg": "^1.0.0-beta.4",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^7.0.4",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "jest-localstorage-mock": "^2.4.0",
     "jest-watch-typeahead": "^1.1.0",
     "lerna": "^5.0.0",
     "lint-staged": "^12.4.2",
+    "local-web-server": "^5.3.0",
+    "lodash-es": "^4.17.21",
     "msw": "^1.1.0",
     "patch-package": "^6.5.1",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^8.0.0",
+    "postcss-preset-env": "^9.3.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "redux-thunk": "2.4.2",
     "rimraf": "^3.0.2",
-    "typescript": "5.0.2"
+    "style-loader": "^3.3.4",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "typescript": "5.0.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "resolutions": {
     "@babel/core": "7.16.0",

packages/react/src/users/hooks/useUser.ts

@@ -136,9 +136,13 @@ function useUser(options: UseUserOptions = {}) {
   useEffect(() => {
     const updatedState = store.getState() as StoreState;
 
+    const updatedUser = getUser(updatedState);
+    const updatedError = getUserError(updatedState);
+    const updatedIsFetched =
+      (!!updatedUser && !!updatedUser.id) || updatedError;
     const updatedIsLoading = isUserLoadingSelector(updatedState);
 
-    if (enableAutoFetch && !updatedIsLoading && !userError) {
+    if (enableAutoFetch && !updatedIsFetched && !updatedIsLoading) {
       fetch(fetchConfig);
     }
   }, [

scripts/git-diff-ex.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Present git diff output not paginated and limited to the files
+# names and lines changed. Used with release script with the --dry-run
+# option.
+
+git diff --color=always "$@" | awk '
+# 1. Match and print "--- a/" lines
+/^(\033\[(([0-9]{1,2};?){1,10})m)?(--- a\/)/ {
+   print $0 
+}
+
+# 2. Match and then skip "--- a/" and "+++ b/" lines to avoid being printed again
+# in the next step.
+/^(\033\[(([0-9]{1,2};?){1,10})m)?(--- a\/|\+\+\+ b\/)/ {
+   next 
+} 
+# 3. Now print the remaining "+" and "-" lines ONLY! Note: doing step 2 above first was required or
+# else those lines would have been matched by this matcher below too since they also begin with 
+# the "+" and "-" symbols.
+/^(\033\[(([0-9]{1,2};?){1,10})m)?[-+]/ {
+    print $0 
+}
+'