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

💄(app-desk) highlight team selected

Browse Source 
Highlight the selected team in the team list.
This commit is contained in:
Anthony LC
2024-02-20 15:52:06 +01:00
committed by Anthony LC
parent 45d05873e2
commit 5113eb013b
6 changed files with 110 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
View File

@@ -1,9 +1,35 @@
import { expect, test } from '@playwright/test';
import { Page, expect, test } from '@playwright/test';
import { waitForElementCount } from '../helpers';
import { keyCloakSignIn } from './common';
const createTeam = async (
page: Page,
teamName: string,
browserName: string,
length: number,
) => {
const panel = page.getByLabel('Teams panel').first();
const buttonCreate = page.getByRole('button', { name: 'Create the team' });
const randomTeams = Array.from({ length }, (_el, index) => {
return `${teamName}-${browserName}-${Math.floor(Math.random() * 10000)}-${index}`;
});
for (let i = 0; i < randomTeams.length; i++) {
await panel.getByRole('button', { name: 'Add a team' }).click();
await page.getByText('Team name').fill(randomTeams[i]);
await expect(buttonCreate).toBeEnabled();
await buttonCreate.click();
await expect(
panel.locator('li').nth(0).getByText(randomTeams[i]),
).toBeVisible();
}
return randomTeams;
};
test.beforeEach(async ({ page, browserName }) => {
await page.goto('/');
await keyCloakSignIn(page, browserName);
@@ -31,21 +57,7 @@ test.describe('Teams Panel', () => {
test('002 - checks the sort button', async ({ page, browserName }) => {
const panel = page.getByLabel('Teams panel').first();
const buttonCreate = page.getByRole('button', { name: 'Create the team' });
const randomTeams = Array.from({ length: 3 }, (_el, index) => {
return `team-sort-${browserName}-${Math.floor(Math.random() * 1000)}-${index}`;
});
for (let i = 0; i < randomTeams.length; i++) {
await panel.getByRole('button', { name: 'Add a team' }).click();
await page.getByText('Team name').fill(randomTeams[i]);
await expect(buttonCreate).toBeEnabled();
await buttonCreate.click();
await expect(
panel.locator('li').nth(0).getByText(randomTeams[i]),
).toBeVisible();
}
const randomTeams = await createTeam(page, 'team-sort', browserName, 3);
await panel
.getByRole('button', {
@@ -66,17 +78,12 @@ test.describe('Teams Panel', () => {
test.setTimeout(90000);
const panel = page.getByLabel('Teams panel').first();
const buttonCreate = page.getByRole('button', { name: 'Create the team' });
const randomTeams = Array.from({ length: 40 }, (_el, index) => {
return `team-infinite-${browserName}-${Math.floor(Math.random() * 10000)}-${index}`;
});
for (let i = 0; i < randomTeams.length; i++) {
await panel.getByRole('button', { name: 'Add a team' }).click();
await page.getByText('Team name').fill(randomTeams[i]);
await expect(buttonCreate).toBeEnabled();
await buttonCreate.click();
await expect(panel.locator('li').getByText(randomTeams[i])).toBeVisible();
}
const randomTeams = await createTeam(
page,
'team-infinite',
browserName,
40,
);
await expect(panel.locator('li')).toHaveCount(20);
await panel.getByText(randomTeams[24]).click();
@@ -84,4 +91,22 @@ test.describe('Teams Panel', () => {
await waitForElementCount(panel.locator('li'), 21, 10000);
expect(await panel.locator('li').count()).toBeGreaterThan(20);
});
test('004 - checks the hover and selected state', async ({
page,
browserName,
}) => {
const panel = page.getByLabel('Teams panel').first();
await createTeam(page, 'team-hover', browserName, 2);
const selectedTeam = panel.locator('li').nth(0);
await expect(selectedTeam).toHaveCSS(
'background-color',
'rgb(202, 202, 251)',
);
const hoverTeam = panel.locator('li').nth(1);
await hoverTeam.hover();
await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)');
});
});