@adyen/kyc-components 1.2.0 → 1.3.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Adyen
+Copyright (c) 2021 Adyen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,5 +1,8 @@
-# Adyen KYC Components
+[![Test CI](https://github.com/Adyen/adyen-kyc-components/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/Adyen/adyen-kyc-components/actions/workflows/main.yml) [![End-to-End Tests](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml/badge.svg)](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml)
 
+# Adyen KYC Monorepo
+
+## KYC components ##
 Adyen Kyc-components provides the required forms/elements/dropins to build up an onboarding flow based
 on a legalentity.
 
@@ -102,3 +105,53 @@ In order for the SDK to reach out to the Adyen servers for configuration request
 | Live        | connect-src | https://kyc-live.adyen.com |
 | Live        | font-src    | https://kyc-live.adyen.com |
 | Live        | img-src     | https://kyc-live.adyen.com |
+
+
+## Mock API ##
+[The `server` folder contains the mock API](./server). It is used to develop without running the Adyen platform.
+It is also used during e2e testing in CI jobs.
+
+
+## End-to-end tests ##
+End-to-end tests live in the [tests](./tests) folder. The E2E test framework we use is [Playwright](https://playwright.dev/). 
+
+To run the e2e tests locally, simply do `npm run test:e2e -- --project {browser}`, where `{browser}` can be one of:
+* `local-chrome`: uses the Google Chrome installation already present on your machine. 
+* `chromium`: uses the latest stable Chromium binary installed via `playwright install`. 
+This is usually a major version ahead of Chrome & Edge. 
+* `firefox`: uses the latest stable Firefox binary installed via `playwright install`. 
+* ~~`webkit` : uses the latest stable WebKit binary installed via `playwright install`~~ (currently disabled)
+
+For more info on the available browsers, [see here](https://playwright.dev/docs/browsers).
+
+By default, Playwright runs in headed mode in development, and headless in CI. 
+
+### Debugging E2E tests ###
+
+When you need to figure out why a test is (or isn't) failing, `npm run test:e2e:debug` is your friend. 
+There are a few tools here which come in handy:
+
+* [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector):
+This tool allows you to explore the selectors Playwright is checking and see what user actions it is performing. 
+* `.only()`: Add this to any of your tests to make it the only test Playwright runs. 
+* `page.pause()`: You can use this to make Playwright pause execution (and open the inspector) at a specific point in any test. 
+* Dev Tools: You can use the browser's dev tools as normal when inspecting a Playwright test. 
+For example, you can see what network requests are being made in the network tab.
+Playwright will also add a `window.playwright` object you can use to test out [locators](https://playwright.dev/docs/locators). 
+
+For more info on debugging Playwright tests, [see here](https://playwright.dev/docs/debug). 
+
+### Viewing traces ###
+
+When the E2E tests fail on CI, it can be quite difficult to figure out why. For that, we can use [Playwright's trace viewer](https://playwright.dev/docs/trace-viewer). 
+This tool lets us view a recorded test run and "replay" what happened. It includes screenshots, logs of browser console & network requests, and more. 
+
+To use it, first download the report artifact for the given test run from GitHub:
+1. Find your test run [here](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml) (or click on the check from the PR). 
+2. If the tests failed, you should see `playwright-report-{xxxxx}` under *Artifacts*. 
+3. Download this file and unzip it. Inside, you will find a `data` directory which contains more `.zip`s. Each of these is the trace for a single test. 
+4. To view a trace, upload the `.zip` xto [trace.playwright.dev](https://trace.playwright.dev/).
+
+## Static assets ##
+[Static assets](./assets) are compiled and shipped separately to kycexternalapi every time a new asset is added or changed.
+For more information see the [documentation for static assets](./assets/README.md).

package/package.json

@@ -1,50 +1,72 @@
 {
     "name": "@adyen/kyc-components",
-    "version": "1.2.0",
+    "version": "1.3.1",
     "description": "",
     "license": "MIT",
     "files": [
         "./dist"
     ],
+    "publishConfig": {
+        "access": "restricted"
+    },
     "exports": {
         ".": {
             "types": "./dist/types/index.d.ts",
             "import": "./dist/adyen-kyc-components.esm.js",
             "require": "./dist/adyen-kyc-components.cjs.js"
-        },
-        "./src/*": "./src/*"
+        }
     },
     "repository": {
         "type": "git",
         "url": "https://github.com/Adyen/adyen-kyc-components/"
     },
     "scripts": {
-        "clean": "rm -rf dist",
-        "start": "npm run dev",
-        "dev": "cross-env NODE_ENV=development webpack serve --config=config/webpack.dev.js",
-        "test": "jest --config config/jest.config.js",
-        "test:watch": "npm run test --watch",
         "build": "npm run clean && cross-env NODE_ENV=production webpack --config=config/webpack.prod.js",
-        "buildAll": "npm run build && npm run types:build-declarations",
+        "buildAll": "npm run build && npm run types:build",
         "buildDemo": "cross-env NODE_ENV=production webpack --config=config/webpack.demo.js",
+        "checkAll": "concurrently \"npm run types:check\" \"npm run lintAll\" -n \"types,lint\" -c \"blue,magenta\"",
+        "demo": "npm run buildDemo && npm run proxy",
+        "demo:mocked": "cross-env MOCK_MODE=true npm run demo",
+        "dev": "concurrently \"cross-env NODE_ENV=development webpack serve --config=config/webpack.dev.js\" \"npm run types:watch\" -n \"build,types\" -c \"green,blue\"",
+        "dev:mocked": "cross-env MOCK_MODE=true npm run dev",
         "lint": "eslint 'src/**/*.{js,ts,tsx}'",
-        "lint:scss": "stylelint 'src/**/*.scss' '!node_modules/**/*.scss' --fix",
         "lint:fix": "npm run lint -- --fix",
+        "lint:scss": "stylelint 'src/**/*.scss' '!node_modules/**/*.scss' --fix",
+        "lintAll": "concurrently \"npm run lint\" \"npm run lint:scss\" -p none",
+        "proxy": "node server/run.js",
+        "proxy:mocked": "cross-env MOCK_MODE=true npm run proxy",
+        "start": "npm run dev",
+        "test": "jest --config config/jest.config.js",
+        "test:e2e": "playwright test",
+        "test:e2e:debug": "cross-env PWDEBUG=console playwright test --debug --project local-chrome",
+        "test:watch": "npm run test --watch",
+        "types:build": "tsc --project tsconfig-build.json",
         "types:check": "tsc",
-        "types:build-declarations": "tsc --project tsconfig-build.json"
+        "types:watch": "npm run types:check -- --watch",
+        "clean": "rm -rf dist",
+        "release": "release-it",
+        "prepare": "bash ./scripts/process-package-lock.sh"
+    },
+    "dependencies": {
+        "classnames": "^2.3.1",
+        "core-js": "^3.20.2",
+        "onfido-sdk-ui": "6.4.0",
+        "preact": "^10.5.15",
+        "whatwg-fetch": "^3.6.2"
     },
     "devDependencies": {
         "@babel/core": "^7.17.8",
         "@babel/preset-env": "^7.16.11",
+        "@playwright/test": "^1.28.1",
         "@prefresh/babel-plugin": "^0.4.3",
         "@prefresh/webpack": "^3.3.3",
-        "@testing-library/preact": "^2.0.1",
-        "@testing-library/preact-hooks": "^1.1.0",
+        "@testing-library/preact": "^3.2.2",
         "@types/jest": "^29.0.0",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.8.1",
         "autoprefixer": "^10.0.0",
         "babel-loader": "^9.0.0",
+        "concurrently": "^7.0.0",
         "cross-env": "^7.0.3",
         "css-loader": "^6.0.0",
         "css-minimizer-webpack-plugin": "^4.0.0",
@@ -59,35 +81,32 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-tsdoc": "^0.2.14",
         "eslint-webpack-plugin": "^3.1.1",
+        "express": "^4.17.1",
+        "express-openapi-validator": "^5.0.0",
         "html-webpack-plugin": "^5.5.0",
         "jest": "^29.0.0",
         "jest-environment-jsdom": "^29.3.1",
         "mini-css-extract-plugin": "^2.4.5",
         "postcss": "^8.3.11",
         "prettier": "^2.4.1",
+        "release-it": "^15.5.1",
+        "request": "^2.81.0",
         "sass": "^1.43.4",
         "sass-loader": "^13.0.0",
         "style-loader": "^3.3.1",
         "stylelint": "^14.1.0",
-        "stylelint-config-recommended": "^6.0.0",
+        "stylelint-config-recommended": "^9.0.0",
         "stylelint-config-sass-guidelines": "^9.0.1",
         "stylelint-scss": "^4.2.0",
         "stylelint-webpack-plugin": "^3.1.0",
         "terser-webpack-plugin": "^5.2.4",
-        "testcafe": "2.1.0",
         "ts-jest": "^29.0.0",
         "ts-loader": "^9.2.6",
-        "typescript": "^4.4.4",
+        "type-fest": "^3.4.0",
+        "typescript": "^4.7.4",
         "webpack": "^5.61.0",
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.4.0",
         "webpack-merge": "^5.8.0"
-    },
-    "dependencies": {
-        "classnames": "^2.3.1",
-        "core-js": "^3.20.2",
-        "onfido-sdk-ui": "6.4.0",
-        "preact": "^10.5.15",
-        "whatwg-fetch": "^3.6.2"
     }
 }