test: make e2e stable

equinor · Nov 1, 2023 · d6258b7 · d6258b7
1 parent e9aa2ec
commit d6258b7
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 17 deletions.
diff --git a/.github/workflows/integration-tests.yaml b/.github/workflows/integration-tests.yaml
@@ -57,8 +57,8 @@ jobs:
         working-directory: ./
 
       - name: Start example application
-        run: pm2 start "yarn start:example --mode test" --name web --wait-ready --listen-timeout 10000 # wait for 10 seconds
-        working-directory: ./
+        run: pm2 start "yarn build --mode test && yarn serve" --name web --wait-ready --listen-timeout 10000 # wait for 10 seconds
+        working-directory: example/
 
       - name: Pull docker images
         run: docker-compose pull

diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -33,9 +33,6 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
     video: 'retain-on-failure',
-    launchOptions: {
-      slowMo: 500,
-    },
   },
 
   /* Configure projects for major browsers */

diff --git a/e2e/tests/plugin-list-task_list.spec.ts b/e2e/tests/plugin-list-task_list.spec.ts
@@ -26,6 +26,8 @@ async function reloadPage(page: Page) {
 }
 
 test('Add a new task', async ({ page }) => {
+  const lastTabPanel = page.getByRole('tabpanel').last()
+  await expect(lastTabPanel).toBeVisible()
   await page.getByRole('button', { name: 'Add item' }).click()
   await expect(page.getByText('1 - 4 of 4')).toBeVisible()
   await page.getByRole('button', { name: 'Save' }).click()
@@ -43,6 +45,7 @@ test('Add a new task', async ({ page }) => {
   await expect(page.getByRole('alert')).toHaveText(['Document updated'])
   await page.getByRole('button', { name: 'close', exact: true }).click()
   await reloadPage(page) //TODO: Remove when #153 is solved.
+  await expect(lastTabPanel).toBeVisible()
   await expect(page.getByText('Tax return', { exact: true })).toBeVisible()
   await page
     .getByRole('button', { name: 'Open item', exact: true })
@@ -62,10 +65,13 @@ test('Add a new task', async ({ page }) => {
 })
 
 test('Mark task as complete', async ({ page }) => {
+  const lastTabPanel = page.getByRole('tabpanel').last()
+  await expect(lastTabPanel).toBeVisible()
   await page
     .getByRole('button', { name: 'Open item', exact: true })
     .first()
     .click()
+  await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible()
   await expect(page.getByLabel('Task title:')).toHaveValue('Wash the car')
   await page.getByText('Mark task as complete').click()
   await page.getByRole('button', { name: 'Submit' }).click()
@@ -76,6 +82,7 @@ test('Mark task as complete', async ({ page }) => {
     .getByRole('button', { name: 'Open item', exact: true })
     .first()
     .click()
+  await expect(page.getByTestId('form-checkbox')).toBeVisible()
   await expect(page.getByTestId('form-checkbox')).toBeChecked()
   await page
     .getByRole('button', { name: 'Close item', exact: true })
@@ -84,6 +91,8 @@ test('Mark task as complete', async ({ page }) => {
 })
 
 test('Delete a task', async ({ page }) => {
+  const lastTabPanel = page.getByRole('tabpanel').last()
+  await expect(lastTabPanel).toBeVisible()
   await expect(
     page.getByRole('paragraph').getByText('Tax return')
   ).toBeVisible()
@@ -96,6 +105,7 @@ test('Delete a task', async ({ page }) => {
   await page.getByRole('button', { name: 'Save' }).click()
   await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled()
   await reloadPage(page) //TODO: Remove when #153 is solved.
+  await expect(lastTabPanel).toBeVisible()
   await expect(
     page.getByRole('paragraph').getByText('Wash the car')
   ).toBeVisible()

diff --git a/e2e/tests/plugin-table-car_list.spec.ts b/e2e/tests/plugin-table-car_list.spec.ts
@@ -7,6 +7,8 @@ test('Table car list example', async ({ page }) => {
     await page.getByRole('button', { name: 'table' }).click()
     await page.getByRole('button', { name: 'car_list' }).click()
     await page.getByRole('button', { name: 'CarList' }).click()
+    const lastTabPanel = page.getByRole('tabpanel').last()
+    await expect(lastTabPanel).toBeVisible()
   }
 
   await page.goto('http://localhost:3000/')

diff --git a/packages/dm-core-plugins/src/view_selector/Content.tsx b/packages/dm-core-plugins/src/view_selector/Content.tsx
@@ -4,15 +4,36 @@ import {
   ViewCreator,
 } from '@development-framework/dm-core'
 import * as React from 'react'
-import styled from 'styled-components'
 import { TItemData } from './types'
+import { PropsWithChildren, useRef } from 'react'
+import styled from 'styled-components'
+
+type LazyProps = {
+  visible: boolean
+}
 
-const HidableWrapper = styled.div<any>`
+const HideContentWrapper = styled.div<any>`
   display: ${(props: { hidden: boolean }) => (props.hidden && 'none') || 'flex'}
   align-self: normal;
   width: 100%;
 `
 
+const Lazy = ({ visible, children }: PropsWithChildren<LazyProps>) => {
+  const rendered = useRef(visible)
+
+  if (visible && !rendered.current) {
+    rendered.current = true
+  }
+
+  if (!rendered.current) return null
+
+  return (
+    <HideContentWrapper hidden={!visible} role="tabpanel">
+      {children}
+    </HideContentWrapper>
+  )
+}
+
 export const Content = (props: {
   type: string
   selectedViewId: string
@@ -24,14 +45,11 @@ export const Content = (props: {
 }): React.ReactElement => {
   const { selectedViewId, viewSelectorItems, setFormData, formData, onOpen } =
     props
+
   return (
     <div style={props.style}>
       {viewSelectorItems.map((config: TItemData) => (
-        <HidableWrapper
-          key={config.viewId}
-          hidden={config.viewId !== selectedViewId}
-          role="tabpanel"
-        >
+        <Lazy key={config.viewId} visible={selectedViewId == config.viewId}>
           <ViewCreator
             idReference={config.rootEntityId}
             viewConfig={config.viewConfig}
@@ -43,7 +61,7 @@ export const Content = (props: {
               })
             }}
           />
-        </HidableWrapper>
+        </Lazy>
       ))}
     </div>
   )

diff --git a/packages/dm-core-plugins/src/view_selector/TabsPlugin.tsx b/packages/dm-core-plugins/src/view_selector/TabsPlugin.tsx
@@ -1,4 +1,4 @@
-import { IUIPlugin, Loading } from '@development-framework/dm-core'
+import { IUIPlugin } from '@development-framework/dm-core'
 import { TViewSelectorConfig } from './types'
 import * as React from 'react'
 import { Tabs } from './Tabs'
@@ -7,7 +7,7 @@ import { useViewSelector } from './useViewSelector'
 
 export const TabsPlugin = (
   props: IUIPlugin & { config?: TViewSelectorConfig }
-): React.ReactElement => {
+): React.ReactElement | null => {
   const { idReference, config, type } = props
 
   const {
@@ -26,7 +26,7 @@ export const TabsPlugin = (
     throw new Error(JSON.stringify(error, null, 2))
   }
   if (isLoading || !viewSelectorItems.length || !selectedViewId) {
-    return <Loading />
+    return null
   }
 
   return (

diff --git a/packages/dm-core/src/hooks/useList.tsx b/packages/dm-core/src/hooks/useList.tsx
@@ -69,7 +69,6 @@ export function useList<T extends object>(
       .catch((error: AxiosError<ErrorResponse>) => {
         setError(error.response?.data || { message: error.name, data: error })
       })
-      .finally(() => setLoading(false))
   }, [dmssAPI, idReference])
 
   useEffect(() => {