diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.test.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.test.tsx new file mode 100644 index 0000000000..fbcac5c892 --- /dev/null +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.test.tsx @@ -0,0 +1,60 @@ +import { fireEvent, screen } from '@testing-library/react'; +import { render } from 'utils/testRenderer'; +import { vi } from 'vitest'; +import { AvatarCell } from './AvatarCell'; + +test("the filtering button should have aria-disabled='true' when the user id is 0", async () => { + const Cell = AvatarCell(() => {}); + render(); + const button = await screen.findByRole('button'); + expect(button).toHaveAttribute('aria-disabled', 'true'); +}); + +test("the filtering button should have aria-disabled='false' when the user id is not 0", async () => { + const Cell = AvatarCell(() => {}); + render(); + const button = await screen.findByRole('button'); + expect(button).toHaveAttribute('aria-disabled', 'false'); +}); + +test('the onAvatarClick function should not be called when the user id is 0', async () => { + const onAvatarClick = vi.fn(); + const Cell = AvatarCell(onAvatarClick); + render(); + const button = await screen.findByRole('button'); + + fireEvent.click(button); + + expect(onAvatarClick).not.toHaveBeenCalled(); +}); + +test('the onAvatarClick function should be called when the user id is not 0', async () => { + const onAvatarClick = vi.fn(); + const Cell = AvatarCell(onAvatarClick); + render(); + const button = await screen.findByRole('button'); + + fireEvent.click(button); + + expect(onAvatarClick).toHaveBeenCalled(); +}); + +test("when the user id is 0, the tooltip should tell you that you can't filter by unknown users", async () => { + const Cell = AvatarCell(() => {}); + render(); + const button = await screen.findByRole('button'); + fireEvent.mouseOver(button); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toHaveTextContent("can't filter by unknown users"); +}); + +test("when the user id is not 0, the tooltip should not tell you that you can't filter by unknown users", async () => { + const Cell = AvatarCell(() => {}); + render(); + const button = await screen.findByRole('button'); + fireEvent.mouseOver(button); + + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).not.toHaveTextContent("can't filter by unknown users"); +}); diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx index 3552d830d9..d299ed68dd 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx @@ -1,6 +1,5 @@ import { type Theme, styled } from '@mui/material'; import type { FC } from 'react'; -import { visuallyHiddenStyles } from '../CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles'; import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; @@ -32,23 +31,34 @@ const StyledAvatarButton = styled('button')({ padding: 0, }); -export const VisuallyHiddenButtonText = styled('span')(() => ({ - ...visuallyHiddenStyles, - position: 'absolute', +const StyledSecondaryText = styled('p')(({ theme }) => ({ + color: theme.palette.text.secondary, })); export const AvatarCell = (onAvatarClick: (userId: number) => void): FC => ({ row: { original } }) => { + const ariaDisabled = original.createdBy.id === 0; + const clickAction = ariaDisabled + ? () => {} + : () => onAvatarClick(original.createdBy.id); + const tooltipContent = ariaDisabled ? ( + <> +

{original.createdBy.name}

+ + You can't filter by unknown users. + + + ) : ( +

{original.createdBy.name}

+ ); + return ( - + onAvatarClick(original.createdBy.id)} + aria-disabled={ariaDisabled} + onClick={clickAction} >