From 5113eb013baeaeb1af4297b85bbe597614960c66 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 20 Feb 2024 15:52:06 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-desk)=20highlight=20team=20sel?= =?UTF-8?q?ected?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Highlight the selected team in the team list. --- .../teams/__tests__/PanelTeams.test.tsx | 7 ++ .../features/teams/components/PanelTeam.tsx | 44 ++++++++++- .../features/teams/components/PanelTeams.tsx | 5 +- .../__tests__/app-desk/teams-panel.spec.ts | 79 ++++++++++++------- .../packages/eslint-config-people/jest.js | 1 + .../packages/eslint-config-people/next.js | 9 ++- 6 files changed, 110 insertions(+), 35 deletions(-) diff --git a/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx b/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx index f4ea581..23f528d 100644 --- a/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx +++ b/src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx @@ -8,6 +8,13 @@ import { PanelTeams } from '../components/PanelTeams'; window.HTMLElement.prototype.scroll = function () {}; +jest.mock('next/router', () => ({ + ...jest.requireActual('next/router'), + useRouter: () => ({ + query: {}, + }), +})); + describe('PanelTeams', () => { afterEach(() => { fetchMock.restore(); diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx index 689040f..8f12bf9 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'next/router'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -15,9 +16,13 @@ interface TeamProps { export const PanelTeam = ({ team }: TeamProps) => { const { t } = useTranslation(); const { colorsTokens } = useCunninghamTheme(); + const { + query: { id }, + } = useRouter(); // There is at least 1 owner in the team const hasMembers = team.accesses.length > 1; + const isActive = team.id === id; const commonProps = { className: 'p-t', @@ -25,12 +30,40 @@ export const PanelTeam = ({ team }: TeamProps) => { style: { borderRadius: '10px', flexShrink: 0, + background: '#fff', }, }; + const activeStyle = ` + border-right: 4px solid ${colorsTokens()['primary-600']}; + background: ${colorsTokens()['primary-400']}; + span{ + color: ${colorsTokens()['primary-text']}; + } + `; + + const hoverStyle = ` + &:hover{ + border-right: 4px solid ${colorsTokens()['primary-400']}; + background: ${colorsTokens()['primary-300']}; + + span{ + color: ${colorsTokens()['primary-text']}; + } + } + `; + return ( - - + + {hasMembers ? ( { }} /> )} - {team.name} + + {team.name} + diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx index 94269f5..2f03c02 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx @@ -44,7 +44,7 @@ const PanelTeamsState = ({ if (!teams?.length) { return ( - + {t('0 group to display.')} @@ -88,9 +88,8 @@ export const PanelTeams = () => { void fetchNextPage(); }} scrollContainer={containerRef.current} - $gap="1rem" as="ul" - className="p-s mt-t" + className="p-0 mt-0" role="listbox" > { + 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)'); + }); }); diff --git a/src/frontend/packages/eslint-config-people/jest.js b/src/frontend/packages/eslint-config-people/jest.js index 7c3e7c9..93a5f2c 100644 --- a/src/frontend/packages/eslint-config-people/jest.js +++ b/src/frontend/packages/eslint-config-people/jest.js @@ -43,6 +43,7 @@ module.exports = { 'jest/expect-expect': 'error', '@typescript-eslint/unbound-method': 'off', 'jest/unbound-method': 'error', + 'react/react-in-jsx-scope': 'off', }, }, ], diff --git a/src/frontend/packages/eslint-config-people/next.js b/src/frontend/packages/eslint-config-people/next.js index eea7887..0b6c9e7 100644 --- a/src/frontend/packages/eslint-config-people/next.js +++ b/src/frontend/packages/eslint-config-people/next.js @@ -2,7 +2,6 @@ const common = require('./common'); module.exports = { extends: [ - 'people/jest', 'next', 'plugin:prettier/recommended', 'plugin:@tanstack/eslint-plugin-query/recommended', @@ -30,6 +29,12 @@ module.exports = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'error', }, - overrides: common.eslintTS, + overrides: [ + ...common.eslintTS, + { + files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'], + extends: ['people/jest'], + }, + ], ignorePatterns: ['node_modules'], };