github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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
3ec9de4214
commit
3a72e4186c
6 changed files with 40 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

28
packages/nc-gui/components/dashboard/TreeView.vue
Unescape View File

@ -78,7 +78,6 @@ const initSortable = (el: Element) => {
if (!base_id) return
if (sortables[base_id]) sortables[base_id].destroy()
Sortable.create(el as HTMLLIElement, {
// handle: '.nc-drag-icon',
onEnd: async (evt) => {
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>
<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}`">
<a-dropdown trigger="click" @click.stop destroy-popup-on-hide>
<a-dropdown trigger="click" destroy-popup-on-hide @click.stop>
<div @click.stop>
<a-tooltip>
<span v-if="table.meta?.icon" :key="table.meta?.icon">
<Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon>
<span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
<Icon
:key="table.meta?.icon"
:data-testid="`nc-icon-${table.meta?.icon}`"
class="text-xl"
:icon="table.meta?.icon"
></Icon>
</span>
<component
:is="icon(table)"
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') }"
/>
@ -585,20 +589,6 @@ const setIcon = (icon: string, table: TableType) => {
<GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
</template>
</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 class="nc-tbl-title flex-1">

4
packages/nc-gui/components/general/EmojiIcons.vue
Unescape View File

@ -26,9 +26,9 @@ const selectIcon = (icon: string) => {
</script>
<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>
<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 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)">

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

@ -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-tab-pane v-for="(tab, i) of tabs" :key="i">
<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">
<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" />
</div>

21
tests/playwright/pages/Dashboard/TreeView.ts
Unescape View File

@ -129,6 +129,27 @@ export class TreeViewPage extends BasePage {
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
async validateRoleAccess(param: { role: string }) {
// Add new table button

7
tests/playwright/tests/tableOperations.spec.ts
Unescape View File

@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
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.verifyTable({ title: 'tablex' });
@ -46,5 +46,10 @@ test.describe('Table Operations', () => {
destinationTable: 'Address',
});
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' });
});
});

Write Preview
Loading…
Cancel
Save