diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue index b21c2d2d5c..8519599e32 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue @@ -45,9 +45,11 @@ const { copy } = useClipboard() const copyRecordUrl = () => { copy( - `${dashboardUrl?.value}#/${route.params.projectType}/${route.params.projectId}/${route.params.type}/${meta.value?.title}${ - props.view ? `/${props.view.title}` : '' - }?rowId=${primaryKey.value}`, + encodeURI( + `${dashboardUrl?.value}#/${route.params.projectType}/${route.params.projectId}/${route.params.type}/${meta.value?.title}${ + props.view ? `/${props.view.title}` : '' + }?rowId=${primaryKey.value}`, + ), ) message.success('Copied to clipboard') } diff --git a/tests/playwright/pages/Base.ts b/tests/playwright/pages/Base.ts index bea033f950..aced8bf162 100644 --- a/tests/playwright/pages/Base.ts +++ b/tests/playwright/pages/Base.ts @@ -78,4 +78,8 @@ export default abstract class BasePage { }); return data as any; } + + async getClipboardText() { + return await this.rootPage.evaluate(() => navigator.clipboard.readText()); + } } diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts index 291d5e34e4..22dc0bfe03 100644 --- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts +++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts @@ -20,6 +20,12 @@ export class ExpandedFormPage extends BasePage { return this.dashboard.get().locator(`.nc-drawer-expanded-form`); } + async getShareRowUrl() { + await this.copyUrlButton.click(); + await this.verifyToast({ message: 'Copied to clipboard' }); + return await this.getClipboardText(); + } + async gotoUsingUrlAndRowId({ rowId }: { rowId: string }) { const url = await this.dashboard.rootPage.url(); const expandedFormUrl = '/' + url.split('/').slice(3).join('/').split('?')[0] + `?rowId=${rowId}`; @@ -80,6 +86,7 @@ export class ExpandedFormPage extends BasePage { async close() { await this.rootPage.keyboard.press('Escape'); + await this.get().waitFor({ state: 'hidden' }); } async cancel() { diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts index c1496bdfa9..af1b792c9a 100644 --- a/tests/playwright/pages/Dashboard/Grid/index.ts +++ b/tests/playwright/pages/Dashboard/Grid/index.ts @@ -80,7 +80,7 @@ export class GridPage extends BasePage { uiAction: clickOnColumnHeaderToSave, requestUrlPathToMatch: 'api/v1/db/data/noco', httpMethodsToMatch: ['POST'], - responseJsonMatcher: resJson => resJson?.[columnHeader] === value, + responseJsonMatcher: resJson => resJson?.[columnHeader] === rowValue, }); } else { await this.rootPage.waitForTimeout(300); diff --git a/tests/playwright/playwright.config.ts b/tests/playwright/playwright.config.ts index 494b4dba1d..8fd59e91b5 100644 --- a/tests/playwright/playwright.config.ts +++ b/tests/playwright/playwright.config.ts @@ -48,6 +48,10 @@ const config: PlaywrightTestConfig = { name: 'chromium', use: { ...devices['Desktop Chrome'], + contextOptions: { + // chromium-specific permissions + permissions: ['clipboard-read', 'clipboard-write'], + }, }, }, diff --git a/tests/playwright/tests/expandedFormUrl.spec.ts b/tests/playwright/tests/expandedFormUrl.spec.ts index 10a4304c44..e8e9d61e8a 100644 --- a/tests/playwright/tests/expandedFormUrl.spec.ts +++ b/tests/playwright/tests/expandedFormUrl.spec.ts @@ -13,7 +13,40 @@ test.describe('Expanded form URL', () => { dashboard = new DashboardPage(page, context.project); }); - async function viewTest(viewType: string) { + async function viewTestTestTable(viewType: string) { + await dashboard.treeView.createTable({ + title: 'Test Table', + }); + await dashboard.grid.addNewRow({ index: 0 }); + + let viewObj: GridPage | GalleryPage = dashboard.grid; + if (viewType === 'grid') { + viewObj = dashboard.grid; + } else if (viewType === 'gallery') { + viewObj = dashboard.gallery; + } + + if (viewType === 'grid') { + await dashboard.viewSidebar.createGridView({ title: 'Test Expand' }); + } else if (viewType === 'gallery') { + await dashboard.viewSidebar.createGalleryView({ + title: 'Test Expand', + }); + } + + // expand row & verify URL + await viewObj.openExpandedRow({ index: 0 }); + const url = await dashboard.expandedForm.getShareRowUrl(); + await dashboard.expandedForm.close(); + await dashboard.rootPage.goto(url); + + await dashboard.expandedForm.verify({ + header: 'Test Table: Row 0', + url, + }); + } + + async function viewTestSakila(viewType: string) { // close 'Team & Auth' tab await dashboard.closeTab({ title: 'Team & Auth' }); await dashboard.treeView.openTable({ title: 'Country' }); @@ -90,10 +123,12 @@ test.describe('Expanded form URL', () => { } test('Grid', async () => { - await viewTest('grid'); + await viewTestSakila('grid'); + await viewTestTestTable('grid'); }); test('Gallery', async () => { - await viewTest('gallery'); + await viewTestSakila('gallery'); + await viewTestTestTable('gallery'); }); });