github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: Fixed issues with Expanded form and its tests

pull/6499/head
Muhammed Mustafa 1 year ago
parent
142bb9b88c
commit
d9f6245c39
4 changed files with 53 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  2. 28
      tests/playwright/pages/Dashboard/ExpandedForm/index.ts
  3. 3
      tests/playwright/pages/Dashboard/index.ts

45
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -325,14 +325,15 @@ const onConfirmDeleteRowClick = async () => {
showDeleteRowModal.value = false showDeleteRowModal.value = false
await deleteRowById(primaryKey.value) await deleteRowById(primaryKey.value)
message.success('Row deleted') message.success('Row deleted')
if (!props.lastRow) { // if (!props.lastRow) {
await onNext() // await onNext()
} else if (!props.firstRow) { // } else if (!props.firstRow) {
emits('prev') // emits('prev')
} else { // } else {
// }
reloadTrigger.trigger()
onClose() onClose()
} }
}
watch( watch(
state, state,
@ -398,7 +399,7 @@ export default {
<template #overlay> <template #overlay>
<NcMenu> <NcMenu>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()"> <NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center"> <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center" data-testid="nc-expanded-form-reload">
<component :is="iconMap.reload" class="cursor-pointer" /> <component :is="iconMap.reload" class="cursor-pointer" />
{{ $t('general.reload') }} {{ $t('general.reload') }}
</div> </div>
@ -408,25 +409,34 @@ export default {
class="text-gray-700" class="text-gray-700"
@click="!isNew ? onDuplicateRow() : () => {}" @click="!isNew ? onDuplicateRow() : () => {}"
> >
<div v-e="['c:row-expand:duplicate']" class="flex gap-2 items-center"> <div
v-e="['c:row-expand:duplicate']"
data-testid="nc-expanded-form-duplicate"
class="flex gap-2 items-center"
>
<component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" /> <component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" />
Duplicate record Duplicate record
</div> </div>
</NcMenuItem> </NcMenuItem>
<NcDivider /> <NcDivider v-if="isUIAllowed('dataEdit') && !isNew" />
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew" v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']" v-e="['c:row-expand:delete']"
class="!text-red-500" class="!text-red-500"
@click="!isNew && onDeleteRowClick()" @click="!isNew && onDeleteRowClick()"
> >
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" /> <component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" />
Delete record Delete record
</NcMenuItem> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>
</NcDropdown> </NcDropdown>
<NcButton type="secondary" class="nc-expand-form-close-btn w-10" @click="onClose"> <NcButton
type="secondary"
class="nc-expand-form-close-btn w-10"
data-testid="nc-expanded-form-close"
@click="onClose"
>
<GeneralIcon icon="close" class="text-md text-gray-700" /> <GeneralIcon icon="close" class="text-md text-gray-700" />
</NcButton> </NcButton>
</div> </div>
@ -542,7 +552,7 @@ export default {
<template #overlay> <template #overlay>
<NcMenu> <NcMenu>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()"> <NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center"> <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center" data-testid="nc-expanded-form-reload">
<component :is="iconMap.reload" class="cursor-pointer" /> <component :is="iconMap.reload" class="cursor-pointer" />
{{ $t('general.reload') }} {{ $t('general.reload') }}
</div> </div>
@ -554,8 +564,10 @@ export default {
class="!text-red-500" class="!text-red-500"
@click="!isNew && onDeleteRowClick()" @click="!isNew && onDeleteRowClick()"
> >
<div data-testid="nc-expanded-form-delete">
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" /> <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
Delete record Delete record
</div>
</NcMenuItem> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>
@ -566,12 +578,19 @@ export default {
v-if="isMobileMode" v-if="isMobileMode"
type="secondary" type="secondary"
size="medium" size="medium"
data-testid="nc-expanded-form-save"
class="nc-expand-form-save-btn !xs:(text-base)" class="nc-expand-form-save-btn !xs:(text-base)"
@click="onClose" @click="onClose"
> >
<div class="px-1">Close</div> <div class="px-1">Close</div>
</NcButton> </NcButton>
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn !xs:(text-base)" @click="save"> <NcButton
data-testid="nc-expanded-form-save"
type="primary"
size="medium"
class="nc-expand-form-save-btn !xs:(text-base)"
@click="save"
>
<div class="xs:px-1">Save</div> <div class="xs:px-1">Save</div>
</NcButton> </NcButton>
</div> </div>

28
tests/playwright/pages/Dashboard/ExpandedForm/index.ts
Unescape View File

@ -141,6 +141,10 @@ export class ExpandedFormPage extends BasePage {
async escape() { async escape() {
await this.rootPage.keyboard.press('Escape'); await this.rootPage.keyboard.press('Escape');
await this.get().locator('.nc-drawer-expanded-form').waitFor({ state: 'hidden' }); await this.get().locator('.nc-drawer-expanded-form').waitFor({ state: 'hidden' });
await this.rootPage.waitForLoadState('networkidle');
await this.rootPage.waitForLoadState('domcontentloaded');
await this.rootPage.waitForTimeout(500);
} }
async close() { async close() {
@ -165,29 +169,27 @@ export class ExpandedFormPage extends BasePage {
// expect(await this.btn_moreActions.count()).toBe(1); // expect(await this.btn_moreActions.count()).toBe(1);
await this.btn_moreActions.click(); await this.btn_moreActions.click();
const menu = this.rootPage.locator('.ant-dropdown:visible');
await menu.waitFor({ state: 'visible' });
const menuItems = menu.locator('.ant-dropdown-menu-item');
for (let i = 0; i < (await menuItems.count()); i++) {
if (role === 'owner' || role === 'editor' || role === 'creator') { if (role === 'owner' || role === 'editor' || role === 'creator') {
const menuText = ['Reload', 'Duplicate record', 'Delete record']; await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
expect(await getTextExcludeIconText(menuItems.nth(i))).toBe(menuText[i]); await expect(this.rootPage.getByTestId('nc-expanded-form-duplicate')).toBeVisible();
await expect(this.rootPage.getByTestId('nc-expanded-form-delete')).toBeVisible();
} else { } else {
const menuText = ['Reload', 'Close']; await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
expect(await menuItems.nth(i).innerText()).toBe(menuText[i]); await expect(this.rootPage.getByTestId('nc-expanded-form-duplicate')).toHaveCount(0);
} await expect(this.rootPage.getByTestId('nc-expanded-form-delete')).toHaveCount(0);
} }
if (role === 'owner' || role === 'editor' || role === 'creator') { if (role === 'owner' || role === 'editor' || role === 'creator') {
expect(await this.btn_save.count()).toBe(1); await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(1);
} else { } else {
expect(await this.btn_save.count()).toBe(0); await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(0);
} }
if (role === 'viewer') { if (role === 'viewer') {
expect(await this.get().locator('.nc-comments-drawer').count()).toBe(0); await expect(this.get().locator('.nc-comments-drawer')).toHaveCount(0);
} else { } else {
expect(await this.get().locator('.nc-comments-drawer').count()).toBe(1); await expect(this.get().locator('.nc-comments-drawer')).toHaveCount(1);
} }
// press escape to close the expanded form // press escape to close the expanded form

3
tests/playwright/pages/Dashboard/index.ts
Unescape View File

@ -192,9 +192,6 @@ export class DashboardPage extends BasePage {
await this.rootPage.getByTestId('nc-sidebar-user-logout').waitFor({ state: 'visible' }); await this.rootPage.getByTestId('nc-sidebar-user-logout').waitFor({ state: 'visible' });
await this.sidebar.userMenu.clickLogout(); await this.sidebar.userMenu.clickLogout();
// TODO: Remove this
await this.rootPage.reload();
await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor(); await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
await new Promise(resolve => setTimeout(resolve, 150)); await new Promise(resolve => setTimeout(resolve, 150));
} }

Write Preview
Loading…
Cancel
Save