Simplify docker setup

uui-e2e-tests/.env.local

@@ -1,3 +1,5 @@
-# Leave it empty unless you need to change the default behavior.
-# The default URL is auto generated using next pattern: http://<current_machine_ip>:3000
-UUI_APP_BASE_URL=
+# The URL of UUI web site. It can be either local or external.
+# If the {{HOST_NAME}} placeholder is specified, then it is replaced by the real IP address of the host machine
+# (it is needed for docker containers to be able to access server on the host machine)
+#
+UUI_APP_BASE_URL=http://{{HOST_NAME}}:3000

uui-e2e-tests/package.json

@@ -9,7 +9,7 @@
     "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",
+    "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.ci:/app/.env.ci  -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-cli install --with-deps chromium webkit",

uui-e2e-tests/playwright.config.ts

@@ -21,7 +21,7 @@ const testMatch = `${parentDir}tests/*.e2e.ts`;
 const outputDir = `${parentDir}tests/.report/results`;
 const outputFolder = `${parentDir}tests/.report/report`;
 const snapshotPathTemplate = '{testFileDir}/__screenshots__/{projectName}/{arg}{ext}';
-export const stylePath = `${parentDir}tests/screenshot.css`;
+export const stylePath = `${parentDir}src/fixtures/screenshot.css`;
 
 export default defineConfig({
     timeout: 50000,

uui-e2e-tests/scripts/cliUtils.ts

@@ -4,11 +4,11 @@ import path from 'node:path';
 import spawn from 'cross-spawn';
 
 export function readEnvParams() {
-    const { UUI_IS_DOCKER, CI, UUI_APP_BASE_URL_FALLBACK } = process.env;
+    const { UUI_IS_DOCKER, CI, UUI_DOCKER_HOST_MACHINE_IP } = process.env;
     return {
         isDocker: UUI_IS_DOCKER === 'true',
         isCi: !!CI,
-        UUI_APP_BASE_URL_FALLBACK,
+        UUI_DOCKER_HOST_MACHINE_IP,
     };
 }
 

uui-e2e-tests/scripts/cmd/cmdRunPwDocker.ts

@@ -1,6 +1,6 @@
 import { spawnProcessSync, hasCliArg } from '../cliUtils';
 import { CLI_ARGS, DOCKER_FILES, DOCKER_IMAGE_TAGS, YARN_TASKS } from '../constants';
-import { ip } from 'address';
+import { currentMachineIpv4 } from '../ipUtils';
 
 main();
 
@@ -27,16 +27,11 @@ function main() {
             '-e',
             'UUI_IS_DOCKER=true',
             '-e',
-            `UUI_APP_BASE_URL_FALLBACK=${getBaseUrlFallback()}`,
+            `UUI_DOCKER_HOST_MACHINE_IP=${currentMachineIpv4}`,
             imageTag,
             'yarn',
             updateSnapshots ? YARN_TASKS.TEST_E2E_UPDATE : YARN_TASKS.TEST_E2E,
         ],
         cwd: process.cwd(),
     });
 }
-
-function getBaseUrlFallback() {
-    const currentMachineIpv4 = ip();
-    return currentMachineIpv4 ? `http://${currentMachineIpv4}:3000` : '';
-}

uui-e2e-tests/scripts/envFileUtils.ts

@@ -2,9 +2,9 @@ import dotenv from 'dotenv';
 import path from 'node:path';
 import { readEnvParams } from './cliUtils';
 
-const { isCi, UUI_APP_BASE_URL_FALLBACK } = readEnvParams();
+const { isCi, UUI_DOCKER_HOST_MACHINE_IP } = readEnvParams();
 
-const envFileName = isCi ? '.env' : '.env.local';
+const envFileName = isCi ? '.env.ci' : '.env.local';
 
 type TEnvParams = { UUI_APP_BASE_URL: string };
 
@@ -14,13 +14,13 @@ export function readEnvFile(): TEnvParams {
         processEnv,
         path: path.resolve(__dirname, '..', envFileName),
     });
-
-    if (!processEnv.UUI_APP_BASE_URL) {
-        if (UUI_APP_BASE_URL_FALLBACK) {
-            processEnv.UUI_APP_BASE_URL = UUI_APP_BASE_URL_FALLBACK;
-        } else {
-            throw new Error(`UUI_APP_BASE_URL must be defined in ${envFileName}`);
+    if (processEnv.UUI_APP_BASE_URL) {
+        const hostIp = UUI_DOCKER_HOST_MACHINE_IP;
+        if (hostIp) {
+            processEnv.UUI_APP_BASE_URL = processEnv.UUI_APP_BASE_URL.replace('{{HOST_NAME}}', hostIp);
         }
+    } else {
+        throw new Error(`UUI_APP_BASE_URL must be defined in ${envFileName}`);
     }
     return processEnv;
 }

uui-e2e-tests/scripts/ipUtils.ts

@@ -0,0 +1,3 @@
+import { ip } from 'address';
+
+export const currentMachineIpv4 = ip();

uui-e2e-tests/src/constants.ts

@@ -3,89 +3,6 @@ import { PlaywrightTestOptions } from '@playwright/test';
 export const PREVIEW_URL = '/preview';
 export const PlayWrightInterfaceName = '_uui_playwright_interface';
 
-/**
- * Keep in sync with app/src/documents/structureComponents.ts
- */
-export enum TComponentId {
-    accordion= 'accordion',
-    adaptivePanel= 'adaptivePanel',
-    advancedTables= 'advancedTables',
-    alert= 'alert',
-    anchor= 'anchor',
-    avatar= 'avatar',
-    avatarStack= 'avatarStack',
-    badge= 'badge',
-    blocker= 'blocker',
-    button= 'button',
-    checkbox= 'checkbox',
-    checkboxGroup= 'checkboxGroup',
-    controlGroup= 'controlGroup',
-    countIndicator= 'countIndicator',
-    datePicker= 'datePicker',
-    dropdown= 'dropdown',
-    dropdownContainer= 'dropdownContainer',
-    dropdownMenu = 'dropdownMenu',
-    editableTables= 'editableTables',
-    fileUpload= 'fileUpload',
-    filtersPanel= 'filtersPanel',
-    flexCell= 'flexCell',
-    flexItems= 'flexItems',
-    flexRow= 'flexRow',
-    flexSpacer= 'flexSpacer',
-    form= 'form',
-    iconButton= 'iconButton',
-    iconContainer= 'iconContainer',
-    labeledInput= 'labeledInput',
-    linkButton= 'linkButton',
-    mainMenu= 'mainMenu',
-    modals= 'modals',
-    multiSwitch= 'multiSwitch',
-    notificationCard= 'notificationCard',
-    numericInput= 'numericInput',
-    paginator= 'paginator',
-    panel= 'panel',
-    pickerInput= 'pickerInput',
-    PickerList= 'PickerList',
-    pickerModal= 'pickerModal',
-    presetsPanel= 'presetsPanel',
-    progressBar= 'progressBar',
-    radioGroup= 'radioGroup',
-    radioInput= 'radioInput',
-    rangeDatePicker= 'rangeDatePicker',
-    rating= 'rating',
-    richTextEditor= 'richTextEditor',
-    richTextView= 'richTextView',
-    rteOverview= 'rteOverview',
-    rteSerializers= 'rteSerializers',
-    scrollSpy= 'scrollSpy',
-    searchInput= 'searchInput',
-    slider= 'slider',
-    sliderRating= 'sliderRating',
-    spinner= 'spinner',
-    statusIndicator= 'statusIndicator',
-    'switch' = 'switch',
-    tabButton= 'tabButton',
-    tables= 'tables',
-    tablesOverview= 'tablesOverview',
-    tag= 'tag',
-    text= 'text',
-    textArea= 'textArea',
-    textInput= 'textInput',
-    textPlaceholder= 'textPlaceholder',
-    timePicker= 'timePicker',
-    tooltip= 'tooltip',
-    useTableState= 'useTableState',
-    verticalTabButton= 'verticalTabButton',
-    virtualList= 'virtualList'
-}
-
-/**
- * Keep list of previews in sync with corresponding *.doc.tsx files
- */
-export type TPreviewIdByComponentId = {
-    [TComponentId.badge]: ('Colors' | 'Sizes with icon' | 'Sizes without icon')[],
-};
-
 /*
  */
 export const SHARED_DEVICE_CFG: Record<string, Partial<PlaywrightTestOptions>> = {

uui-e2e-tests/src/data/testData.ts

@@ -0,0 +1,82 @@
+/**
+ * Keep in sync with app/src/documents/structureComponents.ts
+ */
+export enum TComponentId {
+    accordion= 'accordion',
+    adaptivePanel= 'adaptivePanel',
+    advancedTables= 'advancedTables',
+    alert= 'alert',
+    anchor= 'anchor',
+    avatar= 'avatar',
+    avatarStack= 'avatarStack',
+    badge= 'badge',
+    blocker= 'blocker',
+    button= 'button',
+    checkbox= 'checkbox',
+    checkboxGroup= 'checkboxGroup',
+    controlGroup= 'controlGroup',
+    countIndicator= 'countIndicator',
+    datePicker= 'datePicker',
+    dropdown= 'dropdown',
+    dropdownContainer= 'dropdownContainer',
+    dropdownMenu = 'dropdownMenu',
+    editableTables= 'editableTables',
+    fileUpload= 'fileUpload',
+    filtersPanel= 'filtersPanel',
+    flexCell= 'flexCell',
+    flexItems= 'flexItems',
+    flexRow= 'flexRow',
+    flexSpacer= 'flexSpacer',
+    form= 'form',
+    iconButton= 'iconButton',
+    iconContainer= 'iconContainer',
+    labeledInput= 'labeledInput',
+    linkButton= 'linkButton',
+    mainMenu= 'mainMenu',
+    modals= 'modals',
+    multiSwitch= 'multiSwitch',
+    notificationCard= 'notificationCard',
+    numericInput= 'numericInput',
+    paginator= 'paginator',
+    panel= 'panel',
+    pickerInput= 'pickerInput',
+    PickerList= 'PickerList',
+    pickerModal= 'pickerModal',
+    presetsPanel= 'presetsPanel',
+    progressBar= 'progressBar',
+    radioGroup= 'radioGroup',
+    radioInput= 'radioInput',
+    rangeDatePicker= 'rangeDatePicker',
+    rating= 'rating',
+    richTextEditor= 'richTextEditor',
+    richTextView= 'richTextView',
+    rteOverview= 'rteOverview',
+    rteSerializers= 'rteSerializers',
+    scrollSpy= 'scrollSpy',
+    searchInput= 'searchInput',
+    slider= 'slider',
+    sliderRating= 'sliderRating',
+    spinner= 'spinner',
+    statusIndicator= 'statusIndicator',
+    'switch' = 'switch',
+    tabButton= 'tabButton',
+    tables= 'tables',
+    tablesOverview= 'tablesOverview',
+    tag= 'tag',
+    text= 'text',
+    textArea= 'textArea',
+    textInput= 'textInput',
+    textPlaceholder= 'textPlaceholder',
+    timePicker= 'timePicker',
+    tooltip= 'tooltip',
+    useTableState= 'useTableState',
+    verticalTabButton= 'verticalTabButton',
+    virtualList= 'virtualList'
+}
+
+/**
+ * Keep list of previews in sync with corresponding *.doc.tsx files
+ */
+export type TPreviewIdByComponentId = {
+    [TComponentId.badge]: ('Colors' | 'Sizes with icon' | 'Sizes without icon')[],
+};

uui-e2e-tests/src/index.ts

@@ -1,2 +1,3 @@
 export { TestBuilder } from './utils/testBuilder';
 export { TTheme } from './types';
+export { TComponentId } from './data/testData';

uui-e2e-tests/src/types.ts

@@ -1,5 +1,5 @@
-import { TPreviewIdByComponentId, TComponentId } from './constants';
 import type { PreviewPage } from './pages/previewPage';
+import { TComponentId, TPreviewIdByComponentId } from './data/testData';
 
 export type TClip = { x: number, y: number, width: number, height: number };
 

uui-e2e-tests/src/utils/testBuilder.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '../fixtures';
 import { PreviewPageParams, ScreenshotTestParamsSingle, TMatrix, TTheme } from '../types';
-import { TPreviewIdByComponentId, TComponentId } from '../constants';
+import { TComponentId, TPreviewIdByComponentId } from '../data/testData';
 
 type TCtx = {
     seenTestNames: Set<string>
@@ -99,12 +99,15 @@ function createUniqueTestName(params: { builderParams: ScreenshotTestParamsSingl
     return [
         runId,
         componentId,
-        (isSkin ? 'skin' : 'notSkin'),
-        theme,
         previewId,
-    ].filter((i) => !!i).map((i) => capitalize(i)).join(' | ');
+        theme,
+        (isSkin ? 'skin' : 'notSkin'),
+    ].filter((i) => !!i).map((i) => normalizeNameToken(i)).join(' | ');
 }
 
+function normalizeNameToken(s: string) {
+    return s.split(/[_\s]/).map((i) => `${capitalize(i)}`).join('');
+}
 function capitalize(s: string) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }

uui-e2e-tests/tests/screenshot.e2e.ts

@@ -1,5 +1,4 @@
-import { TestBuilder } from '../src';
-import { TComponentId } from '../src/constants';
+import { TestBuilder, TComponentId } from '../src';
 
 const { badge } = TComponentId;