From 5a54a46b22270c53c669cd3c6babe134908d7ffa Mon Sep 17 00:00:00 2001 From: Siarhei Yelin Date: Fri, 29 Mar 2024 14:14:34 +0300 Subject: [PATCH] Simplify docker setup --- app/src/preview/componentPreview/constants.ts | 2 +- .../componentPreview/view/renderCaseView.tsx | 8 ++- app/src/preview/previewPage.tsx | 10 ++-- uui-e2e-tests/.gitignore | 2 - uui-e2e-tests/package.json | 17 ++++--- uui-e2e-tests/readme.md | 35 +++++++------ uui-e2e-tests/scripts/cmd/cmdRunPw.ts | 16 ++---- uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts | 49 +++++++++++++------ uui-e2e-tests/scripts/constants.ts | 14 +++--- .../scripts/dockerTemplates/Dockerfile.ts | 27 ---------- .../dockerTemplates/docker-compose.yml.ts | 32 ------------ uui-e2e-tests/src/constants.ts | 2 +- uui-e2e-tests/src/pages/previewPage.ts | 4 +- uui-e2e-tests/test.Dockerfile | 11 +++++ 14 files changed, 99 insertions(+), 130 deletions(-) delete mode 100644 uui-e2e-tests/scripts/dockerTemplates/Dockerfile.ts delete mode 100644 uui-e2e-tests/scripts/dockerTemplates/docker-compose.yml.ts create mode 100644 uui-e2e-tests/test.Dockerfile diff --git a/app/src/preview/componentPreview/constants.ts b/app/src/preview/componentPreview/constants.ts index 6f6e05190c..bd24f819f8 100644 --- a/app/src/preview/componentPreview/constants.ts +++ b/app/src/preview/componentPreview/constants.ts @@ -1,3 +1,3 @@ -export const PlayWriteInterfaceName = '_uui_playwrite_interface'; +export const PlayWrightInterfaceName = '_uui_playwright_interface'; export const SCREENSHOT_WIDTH_LIMIT = 1280; diff --git a/app/src/preview/componentPreview/view/renderCaseView.tsx b/app/src/preview/componentPreview/view/renderCaseView.tsx index a2ea4ed236..2d12577202 100644 --- a/app/src/preview/componentPreview/view/renderCaseView.tsx +++ b/app/src/preview/componentPreview/view/renderCaseView.tsx @@ -85,10 +85,14 @@ export class RenderCaseView extends React.PureComponent { - const value = inputValues[name]; + const value = inputValues[name] as any; if (value !== undefined) { const lb = i === 0 ? '' : '\n'; - return acc + lb + `${name} = ${JSON.stringify(value)}`; + let v = JSON.stringify(value); + if (v === undefined || v === '{}') { + v = value.name || '...'; + } + return acc + lb + `${name} = ${v}`; } return acc; }, ''); diff --git a/app/src/preview/previewPage.tsx b/app/src/preview/previewPage.tsx index 3679cd8e91..03f2b12e6b 100644 --- a/app/src/preview/previewPage.tsx +++ b/app/src/preview/previewPage.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { ComponentPreview } from './componentPreview/componentPreview'; import { PreviewQueryHelpers, usePreviewParams } from './previewQueryHelpers'; import { TComponentPreviewParams } from './componentPreview/types'; -import { PlayWriteInterfaceName } from './componentPreview/constants'; +import { PlayWrightInterfaceName } from './componentPreview/constants'; import css from './previewPage.module.scss'; import { useLayoutEffectSafeForSsr } from '@epam/uui-core'; @@ -38,7 +38,7 @@ export function PreviewPage() { }); }, []); - usePlayWriteInterface(handleNavPreview); + usePlayWrightInterface(handleNavPreview); useLayoutEffectSafeForSsr(() => { const style = document.body.style; @@ -61,13 +61,13 @@ export function PreviewPage() { ); } -function usePlayWriteInterface(setter: (newParams: TComponentPreviewParams) => void) { +function usePlayWrightInterface(setter: (newParams: TComponentPreviewParams) => void) { useEffect(() => { - (window as any)[PlayWriteInterfaceName] = (_params: string) => { + (window as any)[PlayWrightInterfaceName] = (_params: string) => { setter(JSON.parse(_params) as TComponentPreviewParams); }; return () => { - delete (window as any)[PlayWriteInterfaceName]; + delete (window as any)[PlayWrightInterfaceName]; }; }, [setter]); } diff --git a/uui-e2e-tests/.gitignore b/uui-e2e-tests/.gitignore index c73549fa3c..c92c1a70d1 100644 --- a/uui-e2e-tests/.gitignore +++ b/uui-e2e-tests/.gitignore @@ -1,3 +1 @@ .report -.Dockerfile -.docker-compose.yml diff --git a/uui-e2e-tests/package.json b/uui-e2e-tests/package.json index 5431968a40..995cea317b 100644 --- a/uui-e2e-tests/package.json +++ b/uui-e2e-tests/package.json @@ -6,15 +6,16 @@ "license": "MIT", "private": true, "scripts": { - "pw": "ts-node scripts/cmd/cmdRunPw.ts", - "pw-docker": "ts-node scripts/cmd/cmdRunPwDocker.ts", - "docker": "podman compose -f ./.docker-compose.yml up --build", - "test-e2e": "yarn pw test", + "pw-cli": "ts-node scripts/cmd/cmdRunPw.ts", + "pw-cli-local": "ts-node scripts/cmd/cmdRunPwDocker.ts", + "docker-cli-build": "podman build", + "docker-cli-run": "podman rm container-uui-e2e-tests --ignore && podman run --name container-uui-e2e-tests -it --network host --ipc host -v ./scripts:/app/scripts -v ./src:/app/src -v ./tests:/app/tests -v ./playwright.config.ts:/app/playwright.config.ts -v ./.env:/app/.env -v ./.env.local:/app/.env.local", + "test-e2e": "yarn pw-cli test", "test-e2e-update": "yarn test-e2e --update-snapshots", - "test-e2e-deps-install": "yarn pw install --with-deps chromium webkit", - "test-e2e-report-show": "yarn pw show-report uui-e2e-tests/tests/.report/report", - "docker-test-e2e": "yarn pw-docker", - "docker-test-e2e-update": "yarn pw-docker --update" + "test-e2e-deps-install": "yarn pw-cli install --with-deps chromium webkit", + "local-test-e2e-report-show": "npx ../node_modules/playwright show-report ./tests/.report/report", + "local-test-e2e": "yarn pw-cli-local", + "local-test-e2e-update": "yarn pw-cli-local --update-snapshots" }, "dependencies": { "@playwright/test": "1.42.1", diff --git a/uui-e2e-tests/readme.md b/uui-e2e-tests/readme.md index 325d07d4b6..d34ea59cd8 100644 --- a/uui-e2e-tests/readme.md +++ b/uui-e2e-tests/readme.md @@ -1,11 +1,7 @@ ### Podman installation #### Windows 1. Install Podman from here: https://github.com/containers/podman/releases/tag/v5.0.0 Note: you might need to restart computer after that. -2. Download "Docker Compose" via Powershell (with Admin privileges) - ```shell - Start-BitsTransfer -Source "https://github.com/docker/compose/releases/download/v2.26.0/docker-compose-Windows-x86_64.exe" -Destination $Env:ProgramFiles\Docker\docker-compose.exe - ``` -3. Run next commands: +2. Run next commands: ```bash podman machine init podman machine set --rootful @@ -18,11 +14,7 @@ ```shell brew install podman ``` -2. Install "Docker Compose" - ```shell - brew install docker-compose - ``` -3. Run next commands: +2. Run next commands: ```shell podman machine init podman machine set --rootful @@ -37,14 +29,29 @@ 3. [Optional step] Change ```./.env.local``` file in order to set non-standard UUI_APP_BASE_URL #### NPM tasks to use -Note: If you run the tests for the very first time, it will take some time to download necessary docker images (about 8-10min). +Note: If the tasks are run for the very first time, it might take some time to download necessary docker images. ```shell # Run tests in docker container -yarn docker-test-e2e +yarn local-test-e2e # Run tests in docker container and update all screenshots -yarn docker-test-e2e-update +yarn local-test-e2e-update # Show report located in "uui-e2e-tests/tests/.report/report" folder -yarn test-e2e-report-show +yarn local-test-e2e-report-show +``` + +### Useful Podman commands +``` +# list all images and their sizes +podman images --all + +# show podman disk usage +podman system df + +# remove all images +podman rmi --all --force + +# remove all stopped containers +podman container prune --force ``` diff --git a/uui-e2e-tests/scripts/cmd/cmdRunPw.ts b/uui-e2e-tests/scripts/cmd/cmdRunPw.ts index ac0abdacaa..1b0ef4b203 100644 --- a/uui-e2e-tests/scripts/cmd/cmdRunPw.ts +++ b/uui-e2e-tests/scripts/cmd/cmdRunPw.ts @@ -1,25 +1,17 @@ import { getCwd, spawnProcessSync, - readEnvParams, hasCliArg, getAllCliArgs, + readEnvParams, getAllCliArgs, } from '../cliUtils'; -import { CLI_ARGS, NPX_TASKS } from '../constants'; +import { NPX_TASKS } from '../constants'; const { isCi, isDocker } = readEnvParams(); runPlaywright(); function runPlaywright() { - const isShowPwReport = hasCliArg(CLI_ARGS.SHOW_REPORT); - - if (isCi || isDocker) { - if (isShowPwReport) { - throwUnsupportedEnvErr(); - } - } else { - if (!isShowPwReport) { - throwUnsupportedEnvErr(); - } + if (!isCi && !isDocker) { + throwUnsupportedEnvErr(); } spawnProcessSync({ diff --git a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts index 3179d22f8a..9a3627a1a4 100644 --- a/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts +++ b/uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts @@ -1,25 +1,42 @@ -import { generateDockerfile } from '../dockerTemplates/Dockerfile'; -import { generateDockerCompose } from '../dockerTemplates/docker-compose.yml'; -import { getCwd, spawnProcessSync, hasCliArg } from '../cliUtils'; -import { CLI_ARGS, YARN_TASKS } from '../constants'; +import { spawnProcessSync, hasCliArg } from '../cliUtils'; +import { CLI_ARGS, DOCKER_FILES, DOCKER_IMAGE_TAGS, YARN_TASKS } from '../constants'; +import { ip } from 'address'; main(); -export function main() { - createDockerFiles(); - runDockerCompose(); -} - -function runDockerCompose() { +function main() { + const updateSnapshots = hasCliArg(CLI_ARGS.PW_DOCKER_UPDATE_SNAPSHOTS); + const dockerFile = DOCKER_FILES.DOCKER_FILE; + const imageTag = DOCKER_IMAGE_TAGS.TEST; + spawnProcessSync({ + cmd: 'yarn', + args: [ + YARN_TASKS.DOCKER_CLI_BUILD, + '-t', + imageTag, + '-f', + dockerFile, + '.', + ], + cwd: process.cwd(), + }); spawnProcessSync({ cmd: 'yarn', - args: [YARN_TASKS.DOCKER], - cwd: getCwd({ isInsideMonorepo: false }), + args: [ + YARN_TASKS.DOCKER_CLI_RUN, + '-e', + 'UUI_IS_DOCKER=true', + '-e', + `UUI_APP_BASE_URL_FALLBACK=${getBaseUrlFallback()}`, + imageTag, + 'yarn', + updateSnapshots ? YARN_TASKS.TEST_E2E_UPDATE : YARN_TASKS.TEST_E2E, + ], + cwd: process.cwd(), }); } -function createDockerFiles() { - const updateSnapshots = hasCliArg(CLI_ARGS.PW_DOCKER_UPDATE); - generateDockerfile({ updateSnapshots }); - generateDockerCompose({ updateSnapshots }); +function getBaseUrlFallback() { + const currentMachineIpv4 = ip(); + return currentMachineIpv4 ? `http://${currentMachineIpv4}:3000` : ''; } diff --git a/uui-e2e-tests/scripts/constants.ts b/uui-e2e-tests/scripts/constants.ts index 704740f8f4..d00e876cb6 100644 --- a/uui-e2e-tests/scripts/constants.ts +++ b/uui-e2e-tests/scripts/constants.ts @@ -1,20 +1,18 @@ export const CLI_ARGS = { - PW_DOCKER_UPDATE: '--update', - SHOW_REPORT: 'show-report', + PW_DOCKER_UPDATE_SNAPSHOTS: '--update-snapshots', }; export const YARN_TASKS = { - DOCKER: 'docker', + DOCKER_CLI_BUILD: 'docker-cli-build', + DOCKER_CLI_RUN: 'docker-cli-run', TEST_E2E: 'test-e2e', TEST_E2E_UPDATE: 'test-e2e-update', }; export const NPX_TASKS = { PLAYWRIGHT: 'playwright', }; -export const DOCKER_IMAGE_NAMES = { - TEST: 'docker-e2e-test', - TEST_UPDATE: 'docker-e2e-test-update', +export const DOCKER_IMAGE_TAGS = { + TEST: 'uui-e2e-test', }; export const DOCKER_FILES = { - DOCKER_FILE: '.Dockerfile', - DOCKER_COMPOSE: '.docker-compose.yml', + DOCKER_FILE: 'test.Dockerfile', }; diff --git a/uui-e2e-tests/scripts/dockerTemplates/Dockerfile.ts b/uui-e2e-tests/scripts/dockerTemplates/Dockerfile.ts deleted file mode 100644 index 3a18957098..0000000000 --- a/uui-e2e-tests/scripts/dockerTemplates/Dockerfile.ts +++ /dev/null @@ -1,27 +0,0 @@ -import fs from 'node:fs'; -import path from 'node:path'; -import { DOCKER_FILES, YARN_TASKS } from '../constants'; - -const template = (params: { cmd: string }) => (` -FROM mcr.microsoft.com/playwright:v1.42.1-jammy - -WORKDIR /app - -COPY package.json ./ -COPY tsconfig.json ./ - -RUN yarn - -CMD [ ${params.cmd} ] -`); - -export function generateDockerfile(params: { updateSnapshots: boolean }) { - const { updateSnapshots } = params; - const cmd: string[] = ['yarn']; - cmd.push(updateSnapshots ? YARN_TASKS.TEST_E2E_UPDATE : YARN_TASKS.TEST_E2E); - const content = template({ - cmd: cmd.map((c) => `"${c}"`).join(', '), - }); - - fs.writeFileSync(path.resolve('./', DOCKER_FILES.DOCKER_FILE), content.trim()); -} diff --git a/uui-e2e-tests/scripts/dockerTemplates/docker-compose.yml.ts b/uui-e2e-tests/scripts/dockerTemplates/docker-compose.yml.ts deleted file mode 100644 index 2abb603df9..0000000000 --- a/uui-e2e-tests/scripts/dockerTemplates/docker-compose.yml.ts +++ /dev/null @@ -1,32 +0,0 @@ -import fs from 'node:fs'; -import path from 'node:path'; -import { DOCKER_FILES, DOCKER_IMAGE_NAMES } from '../constants'; -import { ip } from 'address'; - -const template = (params: { imageName: string, baseUrlFallback: string }) => (` -services: - ${params.imageName}: - environment: - - UUI_IS_DOCKER=true - - UUI_APP_BASE_URL_FALLBACK=${params.baseUrlFallback} - ipc: host - build: - context: . - dockerfile: ./.Dockerfile - network_mode: host - volumes: - - ./scripts:/app/scripts - - ./src:/app/src - - ./tests:/app/tests - - ./playwright.config.ts:/app/playwright.config.ts - - ./.env:/app/.env - - ./.env.local:/app/.env.local -`); - -export function generateDockerCompose(params: { updateSnapshots: boolean }) { - const imageName = params.updateSnapshots ? DOCKER_IMAGE_NAMES.TEST_UPDATE : DOCKER_IMAGE_NAMES.TEST; - const currentMachineIpv4 = ip(); - const baseUrlFallback = currentMachineIpv4 ? `http://${currentMachineIpv4}:3000` : ''; - const content = template({ imageName, baseUrlFallback }); - fs.writeFileSync(path.resolve('./', DOCKER_FILES.DOCKER_COMPOSE), content.trim()); -} diff --git a/uui-e2e-tests/src/constants.ts b/uui-e2e-tests/src/constants.ts index c8a82f114c..3a4a96a621 100644 --- a/uui-e2e-tests/src/constants.ts +++ b/uui-e2e-tests/src/constants.ts @@ -1,7 +1,7 @@ import { PlaywrightTestOptions } from '@playwright/test'; export const PREVIEW_URL = '/preview'; -export const PlayWriteInterfaceName = '_uui_playwrite_interface'; +export const PlayWrightInterfaceName = '_uui_playwright_interface'; /** * Keep in sync with app/src/documents/structureComponents.ts diff --git a/uui-e2e-tests/src/pages/previewPage.ts b/uui-e2e-tests/src/pages/previewPage.ts index 2f82c8525a..810702e78b 100644 --- a/uui-e2e-tests/src/pages/previewPage.ts +++ b/uui-e2e-tests/src/pages/previewPage.ts @@ -1,6 +1,6 @@ import type { Page, Locator } from '@playwright/test'; import { PreviewPageParams, TClip } from '../types'; -import { PlayWriteInterfaceName, PREVIEW_URL } from '../constants'; +import { PlayWrightInterfaceName, PREVIEW_URL } from '../constants'; export class PreviewPage { private locators: { @@ -32,7 +32,7 @@ export class PreviewPage { await this.page.evaluate((_params: string) => { const [p, i] = _params.split('[||||]'); (window as any)[i](p); - }, [jsonStringify(params), PlayWriteInterfaceName].join('[||||]')); + }, [jsonStringify(params), PlayWrightInterfaceName].join('[||||]')); await this.locators.regionContentNotBusy.waitFor(); } } diff --git a/uui-e2e-tests/test.Dockerfile b/uui-e2e-tests/test.Dockerfile new file mode 100644 index 0000000000..e8b191dae2 --- /dev/null +++ b/uui-e2e-tests/test.Dockerfile @@ -0,0 +1,11 @@ +FROM node:20 + +WORKDIR /app + +COPY package.json ./ +COPY tsconfig.json ./ + +RUN yarn +RUN npx playwright install --with-deps chromium webkit + +CMD [ "yarn", "" ]