Simplify docker setup

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;

app/src/preview/componentPreview/view/renderCaseView.tsx

@@ -85,10 +85,14 @@ export class RenderCaseView extends React.PureComponent<ISingleRenderCaseView, I
         try {
             propsStrObj = JSON.stringify(inputValues, undefined, 1);
             propsStrObjFormatted = Object.keys(inputValues).sort().reduce((acc, name, i) => {
-                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;
             }, '');

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]);
 }

uui-e2e-tests/.gitignore

@@ -1,3 +1 @@
 .report
-.Dockerfile
-.docker-compose.yml

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

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

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

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` : '';
 }

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',
 };

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

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();
     }
 }

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", "<placeholder>" ]