Browse Source

test(playwright): add test for icon change

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4630/head
Pranav C 2 years ago
parent
commit
3a72e4186c
  1. 1
      packages/nc-gui/components.d.ts
  2. 28
      packages/nc-gui/components/dashboard/TreeView.vue
  3. 4
      packages/nc-gui/components/general/EmojiIcons.vue
  4. 4
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
  5. 21
      tests/playwright/pages/Dashboard/TreeView.ts
  6. 7
      tests/playwright/tests/tableOperations.spec.ts

1
packages/nc-gui/components.d.ts vendored

@ -50,7 +50,6 @@ declare module '@vue/runtime-core' {
AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default'] AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default'] AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
APagination: typeof import('ant-design-vue/es')['Pagination'] APagination: typeof import('ant-design-vue/es')['Pagination']
APopover: typeof import('ant-design-vue/es')['Popover']
ARadio: typeof import('ant-design-vue/es')['Radio'] ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARate: typeof import('ant-design-vue/es')['Rate'] ARate: typeof import('ant-design-vue/es')['Rate']

28
packages/nc-gui/components/dashboard/TreeView.vue

@ -78,7 +78,6 @@ const initSortable = (el: Element) => {
if (!base_id) return if (!base_id) return
if (sortables[base_id]) sortables[base_id].destroy() if (sortables[base_id]) sortables[base_id].destroy()
Sortable.create(el as HTMLLIElement, { Sortable.create(el as HTMLLIElement, {
// handle: '.nc-drag-icon',
onEnd: async (evt) => { onEnd: async (evt) => {
const offset = tables.value.findIndex((table) => table.base_id === base_id) const offset = tables.value.findIndex((table) => table.base_id === base_id)
@ -565,16 +564,21 @@ const setIcon = (icon: string, table: TableType) => {
<template #title>{{ table.table_name }}</template> <template #title>{{ table.table_name }}</template>
<div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)"> <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`"> <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
<a-dropdown trigger="click" @click.stop destroy-popup-on-hide> <a-dropdown trigger="click" destroy-popup-on-hide @click.stop>
<div @click.stop> <div @click.stop>
<a-tooltip> <a-tooltip>
<span v-if="table.meta?.icon" :key="table.meta?.icon"> <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
<Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon> <Icon
:key="table.meta?.icon"
:data-testid="`nc-icon-${table.meta?.icon}`"
class="text-xl"
:icon="table.meta?.icon"
></Icon>
</span> </span>
<component <component
:is="icon(table)" :is="icon(table)"
v-else v-else
class="nc-view-icon w-5" class="nc-table-icon nc-view-icon w-5"
:class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }" :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
/> />
@ -585,20 +589,6 @@ const setIcon = (icon: string, table: TableType) => {
<GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" /> <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
</template> </template>
</a-dropdown> </a-dropdown>
<!--
<MdiDragVertical
v-if="isUIAllowed('treeview-drag-n-drop')"
:class="`nc-child-draggable-icon-${table.title}`"
class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
@click.stop.prevent
/>
<component
:is="icon(table)"
class="nc-view-icon text-xs"
:class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
/> -->
</div> </div>
<div class="nc-tbl-title flex-1"> <div class="nc-tbl-title flex-1">

4
packages/nc-gui/components/general/EmojiIcons.vue

@ -26,9 +26,9 @@ const selectIcon = (icon: string) => {
</script> </script>
<template> <template>
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start"> <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
<div @click.stop> <div @click.stop>
<input v-model="search" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" /> <input v-model="search" data-testid="nc-emoji-filter" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
</div> </div>
<div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull"> <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
<div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)"> <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">

4
packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@ -47,9 +47,9 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit"> <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
<a-tab-pane v-for="(tab, i) of tabs" :key="i"> <a-tab-pane v-for="(tab, i) of tabs" :key="i">
<template #tab> <template #tab>
<div class="flex items-center gap-2 max-w-[110px]"> <div class="flex items-center gap-2 max-w-[110px]" data-testid="nc-tab-title">
<div class="flex items-center"> <div class="flex items-center">
<Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" /> <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" :data-testid="`nc-tab-icon-${tab.meta?.icon}`"/>
<component :is="icon(tab)" v-else class="text-sm" /> <component :is="icon(tab)" v-else class="text-sm" />
</div> </div>

21
tests/playwright/pages/Dashboard/TreeView.ts

@ -129,6 +129,27 @@ export class TreeViewPage extends BasePage {
await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click(); await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click();
} }
async changeTableIcon({ title, icon }: { title: string; icon: string }) {
await this.get().locator(`.nc-project-tree-tbl-${title} .nc-table-icon`).click();
await this.rootPage.getByTestId('nc-emoji-filter').type(icon);
await this.rootPage.getByTestId('nc-emoji-container').locator(`.nc-emoji-item >> svg`).first().click();
await this.rootPage.getByTestId('nc-emoji-container').isHidden();
await expect(
this.get().locator(`.nc-project-tree-tbl-${title} [data-testid="nc-icon-emojione:${icon}"]`)
).toHaveCount(1);
}
async verifyTabIcon({ title, icon }: { title: string; icon: string }) {
await new Promise(resolve => setTimeout(resolve, 1000));
await expect(
this.rootPage.locator(
`[data-testid="nc-tab-title"]:has-text("${title}") [data-testid="nc-tab-icon-emojione:${icon}"]`
)
).toBeVisible();
}
// todo: Break this into smaller methods // todo: Break this into smaller methods
async validateRoleAccess(param: { role: string }) { async validateRoleAccess(param: { role: string }) {
// Add new table button // Add new table button

7
tests/playwright/tests/tableOperations.spec.ts

@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
settings = dashboard.settings; settings = dashboard.settings;
}); });
test('Create, and delete table, verify in audit tab, rename City table and reorder tables', async () => { test.only('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
await dashboard.treeView.createTable({ title: 'tablex' }); await dashboard.treeView.createTable({ title: 'tablex' });
await dashboard.treeView.verifyTable({ title: 'tablex' }); await dashboard.treeView.verifyTable({ title: 'tablex' });
@ -46,5 +46,10 @@ test.describe('Table Operations', () => {
destinationTable: 'Address', destinationTable: 'Address',
}); });
await dashboard.treeView.verifyTable({ title: 'Address', index: 0 }); await dashboard.treeView.verifyTable({ title: 'Address', index: 0 });
// verify table icon customization
await dashboard.treeView.openTable({ title: 'Address' });
await dashboard.treeView.changeTableIcon({ title: 'Address', icon: 'american-football' });
await dashboard.treeView.verifyTabIcon({ title: 'Address', icon: 'american-football' });
}); });
}); });

Loading…
Cancel
Save