diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue index 45f8ae10a0..222231f29a 100644 --- a/packages/nc-gui/components/smartsheet/grid/Table.vue +++ b/packages/nc-gui/components/smartsheet/grid/Table.vue @@ -1737,6 +1737,7 @@ onKeyStroke('ArrowDown', onDown) " class="nc-base-menu-item" :disabled="isSystemColumn(fields[contextMenuTarget.col])" + data-testid="context-menu-item-clear" @click="clearCell(contextMenuTarget)" >
@@ -1750,6 +1751,7 @@ onKeyStroke('ArrowDown', onDown) v-else-if="contextMenuTarget && hasEditPermission" class="nc-base-menu-item" :disabled="isSystemColumn(fields[contextMenuTarget.col])" + data-testid="context-menu-item-clear" @click="clearSelectedRangeOfCells()" >
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts index 78c1e82a59..019b0d7f87 100644 --- a/tests/playwright/pages/Dashboard/Grid/index.ts +++ b/tests/playwright/pages/Dashboard/Grid/index.ts @@ -467,4 +467,9 @@ export class GridPage extends BasePage { // kludge: wait for paste to complete await this.rootPage.waitForTimeout(1000); } + + async clearWithMouse({ index, columnHeader }: CellProps) { + await this.cell.get({ index, columnHeader }).click({ button: 'right' }); + await this.get().page().getByTestId('context-menu-item-clear').click(); + } } diff --git a/tests/playwright/tests/db/columns/columnUserSelect.spec.ts b/tests/playwright/tests/db/columns/columnUserSelect.spec.ts index 1acae45c9f..40e98e21da 100644 --- a/tests/playwright/tests/db/columns/columnUserSelect.spec.ts +++ b/tests/playwright/tests/db/columns/columnUserSelect.spec.ts @@ -3,10 +3,18 @@ import { DashboardPage } from '../../../pages/Dashboard'; import { GridPage } from '../../../pages/Dashboard/Grid'; import setup, { unsetup } from '../../../setup'; import { TopbarPage } from '../../../pages/Dashboard/common/Topbar'; +import { ToolbarPage } from '../../../pages/Dashboard/common/Toolbar'; test.describe('User single select', () => { let dashboard: DashboardPage, grid: GridPage, topbar: TopbarPage; let context: any; + const users: string[] = [ + 'user@nocodb.com', + 'user-0@nocodb.com', + 'user-1@nocodb.com', + 'user-2@nocodb.com', + 'user-3@nocodb.com', + ]; test.beforeEach(async ({ page }) => { context = await setup({ page, isEmptyProject: false }); @@ -14,7 +22,7 @@ test.describe('User single select', () => { grid = dashboard.grid; topbar = dashboard.grid.topbar; - await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title }); + await dashboard.treeView.createTable({ title: 'Sheet1', baseTitle: context.base.title }); await grid.column.create({ title: 'User', type: 'User' }); @@ -26,33 +34,226 @@ test.describe('User single select', () => { }); test('Verify the default option count, select default value and verify', async () => { - await dashboard.grid.column.userOption.verifyDefaultValueOptionCount({ columnTitle: 'User', totalCount: 1 }); + await grid.column.userOption.verifyDefaultValueOptionCount({ columnTitle: 'User', totalCount: 5 }); - await dashboard.grid.column.userOption.selectDefaultValueOption({ + await grid.column.userOption.selectDefaultValueOption({ columnTitle: 'User', - option: 'user-0@nocodb.com', + option: users[0], multiSelect: false, }); - // Verify default value - await dashboard.grid.column.userOption.verifySelectedOptions({ + // Verify default value is set + await grid.column.userOption.verifySelectedOptions({ + columnHeader: 'User', + options: [users[0]], + }); + + // Add new row and verify default value is added in new cell + await grid.addNewRow({ index: 1, value: 'Row 1' }); + await grid.cell.userOption.verify({ + index: 1, columnHeader: 'User', - options: ['user-0@nocodb.com'], + option: users[0], + multiSelect: false, }); }); test('Rename column title and delete the column', async () => { - // Rename column title, refresh and verify - await dashboard.grid.column.openEdit({ title: 'User' }); - await dashboard.grid.column.fillTitle({ title: 'UserField' }); - await dashboard.grid.column.save({ + // Rename column title, reload page and verify + await grid.column.openEdit({ title: 'User' }); + await grid.column.fillTitle({ title: 'UserField' }); + await grid.column.save({ isUpdated: true, }); - await topbar.clickRefresh(); + + // reload page + await dashboard.rootPage.reload(); + await grid.column.verify({ title: 'UserField', isVisible: true }); // delete column and verify await grid.column.delete({ title: 'UserField' }); await grid.column.verify({ title: 'UserField', isVisible: false }); }); + + test('Cell Operation - edit, copy-paste and delete', async () => { + // set default user + await grid.column.userOption.selectDefaultValueOption({ + columnTitle: 'User', + option: users[0], + multiSelect: false, + }); + + await grid.addNewRow({ index: 1, value: 'Row 1' }); + await grid.addNewRow({ index: 2, value: 'Row 2' }); + await grid.addNewRow({ index: 3, value: 'Row 3' }); + await grid.addNewRow({ index: 4, value: 'Row 4' }); + await grid.addNewRow({ index: 5, value: 'Row 5' }); + + // Edit, refresh and verify + await grid.cell.userOption.select({ index: 0, columnHeader: 'User', option: users[1], multiSelect: false }); + await grid.cell.userOption.select({ index: 2, columnHeader: 'User', option: users[2], multiSelect: false }); + await grid.cell.userOption.select({ index: 4, columnHeader: 'User', option: users[3], multiSelect: false }); + + // refresh page + await topbar.clickRefresh(); + + for (let i = 0; i <= 4; i++) { + await grid.cell.userOption.verify({ + index: i, + columnHeader: 'User', + option: users[i], + multiSelect: false, + }); + } + + // Delete/clear cell, refresh and verify + // #1 Using `Delete` keyboard button + await grid.cell.click({ index: 0, columnHeader: 'User' }); + + // refresh + await topbar.clickRefresh(); + + // trigger delete button key + await dashboard.rootPage.keyboard.press('Delete'); + await grid.cell.userOption.verifyNoOptionsSelected({ index: 0, columnHeader: 'user' }); + + // #2 Using mouse click + await grid.cell.userOption.clear({ index: 1, columnHeader: 'User', multiSelect: false }); + + // refresh + await topbar.clickRefresh(); + + await grid.cell.userOption.verifyNoOptionsSelected({ index: 1, columnHeader: 'user' }); + + // #3 Using `Cell Context Menu` right click `Clear` option + await grid.clearWithMouse({ index: 2, columnHeader: 'User' }); + + // refresh + await topbar.clickRefresh(); + + await grid.cell.userOption.verifyNoOptionsSelected({ index: 2, columnHeader: 'user' }); + + // // Copy-paste + // // #1 Using keyboard + // await grid.cell.click({ index: 3, columnHeader: 'User' }); + // await dashboard.rootPage.keyboard.press('Shift+ArrowDown'); + // await dashboard.rootPage.keyboard.press('Shift+ArrowDown'); + + // await dashboard.rootPage.keyboard.press((await grid.isMacOs()) ? 'Meta+c' : 'Control+c'); + // await grid.cell.click({ index: 0, columnHeader: 'User' }); + // await dashboard.rootPage.keyboard.press((await grid.isMacOs()) ? 'Meta+v' : 'Control+v'); + + // // refresh + // await topbar.clickRefresh(); + + // let counter = 3; + // for (let i = 0; i <= 1; i++) { + // await grid.cell.userOption.verify({ + // index: i, + // columnHeader: 'User', + // option: users[counter], + // multiSelect: false, + // }); + // } + // }); + }); +}); + +test.describe('Single select - filter & sort', () => { + // Row values + // no values (row ❶) + // only Foo (row ❷) + // only Bar (row ❸) + // only Baz (row ❹) + + // Example filters: + // + // where tags contains any of [Foo, Bar] + // result: rows 2,3 + // where tags does not contain any of [Foo, Bar] + // result: rows 1,4 + + let dashboard: DashboardPage, grid: GridPage, toolbar: ToolbarPage; + let context: any; + + test.beforeEach(async ({ page }) => { + context = await setup({ page }); + dashboard = new DashboardPage(page, context.base); + toolbar = dashboard.grid.toolbar; + grid = dashboard.grid; + + await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title }); + + await grid.column.create({ title: 'SingleSelect', type: 'SingleSelect' }); + await grid.column.selectOption.addOptions({ + columnTitle: 'SingleSelect', + options: ['foo', 'bar', 'baz'], + }); + await grid.addNewRow({ index: 0, value: '1' }); + await grid.addNewRow({ index: 1, value: '2' }); + await grid.addNewRow({ index: 2, value: '3' }); + await grid.addNewRow({ index: 3, value: '4' }); + + await grid.cell.selectOption.select({ index: 1, columnHeader: 'SingleSelect', option: 'foo', multiSelect: false }); + await grid.cell.selectOption.select({ index: 2, columnHeader: 'SingleSelect', option: 'bar', multiSelect: false }); + await grid.cell.selectOption.select({ index: 3, columnHeader: 'SingleSelect', option: 'baz', multiSelect: false }); + }); + + test.afterEach(async () => { + await unsetup(context); + }); + + // define validateRowArray function + async function validateRowArray(value: string[]) { + const length = value.length; + for (let i = 0; i < length; i++) { + await dashboard.grid.cell.verify({ + index: i, + columnHeader: 'Title', + value: value[i], + }); + } + } + + async function verifyFilter(param: { opType: string; value?: string; result: string[] }) { + await toolbar.clickFilter(); + await toolbar.filter.add({ + title: 'SingleSelect', + operation: param.opType, + value: param.value, + locallySaved: false, + dataType: 'SingleSelect', + }); + await toolbar.clickFilter(); + + // verify filtered rows + await validateRowArray(param.result); + // Reset filter + await toolbar.filter.reset(); + } + + test('Select and clear options and rename options', async () => { + // fix me! single select filter value doesn't support selecting multiple options + // await verifyFilter({ opType: 'contains any of', value: 'foo,bar', result: ['2', '3'] }); + // await verifyFilter({ opType: 'does not contain any of', value: 'foo,bar', result: ['1', '4'] }); + + // Sort column + await toolbar.sort.add({ + title: 'SingleSelect', + ascending: true, + locallySaved: false, + }); + await validateRowArray(['1', '3', '4', '2']); + await toolbar.sort.reset(); + + // sort descending & validate + await toolbar.sort.add({ + title: 'SingleSelect', + ascending: false, + locallySaved: false, + }); + await validateRowArray(['2', '4', '3', '1']); + await toolbar.sort.reset(); + }); });