Skip to content

Commit ced850a

Browse files
AntoLCAntoLC
committed
♻️(frontend) datagrid ordered by updated_at desc
The datagrid is now ordered by updated_at desc.
1 parent 3a420c0 commit ced850a

File tree

2 files changed

+119
-95
lines changed

2 files changed

+119
-95
lines changed

‎src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts‎

Lines changed: 113 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -49,111 +49,130 @@ test.describe('Documents Grid', () => {
4949
nameColumn: 'Document name',
5050
ordering: 'title',
5151
cellNumber: 1,
52+
orderDefault: '',
53+
orderDesc: '&ordering=-title',
54+
orderAsc: '&ordering=title',
5255
},
5356
{
5457
nameColumn: 'Created at',
5558
ordering: 'created_at',
5659
cellNumber: 2,
60+
orderDefault: '',
61+
orderDesc: '&ordering=-created_at',
62+
orderAsc: '&ordering=created_at',
5763
},
5864
{
5965
nameColumn: 'Updated at',
6066
ordering: 'updated_at',
6167
cellNumber: 3,
68+
orderDefault: '&ordering=-updated_at',
69+
orderDesc: '&ordering=updated_at',
70+
orderAsc: '',
6271
},
63-
].forEach(({ nameColumn, ordering, cellNumber }) => {
64-
test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
65-
const responsePromise = page.waitForResponse(
66-
(response) =>
67-
response.url().includes(`/documents/?page=1`) &&
68-
response.status() === 200,
69-
);
70-
71-
const responsePromiseOrderingDesc = page.waitForResponse(
72-
(response) =>
73-
response.url().includes(`/documents/?page=1&ordering=-${ordering}`) &&
74-
response.status() === 200,
75-
);
76-
77-
const responsePromiseOrderingAsc = page.waitForResponse(
78-
(response) =>
79-
response.url().includes(`/documents/?page=1&ordering=${ordering}`) &&
80-
response.status() === 200,
81-
);
82-
83-
const datagrid = page
84-
.getByLabel('Datagrid of the documents page 1')
85-
.getByRole('table');
86-
const thead = datagrid.locator('thead');
87-
88-
const response = await responsePromise;
89-
expect(response.ok()).toBeTruthy();
90-
91-
const docNameRow1 = datagrid
92-
.getByRole('row')
93-
.nth(1)
94-
.getByRole('cell')
95-
.nth(cellNumber);
96-
const docNameRow2 = datagrid
97-
.getByRole('row')
98-
.nth(2)
99-
.getByRole('cell')
100-
.nth(cellNumber);
101-
102-
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
103-
104-
// Initial state
105-
await expect(docNameRow1).toHaveText(/.*/);
106-
await expect(docNameRow2).toHaveText(/.*/);
107-
const initialDocNameRow1 = await docNameRow1.textContent();
108-
const initialDocNameRow2 = await docNameRow2.textContent();
109-
110-
expect(initialDocNameRow1).toBeDefined();
111-
expect(initialDocNameRow2).toBeDefined();
112-
113-
// Ordering ASC
114-
await thead.getByText(nameColumn).click();
115-
116-
const responseOrderingAsc = await responsePromiseOrderingAsc;
117-
expect(responseOrderingAsc.ok()).toBeTruthy();
118-
119-
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
120-
121-
await expect(docNameRow1).toHaveText(/.*/);
122-
await expect(docNameRow2).toHaveText(/.*/);
123-
const textDocNameRow1Asc = await docNameRow1.textContent();
124-
const textDocNameRow2Asc = await docNameRow2.textContent();
125-
expect(
126-
textDocNameRow1Asc &&
127-
textDocNameRow2Asc &&
128-
textDocNameRow1Asc.localeCompare(textDocNameRow2Asc, 'en', {
129-
caseFirst: 'false',
130-
ignorePunctuation: true,
131-
}) <= 0,
132-
).toBeTruthy();
133-
134-
// Ordering Desc
135-
await thead.getByText(nameColumn).click();
136-
137-
const responseOrderingDesc = await responsePromiseOrderingDesc;
138-
expect(responseOrderingDesc.ok()).toBeTruthy();
139-
140-
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
141-
142-
await expect(docNameRow1).toHaveText(/.*/);
143-
await expect(docNameRow2).toHaveText(/.*/);
144-
const textDocNameRow1Desc = await docNameRow1.textContent();
145-
const textDocNameRow2Desc = await docNameRow2.textContent();
146-
147-
expect(
148-
textDocNameRow1Desc &&
149-
textDocNameRow2Desc &&
150-
textDocNameRow1Desc.localeCompare(textDocNameRow2Desc, 'en', {
151-
caseFirst: 'false',
152-
ignorePunctuation: true,
153-
}) >= 0,
154-
).toBeTruthy();
155-
});
156-
});
72+
].forEach(
73+
({
74+
nameColumn,
75+
ordering,
76+
cellNumber,
77+
orderDefault,
78+
orderDesc,
79+
orderAsc,
80+
}) => {
81+
test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
82+
const responsePromise = page.waitForResponse(
83+
(response) =>
84+
response.url().includes(`/documents/?page=1${orderDefault}`) &&
85+
response.status() === 200,
86+
);
87+
88+
const responsePromiseOrderingDesc = page.waitForResponse(
89+
(response) =>
90+
response.url().includes(`/documents/?page=1${orderDesc}`) &&
91+
response.status() === 200,
92+
);
93+
94+
const responsePromiseOrderingAsc = page.waitForResponse(
95+
(response) =>
96+
response.url().includes(`/documents/?page=1${orderAsc}`) &&
97+
response.status() === 200,
98+
);
99+
100+
// Checks the initial state
101+
const datagrid = page
102+
.getByLabel('Datagrid of the documents page 1')
103+
.getByRole('table');
104+
const thead = datagrid.locator('thead');
105+
106+
const response = await responsePromise;
107+
expect(response.ok()).toBeTruthy();
108+
109+
const docNameRow1 = datagrid
110+
.getByRole('row')
111+
.nth(1)
112+
.getByRole('cell')
113+
.nth(cellNumber);
114+
const docNameRow2 = datagrid
115+
.getByRole('row')
116+
.nth(2)
117+
.getByRole('cell')
118+
.nth(cellNumber);
119+
120+
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
121+
122+
// Initial state
123+
await expect(docNameRow1).toHaveText(/.*/);
124+
await expect(docNameRow2).toHaveText(/.*/);
125+
const initialDocNameRow1 = await docNameRow1.textContent();
126+
const initialDocNameRow2 = await docNameRow2.textContent();
127+
128+
expect(initialDocNameRow1).toBeDefined();
129+
expect(initialDocNameRow2).toBeDefined();
130+
131+
// Ordering ASC
132+
await thead.getByText(nameColumn).click();
133+
134+
const responseOrderingAsc = await responsePromiseOrderingAsc;
135+
expect(responseOrderingAsc.ok()).toBeTruthy();
136+
137+
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
138+
139+
await expect(docNameRow1).toHaveText(/.*/);
140+
await expect(docNameRow2).toHaveText(/.*/);
141+
const textDocNameRow1Asc = await docNameRow1.textContent();
142+
const textDocNameRow2Asc = await docNameRow2.textContent();
143+
expect(
144+
textDocNameRow1Asc &&
145+
textDocNameRow2Asc &&
146+
textDocNameRow1Asc.localeCompare(textDocNameRow2Asc, 'en', {
147+
caseFirst: 'false',
148+
ignorePunctuation: true,
149+
}) <= 0,
150+
).toBeTruthy();
151+
152+
// Ordering Desc
153+
await thead.getByText(nameColumn).click();
154+
155+
const responseOrderingDesc = await responsePromiseOrderingDesc;
156+
expect(responseOrderingDesc.ok()).toBeTruthy();
157+
158+
await expect(datagrid.getByLabel('Loading data')).toBeHidden();
159+
160+
await expect(docNameRow1).toHaveText(/.*/);
161+
await expect(docNameRow2).toHaveText(/.*/);
162+
const textDocNameRow1Desc = await docNameRow1.textContent();
163+
const textDocNameRow2Desc = await docNameRow2.textContent();
164+
165+
expect(
166+
textDocNameRow1Desc &&
167+
textDocNameRow2Desc &&
168+
textDocNameRow1Desc.localeCompare(textDocNameRow2Desc, 'en', {
169+
caseFirst: 'false',
170+
ignorePunctuation: true,
171+
}) >= 0,
172+
).toBeTruthy();
173+
});
174+
},
175+
);
157176

158177
test('checks the pagination', async ({ page }) => {
159178
const responsePromisePage1 = page.waitForResponse(

‎src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,12 @@ export const DocsGrid = () => {
5353
const pagination = usePagination({
5454
pageSize: PAGE_SIZE,
5555
});
56-
const [sortModel, setSortModel] = useState<SortModel>([]);
56+
const [sortModel, setSortModel] = useState<SortModel>([
57+
{
58+
field: 'updated_at',
59+
sort: 'desc',
60+
},
61+
]);
5762
const { page, pageSize, setPagesCount } = pagination;
5863
const [docs, setDocs] = useState<Doc[]>([]);
5964

0 commit comments

Comments
 (0)