studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(frontend) datagrid ordered by updated_at desc

Browse Source 
The datagrid is now ordered by updated_at desc.
This commit is contained in:
Anthony LC
2024-08-23 13:20:32 +02:00
committed by Anthony LC
parent 3a420c0416
commit ced850aecf
2 changed files with 102 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
View File

@@ -49,111 +49,130 @@ test.describe('Documents Grid', () => {
nameColumn: 'Document name', nameColumn: 'Document name',
ordering: 'title', ordering: 'title',
cellNumber: 1, cellNumber: 1,
orderDefault: '',
orderDesc: '&ordering=-title',
orderAsc: '&ordering=title',
}, },
{ {
nameColumn: 'Created at', nameColumn: 'Created at',
ordering: 'created_at', ordering: 'created_at',
cellNumber: 2, cellNumber: 2,
orderDefault: '',
orderDesc: '&ordering=-created_at',
orderAsc: '&ordering=created_at',
}, },
{ {
nameColumn: 'Updated at', nameColumn: 'Updated at',
ordering: 'updated_at', ordering: 'updated_at',
cellNumber: 3, cellNumber: 3,
orderDefault: '&ordering=-updated_at',
orderDesc: '&ordering=updated_at',
orderAsc: '',
}, },
].forEach(({ nameColumn, ordering, cellNumber }) => { ].forEach(
test(`checks datagrid ordering ${ordering}`, async ({ page }) => { ({
const responsePromise = page.waitForResponse( nameColumn,
(response) => ordering,
response.url().includes(`/documents/?page=1`) && cellNumber,
response.status() === 200, orderDefault,
); orderDesc,
orderAsc,
}) => {
test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderDefault}`) &&
response.status() === 200,
);
const responsePromiseOrderingDesc = page.waitForResponse( const responsePromiseOrderingDesc = page.waitForResponse(
(response) => (response) =>
response.url().includes(`/documents/?page=1&ordering=-${ordering}`) && response.url().includes(`/documents/?page=1${orderDesc}`) &&
response.status() === 200, response.status() === 200,
); );
const responsePromiseOrderingAsc = page.waitForResponse( const responsePromiseOrderingAsc = page.waitForResponse(
(response) => (response) =>
response.url().includes(`/documents/?page=1&ordering=${ordering}`) && response.url().includes(`/documents/?page=1${orderAsc}`) &&
response.status() === 200, response.status() === 200,
); );
const datagrid = page // Checks the initial state
.getByLabel('Datagrid of the documents page 1') const datagrid = page
.getByRole('table'); .getByLabel('Datagrid of the documents page 1')
const thead = datagrid.locator('thead'); .getByRole('table');
const thead = datagrid.locator('thead');
const response = await responsePromise; const response = await responsePromise;
expect(response.ok()).toBeTruthy(); expect(response.ok()).toBeTruthy();
const docNameRow1 = datagrid const docNameRow1 = datagrid
.getByRole('row') .getByRole('row')
.nth(1) .nth(1)
.getByRole('cell') .getByRole('cell')
.nth(cellNumber); .nth(cellNumber);
const docNameRow2 = datagrid const docNameRow2 = datagrid
.getByRole('row') .getByRole('row')
.nth(2) .nth(2)
.getByRole('cell') .getByRole('cell')
.nth(cellNumber); .nth(cellNumber);
await expect(datagrid.getByLabel('Loading data')).toBeHidden(); await expect(datagrid.getByLabel('Loading data')).toBeHidden();
// Initial state // Initial state
await expect(docNameRow1).toHaveText(/.*/); await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/); await expect(docNameRow2).toHaveText(/.*/);
const initialDocNameRow1 = await docNameRow1.textContent(); const initialDocNameRow1 = await docNameRow1.textContent();
const initialDocNameRow2 = await docNameRow2.textContent(); const initialDocNameRow2 = await docNameRow2.textContent();
expect(initialDocNameRow1).toBeDefined(); expect(initialDocNameRow1).toBeDefined();
expect(initialDocNameRow2).toBeDefined(); expect(initialDocNameRow2).toBeDefined();
// Ordering ASC // Ordering ASC
await thead.getByText(nameColumn).click(); await thead.getByText(nameColumn).click();
const responseOrderingAsc = await responsePromiseOrderingAsc; const responseOrderingAsc = await responsePromiseOrderingAsc;
expect(responseOrderingAsc.ok()).toBeTruthy(); expect(responseOrderingAsc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden(); await expect(datagrid.getByLabel('Loading data')).toBeHidden();
await expect(docNameRow1).toHaveText(/.*/); await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/); await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Asc = await docNameRow1.textContent(); const textDocNameRow1Asc = await docNameRow1.textContent();
const textDocNameRow2Asc = await docNameRow2.textContent(); const textDocNameRow2Asc = await docNameRow2.textContent();
expect( expect(
textDocNameRow1Asc && textDocNameRow1Asc &&
textDocNameRow2Asc && textDocNameRow2Asc &&
textDocNameRow1Asc.localeCompare(textDocNameRow2Asc, 'en', { textDocNameRow1Asc.localeCompare(textDocNameRow2Asc, 'en', {
caseFirst: 'false', caseFirst: 'false',
ignorePunctuation: true, ignorePunctuation: true,
}) <= 0, }) <= 0,
).toBeTruthy(); ).toBeTruthy();
// Ordering Desc // Ordering Desc
await thead.getByText(nameColumn).click(); await thead.getByText(nameColumn).click();
const responseOrderingDesc = await responsePromiseOrderingDesc; const responseOrderingDesc = await responsePromiseOrderingDesc;
expect(responseOrderingDesc.ok()).toBeTruthy(); expect(responseOrderingDesc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden(); await expect(datagrid.getByLabel('Loading data')).toBeHidden();
await expect(docNameRow1).toHaveText(/.*/); await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/); await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Desc = await docNameRow1.textContent(); const textDocNameRow1Desc = await docNameRow1.textContent();
const textDocNameRow2Desc = await docNameRow2.textContent(); const textDocNameRow2Desc = await docNameRow2.textContent();
expect( expect(
textDocNameRow1Desc && textDocNameRow1Desc &&
textDocNameRow2Desc && textDocNameRow2Desc &&
textDocNameRow1Desc.localeCompare(textDocNameRow2Desc, 'en', { textDocNameRow1Desc.localeCompare(textDocNameRow2Desc, 'en', {
caseFirst: 'false', caseFirst: 'false',
ignorePunctuation: true, ignorePunctuation: true,
}) >= 0, }) >= 0,
).toBeTruthy(); ).toBeTruthy();
}); });
}); },
);
test('checks the pagination', async ({ page }) => { test('checks the pagination', async ({ page }) => {
const responsePromisePage1 = page.waitForResponse( const responsePromisePage1 = page.waitForResponse(

7
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
View File

@@ -53,7 +53,12 @@ export const DocsGrid = () => {
const pagination = usePagination({ const pagination = usePagination({
pageSize: PAGE_SIZE, pageSize: PAGE_SIZE,
}); });
const [sortModel, setSortModel] = useState<SortModel>([]); const [sortModel, setSortModel] = useState<SortModel>([
{
field: 'updated_at',
sort: 'desc',
},
]);
const { page, pageSize, setPagesCount } = pagination; const { page, pageSize, setPagesCount } = pagination;
const [docs, setDocs] = useState<Doc[]>([]); const [docs, setDocs] = useState<Doc[]>([]);