From 2d0443851eb2940ae67ed40a15c45786f7d16ca1 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Fri, 31 May 2024 14:26:26 +0200 Subject: [PATCH] Expand the test to include sorting and filtering. --- .../tests/snapshot/spec/table-editor.spec.ts | 105 ++++++++++-------- 1 file changed, 58 insertions(+), 47 deletions(-) diff --git a/playwright-tests/tests/snapshot/spec/table-editor.spec.ts b/playwright-tests/tests/snapshot/spec/table-editor.spec.ts index 758486f69fa..f7e94879173 100644 --- a/playwright-tests/tests/snapshot/spec/table-editor.spec.ts +++ b/playwright-tests/tests/snapshot/spec/table-editor.spec.ts @@ -18,47 +18,11 @@ test.describe('Table Editor page', () => { await tableResponsePromise }) - test('should create a column and insert a row', async ({ page }, testInfo) => { - // given - const tableName = `${kebabCase(testInfo.title).slice(0, 24)}-${testInfo.retry}` - - //when - // The page has been loaded with the table data, we can now interact with the page - await page.getByRole('button', { name: 'New table', exact: true }).click() - await page - .locator('.col-span-8 > div > .relative > .peer\\/input') - .first() - .waitFor({ state: 'visible' }) - await page.locator('.col-span-8 > div > .relative > .peer\\/input').first().click() - await page.locator('.col-span-8 > div > .relative > .peer\\/input').first().fill(tableName) - await page.getByRole('button', { name: 'Add column' }).click() - await page.getByRole('textbox', { name: 'column_name' }).click() - await page.getByRole('textbox', { name: 'column_name' }).fill('textColumn') - await page.getByRole('button', { name: '---' }).click() - await page.getByText('textVariable-length character').click() - await page.getByRole('button', { name: 'Save' }).waitFor({ state: 'visible' }) - await page.getByRole('button', { name: 'Save' }).click() - await dismissToast(page) - - await page.getByRole('button', { name: tableName }).click() - await page.getByTestId('table-editor-insert-new-row').click() - await page.getByText('Insert a new row into').click() - await page.getByPlaceholder('NULL').click() - await page.getByPlaceholder('NULL').fill('some text') - await page.getByTestId('action-bar-save-row').click() - await dismissToast(page) - - // then - await expect(page.getByRole('grid')).toContainText('some text') - }) - - test('should create a new table with one nullable field and one default field', async ({ + test('should create a new table, view its definition, add new rows, sort and filter', async ({ page, }, testInfo) => { - // given - const tableName = `${kebabCase(testInfo.title).slice(0, 24)}-${testInfo.retry}` + const tableName = `${kebabCase(testInfo.title).slice(0, 24)}-${testInfo.retry}-${Math.floor(Math.random() * 100)}` - //when // The page has been loaded with the table data, we can now interact with the page await page.getByRole('button', { name: 'New table', exact: true }).click() await page @@ -76,7 +40,6 @@ test.describe('Table Editor page', () => { .click({ force: true }) // add a new column and add default value - // await page.getByRole('button', { name: 'Add column' }).scrollIntoViewIfNeeded() await page.getByRole('button', { name: 'Add column' }).click() await page.getByRole('textbox', { name: 'column_name' }).click() await page.getByRole('textbox', { name: 'column_name' }).fill('defaultValueColumn') @@ -89,18 +52,66 @@ test.describe('Table Editor page', () => { await page.getByRole('button', { name: 'Save' }).click() await dismissToast(page) - // then + // view its definition await page.getByText('definition').click() await expect(page.locator('div.view-lines')).toContainText( `CREATE TABLE public.${tableName} ( id bigint GENERATED BY DEFAULT AS IDENTITY , created_at timestamp with time zone NULL DEFAULT now(), \"defaultValueColumn\" smallint NULL DEFAULT '2'::smallint, CONSTRAINT ${tableName}_pkey PRIMARY KEY (id)) TABLESPACE pg_default;` ) + + // add a new row + await page.getByRole('button', { name: tableName }).click() + await page.getByTestId('table-editor-insert-new-row').click() + await page.getByText('Insert a new row into').click() + await page.getByPlaceholder("Default: '2'::smallint").click() + await page.getByPlaceholder("Default: '2'::smallint").fill('100') + await page.getByTestId('action-bar-save-row').click() + await dismissToast(page) + + // add a second row + await page.getByRole('button', { name: tableName }).click() + await page.getByTestId('table-editor-insert-new-row').click() + await page.getByText('Insert a new row into').click() + await page.getByPlaceholder("Default: '2'::smallint").click() + // await page.getByPlaceholder("Default: '2'::smallint").fill('100') + await page.getByTestId('action-bar-save-row').click() + await dismissToast(page) + + await expect(page.getByRole('grid')).toContainText('2') + await expect(page.getByRole('grid')).toContainText('100') + + // sort by the a column + await page.getByRole('button', { name: 'Sort' }).click() + await page.getByRole('button', { name: 'Pick a column to sort by' }).nth(1).click() + await page.getByLabel('Pick a column to sort by').getByText('defaultValueColumn').click() + await page.getByRole('button', { name: 'Apply sorting' }).click() + // click away to close the sorting dialog + await page + .locator('div') + .filter({ hasText: /^Table Editor$/ }) + .click() + // expect the row to be sorted by defaultValueColumn. They're inserted in the order 100, 2 + await expect(page.locator('div.rdg-row:nth-child(2)')).toContainText('2') + await expect(page.locator('div.rdg-row:nth-child(3)')).toContainText('100') + // remove the sorting + await page.getByRole('button', { name: 'Sorted by 1 rule' }).click() + await page.getByRole('dialog').getByRole('button').nth(1).click() + + // filter by a column + await page.getByRole('button', { name: 'Filter' }).click() + await page.getByRole('button', { name: 'Add filter' }).click() + await page.getByRole('button', { name: 'id' }).click() + await page.getByLabel('id').getByText('defaultValueColumn').click() + await page.getByPlaceholder('Enter a value').click() + await page.getByPlaceholder('Enter a value').fill('2') + await page.getByRole('button', { name: 'Apply filter' }).click() + // click away to close the filter dialog + await page + .locator('div') + .filter({ hasText: /^Table Editor$/ }) + .click() + await expect(page.getByRole('grid')).toContainText('2') + await expect(page.getByRole('grid')).not.toContainText('100') }) - test.fixme('should insert a row into a new table', () => {}) - test.fixme('should filter a table by a column', () => {}) - test.fixme('should sort a table by a column', () => {}) - test.fixme('should add a new column to a table', () => {}) - - test.fixme('should view a table definition', async ({ page }, testInfo) => {}) - test.fixme('should check the auth schema', () => {}) + test('should check the auth schema', () => {}) })