diff --git a/.eslintrc.json b/.eslintrc.json
index e3842bb7d6..e3a35a2bc1 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,10 +2,10 @@
"extends": ["@vkontakte/eslint-config/typescript/react"],
"parserOptions": {
"project": "./tsconfig.json",
- "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
- "sourceType": "module", // Allows for the use of imports
+ "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+ "sourceType": "module", // Allows for the use of imports
"ecmaFeatures": {
- "jsx": true, // Allows for the parsing of JSX
+ "jsx": true, // Allows for the parsing of JSX
"restParams": true,
"spread": true
}
@@ -25,5 +25,17 @@
"@typescript-eslint/no-unused-vars": ["error", {
"ignoreRestSiblings": true
}]
- }
+ },
+ "overrides": [
+ {
+ "files": ["src/**/*.{test,spec,e2e}.{ts,tsx}", "e2e/**/*", "src/testing/**/*"],
+ "env": {
+ "jest": true
+ }
+ },
+ {
+ "files": ["src/**/*.e2e.{ts,tsx}", "e2e/**/*", "src/testing/**/*"],
+ "extends": ["plugin:jest-playwright/recommended"]
+ }
+ ]
}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..9b5aa9023a
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+src/**/__image_snapshots__/*.png filter=lfs diff=lfs merge=lfs -text
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 81d082521d..4d6ca2255f 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -7,11 +7,25 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
+ with:
+ lfs: true
+ - name: Checkout LFS objects
+ run: git lfs checkout
- uses: actions/setup-node@v1
with:
node-version: 12
- - run: yarn install --frozen-lockfile
- - run: yarn test
+ # cached yarn install
+ - uses: bahmutov/npm-install@v1
+ - name: Run tests
+ run: yarn test:ci
+ - name: FYI visual tests
+ run: yarn test:e2e
+ continue-on-error: true
+ - name: Create test report
+ if: always()
+ run: yarn danger ci
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
styleguide:
runs-on: ubuntu-latest
steps:
@@ -19,7 +33,8 @@ jobs:
- uses: actions/setup-node@v1
with:
node-version: 12
- - run: yarn install --frozen-lockfile
+ # cached yarn install
+ - uses: bahmutov/npm-install@v1
- run: yarn styleguide:build
- name: Uploading styleguide artifact
uses: actions/upload-artifact@v2
diff --git a/.github/workflows/update_screens.yml b/.github/workflows/update_screens.yml
new file mode 100644
index 0000000000..b657bee653
--- /dev/null
+++ b/.github/workflows/update_screens.yml
@@ -0,0 +1,26 @@
+name: 'Update screenshots'
+
+on:
+ workflow_dispatch
+
+jobs:
+ update_screens:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ with:
+ lfs: true
+ - name: Checkout LFS objects
+ run: git lfs checkout
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ # cached yarn install
+ - uses: bahmutov/npm-install@v1
+ - name: Update screenshots
+ run: yarn test:e2e -u
+ - name: Push updated screenshots
+ uses: stefanzweifel/git-auto-commit-action@v4
+ with:
+ commit_message: "CHORE: Update screenshots"
+ file_pattern: './**/*.png'
diff --git a/.gitignore b/.gitignore
index 52c33fe865..9bce435ea5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,8 @@ coverage
.env
npm-debug.log
stats.json
-dist/
+dist/*
+!e2e/dist/index.html
src/styles/generated/
PUBLISHING.md
.idea/workspace.xml
@@ -13,3 +14,8 @@ PUBLISHING.md
.idea/markdown-navigator.xml
docs/
.vscode/
+test-results.json
+lint-results.json
+.nyc_output
+__diff_output__
+.cache
diff --git a/README.md b/README.md
index 3622b6b178..c2be1265a6 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,11 @@ ReactDOM.render(, document.getElementById('root'));
Сейчас библиотека не гарантирует стабильную работу при интеграции в [vk.com](vk.com) и [m.vk.com](m.vk.com). В vk.com есть нерешенные проблемы с элементами ввода типа клавиатуры и мышки. В m.vk.com есть несоответствия в списках поддерживаемых браузеров.
### Десктопный UI
-В данный момент ведется [активная разработка](https://github.com/VKCOM/VKUI/pull/665) адаптивного UI, который будет работать на десктопных и планшетных браузерах. Stay tuned.
+В данный момент ведется [активная разработка](https://github.com/VKCOM/VKUI/pull/665) адаптивного UI, который будет работать на десктопных и планшетных браузерах. Stay tuned.
+
+## Тестирование
+
+Мы работаем над качеством библиотеки и подвозим тесты. `yarn test` запускает юниты, проверяет типы и линтит. `yarn test:unit` запускает только юниты и поддерживает интерактивный режим с флагом `--watch`. Также мы поддерживаем скриншотные тесты — смотрите наш [гайд по тестированию](./TESTING.md).
## Документация
В [документации](https://vkcom.github.io/VKUI/) вы сможете найти информацию об использовании компонентов и утилит.
@@ -59,8 +63,3 @@ ReactDOM.render(, document.getElementById('root'));
## Contributing
Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в
истории, сделайте форк проекта, внесите изменения и отправьте нам [pull request](https://github.com/VKCOM/VKUI/pulls).
-
-
-
-
-
diff --git a/TESTING.md b/TESTING.md
new file mode 100644
index 0000000000..74d3974ca8
--- /dev/null
+++ b/TESTING.md
@@ -0,0 +1,49 @@
+Мы используем три вида тестов:
+
+__Юнит-тесты__ на jest в файлах `moduleName.test.ts` [пример](./src/helpers/getClassName.test.ts)
+
+__Компонентные тесты__ на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` [пример](./src/components/Checkbox/Checkbox.test.tsx)
+
+__Скриншотные тесты__ на jest + [playwright](https://playwright.dev/#?path=docs/api.md) + [jest-playwright](https://github.com/playwright-community/jest-playwright) в `ComponentName.e2e.tsx` [пример](./src/components/Checkbox/Checkbox.e2e.tsx).
+
+Чтобы запускать скриншотные тесты локально, нужно установить:
+- [git-lfs](https://git-lfs.github.com) — чтобы от эталонных скриншотов не раздувало репозиторий
+- [докер](https://www.docker.com/products/docker-desktop) — чтобы платформа не влияла на рендеринг шрифтов. На линуксе докер не нужен.
+
+## Команды
+
+- `yarn test:unit` — только быстрые юниты + компонентные;
+- `yarn test:unit:quick` — только юниты + компонентные тесты на незакоммиченные изменения;
+- `yarn test:e2e` — только браузерные тесты;
+- `yarn test:code` — все тесты.
+
+Все команды работают в интерактивном режиме с опцией `--watch` (`yarn test:unit --watch`).
+
+Чтобы обновить скриншоты, установите докер и git-lfs и запустите `yarn test:e2e -u`.
+
+## `describeScreenshotFuzz`
+
+Функция `describeScreenshotFuzz` из [`/testing/utils`]('./src/testing/utils.ts) помогает быстро заскриншотить все состояния компонента в разных темах и на разных платформах:
+
+```ts
+describe('Button', () => {
+ describeScreenshotFuzz(
+ // Можем передать компонент или вот так добавить дефолтные пропы для скриншотов
+ (props: ButtonProps) => ,
+ // Описание комбинаций пропов — по элементу массива на независимый набор
+ [
+ // mode и disabled влияют на цвет, но не на размер
+ { mode: ['primary', 'secondary'], disabled: [undefined, true] },
+ // size влияет на размер, но не на цвет
+ { size: ['s', 'm', 'l'] }
+ ]);
+ // всего 2 * 2 + 3 = 7 состояний:
+ // mode="primary"
+ // mode="primary" disabled
+ // mode="secondary"
+ // mode="secondary" disabled
+ // size="s"
+ // size="m"
+ // size="l"
+});
+```
diff --git a/babel.config.js b/babel.config.js
index f06a5c3d1e..09cc27b546 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,22 @@
+const { NODE_ENV } = process.env;
+const isProduction = NODE_ENV === 'production';
+const isDevelopment = NODE_ENV === 'development';
+const useModules = isProduction || isDevelopment;
+
+const testFiles = [
+ './src/**/*.test.ts', './src/**/*.test.tsx',
+ './src/**/*.spec.ts', './src/**/*.spec.tsx',
+ './src/**/*.e2e.ts', './src/**/*.e2e.tsx',
+ './e2e/', './src/testing/',
+];
+
module.exports = {
- presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react', '@babel/preset-typescript'],
+ presets: [
+ ['@babel/preset-env', { modules: useModules ? false : 'commonjs' }],
+ '@babel/preset-react',
+ '@babel/preset-typescript'
+ ],
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-runtime'],
- ignore: ['./src/vkui.js'],
+ ignore: ['./src/vkui.js'].concat(
+ isProduction ? ['./src/**/*.test.ts', './src/**/*.test.tsx', './src/**/*.spec.ts', './src/**/*.spec.tsx', './e2e', './src/testing'] : []),
};
diff --git a/dangerfile.js b/dangerfile.js
new file mode 100644
index 0000000000..fee2aee095
--- /dev/null
+++ b/dangerfile.js
@@ -0,0 +1,131 @@
+import { fail, message, warn, danger, markdown } from 'danger';
+const dangerJest = require('danger-plugin-jest').default;
+const { readFile } = require('fs').promises;
+const md5 = require('md5');
+const path = require('path');
+const glob = require('glob');
+const { promisify } = require('util')
+const pglob = promisify(glob);
+const AWS = require('aws-sdk/global');
+const S3 = require('aws-sdk/clients/s3');
+
+const { AWS_ACCESS_KEY_ID, AWS_SECRET_KEY, AWS_ENDPOINT } = process.env;
+
+const lintPath = path.join(__dirname, 'lint-results.json');
+function lint() {
+ return readFile(lintPath).then(file => {
+ const lintReport = JSON.parse(file)
+ for (const { messages, filePath } of lintReport) {
+ const relPath = path.relative(__dirname, filePath)
+ for (const message of messages) {
+ const text = `${message.message} \`${message.ruleId}\``
+ if (message.severity === 2) {
+ fail(text, relPath, message.line);
+ } else if (message.severity === 1) {
+ warn(text, relPath, message.line);
+ }
+ }
+ }
+ });
+}
+
+function coverage() {
+ return readFile(path.join(__dirname, 'coverage', 'coverage-summary.json')).then(file => {
+ const { total } = JSON.parse(file)
+ const formatCoverage = (kind, { covered, total, pct }) => `${covered} / ${total} ${kind} (${pct}%)`
+ message(`Code coverage: ${
+ Object.entries(total).map(([kind, cov]) => formatCoverage(kind, cov)).join(', ')
+ }`)
+ })
+}
+
+const updateScreensActionLink = `https://github.com/VKCOM/VKUI/actions?query=workflow%3A"Update+screenshots"`;
+const UPLOAD_BUCKET = 'vkui-screenshots';
+const awsHost = `${UPLOAD_BUCKET}.${AWS_ENDPOINT}`;
+async function uploadFailedScreenshots() {
+ const diffDir = '__diff_output__'
+ const { github } = danger;
+ const pathPrefix = github ? github.pr.number : 'local';
+ const failedScreens = await pglob(path.join(__dirname, '**', diffDir, '*.png'));
+
+ if (failedScreens.length) {
+ warn(`${failedScreens.length} changed screenshots found — review & update them via ["Update Screenshots" action](${updateScreensActionLink}) before merging.`);
+ }
+
+ if (!AWS_ENDPOINT || !AWS_ACCESS_KEY_ID || !AWS_SECRET_KEY) {
+ // Silently skip screenshot reporting if credentials missing
+ console.log('AWS credentials missing - skip screenshot reporting');
+ return;
+ }
+
+ let s3;
+ try {
+ s3 = new AWS.S3({
+ apiVersion: '2006-03-01',
+ endpoint: AWS_ENDPOINT,
+ accessKeyId: AWS_ACCESS_KEY_ID,
+ secretAccessKey: AWS_SECRET_KEY,
+ });
+ } catch (err) {
+ warn(`Could not create S3 client - aborting screen test reporter.`);
+ return;
+ }
+
+ try {
+ await removeDiffs(s3, `${pathPrefix}/`);
+ } catch (err) {
+ warn(`Could not purge old screenshots from S3: "${err.message}"`);
+ }
+
+ for (const failedScreen of failedScreens) {
+ const screenName = path.parse(failedScreen).name;
+ const fileContents = await readFile(failedScreen);
+ const key = `${pathPrefix}/${screenName}-${md5(fileContents)}.png`;
+ try {
+ await s3.putObject({
+ Body: fileContents,
+ Bucket: UPLOAD_BUCKET,
+ Key: key,
+ ContentType: 'image/png',
+ ACL: 'public-read',
+ }).promise();
+ markdown(`
+
+ Screenshot ${screenName} failed
+ 
+
+ `.replace(/(^|\n) +/g, ''));
+ } catch (err) {
+ warn(`Counld not upload screenshot diff ${screenName}: ${err.message}`);
+ }
+ }
+}
+
+async function checkUpdatedScreenshots() {
+ if (danger.git.modified_files.some(file => /__image_snapshots__/.test(file))) {
+ warn('Some screenshots were modified in this PR');
+ }
+}
+
+async function removeDiffs(s3, prefix) {
+ const list = (await s3.listObjects({
+ Bucket: UPLOAD_BUCKET,
+ Prefix: prefix,
+ }).promise()).Contents;
+ if (list && list.length !== 0) {
+ await s3.deleteObjects({
+ Bucket: UPLOAD_BUCKET,
+ Delete: {
+ Objects: list.map(obj => ({ Key: obj.Key })),
+ },
+ }).promise();
+ }
+}
+
+Promise.all([
+ dangerJest(),
+ lint(),
+ coverage(),
+ uploadFailedScreenshots(),
+ checkUpdatedScreenshots(),
+]);
diff --git a/e2e/browser/jest-mock.ts b/e2e/browser/jest-mock.ts
new file mode 100644
index 0000000000..96b29cb283
--- /dev/null
+++ b/e2e/browser/jest-mock.ts
@@ -0,0 +1,43 @@
+if (!window.Proxy) {
+ throw new Error('The environment needs to support window.Proxy!');
+}
+
+function makeAny(): any {
+ // callable
+ return new Proxy(() => makeAny(), {
+ // and with any property
+ get: () => makeAny(),
+ });
+}
+
+window.jest = makeAny();
+(window as any)['page'] = makeAny();
+(window as any)['expect'] = makeAny();
+
+const notImplemented = (name: string) => () => {
+ throw new Error(`${name} is not supported in react / playwright browser runtime`);
+};
+const noop = () => {/* do nothing */};
+
+window.beforeAll = notImplemented('beforeAll');
+window.afterAll = notImplemented('afterAll');
+window.beforeEach = notImplemented('beforeEach');
+window.afterEach = notImplemented('afterEach');
+
+const path: string[] = [];
+const withPath = (name: string, fun: jest.ProvidesCallback) => {
+ path.push(name);
+ fun(Object.assign(noop, { fail: noop }));
+ path.pop();
+};
+const fakeTest = Object.assign(withPath, {
+ each: notImplemented('describe.each'),
+ only: withPath,
+ skip: noop as any,
+}) as any as typeof test;
+
+window.describe = fakeTest;
+window.test = fakeTest;
+window.it = fakeTest;
+
+export const currentPath = () => path.join(' ');
diff --git a/e2e/browser/mount.ts b/e2e/browser/mount.ts
new file mode 100644
index 0000000000..3933767df2
--- /dev/null
+++ b/e2e/browser/mount.ts
@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { currentPath } from './jest-mock';
+import { testHandle } from './test-handle';
+
+export function mount(jsx: ReactElement) {
+ testHandle.register(currentPath(), jsx);
+}
+
+export const screenshot = mount;
diff --git a/e2e/browser/runtime.ts b/e2e/browser/runtime.ts
new file mode 100644
index 0000000000..55c94cb211
--- /dev/null
+++ b/e2e/browser/runtime.ts
@@ -0,0 +1,5 @@
+import './test-handle';
+import './jest-mock';
+
+// Как минимум, отключаем анимации
+(window as any).__isVkuiTesting = true;
diff --git a/e2e/browser/test-handle.ts b/e2e/browser/test-handle.ts
new file mode 100644
index 0000000000..ea8e06f944
--- /dev/null
+++ b/e2e/browser/test-handle.ts
@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+class ComponentHandle {
+ constructor(private readonly mountNode: Element) {}
+ private components: { [name: string]: { node: ReactElement } } = {};
+
+ register(name: string, node: ReactElement) {
+ if (name in this.components) {
+ throw new Error(`Test ${name} already exists. make sure path is unique and mount() is called once.`);
+ }
+ this.components[name] = { node };
+ }
+
+ mount(name: string) {
+ if (!(name in this.components)) {
+ throw new Error(`Test "${name}" does not exist, ${JSON.stringify(Object.keys(this.components))}`);
+ }
+ return new Promise((ok) => render(this.components[name].node, this.mountNode, () => ok()));
+ }
+
+ unmount() {
+ unmountComponentAtNode(this.mountNode);
+ }
+}
+
+export const testHandle = new ComponentHandle(document.getElementById('mount'));
+(window as any)['testHandle'] = testHandle;
diff --git a/e2e/detectEnv.d.ts b/e2e/detectEnv.d.ts
new file mode 100644
index 0000000000..d606d70dff
--- /dev/null
+++ b/e2e/detectEnv.d.ts
@@ -0,0 +1,3 @@
+export const isLinux: boolean;
+export const useDocker: boolean;
+export const canRunTests: boolean;
diff --git a/e2e/detectEnv.js b/e2e/detectEnv.js
new file mode 100644
index 0000000000..5a11b6ce45
--- /dev/null
+++ b/e2e/detectEnv.js
@@ -0,0 +1,22 @@
+// This file is in JS because it runs in node when generating jest.e2e.config
+const { execSync } = require('child_process');
+
+function checkDocker() {
+ try {
+ execSync('docker stats --no-stream');
+ return true;
+ } catch (err) {
+ return false;
+ }
+}
+
+function checkLinux() {
+ const { platform } = process;
+ return platform !== 'win32' && platform !== 'darwin';
+}
+
+const isLinux = checkLinux();
+const useDocker = process.env.E2E_DOCKER === '1' || !isLinux && checkDocker();
+const canRunTests = useDocker || isLinux;
+
+module.exports = { isLinux, useDocker, canRunTests };
diff --git a/e2e/dist/font/LICENSE.txt b/e2e/dist/font/LICENSE.txt
new file mode 100644
index 0000000000..75b52484ea
--- /dev/null
+++ b/e2e/dist/font/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
diff --git a/e2e/dist/font/Roboto-Bold.ttf b/e2e/dist/font/Roboto-Bold.ttf
new file mode 100644
index 0000000000..d998cf5b46
Binary files /dev/null and b/e2e/dist/font/Roboto-Bold.ttf differ
diff --git a/e2e/dist/font/Roboto-Italic.ttf b/e2e/dist/font/Roboto-Italic.ttf
new file mode 100644
index 0000000000..5b390ff950
Binary files /dev/null and b/e2e/dist/font/Roboto-Italic.ttf differ
diff --git a/e2e/dist/font/Roboto-Regular.ttf b/e2e/dist/font/Roboto-Regular.ttf
new file mode 100644
index 0000000000..2b6392ffe8
Binary files /dev/null and b/e2e/dist/font/Roboto-Regular.ttf differ
diff --git a/e2e/dist/index.html b/e2e/dist/index.html
new file mode 100644
index 0000000000..44cae89322
--- /dev/null
+++ b/e2e/dist/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/e2e/docker-compose.yml b/e2e/docker-compose.yml
new file mode 100644
index 0000000000..ae530f9d91
--- /dev/null
+++ b/e2e/docker-compose.yml
@@ -0,0 +1,6 @@
+version: "3.8"
+services:
+ vkui-chrome:
+ image: browserless/chrome:latest
+ ports:
+ - "9001:3000"
diff --git a/e2e/docker.ts b/e2e/docker.ts
new file mode 100644
index 0000000000..048599f5f7
--- /dev/null
+++ b/e2e/docker.ts
@@ -0,0 +1,11 @@
+import { promisify } from 'util';
+import { exec } from 'child_process';
+import waitPort from 'wait-port';
+const execP = promisify(exec);
+
+export const startDocker = () => Promise.all([
+ execP('docker-compose up -d', { cwd: __dirname }),
+ waitPort({ host: 'localhost', port: 9001, timeout: 30000 }),
+]);
+
+export const stopDocker = () => execP('docker-compose stop', { cwd: __dirname });
diff --git a/e2e/generateWebpackConfig.ts b/e2e/generateWebpackConfig.ts
new file mode 100644
index 0000000000..ff42a78f99
--- /dev/null
+++ b/e2e/generateWebpackConfig.ts
@@ -0,0 +1,52 @@
+import * as path from 'path';
+import { promisify } from 'util';
+import cbGlob from 'glob';
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpackConfig = require('../webpack.config.js');
+const glob = promisify(cbGlob);
+
+const { externals, plugins = [], devServer, resolve = {}, output = {}, ...baseWebpackConfig } = webpackConfig;
+
+export async function generateWebpackConfig() {
+ const testFiles = await glob(path.join(__dirname, '../src/**/*.e2e.{ts,tsx}'));
+ return {
+ ...baseWebpackConfig,
+ entry: {
+ main: [path.resolve(__dirname, 'browser/runtime.ts'), ...testFiles],
+ vkui: [path.resolve(__dirname, 'styles.test.css')],
+ },
+ output: {
+ ...output,
+ path: path.resolve(__dirname, 'dist'),
+ },
+ resolve: {
+ ...resolve,
+ alias: {
+ ...resolve.alias,
+ '@react-playwright': path.resolve(__dirname, 'browser/mount.ts'),
+ },
+ },
+ devServer: {
+ ...devServer,
+ contentBase: path.join(__dirname, 'dist'),
+ },
+ module: {
+ ...webpackConfig.module,
+ rules: [
+ ...(webpackConfig.module || {}).rules,
+ {
+ test: /\.css$/i,
+ use: [
+ { loader: MiniCssExtractPlugin.loader },
+ { loader: 'css-loader', options: { url: false } },
+ 'postcss-loader',
+ ],
+ },
+ ],
+ },
+ plugins: [
+ ...plugins,
+ new MiniCssExtractPlugin(),
+ ],
+ };
+};
diff --git a/e2e/index.ts b/e2e/index.ts
new file mode 100644
index 0000000000..c9213b73d1
--- /dev/null
+++ b/e2e/index.ts
@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+
+/**
+ * Хелперы для тестов jest + playwright. В браузерной сборке подменяются на browser/mount.
+ */
+
+export function mount(jsx: ReactElement): Promise;
+export async function mount() {
+ const testName = expect.getState().currentTestName;
+ /* istanbul ignore next */
+ await page.evaluate(({ testName }) => {
+ return (window as any).testHandle.mount(testName);
+ }, { testName });
+}
+
+export async function screenshot(jsx: ReactElement) {
+ await mount(jsx);
+ // font load affects layout
+ /* istanbul ignore next */
+ await page.evaluate(() => (document as any).fonts.ready);
+ /* istanbul ignore next */
+ const { width, height } = await page.evaluate(() => {
+ const size = { width: 0, height: 0 };
+ document.querySelectorAll('#mount > *').forEach((node) => {
+ const { right, bottom } = node.getBoundingClientRect();
+ size.width = Math.max(size.width, right);
+ size.height = Math.max(size.height, bottom);
+ });
+ return size;
+ });
+ return page.screenshot({ fullPage: true, clip: { x: 0, y: 0, width, height } });
+}
diff --git a/e2e/jest.e2e.config.js b/e2e/jest.e2e.config.js
new file mode 100644
index 0000000000..7208944480
--- /dev/null
+++ b/e2e/jest.e2e.config.js
@@ -0,0 +1,46 @@
+const base = require('../jest.unit.config');
+const path = require('path');
+const chalk = require('chalk');
+const { canRunTests, useDocker } = require('./detectEnv');
+
+const jestPlaywrightOptions = Object.assign({
+ collectCoverage: true,
+ contextOptions: {
+ viewport: {
+ width: 800,
+ height: 600,
+ },
+ },
+}, useDocker ? {
+ connectOptions: {
+ wsEndpoint: 'ws://localhost:9001/playwright',
+ },
+} : {});
+const config = {
+ ...base,
+ displayName: 'e2e',
+ testMatch: ['**/*.e2e.{ts,tsx}'],
+ preset: 'jest-playwright-preset',
+ collectCoverage: false,
+ setupFilesAfterEnv: [
+ ...base.setupFilesAfterEnv || [],
+ path.join(__dirname, 'jest/matchers.ts'),
+ ],
+ globalSetup: path.join(__dirname, 'jest/globalSetup.ts'),
+ globalTeardown: path.join(__dirname, 'jest/globalTeardown.ts'),
+ testEnvironment: path.join(__dirname, 'jest/jsdomPlaywrightEnv.js'),
+ testEnvironmentOptions: {
+ ...base.testEnvironmentOptions || {},
+ 'jest-playwright': jestPlaywrightOptions,
+ },
+ moduleNameMapper: {
+ '@react-playwright': path.join(__dirname, 'index.ts'),
+ },
+};
+
+if (!canRunTests) {
+ console.error(chalk.red.bold('E2E tests can only run in linux or docker - please install and start docker. Skipping for now.'));
+ module.exports = {};
+} else {
+ module.exports = config;
+}
diff --git a/e2e/jest/globalSetup.ts b/e2e/jest/globalSetup.ts
new file mode 100644
index 0000000000..36378079e8
--- /dev/null
+++ b/e2e/jest/globalSetup.ts
@@ -0,0 +1,57 @@
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import type { Config as JestConfig } from '@jest/types';
+import baseSetup from 'jest-playwright-preset/setup';
+import { generateWebpackConfig } from '../generateWebpackConfig';
+import { useDocker } from '../detectEnv';
+import { startDocker } from '../docker';
+
+let devServer: WebpackDevServer;
+async function setupWebpack() {
+ const webpackConfig = await generateWebpackConfig();
+ const compiler = webpack(webpackConfig);
+ const compilerDone = new Promise((resolve, reject) => {
+ compiler.hooks.watchRun.tapAsync('@jest-playwright', (_, callback) => {
+ console.log('\nBuilding browser bundle...');
+ callback();
+ });
+ compiler.hooks.done.tapAsync('@jest-playwright', (stats, callback) => {
+ if (stats.hasErrors()) {
+ console.log('Build failed');
+ reject(stats);
+ } else {
+ console.log('Build OK');
+ resolve(stats);
+ }
+ callback();
+ });
+ });
+
+ devServer = new WebpackDevServer(compiler, {
+ noInfo: true,
+ stats: 'minimal',
+ disableHostCheck: true,
+ ...webpackConfig.devServer,
+ });
+ devServer.listen(9000);
+ (global as any)['__DEV_SERVER__'] = devServer;
+
+ return compilerDone;
+}
+
+module.exports = async function setup(jestConfig: JestConfig.GlobalConfig) {
+ // do not re-run webpack in watch mode
+ // https://github.com/facebook/jest/issues/6800
+ if (devServer) {
+ // hack into middleware to wait for build to pass
+ return new Promise((ok) => (devServer as any).middleware.waitUntilValid(ok));
+ }
+
+ await setupWebpack();
+ if (useDocker) {
+ console.log('Starting dockerized chrome...');
+ await startDocker();
+ console.log('Running E2E tests in docker');
+ }
+ await baseSetup(jestConfig);
+};
diff --git a/e2e/jest/globalTeardown.ts b/e2e/jest/globalTeardown.ts
new file mode 100644
index 0000000000..5835849e5d
--- /dev/null
+++ b/e2e/jest/globalTeardown.ts
@@ -0,0 +1,15 @@
+import baseTeardown from 'jest-playwright-preset/teardown';
+import type { Config as JestConfig } from '@jest/types';
+import { useDocker } from '../detectEnv';
+import { stopDocker } from '../docker';
+
+module.exports = async function teardown(config: JestConfig.GlobalConfig) {
+ await baseTeardown(config);
+ // I don't know why, but devServer closes in watch mode, too
+ if (!config.watch && !config.watchAll) {
+ (global as any)['__DEV_SERVER__'].close();
+ if (useDocker) {
+ await stopDocker();
+ }
+ }
+};
diff --git a/e2e/jest/jsdomPlaywrightEnv.js b/e2e/jest/jsdomPlaywrightEnv.js
new file mode 100644
index 0000000000..db0e71c6e5
--- /dev/null
+++ b/e2e/jest/jsdomPlaywrightEnv.js
@@ -0,0 +1,3 @@
+// Jest test environment must be in JS
+const { getPlaywrightEnv } = require('jest-playwright-preset/lib/PlaywrightEnvironment');
+module.exports = getPlaywrightEnv('jsdom');
diff --git a/e2e/jest/matchers.ts b/e2e/jest/matchers.ts
new file mode 100644
index 0000000000..29bf1ebcf6
--- /dev/null
+++ b/e2e/jest/matchers.ts
@@ -0,0 +1,20 @@
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+import { useDocker } from '../detectEnv';
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+ customSnapshotIdentifier: ({ currentTestName, counter }) => {
+ return `${currentTestName.toLowerCase().replace(/ /g, '-')}-${counter}`;
+ },
+});
+
+beforeAll(async () => {
+ const host = useDocker ? 'host.docker.internal' : 'localhost';
+ await page.goto(`http://${host}:9000`);
+});
+
+afterEach(async () => {
+ /* istanbul ignore next */
+ await page.evaluate(() => (window as any).testHandle.unmount());
+});
+
+expect.extend({ toMatchImageSnapshot });
diff --git a/e2e/styles.test.css b/e2e/styles.test.css
new file mode 100644
index 0000000000..ef94ec3a66
--- /dev/null
+++ b/e2e/styles.test.css
@@ -0,0 +1,34 @@
+@import '../src/styles/styles.css';
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url(/font/Roboto-Italic.ttf) format('truetype');
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url(/font/Roboto-Regular.ttf) format('truetype');
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url(/font/Roboto-Bold.ttf) format('truetype');
+}
+
+#mount {
+ /* Force use embedded Roboto font for cross-platformity */
+ --font-common: 'Roboto';
+ font-family: 'Roboto';
+ -webkit-font-smoothing: antialiased;
+}
+
+* {
+ animation: none !important;
+ transition: none !important;
+}
\ No newline at end of file
diff --git a/e2e/types.d.ts b/e2e/types.d.ts
new file mode 100644
index 0000000000..d756db183b
--- /dev/null
+++ b/e2e/types.d.ts
@@ -0,0 +1,3 @@
+declare module 'jest-playwright-preset/setup';
+declare module 'jest-playwright-preset/teardown';
+declare module 'jest-playwright-preset/lib/PlaywrightEnvironment';
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..88d579332a
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ projects: ['', '/e2e/jest.e2e.config.js'],
+ collectCoverage: true,
+ collectCoverageFrom: ['src/*/**/*.{ts,tsx}'],
+ coveragePathIgnorePatterns: [
+ '\\.d\\.ts$',
+ 'src/types',
+ ],
+}
diff --git a/jest.unit.config.js b/jest.unit.config.js
new file mode 100644
index 0000000000..4258094106
--- /dev/null
+++ b/jest.unit.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+module.exports = {
+ displayName: 'unit',
+ roots: [path.join(__dirname, 'src')],
+ collectCoverageFrom: ['src/*/**/*.{ts,tsx}'],
+ coveragePathIgnorePatterns: [
+ '\\.d\\.ts$',
+ 'src/types',
+ ],
+}
diff --git a/package.json b/package.json
index 0a333dc228..5783886ef8 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,16 @@
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@babel/runtime": "^7.11.2",
+ "@testing-library/jest-dom": "^5.11.6",
+ "@testing-library/react": "^11.2.1",
+ "@testing-library/user-event": "^12.2.2",
+ "@types/css-font-loading-module": "^0.0.4",
+ "@types/jest": "^26.0.15",
+ "@types/jest-image-snapshot": "^4.1.3",
"@types/node": "^12.7.2",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.8.5",
+ "@types/webpack-dev-server": "^3.11.1",
"@typescript-eslint/eslint-plugin": "^2.28.0",
"@typescript-eslint/parser": "^2.0.0",
"@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.2.0",
@@ -36,23 +43,35 @@
"@vkontakte/vk-bridge": "^2.1.3",
"@vkontakte/vkjs": "0.16.0",
"autoprefixer": "^9.8.0",
+ "aws-sdk": "^2.799.0",
+ "babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
+ "chalk": "^4.1.0",
"classnames": "^2.2.6",
"clean-webpack-plugin": "^3.0.0",
"concurrently": "^4.1.2",
"cross-env": "^7.0.2",
- "css-loader": "^4.3.0",
+ "css-loader": "^5.0.1",
+ "danger": "^10.5.1",
+ "danger-plugin-jest": "^1.3.0",
"eslint": "~6.8.0",
+ "eslint-plugin-jest-playwright": "^0.2.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.0.1",
"file-loader": "^6.2.0",
- "mini-css-extract-plugin": "^1.2.1",
+ "jest": "^26.6.3",
+ "jest-image-snapshot": "^4.2.0",
+ "jest-playwright-preset": "^1.4.1",
+ "jest-silent-reporter": "^0.3.0",
+ "md5": "^2.3.0",
+ "mini-css-extract-plugin": "^1.3.1",
+ "playwright": "^1.6.2",
"postcss": "8.1.4",
"postcss-cli": "8.1.0",
"postcss-csso": "5.0.0",
"postcss-custom-properties": "10.0.0",
"postcss-import": "13.0.0",
- "postcss-loader": "4.0.4",
+ "postcss-loader": "^4.1.0",
"pre-commit": "^1.2.2",
"prop-types": "^15.6.1",
"react": "^16.8.6",
@@ -63,9 +82,9 @@
"source-map-loader": "^0.2.4",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
- "ts-loader": "^8.0.9",
- "typescript": "3.7.5",
- "webpack": "^4.41.2",
+ "typescript": "3.8",
+ "wait-port": "^0.2.9",
+ "webpack": "^4.44.2",
"webpack-cli": "^3.3.10",
"webpack-merge": "^4.2.2",
"yargs": "^15.4.1"
@@ -95,12 +114,25 @@
"postcss": "cross-env NODE_ENV=production postcss src/styles/styles.css --output dist/vkui.css --verbose",
"postcss-unstable": "NODE_ENV=production postcss src/styles/unstable.css --output dist/unstable.css --verbose",
"babel": "cross-env NODE_ENV=production babel src/ --out-dir dist/ --source-maps --extensions .tsx,.jsx,.ts,.js",
- "tsc": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration",
+ "tsc": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
"clear": "shx rm -rf dist/*",
- "test": "tsc --noEmit && eslint --ext .jsx,.js,.ts,.tsx src/ && stylelint \"./src/**/*.css\"",
+ "test:unit": "jest --config jest.unit.config.js",
+ "test:unit:quick": "yarn test:unit --silent --reporters='jest-silent-reporter' --onlyChanged",
+ "test:unit:ci": "yarn test:unit --ci --silent --outputFile test-results.json --json --coverage --coverageReporters='json-summary'",
+ "test:e2e": "jest --config e2e/jest.e2e.config.js",
+ "test:code": "jest",
+ "lint:es": "eslint --ext .jsx,.js,.ts,.tsx src/ e2e/ --cache --cache-location .cache/.eslintcache",
+ "lint:es:ci": "yarn lint:es -o lint-results.json -f json",
+ "lint:style": "stylelint \"./src/**/*.css\" --cache --cache-location .cache/.stylelintcache",
+ "typecheck": "tsc --incremental --emitDeclarationOnly --declaration --tsBuildInfoFile .cache/.tsbuildinfo --outDir .cache/ts",
+ "test:static": "concurrently 'yarn typecheck' 'yarn lint:es' 'yarn lint:style'",
+ "test:static:ci": "concurrently 'yarn typecheck' 'yarn lint:es:ci' 'yarn lint:style'",
+ "test": "concurrently 'yarn test:unit' 'yarn test:static'",
+ "test:quick": "concurrently 'yarn test:unit:quick' 'yarn test:static'",
+ "test:ci": "concurrently 'yarn test:unit:ci' 'yarn test:static:ci'",
"copy-default-scheme": "shx cp ./src/styles/bright_light.css ./dist/default_scheme.css"
},
"pre-commit": [
- "test"
+ "test:static"
]
}
diff --git a/src/components/ActionSheet/ActionSheet.e2e.tsx b/src/components/ActionSheet/ActionSheet.e2e.tsx
new file mode 100644
index 0000000000..a61d50e1b9
--- /dev/null
+++ b/src/components/ActionSheet/ActionSheet.e2e.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import ActionSheet, { ActionSheetProps } from './ActionSheet';
+import ActionSheetItem from '../ActionSheetItem/ActionSheetItem';
+import { describeScreenshotFuzz } from '../../testing/e2e/utils';
+import withPlatform from '../../hoc/withPlatform';
+
+describe('ActionSheet', () => {
+ const cancel = Отменить;
+ describeScreenshotFuzz(withPlatform((props: ActionSheetProps) => (
+
+ )), [{
+ children: [[
+ Элемент,
+ Второй элемент,
+ ]],
+ header: [undefined, 'Заголовок'],
+ }], {});
+});
diff --git a/src/components/ActionSheet/__image_snapshots__/actionsheet-android-bright_light-1-snap.png b/src/components/ActionSheet/__image_snapshots__/actionsheet-android-bright_light-1-snap.png
new file mode 100644
index 0000000000..d3a2f859e6
--- /dev/null
+++ b/src/components/ActionSheet/__image_snapshots__/actionsheet-android-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec26cb63fa718f7d4ce7724321c1d5ea008cfb97e763bb15fabcf868a019ed8d
+size 16262
diff --git a/src/components/ActionSheet/__image_snapshots__/actionsheet-android-space_gray-1-snap.png b/src/components/ActionSheet/__image_snapshots__/actionsheet-android-space_gray-1-snap.png
new file mode 100644
index 0000000000..55878a0642
--- /dev/null
+++ b/src/components/ActionSheet/__image_snapshots__/actionsheet-android-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ab542426842ce3a252565977088360d51c09db84339374e29b971d373783c67
+size 15762
diff --git a/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-bright_light-1-snap.png b/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-bright_light-1-snap.png
new file mode 100644
index 0000000000..d708eb8a5e
--- /dev/null
+++ b/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f87dc63dd67be2dbe3e5fe606ec661bcad15415c6c3bbcfc47fe60b1955ef6af
+size 18397
diff --git a/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-space_gray-1-snap.png b/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-space_gray-1-snap.png
new file mode 100644
index 0000000000..f2803056b3
--- /dev/null
+++ b/src/components/ActionSheet/__image_snapshots__/actionsheet-ios-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:95888d29c9f8b112729684483adbd6d9368b70b086ea772d4601ead5de60af46
+size 18259
diff --git a/src/components/ActionSheet/__image_snapshots__/actionsheet-vkcom-vkcom-1-snap.png b/src/components/ActionSheet/__image_snapshots__/actionsheet-vkcom-vkcom-1-snap.png
new file mode 100644
index 0000000000..67864708f0
--- /dev/null
+++ b/src/components/ActionSheet/__image_snapshots__/actionsheet-vkcom-vkcom-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6748458aa6ddb326649ceeb5353c4cf509c50e4d7b317cc299cefddaa0a8120e
+size 15263
diff --git a/src/components/Button/Button.e2e.tsx b/src/components/Button/Button.e2e.tsx
new file mode 100644
index 0000000000..31cb309d97
--- /dev/null
+++ b/src/components/Button/Button.e2e.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Button, { ButtonProps } from './Button';
+import { describeScreenshotFuzz } from '../../testing/e2e/utils';
+
+describe('Button', () => {
+ describeScreenshotFuzz((props: ButtonProps) => , [{
+ mode: [
+ 'primary', 'secondary', 'tertiary',
+ 'outline', 'commerce', 'destructive',
+ 'overlay_primary', 'overlay_secondary', 'overlay_outline'],
+ disabled: [undefined, true],
+ }, {
+ size: ['s', 'm', 'l'],
+ $adaptivity: 'y',
+ }]);
+});
diff --git a/src/components/Button/__image_snapshots__/button-android-bright_light-1-snap.png b/src/components/Button/__image_snapshots__/button-android-bright_light-1-snap.png
new file mode 100644
index 0000000000..8aa4aca090
--- /dev/null
+++ b/src/components/Button/__image_snapshots__/button-android-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aec9bfcfe1a8025ce4f323087fea66bf0bfd51810cf7ea6a4bb6faeba651ba5a
+size 75379
diff --git a/src/components/Button/__image_snapshots__/button-android-space_gray-1-snap.png b/src/components/Button/__image_snapshots__/button-android-space_gray-1-snap.png
new file mode 100644
index 0000000000..33abb80970
--- /dev/null
+++ b/src/components/Button/__image_snapshots__/button-android-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4ca26dae783183f2130b26d6aea6b1682b4492e4fc63e7c29004c70ad96e543
+size 82429
diff --git a/src/components/Button/__image_snapshots__/button-ios-bright_light-1-snap.png b/src/components/Button/__image_snapshots__/button-ios-bright_light-1-snap.png
new file mode 100644
index 0000000000..9be2a074a0
--- /dev/null
+++ b/src/components/Button/__image_snapshots__/button-ios-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:089df24513bc04c9c87b261fdf4e6cc1dec549192c4d60fe0f5833057a5d83a7
+size 76861
diff --git a/src/components/Button/__image_snapshots__/button-ios-space_gray-1-snap.png b/src/components/Button/__image_snapshots__/button-ios-space_gray-1-snap.png
new file mode 100644
index 0000000000..741e2139b7
--- /dev/null
+++ b/src/components/Button/__image_snapshots__/button-ios-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e52fc16705f1eadd9878441db8230690cac2deb5952554080376016a270a35a
+size 84407
diff --git a/src/components/Button/__image_snapshots__/button-vkcom-vkcom-1-snap.png b/src/components/Button/__image_snapshots__/button-vkcom-vkcom-1-snap.png
new file mode 100644
index 0000000000..fa54c18d64
--- /dev/null
+++ b/src/components/Button/__image_snapshots__/button-vkcom-vkcom-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b40735a348fa4f3dbb2a27b48f23c5158f29527ab107548877e0b037397eed5e
+size 56809
diff --git a/src/components/Checkbox/Checkbox.e2e.tsx b/src/components/Checkbox/Checkbox.e2e.tsx
new file mode 100644
index 0000000000..c2de5e0425
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.e2e.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Checkbox, CheckboxProps } from './Checkbox';
+import { describeScreenshotFuzz } from '../../testing/e2e/utils';
+
+describe('Checkbox', () => {
+ describeScreenshotFuzz((props: CheckboxProps) => label, [{
+ checked: [false, true],
+ disabled: [undefined, true],
+ }], {});
+});
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
new file mode 100644
index 0000000000..3f9a342620
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+ it('handles change', () => {
+ const CheckboxController = () => {
+ const [checked, setChecked] = useState(false);
+ return setChecked(e.target.checked)}>check;
+ };
+ render();
+ expect(screen.getByRole('checkbox')).not.toBeChecked();
+ userEvent.click(screen.getByText('check'));
+ expect(screen.getByRole('checkbox')).toBeChecked();
+ userEvent.click(screen.getByText('check'));
+ expect(screen.getByRole('checkbox')).not.toBeChecked();
+ });
+});
diff --git a/src/components/Checkbox/__image_snapshots__/checkbox-android-bright_light-1-snap.png b/src/components/Checkbox/__image_snapshots__/checkbox-android-bright_light-1-snap.png
new file mode 100644
index 0000000000..5180214644
--- /dev/null
+++ b/src/components/Checkbox/__image_snapshots__/checkbox-android-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c2ba250a108fdbb586d085407c48cc06774548cb242586a482f1f3f7ecf3e9b
+size 11905
diff --git a/src/components/Checkbox/__image_snapshots__/checkbox-android-space_gray-1-snap.png b/src/components/Checkbox/__image_snapshots__/checkbox-android-space_gray-1-snap.png
new file mode 100644
index 0000000000..da4dcb3dbb
--- /dev/null
+++ b/src/components/Checkbox/__image_snapshots__/checkbox-android-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee912ad36f48fa5c4e3b6a8753f1cd6825a32a8258b8b95b92475fe96c5b070b
+size 11965
diff --git a/src/components/Checkbox/__image_snapshots__/checkbox-ios-bright_light-1-snap.png b/src/components/Checkbox/__image_snapshots__/checkbox-ios-bright_light-1-snap.png
new file mode 100644
index 0000000000..a14402013f
--- /dev/null
+++ b/src/components/Checkbox/__image_snapshots__/checkbox-ios-bright_light-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dafabc332c7e847d9e89b40501a8c0ce89bbc380d905312999286cc516c387f2
+size 11913
diff --git a/src/components/Checkbox/__image_snapshots__/checkbox-ios-space_gray-1-snap.png b/src/components/Checkbox/__image_snapshots__/checkbox-ios-space_gray-1-snap.png
new file mode 100644
index 0000000000..1aae3be216
--- /dev/null
+++ b/src/components/Checkbox/__image_snapshots__/checkbox-ios-space_gray-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:676f452110b7ce64c55f98002ac92ba6d0ce7bbf84b3244b9de3a043532d06ba
+size 11975
diff --git a/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-vkcom-1-snap.png b/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-vkcom-1-snap.png
new file mode 100644
index 0000000000..ca46f7f426
--- /dev/null
+++ b/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-vkcom-1-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:922fac3422a04bced80f361bfa43a71f389682b91a8d0b2442624466657018cc
+size 8816
diff --git a/src/helpers/getClassName.test.ts b/src/helpers/getClassName.test.ts
new file mode 100644
index 0000000000..a1d89ba226
--- /dev/null
+++ b/src/helpers/getClassName.test.ts
@@ -0,0 +1,6 @@
+import { Platform } from '../lib/platform';
+import { getClassName } from './getClassName';
+
+describe(getClassName, () => {
+ it('embeds platform name', () => expect(getClassName('base', Platform.IOS)).toBe('base base--ios'));
+});
diff --git a/src/lib/supportEvents.ts b/src/lib/supportEvents.ts
index 797be8a625..b6939e58d0 100644
--- a/src/lib/supportEvents.ts
+++ b/src/lib/supportEvents.ts
@@ -1,4 +1,5 @@
import { canUseDOM } from './dom';
+import { isTesting } from './testing';
export type VKUISupportEvents = {
supported: boolean;
@@ -19,7 +20,7 @@ const transitionEvent: VKUISupportEvents = {
name: null,
};
-if (canUseDOM) {
+if (canUseDOM && !isTesting) {
if (typeof AnimationEvent !== 'undefined') {
animationEvent.supported = true;
animationEvent.name = 'animationend';
diff --git a/src/lib/testing.ts b/src/lib/testing.ts
new file mode 100644
index 0000000000..aa9452175a
--- /dev/null
+++ b/src/lib/testing.ts
@@ -0,0 +1 @@
+export const isTesting = Boolean(typeof window !== 'undefined' && (window as any).__isVkuiTesting);
diff --git a/src/testing/e2e/index.ts b/src/testing/e2e/index.ts
new file mode 100644
index 0000000000..04bca77e0d
--- /dev/null
+++ b/src/testing/e2e/index.ts
@@ -0,0 +1 @@
+export * from './utils';
diff --git a/src/testing/e2e/utils.tsx b/src/testing/e2e/utils.tsx
new file mode 100644
index 0000000000..af7d933d16
--- /dev/null
+++ b/src/testing/e2e/utils.tsx
@@ -0,0 +1,136 @@
+import React, { ComponentType, Fragment, isValidElement } from 'react';
+import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
+import { screenshot } from '@react-playwright';
+// Импорты из отдельных модулей помогают jest отслеживать зависимости
+import ConfigProvider from '../../components/ConfigProvider/ConfigProvider';
+import Panel from '../../components/Panel/Panel';
+import { Platform } from '../../lib/platform';
+import { Scheme } from '../../components/ConfigProvider/ConfigProviderContext';
+import AdaptivityProvider, {
+ AdaptivityProviderProps,
+ DESKTOP_SIZE,
+ TABLET_SIZE,
+ SMALL_TABLET_SIZE,
+ MOBILE_SIZE,
+} from '../../components/AdaptivityProvider/AdaptivityProvider';
+import { SizeType, ViewWidth } from '../../components/AdaptivityProvider/AdaptivityContext';
+import { AdaptivityProps } from '../../hoc/withAdaptivity';
+import View from '../../components/View/View';
+import Group from '../../components/Group/Group';
+
+type AdaptivityFlag = boolean | 'x' | 'y';
+type PropDesc = { [K in keyof Props]?: Array } & { $adaptivity?: AdaptivityFlag };
+type SizeProps = Pick;
+type TestProps = Array;
+type CartesianOptions = { adaptive: boolean };
+
+function getAdaptivity(adaptivity?: AdaptivityFlag) {
+ const extra: PropDesc = {};
+ if (adaptivity && adaptivity !== 'y') {
+ extra.sizeX = Object.values(SizeType);
+ }
+ if (adaptivity && adaptivity !== 'x') {
+ extra.sizeY = Object.values(SizeType);
+ }
+ return extra;
+};
+
+function cartesian({ $adaptivity, ...propDesc }: PropDesc, ops: CartesianOptions): TestProps {
+ propDesc = { ...propDesc, ...getAdaptivity(ops.adaptive ? $adaptivity : false) };
+ return Object.entries(propDesc).reduce((acc, [prop, values]: [string, any[]]) => {
+ const res: any[] = [];
+ acc.forEach((props) => {
+ values.forEach((value) => {
+ res.push({ ...props, [prop]: value });
+ });
+ });
+ return res;
+ }, [{}]);
+}
+
+function multiCartesian(propSets: Array>, ops: CartesianOptions): TestProps {
+ if (propSets.length === 0) {
+ return [{} as any];
+ }
+ return propSets.reduce((acc, ortho) => acc.concat(cartesian(ortho, ops)), []);
+}
+
+function prettyProps(props: any) {
+ return Object.entries(props).sort(([key1], [key2]) => Number(key1 > key2)).map(([prop, value]) => {
+ if (value === undefined) {
+ return '';
+ }
+ if (value === true) {
+ return prop;
+ }
+ if (isValidElement(value) || Array.isArray(value) && value.every((node: any) => isValidElement(node))) {
+ return `${prop}=`;
+ }
+ return `${prop}=${JSON.stringify(value)}`;
+ }).join(' ');
+}
+
+type ScreenshotOptions = {
+ matchScreenshot?: MatchImageSnapshotOptions;
+ platforms?: Platform[];
+ mobileSchemes?: Scheme[];
+ adaptivity?: AdaptivityProps;
+};
+
+function getAdaptivePxWidth(viewWidth: ViewWidth) {
+ switch (viewWidth) {
+ case ViewWidth.SMALL_MOBILE: return MOBILE_SIZE - 10;
+ case ViewWidth.MOBILE: return MOBILE_SIZE;
+ case ViewWidth.SMALL_TABLET: return SMALL_TABLET_SIZE;
+ case ViewWidth.TABLET: return TABLET_SIZE;
+ case ViewWidth.DESKTOP: return DESKTOP_SIZE;
+ }
+}
+
+export function describeScreenshotFuzz(
+ Component: ComponentType,
+ propSets: Array> = [],
+ options: ScreenshotOptions = {},
+) {
+ const {
+ matchScreenshot,
+ platforms = Object.values(Platform),
+ mobileSchemes = [Scheme.BRIGHT_LIGHT, Scheme.SPACE_GRAY],
+ adaptivity = {},
+ } = options;
+ platforms.forEach((platform) => {
+ describe(platform, () => {
+ const isVkCom = platform === 'vkcom';
+ const width: number | 'auto' = adaptivity.viewWidth
+ ? getAdaptivePxWidth(adaptivity.viewWidth)
+ : isVkCom ? 'auto' : 320;
+ const adaptivityProps = Object.assign(
+ isVkCom ? { sizeX: SizeType.COMPACT, sizeY: SizeType.COMPACT } : {},
+ adaptivity);
+ (isVkCom ? [Scheme.VKCOM] : mobileSchemes).forEach((scheme) => {
+ it(scheme, async () => {
+ expect(await screenshot((
+
+
+
+
+
+
+ {multiCartesian(propSets, { adaptive: !isVkCom }).map((props, i) => (
+
+ {prettyProps(props)}
+
+
+ ))}
+
+
+
+
+