Browse Source

fix: Fixed issues with Expanded form and its tests

pull/6499/head
Muhammed Mustafa 1 year ago
parent
commit
d9f6245c39
  1. 51
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  2. 32
      tests/playwright/pages/Dashboard/ExpandedForm/index.ts
  3. 3
      tests/playwright/pages/Dashboard/index.ts
  4. 2
      tests/playwright/tests/db/features/expandedFormUrl.spec.ts

51
packages/nc-gui/components/smartsheet/expanded-form/index.vue

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

32
tests/playwright/pages/Dashboard/ExpandedForm/index.ts

@ -141,6 +141,10 @@ export class ExpandedFormPage extends BasePage {
async escape() {
await this.rootPage.keyboard.press('Escape');
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() {
@ -165,29 +169,27 @@ export class ExpandedFormPage extends BasePage {
// expect(await this.btn_moreActions.count()).toBe(1);
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') {
const menuText = ['Reload', 'Duplicate record', 'Delete record'];
expect(await getTextExcludeIconText(menuItems.nth(i))).toBe(menuText[i]);
} else {
const menuText = ['Reload', 'Close'];
expect(await menuItems.nth(i).innerText()).toBe(menuText[i]);
}
if (role === 'owner' || role === 'editor' || role === 'creator') {
await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
await expect(this.rootPage.getByTestId('nc-expanded-form-duplicate')).toBeVisible();
await expect(this.rootPage.getByTestId('nc-expanded-form-delete')).toBeVisible();
} else {
await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
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') {
expect(await this.btn_save.count()).toBe(1);
await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(1);
} else {
expect(await this.btn_save.count()).toBe(0);
await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(0);
}
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 {
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

3
tests/playwright/pages/Dashboard/index.ts

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

2
tests/playwright/tests/db/features/expandedFormUrl.spec.ts

@ -42,7 +42,7 @@ test.describe('Expanded form URL', () => {
// expand row & verify URL
// New Expanded Modal don't have functionality to copy URL. Hence gettting URL from root page
await viewObj.openExpandedRow({ index: 0 });
const url = await dashboard.rootPage.url();
await dashboard.expandedForm.escape();

Loading…
Cancel
Save