diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts index 3174d2666..a20557bc5 100644 --- a/e2e/playwright.config.ts +++ b/e2e/playwright.config.ts @@ -22,7 +22,7 @@ export default defineConfig({ /* Retries will always fail due to missing call to ./reset-all.sh */ retries: 0, /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, + workers: process.env.CI ? 6 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ diff --git a/e2e/tests/plugin-list-task_list.spec.ts b/e2e/tests/plugin-list-task_list.spec.ts index 19f85df00..3f55df17c 100644 --- 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 index aa4c64bb2..02bd8098b 100644 --- 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 index 034d80d3e..526a52c73 100644 --- 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` +const HideContentWrapper = styled.div` display: ${(props: { hidden: boolean }) => (props.hidden && 'none') || 'flex'} align-self: normal; width: 100%; ` +const Lazy = ({ visible, children }: PropsWithChildren) => { + const rendered = useRef(visible) + + if (visible && !rendered.current) { + rendered.current = true + } + + if (!rendered.current) return null + + return ( + + ) +} + 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 (
{viewSelectorItems.map((config: TItemData) => ( - + ))}
) diff --git a/packages/dm-core-plugins/src/view_selector/TabsPlugin.tsx b/packages/dm-core-plugins/src/view_selector/TabsPlugin.tsx index aeb6544e0..c9892598a 100644 --- 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 + return null } return ( diff --git a/packages/dm-core/src/hooks/useList.tsx b/packages/dm-core/src/hooks/useList.tsx index 6f7134a56..55a3c6acd 100644 --- a/packages/dm-core/src/hooks/useList.tsx +++ b/packages/dm-core/src/hooks/useList.tsx @@ -69,7 +69,6 @@ export function useList( .catch((error: AxiosError) => { setError(error.response?.data || { message: error.name, data: error }) }) - .finally(() => setLoading(false)) }, [dmssAPI, idReference]) useEffect(() => {