mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
63 changed files with 2432 additions and 353 deletions
@ -0,0 +1,180 @@
|
||||
import type { Ref } from 'vue' |
||||
import rfdc from 'rfdc' |
||||
import type { ProjectType, TableType, ViewType } from 'nocodb-sdk' |
||||
import { createSharedComposable, ref, useRouter } from '#imports' |
||||
import type { UndoRedoAction } from '~/lib' |
||||
|
||||
export const useUndoRedo = createSharedComposable(() => { |
||||
const clone = rfdc() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const route = $(router.currentRoute) |
||||
|
||||
// keys: projectType | projectId | type | title | viewTitle
|
||||
const scope = computed<{ key: string; param: string }[]>(() => { |
||||
const tempScope: { key: string; param: string }[] = [{ key: 'root', param: 'root' }] |
||||
for (const [key, param] of Object.entries(route.params)) { |
||||
if (Array.isArray(param)) { |
||||
tempScope.push({ key, param: param.join(',') }) |
||||
} else { |
||||
tempScope.push({ key, param }) |
||||
} |
||||
} |
||||
|
||||
return tempScope |
||||
}) |
||||
|
||||
const isSameScope = (sc: { key: string; param: string }[]) => { |
||||
return sc.every((s) => { |
||||
return scope.value.some( |
||||
// viewTitle is optional for default view
|
||||
(s2) => |
||||
(s.key === 'viewTitle' && s2.key === 'viewTitle' && s2.param === '') || (s.key === s2.key && s.param === s2.param), |
||||
) |
||||
}) |
||||
} |
||||
|
||||
const undoQueue: Ref<UndoRedoAction[]> = ref([]) |
||||
|
||||
const redoQueue: Ref<UndoRedoAction[]> = ref([]) |
||||
|
||||
const addUndo = (action: UndoRedoAction, fromRedo = false) => { |
||||
// remove all redo actions that are in the same scope
|
||||
if (!fromRedo) redoQueue.value = redoQueue.value.filter((a) => !isSameScope(a.scope || [])) |
||||
undoQueue.value.push(action) |
||||
} |
||||
|
||||
const addRedo = (action: UndoRedoAction) => { |
||||
redoQueue.value.push(action) |
||||
} |
||||
|
||||
const undo = async () => { |
||||
let actionIndex = -1 |
||||
for (let i = undoQueue.value.length - 1; i >= 0; i--) { |
||||
const elScope = undoQueue.value[i].scope || [{ key: 'root', param: 'root' }] |
||||
if (isSameScope(elScope)) { |
||||
actionIndex = i |
||||
break |
||||
} |
||||
} |
||||
|
||||
if (actionIndex === -1) return |
||||
|
||||
const action = undoQueue.value.splice(actionIndex, 1)[0] |
||||
if (action) { |
||||
try { |
||||
await action.undo.fn.apply(action, action.undo.args) |
||||
addRedo(action) |
||||
} catch (e) { |
||||
message.warn('Error while undoing action, it is skipped.') |
||||
} |
||||
} |
||||
} |
||||
|
||||
const redo = async () => { |
||||
let actionIndex = -1 |
||||
for (let i = redoQueue.value.length - 1; i >= 0; i--) { |
||||
const elScope = redoQueue.value[i].scope || [{ key: 'root', param: 'root' }] |
||||
if (isSameScope(elScope)) { |
||||
actionIndex = i |
||||
break |
||||
} |
||||
} |
||||
|
||||
if (actionIndex === -1) return |
||||
|
||||
const action = redoQueue.value.splice(actionIndex, 1)[0] |
||||
if (action) { |
||||
try { |
||||
await action.redo.fn.apply(action, action.redo.args) |
||||
addUndo(action, true) |
||||
} catch (e) { |
||||
message.warn('Error while redoing action, it is skipped.') |
||||
} |
||||
} |
||||
} |
||||
|
||||
const defineRootScope = () => { |
||||
return [{ key: 'root', param: 'root' }] |
||||
} |
||||
|
||||
const defineProjectScope = (param: { project?: ProjectType; model?: TableType; view?: ViewType; project_id?: string }) => { |
||||
if (param.project) { |
||||
return [{ key: 'projectId', param: param.project.id! }] |
||||
} else if (param.model) { |
||||
return [{ key: 'projectId', param: param.model.project_id! }] |
||||
} else if (param.view) { |
||||
return [{ key: 'projectId', param: param.view.project_id! }] |
||||
} else { |
||||
return [{ key: 'projectId', param: param.project_id! }] |
||||
} |
||||
} |
||||
|
||||
const defineModelScope = (param: { model?: TableType; view?: ViewType; project_id?: string; model_id?: string }) => { |
||||
if (param.model) { |
||||
return [ |
||||
{ key: 'projectId', param: param.model.project_id! }, |
||||
{ key: 'title', param: param.model.id! }, |
||||
] |
||||
} else if (param.view) { |
||||
return [ |
||||
{ key: 'projectId', param: param.view.project_id! }, |
||||
{ key: 'title', param: param.view.fk_model_id! }, |
||||
] |
||||
} else { |
||||
return [ |
||||
{ key: 'projectId', param: param.project_id! }, |
||||
{ key: 'title', param: param.model_id! }, |
||||
] |
||||
} |
||||
} |
||||
|
||||
const defineViewScope = (param: { view?: ViewType; project_id?: string; model_id?: string; title?: string }) => { |
||||
if (param.view) { |
||||
return [ |
||||
{ key: 'projectId', param: param.view.project_id! }, |
||||
{ key: 'title', param: param.view.fk_model_id! }, |
||||
{ key: 'viewTitle', param: param.view.title! }, |
||||
] |
||||
} else { |
||||
return [ |
||||
{ key: 'projectId', param: param.project_id! }, |
||||
{ key: 'title', param: param.model_id! }, |
||||
{ key: 'viewTitle', param: param.title! }, |
||||
] |
||||
} |
||||
} |
||||
|
||||
useEventListener(document, 'keydown', async (e: KeyboardEvent) => { |
||||
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey |
||||
if (cmdOrCtrl && !e.altKey) { |
||||
switch (e.keyCode) { |
||||
case 90: { |
||||
e.preventDefault() |
||||
// CMD + z and CMD + shift + z
|
||||
if (!e.shiftKey) { |
||||
if (undoQueue.value.length) { |
||||
undo() |
||||
} |
||||
} else { |
||||
if (redoQueue.value.length) { |
||||
redo() |
||||
} |
||||
} |
||||
break |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
|
||||
return { |
||||
addUndo, |
||||
undo, |
||||
clone, |
||||
defineRootScope, |
||||
defineProjectScope, |
||||
defineModelScope, |
||||
defineViewScope, |
||||
} |
||||
}) |
||||
@ -1 +0,0 @@
|
||||
declare module 'just-clone' |
||||
@ -0,0 +1,684 @@
|
||||
import { expect, Page, test } from '@playwright/test'; |
||||
import { DashboardPage } from '../pages/Dashboard'; |
||||
import setup from '../setup'; |
||||
import { Api, UITypes } from 'nocodb-sdk'; |
||||
import { rowMixedValue } from '../setup/xcdb-records'; |
||||
import { GridPage } from '../pages/Dashboard/Grid'; |
||||
import { ToolbarPage } from '../pages/Dashboard/common/Toolbar'; |
||||
|
||||
let dashboard: DashboardPage, |
||||
grid: GridPage, |
||||
toolbar: ToolbarPage, |
||||
context: any, |
||||
api: Api<any>, |
||||
records: Record<string, any>, |
||||
table: any, |
||||
cityTable: any, |
||||
countryTable: any; |
||||
|
||||
const validateResponse = false; |
||||
|
||||
/** |
||||
This change provides undo/redo on multiple actions over UI. |
||||
|
||||
Scope Actions |
||||
------------------------------ |
||||
Row Create, Update, Delete |
||||
LTAR Link, Unlink |
||||
Fields Show/hide, Reorder |
||||
Sort Add, Update, Delete |
||||
Filters Add, Update, Delete (Excluding Filter Groups) |
||||
Row Height Update |
||||
Column width Update |
||||
View Rename |
||||
Table Rename |
||||
|
||||
**/ |
||||
async function undo({ page }: { page: Page }) { |
||||
const isMac = await grid.isMacOs(); |
||||
|
||||
if (validateResponse) { |
||||
await dashboard.grid.waitForResponse({ |
||||
uiAction: () => page.keyboard.press(isMac ? 'Meta+z' : 'Control+z'), |
||||
httpMethodsToMatch: ['GET'], |
||||
requestUrlPathToMatch: `/api/v1/db/data/noco/`, |
||||
responseJsonMatcher: json => json.pageInfo, |
||||
}); |
||||
} else { |
||||
await page.keyboard.press(isMac ? 'Meta+z' : 'Control+z'); |
||||
await page.waitForTimeout(100); |
||||
} |
||||
} |
||||
|
||||
test.describe('Undo Redo', () => { |
||||
test.beforeEach(async ({ page }) => { |
||||
context = await setup({ page, isEmptyProject: true }); |
||||
dashboard = new DashboardPage(page, context.project); |
||||
grid = dashboard.grid; |
||||
toolbar = dashboard.grid.toolbar; |
||||
|
||||
api = new Api({ |
||||
baseURL: `http://localhost:8080/`, |
||||
headers: { |
||||
'xc-auth': context.token, |
||||
}, |
||||
}); |
||||
|
||||
const columns = [ |
||||
{ |
||||
column_name: 'Id', |
||||
title: 'Id', |
||||
uidt: UITypes.ID, |
||||
}, |
||||
{ |
||||
column_name: 'Number', |
||||
title: 'Number', |
||||
uidt: UITypes.Number, |
||||
pv: true, |
||||
}, |
||||
{ |
||||
column_name: 'Decimal', |
||||
title: 'Decimal', |
||||
uidt: UITypes.Decimal, |
||||
}, |
||||
{ |
||||
column_name: 'Currency', |
||||
title: 'Currency', |
||||
uidt: UITypes.Currency, |
||||
}, |
||||
]; |
||||
|
||||
try { |
||||
const project = await api.project.read(context.project.id); |
||||
table = await api.base.tableCreate(context.project.id, project.bases?.[0].id, { |
||||
table_name: 'numberBased', |
||||
title: 'numberBased', |
||||
columns: columns, |
||||
}); |
||||
const rowAttributes = []; |
||||
for (let i = 0; i < 10; i++) { |
||||
const row = { |
||||
Number: rowMixedValue(columns[1], i), |
||||
Decimal: rowMixedValue(columns[2], i), |
||||
Currency: rowMixedValue(columns[3], i), |
||||
}; |
||||
rowAttributes.push(row); |
||||
} |
||||
|
||||
await api.dbTableRow.bulkCreate('noco', context.project.id, table.id, rowAttributes); |
||||
records = await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 100 }); |
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
|
||||
// reload page after api calls
|
||||
await page.reload(); |
||||
}); |
||||
|
||||
async function verifyRecords(values: any[] = []) { |
||||
// inserted values
|
||||
const expectedValues = [33, NaN, 456, 333, 267, 34, 8754, 3234, 44, 33, ...values]; |
||||
|
||||
const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, table.id, { |
||||
fields: ['Number'], |
||||
limit: 100, |
||||
}); |
||||
|
||||
// verify if expectedValues are same as currentRecords
|
||||
expect(currentRecords.list.map(r => parseInt(r.Number))).toEqual(expectedValues); |
||||
|
||||
// verify row count
|
||||
await dashboard.grid.verifyTotalRowCount({ count: expectedValues.length }); |
||||
} |
||||
|
||||
test('Row: Create, Update, Delete', async ({ page }) => { |
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
// Row.Create
|
||||
await grid.addNewRow({ index: 10, value: '333', columnHeader: 'Number', networkValidation: true }); |
||||
await grid.addNewRow({ index: 11, value: '444', columnHeader: 'Number', networkValidation: true }); |
||||
await verifyRecords([333, 444]); |
||||
|
||||
// Row.Update
|
||||
await grid.editRow({ index: 10, value: '555', columnHeader: 'Number', networkValidation: true }); |
||||
await grid.editRow({ index: 11, value: '666', columnHeader: 'Number', networkValidation: true }); |
||||
await verifyRecords([555, 666]); |
||||
|
||||
// Row.Delete
|
||||
await grid.deleteRow(10, 'Number'); |
||||
await grid.deleteRow(10, 'Number'); |
||||
await verifyRecords([]); |
||||
|
||||
// Undo : Row.Delete
|
||||
await undo({ page }); |
||||
await verifyRecords([666]); |
||||
await undo({ page }); |
||||
await verifyRecords([555, 666]); |
||||
|
||||
// Undo : Row.Update
|
||||
await undo({ page }); |
||||
await verifyRecords([555, 444]); |
||||
await undo({ page }); |
||||
await verifyRecords([333, 444]); |
||||
|
||||
// Undo : Row.Create
|
||||
await undo({ page }); |
||||
await verifyRecords([333]); |
||||
await undo({ page }); |
||||
await verifyRecords([]); |
||||
}); |
||||
|
||||
test('Fields: Hide, Show, Reorder', async ({ page }) => { |
||||
async function verifyFieldsOrder(fields: string[]) { |
||||
const fieldTitles = await toolbar.fields.getFieldsTitles(); |
||||
expect(fieldTitles).toEqual(fields); |
||||
} |
||||
|
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
await verifyFieldsOrder(['Number', 'Decimal', 'Currency']); |
||||
|
||||
// Hide Decimal
|
||||
await toolbar.fields.toggle({ title: 'Decimal', isLocallySaved: false }); |
||||
await verifyFieldsOrder(['Number', 'Currency']); |
||||
|
||||
// Hide Currency
|
||||
await toolbar.fields.toggle({ title: 'Currency', isLocallySaved: false }); |
||||
await verifyFieldsOrder(['Number']); |
||||
|
||||
// Un hide Decimal
|
||||
await toolbar.fields.toggle({ title: 'Decimal', isLocallySaved: false }); |
||||
await verifyFieldsOrder(['Number', 'Decimal']); |
||||
|
||||
// Un hide Currency
|
||||
await toolbar.fields.toggle({ title: 'Currency', isLocallySaved: false }); |
||||
await verifyFieldsOrder(['Number', 'Decimal', 'Currency']); |
||||
|
||||
// Undo : un hide Currency
|
||||
await undo({ page }); |
||||
await verifyFieldsOrder(['Number', 'Decimal']); |
||||
|
||||
// Undo : un hide Decimal
|
||||
await undo({ page }); |
||||
await verifyFieldsOrder(['Number']); |
||||
|
||||
// Undo : hide Currency
|
||||
await undo({ page }); |
||||
await verifyFieldsOrder(['Number', 'Currency']); |
||||
|
||||
// Undo : hide Decimal
|
||||
await undo({ page }); |
||||
await verifyFieldsOrder(['Number', 'Decimal', 'Currency']); |
||||
|
||||
// reorder test
|
||||
await toolbar.fields.dragDropFields({ from: 1, to: 0 }); |
||||
await verifyFieldsOrder(['Number', 'Currency', 'Decimal']); |
||||
|
||||
// Undo : reorder
|
||||
await undo({ page }); |
||||
await verifyFieldsOrder(['Number', 'Decimal', 'Currency']); |
||||
}); |
||||
|
||||
test('Fields: Sort', async ({ page }) => { |
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
async function verifyRecords({ sorted }: { sorted: boolean }) { |
||||
// inserted values
|
||||
const expectedSorted = [NaN, 33, 33, 34, 44, 267, 333, 456, 3234, 8754]; |
||||
const expectedUnsorted = [33, NaN, 456, 333, 267, 34, 8754, 3234, 44, 33]; |
||||
|
||||
const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, table.id, { |
||||
fields: ['Number'], |
||||
limit: 100, |
||||
sort: sorted ? ['Number'] : [], |
||||
}); |
||||
|
||||
// verify if expectedValues are same as currentRecords
|
||||
expect(currentRecords.list.map(r => parseInt(r.Number))).toEqual(sorted ? expectedSorted : expectedUnsorted); |
||||
} |
||||
|
||||
await toolbar.sort.add({ title: 'Number', ascending: true, locallySaved: false }); |
||||
await verifyRecords({ sorted: true }); |
||||
await toolbar.sort.reset(); |
||||
await verifyRecords({ sorted: false }); |
||||
|
||||
await undo({ page }); |
||||
await verifyRecords({ sorted: true }); |
||||
await undo({ page }); |
||||
await verifyRecords({ sorted: false }); |
||||
}); |
||||
|
||||
test('Fields: Filter', async ({ page }) => { |
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
async function verifyRecords({ filtered }: { filtered: boolean }) { |
||||
// inserted values
|
||||
const expectedFiltered = [33, 33]; |
||||
const expectedUnfiltered = [33, NaN, 456, 333, 267, 34, 8754, 3234, 44, 33]; |
||||
|
||||
const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, table.id, { |
||||
fields: ['Number'], |
||||
limit: 100, |
||||
where: filtered ? '(Number,eq,33)' : '', |
||||
}); |
||||
|
||||
// verify if expectedValues are same as currentRecords
|
||||
expect(currentRecords.list.map(r => parseInt(r.Number))).toEqual( |
||||
filtered ? expectedFiltered : expectedUnfiltered |
||||
); |
||||
} |
||||
|
||||
await toolbar.clickFilter(); |
||||
await toolbar.filter.add({ title: 'Number', operation: '=', value: '33' }); |
||||
await toolbar.clickFilter(); |
||||
|
||||
await verifyRecords({ filtered: true }); |
||||
await toolbar.filter.reset(); |
||||
await verifyRecords({ filtered: false }); |
||||
|
||||
await undo({ page }); |
||||
await verifyRecords({ filtered: true }); |
||||
await undo({ page }); |
||||
await verifyRecords({ filtered: false }); |
||||
}); |
||||
|
||||
test('Row height', async ({ page }) => { |
||||
async function verifyRowHeight({ height }: { height: string }) { |
||||
await dashboard.grid.rowPage.getRecordHeight(0).then(readValue => { |
||||
expect(readValue).toBe(height); |
||||
}); |
||||
} |
||||
|
||||
// close 'Team & Auth' tab
|
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
const timeOut = 200; |
||||
|
||||
await verifyRowHeight({ height: '1.5rem' }); |
||||
|
||||
// set row height & verify
|
||||
await toolbar.clickRowHeight(); |
||||
await toolbar.rowHeight.click({ title: 'Tall' }); |
||||
await new Promise(resolve => setTimeout(resolve, timeOut)); |
||||
await verifyRowHeight({ height: '6rem' }); |
||||
|
||||
await toolbar.clickRowHeight(); |
||||
await toolbar.rowHeight.click({ title: 'Medium' }); |
||||
await new Promise(resolve => setTimeout(resolve, timeOut)); |
||||
await verifyRowHeight({ height: '3rem' }); |
||||
|
||||
await undo({ page }); |
||||
await new Promise(resolve => setTimeout(resolve, timeOut)); |
||||
await verifyRowHeight({ height: '6rem' }); |
||||
|
||||
await undo({ page }); |
||||
await new Promise(resolve => setTimeout(resolve, timeOut)); |
||||
await verifyRowHeight({ height: '1.5rem' }); |
||||
}); |
||||
|
||||
test('Column width', async ({ page }) => { |
||||
// close 'Team & Auth' tab
|
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'numberBased' }); |
||||
|
||||
const originalWidth = await dashboard.grid.column.getWidth({ title: 'Number' }); |
||||
|
||||
await dashboard.grid.column.resize({ src: 'Number', dst: 'Decimal' }); |
||||
await dashboard.rootPage.waitForTimeout(100); |
||||
|
||||
const modifiedWidth = await dashboard.grid.column.getWidth({ title: 'Number' }); |
||||
expect(modifiedWidth).toBeGreaterThan(originalWidth); |
||||
|
||||
await undo({ page }); |
||||
expect(await dashboard.grid.column.getWidth({ title: 'Number' })).toBe(originalWidth); |
||||
}); |
||||
}); |
||||
|
||||
test.describe('Undo Redo - Table & view rename operations', () => { |
||||
test.beforeEach(async ({ page }) => { |
||||
context = await setup({ page, isEmptyProject: true }); |
||||
dashboard = new DashboardPage(page, context.project); |
||||
grid = dashboard.grid; |
||||
toolbar = dashboard.grid.toolbar; |
||||
|
||||
api = new Api({ |
||||
baseURL: `http://localhost:8080/`, |
||||
headers: { |
||||
'xc-auth': context.token, |
||||
}, |
||||
}); |
||||
|
||||
const columns = [ |
||||
{ |
||||
column_name: 'Id', |
||||
title: 'Id', |
||||
uidt: UITypes.ID, |
||||
}, |
||||
{ |
||||
column_name: 'Number', |
||||
title: 'Number', |
||||
uidt: UITypes.Number, |
||||
pv: true, |
||||
}, |
||||
{ |
||||
column_name: 'SingleSelect', |
||||
title: 'SingleSelect', |
||||
uidt: UITypes.SingleSelect, |
||||
dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'", |
||||
}, |
||||
]; |
||||
|
||||
try { |
||||
const project = await api.project.read(context.project.id); |
||||
table = await api.base.tableCreate(context.project.id, project.bases?.[0].id, { |
||||
table_name: 'selectBased', |
||||
title: 'selectBased', |
||||
columns: columns, |
||||
}); |
||||
const rowAttributes = []; |
||||
for (let i = 0; i < 10; i++) { |
||||
const row = { |
||||
Number: rowMixedValue(columns[1], i), |
||||
SingleSelect: rowMixedValue(columns[2], i), |
||||
}; |
||||
rowAttributes.push(row); |
||||
} |
||||
|
||||
await api.dbTableRow.bulkCreate('noco', context.project.id, table.id, rowAttributes); |
||||
records = await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 100 }); |
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
|
||||
// reload page after api calls
|
||||
await page.reload(); |
||||
}); |
||||
|
||||
test('Table & View rename', async ({ page }) => { |
||||
// close 'Team & Auth' tab
|
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'selectBased' }); |
||||
|
||||
// table rename
|
||||
await dashboard.treeView.renameTable({ title: 'selectBased', newTitle: 'newNameForTest' }); |
||||
await dashboard.treeView.verifyTable({ title: 'newNameForTest' }); |
||||
await dashboard.rootPage.waitForTimeout(100); |
||||
|
||||
await undo({ page }); |
||||
await dashboard.rootPage.waitForTimeout(100); |
||||
await dashboard.treeView.verifyTable({ title: 'selectBased' }); |
||||
|
||||
// View rename
|
||||
const viewTypes = ['Grid', 'Gallery', 'Form', 'Kanban']; |
||||
for (let i = 0; i < viewTypes.length; i++) { |
||||
switch (viewTypes[i]) { |
||||
case 'Grid': |
||||
await dashboard.viewSidebar.createGridView({ |
||||
title: 'Grid', |
||||
}); |
||||
break; |
||||
case 'Gallery': |
||||
await dashboard.viewSidebar.createGalleryView({ |
||||
title: 'Gallery', |
||||
}); |
||||
break; |
||||
case 'Form': |
||||
await dashboard.viewSidebar.createFormView({ |
||||
title: 'Form', |
||||
}); |
||||
break; |
||||
case 'Kanban': |
||||
await dashboard.viewSidebar.createKanbanView({ |
||||
title: 'Kanban', |
||||
}); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
await dashboard.viewSidebar.renameView({ title: viewTypes[i], newTitle: 'newNameForTest' }); |
||||
await dashboard.viewSidebar.verifyView({ title: 'newNameForTest', index: 1 }); |
||||
await new Promise(resolve => setTimeout(resolve, 100)); |
||||
await undo({ page }); |
||||
await dashboard.viewSidebar.verifyView({ title: viewTypes[i], index: 1 }); |
||||
await dashboard.viewSidebar.deleteView({ title: viewTypes[i] }); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
test.describe('Undo Redo - LTAR', () => { |
||||
test.beforeEach(async ({ page }) => { |
||||
context = await setup({ page, isEmptyProject: true }); |
||||
dashboard = new DashboardPage(page, context.project); |
||||
grid = dashboard.grid; |
||||
|
||||
api = new Api({ |
||||
baseURL: `http://localhost:8080/`, |
||||
headers: { |
||||
'xc-auth': context.token, |
||||
}, |
||||
}); |
||||
|
||||
const cityColumns = [ |
||||
{ |
||||
column_name: 'Id', |
||||
title: 'Id', |
||||
uidt: UITypes.ID, |
||||
}, |
||||
{ |
||||
column_name: 'City', |
||||
title: 'City', |
||||
uidt: UITypes.SingleLineText, |
||||
pv: true, |
||||
}, |
||||
]; |
||||
const countryColumns = [ |
||||
{ |
||||
column_name: 'Id', |
||||
title: 'Id', |
||||
uidt: UITypes.ID, |
||||
}, |
||||
{ |
||||
column_name: 'Country', |
||||
title: 'Country', |
||||
uidt: UITypes.SingleLineText, |
||||
pv: true, |
||||
}, |
||||
]; |
||||
|
||||
try { |
||||
const project = await api.project.read(context.project.id); |
||||
cityTable = await api.base.tableCreate(context.project.id, project.bases?.[0].id, { |
||||
table_name: 'City', |
||||
title: 'City', |
||||
columns: cityColumns, |
||||
}); |
||||
countryTable = await api.base.tableCreate(context.project.id, project.bases?.[0].id, { |
||||
table_name: 'Country', |
||||
title: 'Country', |
||||
columns: countryColumns, |
||||
}); |
||||
|
||||
const cityRowAttributes = [{ City: 'Mumbai' }, { City: 'Pune' }, { City: 'Delhi' }, { City: 'Bangalore' }]; |
||||
await api.dbTableRow.bulkCreate('noco', context.project.id, cityTable.id, cityRowAttributes); |
||||
|
||||
const countryRowAttributes = [ |
||||
{ Country: 'India' }, |
||||
{ Country: 'USA' }, |
||||
{ Country: 'UK' }, |
||||
{ Country: 'Australia' }, |
||||
]; |
||||
await api.dbTableRow.bulkCreate('noco', context.project.id, countryTable.id, countryRowAttributes); |
||||
|
||||
// create LTAR Country has-many City
|
||||
await api.dbTableColumn.create(countryTable.id, { |
||||
column_name: 'CityList', |
||||
title: 'CityList', |
||||
uidt: UITypes.LinkToAnotherRecord, |
||||
parentId: countryTable.id, |
||||
childId: cityTable.id, |
||||
type: 'hm', |
||||
}); |
||||
|
||||
// await api.dbTableRow.nestedAdd('noco', context.project.id, countryTable.id, '1', 'hm', 'CityList', '1');
|
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
|
||||
// reload page after api calls
|
||||
await page.reload(); |
||||
}); |
||||
|
||||
async function verifyRecords(values: any[] = []) { |
||||
// inserted values
|
||||
const expectedValues = [...values]; |
||||
|
||||
const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, countryTable.id, { |
||||
fields: ['CityList'], |
||||
limit: 100, |
||||
}); |
||||
|
||||
// verify if expectedValues array includes all the values in currentRecords
|
||||
// currentRecords [ { Id: 1, City: 'Mumbai' }, { Id: 3, City: 'Delhi' } ]
|
||||
// expectedValues [ 'Mumbai', 'Delhi' ]
|
||||
currentRecords.list[0].CityList.forEach((record: any) => { |
||||
expect(expectedValues).toContain(record.City); |
||||
}); |
||||
expect(currentRecords.list[0].CityList.length).toBe(expectedValues.length); |
||||
} |
||||
|
||||
async function undo({ page, values }: { page: Page; values: string[] }) { |
||||
const isMac = await grid.isMacOs(); |
||||
await dashboard.grid.waitForResponse({ |
||||
uiAction: () => page.keyboard.press(isMac ? 'Meta+z' : 'Control+z'), |
||||
httpMethodsToMatch: ['GET'], |
||||
requestUrlPathToMatch: `/api/v1/db/data/noco/`, |
||||
responseJsonMatcher: json => json.pageInfo, |
||||
}); |
||||
await verifyRecords(values); |
||||
} |
||||
|
||||
test('Row: Link, Unlink', async ({ page }) => { |
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'Country' }); |
||||
|
||||
await grid.cell.inCellAdd({ index: 0, columnHeader: 'CityList' }); |
||||
await dashboard.linkRecord.select('Mumbai'); |
||||
|
||||
await grid.cell.inCellAdd({ index: 0, columnHeader: 'CityList' }); |
||||
await dashboard.linkRecord.select('Delhi'); |
||||
|
||||
await grid.cell.unlinkVirtualCell({ index: 0, columnHeader: 'CityList' }); |
||||
await grid.cell.unlinkVirtualCell({ index: 0, columnHeader: 'CityList' }); |
||||
|
||||
await verifyRecords([]); |
||||
await undo({ page, values: ['Delhi'] }); |
||||
await undo({ page, values: ['Mumbai', 'Delhi'] }); |
||||
await undo({ page, values: ['Mumbai'] }); |
||||
await undo({ page, values: [] }); |
||||
}); |
||||
}); |
||||
|
||||
test.describe('Undo Redo - Select based', () => { |
||||
test.beforeEach(async ({ page }) => { |
||||
context = await setup({ page, isEmptyProject: true }); |
||||
dashboard = new DashboardPage(page, context.project); |
||||
grid = dashboard.grid; |
||||
|
||||
api = new Api({ |
||||
baseURL: `http://localhost:8080/`, |
||||
headers: { |
||||
'xc-auth': context.token, |
||||
}, |
||||
}); |
||||
|
||||
const columns = [ |
||||
{ |
||||
column_name: 'Id', |
||||
title: 'Id', |
||||
uidt: UITypes.ID, |
||||
}, |
||||
{ |
||||
column_name: 'Title', |
||||
title: 'Title', |
||||
uidt: UITypes.SingleLineText, |
||||
pv: true, |
||||
}, |
||||
{ |
||||
column_name: 'select', |
||||
title: 'select', |
||||
uidt: UITypes.SingleSelect, |
||||
dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'", |
||||
}, |
||||
]; |
||||
|
||||
try { |
||||
const project = await api.project.read(context.project.id); |
||||
table = await api.base.tableCreate(context.project.id, project.bases?.[0].id, { |
||||
table_name: 'selectSample', |
||||
title: 'selectSample', |
||||
columns, |
||||
}); |
||||
|
||||
const RowAttributes = [ |
||||
{ Title: 'Mumbai', select: 'jan' }, |
||||
{ Title: 'Pune', select: 'feb' }, |
||||
{ Title: 'Delhi', select: 'mar' }, |
||||
{ Title: 'Bangalore', select: 'jan' }, |
||||
]; |
||||
await api.dbTableRow.bulkCreate('noco', context.project.id, table.id, RowAttributes); |
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
|
||||
// reload page after api calls
|
||||
await page.reload(); |
||||
}); |
||||
|
||||
test.skip('Kanban', async ({ page }) => { |
||||
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||
await dashboard.treeView.openTable({ title: 'selectSample' }); |
||||
|
||||
await dashboard.viewSidebar.createKanbanView({ |
||||
title: 'Kanban', |
||||
}); |
||||
|
||||
const kanban = dashboard.kanban; |
||||
|
||||
// Drag drop stack
|
||||
await kanban.verifyStackOrder({ |
||||
order: ['Uncategorized', 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'], |
||||
}); |
||||
// verify drag drop stack
|
||||
await kanban.dragDropStack({ |
||||
from: 1, // jan
|
||||
to: 2, // feb
|
||||
}); |
||||
await kanban.verifyStackOrder({ |
||||
order: ['Uncategorized', 'feb', 'jan', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'], |
||||
}); |
||||
// undo drag drop stack
|
||||
await undo({ page }); |
||||
await kanban.verifyStackOrder({ |
||||
order: ['Uncategorized', 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'], |
||||
}); |
||||
|
||||
// drag drop card
|
||||
await kanban.verifyCardCount({ |
||||
count: [0, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
||||
}); |
||||
await kanban.dragDropCard({ from: { stack: 1, card: 0 }, to: { stack: 2, card: 0 } }); |
||||
await kanban.verifyCardCount({ |
||||
count: [0, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
||||
}); |
||||
// undo drag drop card
|
||||
await undo({ page }); |
||||
await kanban.verifyCardCount({ |
||||
count: [0, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
||||
}); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue