Enable playwright tests

Karakatiza666 · Karakatiza666 · commit 05efe36bc2ed · 2024-07-08T10:41:06.000+03:00
Signed-off-by: George &lt;bulakh.96@gmail.com&gt;
diff --git a/.arg b/.arg
@@ -1,2 +1,2 @@
 # File used by earthly
-PLAYWRIGHT_SNAPSHOTS_COMMIT=6d7a9e13a28a4a95a92ef5ca3acba864ed399ee5
+PLAYWRIGHT_SNAPSHOTS_COMMIT=7e91647f7b85cfc472c61271d6115c566851b76c
diff --git a/.gitignore b/.gitignore
@@ -59,10 +59,14 @@ gh-pages
 # Playwright
 playwright-artifacts/
 playwright-snapshots/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
+test-results/
+playwright-report/
+test-results-ct/
+playwright-report-ct/
+test-results-e2e/
+playwright-report-e2e/
+blob-report/
+playwright/.cache/
 
 # Local cargo configuration.
 /.cargo/config.toml
diff --git a/Earthfile b/Earthfile
@@ -512,7 +512,7 @@ ui-playwright-container:
     # Install zip to prepare test artifacts for export
     RUN apt-get install -y zip
 
-ui-playwright-tests:
+ui-playwright-tests-e2e:
     FROM +ui-playwright-container
     ENV FELDERA_VERSION=latest
 
@@ -521,15 +521,31 @@ ui-playwright-tests:
                     --compose ../docker-compose.yml \
                     --service pipeline-manager
             # We zip artifacts regardless of test success or error, and then we complete the command preserving test's exit_code
-            RUN if yarn playwright test; then exit_code=0; else exit_code=$?; fi \
+            RUN sleep 10 && if yarn playwright test -c playwright-e2e.config.ts; then exit_code=0; else exit_code=$?; fi \
                 && cd /dbsp \
-                && zip -r playwright-report.zip playwright-report \
-                && zip -r test-results.zip test-results \
+                && zip -r playwright-report-e2e.zip playwright-report-e2e \
+                && zip -r test-results-e2e.zip test-results-e2e \
                 && exit $exit_code
         END
     FINALLY
-        SAVE ARTIFACT --if-exists /dbsp/playwright-report.zip AS LOCAL ./playwright-artifacts/
-        SAVE ARTIFACT --if-exists /dbsp/test-results.zip      AS LOCAL ./playwright-artifacts/
+        SAVE ARTIFACT --if-exists /dbsp/playwright-report-e2e.zip AS LOCAL ./playwright-artifacts/
+        SAVE ARTIFACT --if-exists /dbsp/test-results-e2e.zip      AS LOCAL ./playwright-artifacts/
+    END
+
+ui-playwright-tests-ct:
+    FROM +ui-playwright-container
+    ENV FELDERA_VERSION=latest
+
+    TRY
+        # We zip artifacts regardless of test success or error, and then we complete the command preserving test's exit_code
+        RUN if yarn playwright test -c playwright-ct.config.ts; then exit_code=0; else exit_code=$?; fi \
+        && cd /dbsp \
+        && zip -r playwright-report-ct.zip playwright-report-ct \
+        && zip -r test-results-ct.zip test-results-ct \
+        && exit $exit_code
+    FINALLY
+        SAVE ARTIFACT --if-exists /dbsp/playwright-report-ct.zip AS LOCAL ./playwright-artifacts/
+        SAVE ARTIFACT --if-exists /dbsp/test-results-ct.zip      AS LOCAL ./playwright-artifacts/
     END
 
 benchmark:
@@ -573,7 +589,8 @@ all-tests:
     BUILD +openapi-checker
     BUILD +test-sql
     BUILD +integration-tests
-    # BUILD +ui-playwright-tests
+    BUILD +ui-playwright-tests-ct
+    BUILD +ui-playwright-tests-e2e
     BUILD +test-docker-compose
     # BUILD +test-docker-compose-stable
     BUILD +test-debezium-mysql
diff --git a/docs/contributors/ui-testing.md b/docs/contributors/ui-testing.md
@@ -1,19 +1,22 @@
 # Web Console testing
 
-Regression UI testing is performed in the form of end-to-end integration tests using Playwright framework.
-
-### e2e testing with Playwright
-Existing Playwright tests are executed during CI
-and can be run manually within provided devcontainer environment.
+Regression UI testing is performed using Playwright framework.
+The repository contains end-to-end (e2e) tests that are to be executed against a clean Feldera instance,
+and standalone unit (ct) tests that include UI component tests and TypeScript function tests.
+Existing Playwright tests are executed during CI and can be run manually within provided devcontainer environment.
+Add environment variable `CI=true` when executing tests in CI setting.
 
-### Running tests
+### Running e2e tests
 
-Run `yarn test`
-to execute all tests on all supported platforms in background, or run `yarn test:ui` to open a UI to run tests interactively.
-Add environment variable `CI=true` when executing tests in CI setting.
+Run `yarn test-e2e` to execute all e2e tests on all supported platforms in background, or run `yarn test-e2e-ui` to open a UI to run tests interactively.
 Tests should be executed against a running Pipeline Manager instance.
 As an artificial limitation of scope, currently no services for Kafka, Debezium, Snowflake and other similar connector types are available for tests in the CI, so only HTTP connectors and API is available along with the UI itself.
 
+### Running ct tests
+
+Run `yarn test-ct` to execute all ct tests on all supported platforms in background, or run `yarn test-ct-ui` to open a UI to run tests interactively.
+Unit tests do not need Feldera instance to run because they run against individual ESM modules compiled on-demand for the test.
+
 ### Contributing tests
 
 The tests directory is `feldera/web-console/tests`.
@@ -25,15 +28,19 @@ Environment variable `PLAYWRIGHT_SNAPSHOTS_COMMIT` in `feldera/.arg` specifies t
 When committing new tests or updating screenshots for existing tests, `PLAYWRIGHT_SNAPSHOTS_COMMIT` needs to be updated as well.
 When testing locally, you need to manually clone `playwright-snapshots` and checkout the correct commit hash, e.g.:
 
+```
+cd web-console && yarn test-prepare
+```
+OR
 ```
 cd web-console
 npm i -g degit
-degit feldera/playwright-snapshots#2adf778
+degit feldera/playwright-snapshots#{commit_hash}
 ```
 OR
 ```
 cd web-console
-git clone https://github.com/feldera/playwright-snapshots && git checkout 2adf778
+git clone https://github.com/feldera/playwright-snapshots && git checkout {commit_hash}
 ```
 
 
diff --git a/web-console/.github/workflows/playwright.yml b/web-console/.github/workflows/playwright.yml
@@ -18,7 +18,7 @@ jobs:
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps
     - name: Run Playwright tests
-      run: yarn playwright test
+      run: yarn playwright test -c playwright-ct.config.ts && yarn playwright test -c playwright-e2e.config.ts
     - uses: actions/upload-artifact@v4
       if: always()
       with:
diff --git a/web-console/package.json b/web-console/package.json
@@ -24,8 +24,8 @@
     "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "generate-openapi": "openapi --input ../openapi.json --request ./src/lib/services/manager/customRequest.ts --output ./src/lib/services/manager && yarn format && patch -p2 < openapi-fixes.patch",
     "build-openapi": "cd .. && cargo run --bin pipeline-manager -- --dump-openapi",
-    "test": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test",
-    "test-ui": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test --ui-host=0.0.0.0",
+    "test-e2e": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test -c playwright-e2e.config.ts",
+    "test-e2e-ui": "PLAYWRIGHT_API_ORIGIN=http://localhost:8080/ PLAYWRIGHT_APP_ORIGIN=http://localhost:8080/ DISPLAY= yarn playwright test -c playwright-e2e.config.ts --ui-host=0.0.0.0",
     "test-ct": "DISPLAY= yarn playwright test -c playwright-ct.config.ts",
     "test-ct-ui": "DISPLAY= yarn playwright test -c playwright-ct.config.ts --ui-host=0.0.0.0",
     "test-report": "yarn playwright show-report",
diff --git a/web-console/playwright-ct.config.ts b/web-console/playwright-ct.config.ts
@@ -11,8 +11,9 @@ export default defineConfig({
   testDir: './src/lib',
   /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
   snapshotDir: './playwright-snapshots/ct',
+  outputDir: 'test-results-ct',
   /* Maximum time one test can run for. */
-  timeout: 5 * 1000,
+  timeout: 10 * 1000,
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -22,7 +23,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['html', { outputFolder: 'playwright-report-ct' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
diff --git a/web-console/playwright-e2e.config.ts b/web-console/playwright-e2e.config.ts
@@ -13,7 +13,10 @@ export const appOrigin = process.env.PLAYWRIGHT_APP_ORIGIN!
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: './tests/e2e',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: 'playwright-snapshots/e2e',
+  outputDir: 'test-results-e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -23,8 +26,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : 1 /* undefined */,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  snapshotDir: 'playwright-snapshots',
+  reporter: [['html', { outputFolder: 'playwright-report-e2e' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -39,7 +41,7 @@ export default defineConfig({
   projects: [
     {
       name: 'setup',
-      testMatch: /global\.setup\.ts/,
+      testMatch: /global\.setup-e2e\.ts/,
     },
     {
       name: 'chromium',
diff --git a/web-console/src/app/(spa)/(root)/(authenticated)/(app)/streaming/builder/page.tsx b/web-console/src/app/(spa)/(root)/(authenticated)/(app)/streaming/builder/page.tsx
@@ -303,7 +303,12 @@ const PipelineBuilderPage = ({
                 </Box>
               )}
               {pipeline.name && (
-                <Button sx={{ flex: 'none' }} onClick={() => setShow(true)} variant='outlined'>
+                <Button
+                  sx={{ flex: 'none' }}
+                  onClick={() => setShow(true)}
+                  variant='outlined'
+                  data-testid='button-configure-resources'
+                >
                   Configure resources
                 </Button>
               )}
diff --git a/web-console/src/lib/components/common/JSONEditor.tsx b/web-console/src/lib/components/common/JSONEditor.tsx
@@ -139,8 +139,11 @@ export function JSONEditor<T>(props: {
       defaultLanguage='yaml'
       options={{
         ...isMonacoEditorDisabled(props.disabled),
+        overviewRulerLanes: 0,
+        hideCursorInOverviewRuler: true,
+        overviewRulerBorder: false,
         scrollbar: {
-          vertical: 'hidden'
+          vertical: 'visible'
         }
       }}
       value={props.valueToText(props.value)}
diff --git a/web-console/src/lib/components/connectors/dialogs/DeltaLakeInputConnector.spec.tsx b/web-console/src/lib/components/connectors/dialogs/DeltaLakeInputConnector.spec.tsx
@@ -10,7 +10,7 @@ import { DeltaLakeInputConnectorDialog } from './DeltaLakeInputConnector'
 test.use({ viewport: { width: 1000, height: 800 } })
 
 test('DeltaLake input creation', async ({ mount, page }) => {
-  test.setTimeout(20000)
+  test.setTimeout(40000)
   let config: any = null
   await mount(
     <Layout>
diff --git a/web-console/src/lib/components/layouts/analytics/editor.tsx b/web-console/src/lib/components/layouts/analytics/editor.tsx
@@ -295,7 +295,15 @@ export const ProgramEditorImpl = ({
           wrapperProps={{
             'data-testid': 'box-program-code-wrapper'
           }}
-          options={isMonacoEditorDisabled(status === 'isLoading')}
+          options={{
+            ...isMonacoEditorDisabled(status === 'isLoading'),
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            scrollbar: {
+              vertical: 'visible'
+            }
+          }}
         />
       </CardContent>
       <Divider sx={{ m: '0 !important' }} />
diff --git a/web-console/src/lib/components/streaming/management/PipelineResourcesDialog.tsx b/web-console/src/lib/components/streaming/management/PipelineResourcesDialog.tsx
@@ -245,7 +245,12 @@ export const PipelineResourcesForm = (props: { disabled?: boolean }) => {
           <Grid item xs={12} sm={4} alignSelf={'start'}>
             <Box sx={{ display: 'flex', flexDirection: 'column', justifyItems: 'start', height: '100%' }}>
               <Label disabled={props.disabled}>Storage (spill to disk)</Label>
-              <SwitchElement name='storage' label='' sx={{ mb: 'auto' }}></SwitchElement>
+              <SwitchElement
+                name='storage'
+                label=''
+                sx={{ mb: 'auto' }}
+                switchProps={{ inputProps: { 'data-testid': 'input-enable-storage' } as any }}
+              ></SwitchElement>
             </Box>
           </Grid>
           <Grid item xs={12} sm={4} alignSelf={'start'}>
@@ -311,7 +316,7 @@ export const PipelineResourcesForm = (props: { disabled?: boolean }) => {
         <Typography color='gray' sx={{ pl: 8 }}>
           For running pipelines, changes only take effect upon restart.
         </Typography>
-        <Button type={'submit'} disabled={props.disabled} variant='contained'>
+        <Button type={'submit'} disabled={props.disabled} variant='contained' data-testid='button-apply'>
           Apply
         </Button>
       </DialogActions>
diff --git a/web-console/src/lib/components/streaming/management/PipelineResourcesThumb.tsx b/web-console/src/lib/components/streaming/management/PipelineResourcesThumb.tsx
@@ -14,7 +14,7 @@ export const PipelineResourcesThumb = (props: { pipelineName: string }) => {
   }
   const res = configQuery.data.resources
   return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }} data-testid='box-resources-thumb'>
       <Box sx={{ whiteSpace: 'nowrap' }}>{configQuery.data.workers} workers |&nbsp;</Box>
       <Box sx={{ whiteSpace: 'nowrap' }}>
         CPU: {printRange(res?.cpu_cores_min, res?.cpu_cores_max, 'cores', 'default')} |&nbsp;
diff --git a/web-console/src/lib/functions/navigation/vertical.tsx b/web-console/src/lib/functions/navigation/vertical.tsx
@@ -86,7 +86,7 @@ const navigation = (props: { showSettings: boolean }): VerticalNavItemsType => {
       openInNewTab: true,
       testid: 'button-vertical-nav-slack'
     }
-  ].flat() as VerticalNavItemsType
+  ].flat(2) as VerticalNavItemsType
 }
 
 export default navigation
diff --git a/web-console/tests/e2e/demoAccrual.spec.ts b/web-console/tests/e2e/demoAccrual.spec.ts
@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant'
 import { faker } from '@faker-js/faker'
 import { expect, test } from '@playwright/test'
 
-import { apiOrigin, appOrigin } from '../../playwright.config'
+import { apiOrigin, appOrigin } from '../../playwright-e2e.config'
 import { deletePipeline, deleteProgram } from '../util'
 import demoAccrualSql from './demoAccrual.sql'
 
@@ -18,6 +18,7 @@ test('Accrual demo test', async ({ page, request }) => {
     await page.getByTestId('button-vertical-nav-sql-programs').click()
     await page.getByTestId('button-add-sql-program').first().click()
     await page.getByTestId('input-program-name').fill(programName)
+    await page.getByTestId('box-save-saved').waitFor()
     await page.getByTestId('box-program-code-wrapper').getByRole('textbox').waitFor({ state: 'attached' })
     await page.getByTestId('box-program-code-wrapper').getByRole('textbox').fill(demoAccrualSql)
     await page.getByTestId('box-program-code-wrapper').getByRole('textbox').blur()
@@ -35,6 +36,19 @@ test('Accrual demo test', async ({ page, request }) => {
     await page.getByTestId('box-builder-program-options').getByRole('option', { name: programName }).click()
     await page.getByTestId('box-save-saved').waitFor()
 
+    // Ensure storage is disabled
+    await page.getByTestId('button-configure-resources').click()
+    if (await page.getByTestId('input-enable-storage').inputValue() === 'false') {
+      // Double switch to force `false` value from an undefined state
+    await page.waitForTimeout(200)
+      await page.getByTestId('input-enable-storage').click()
+    }
+    await page.waitForTimeout(200)
+    await page.getByTestId('input-enable-storage').click()
+    await page.waitForTimeout(200)
+    await expect(page).toHaveScreenshot('2-1.png')
+    await page.getByTestId('button-apply').click()
+
     await page.getByTestId('button-breadcrumb-pipelines').click()
     await page.getByTestId(`box-pipeline-actions-${pipelineName}`).waitFor()
     await page.getByTestId(`box-pipeline-actions-${pipelineName}`).getByTestId('button-edit').click()
@@ -45,6 +59,7 @@ test('Accrual demo test', async ({ page, request }) => {
   })
 
   await test.step('Start the pipeline', async () => {
+    await page.getByTestId('box-resources-thumb').waitFor()
     await page.getByTestId('button-breadcrumb-pipelines').click()
     await page.getByTestId(`box-pipeline-actions-${pipelineName}`).waitFor()
     await expect(page).toHaveScreenshot('3-1-compiling-program-binary.png')
@@ -199,8 +214,9 @@ test('Accrual demo test', async ({ page, request }) => {
       await page.getByTestId('box-relation-options').getByTestId(`button-option-relation-${relation}`).click()
       await page.getByTestId('button-expand-relations').hover() // Prevent the cursor causing flakes by tooltip popups
       await page.getByTestId('box-relation-options').waitFor({ state: 'hidden' })
-      await page.getByTestId('box-relation-row').first().waitFor()
-      await page.waitForTimeout(50)
+      await page.getByTestId('box-relation-row').nth(2).waitFor()
+      await page.waitForLoadState('domcontentloaded')
+      await page.waitForTimeout(1000)
       await expect(page).toHaveScreenshot(`5-1-relation ${relation}.png`)
     }
   })
@@ -249,4 +265,4 @@ const inBatches = async <R>(
     result.push(...data)
   }
   return result
-}
+}
diff --git a/web-console/tests/e2e/entityRename.spec.ts b/web-console/tests/e2e/entityRename.spec.ts
diff --git a/web-console/tests/e2e/felderaBasicsTutorial.spec.ts b/web-console/tests/e2e/felderaBasicsTutorial.spec.ts
diff --git a/web-console/tests/e2e/global.setup-e2e.ts b/web-console/tests/e2e/global.setup-e2e.ts

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`# File used by earthly`
`2`		`-PLAYWRIGHT_SNAPSHOTS_COMMIT=6d7a9e13a28a4a95a92ef5ca3acba864ed399ee5`
	`2`	`+PLAYWRIGHT_SNAPSHOTS_COMMIT=7e91647f7b85cfc472c61271d6115c566851b76c`