diff --git a/frontend/src/components/CardBoard/CardBody/DuplicateBoardNameDialog.spec.tsx b/frontend/src/components/CardBoard/CardBody/DuplicateBoardNameDialog.spec.tsx index 5efcfe64a..b67a70eaf 100644 --- a/frontend/src/components/CardBoard/CardBody/DuplicateBoardNameDialog.spec.tsx +++ b/frontend/src/components/CardBoard/CardBody/DuplicateBoardNameDialog.spec.tsx @@ -2,9 +2,8 @@ import React from 'react'; import { libraryMocks } from '@/utils/testing/mocks'; import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import { UserFactory } from '@/utils/factories/user'; -import { fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, waitFor, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { act } from 'react-dom/test-utils'; import DuplicateBoardNameDialog, { DuplicateBoardNameDialogProps, } from './DuplicateBoardNameDialog'; diff --git a/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx index 8b49b2a6c..22ad49494 100644 --- a/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx +++ b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx @@ -4,43 +4,47 @@ import { UserListFactory } from '@/utils/factories/user'; import { fireEvent, waitFor } from '@testing-library/react'; import UserListDialog, { UserListDialogProps } from './UserListDialog'; -const DEFAULT_PROPS = { - usersList: UserListFactory.createMany(3), - setIsOpen: jest.fn(), - isOpen: true, - confirmationHandler: jest.fn(), -}; - const router = createMockRouter({}); -const render = (props: UserListDialogProps = DEFAULT_PROPS) => - renderWithProviders(, { routerOptions: router }); +const render = (props: Partial = {}) => + renderWithProviders( + , + { routerOptions: router }, + ); describe('Components/Primitives/Dialogs/UserListDialog', () => { it('should render correctly', () => { // Arrange - const testProps = { ...DEFAULT_PROPS }; + const usersList = UserListFactory.createMany(3); // Act - const { getAllByTestId, getByTestId } = render(testProps); + const { getAllByTestId, getByTestId } = render({ usersList }); // Assert - expect(getAllByTestId('checkboxUserItem')).toHaveLength(testProps.usersList.length); + expect(getAllByTestId('checkboxUserItem')).toHaveLength(usersList.length); expect(getByTestId('searchInput')).toBeInTheDocument(); }); it('should call confirmationHandler function', async () => { // Arrange - const testProps = { ...DEFAULT_PROPS }; + const confirmationHandler = jest.fn(); // Act - const { getByTestId } = render(testProps); + const { getByTestId } = render({ confirmationHandler }); // Assert fireEvent.click(getByTestId('dialogFooterSubmit')); await waitFor(() => { - expect(testProps.confirmationHandler).toBeCalled(); + expect(confirmationHandler).toBeCalled(); }); }); }); diff --git a/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx index c5b3c4ed5..d76497d3b 100644 --- a/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx +++ b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx @@ -107,63 +107,65 @@ const UserListDialog = React.memo( return ( - - - { - setSearchMember(e.target.value); - }} - handleClear={() => { - setSearchMember(''); - }} - placeholder="Search member" - /> - - - {title} - - - - - - - Name + + + + { + setSearchMember(e.target.value); + }} + handleClear={() => { + setSearchMember(''); + }} + placeholder="Search member" + /> + + + {title} + + + + + + + Name + + + + Email - - Email - + - - - - - {filteredList?.map((user) => ( - - ))} + + + {filteredList?.map((user) => ( + + ))} + + - ); }, diff --git a/frontend/src/components/Teams/CreateTeam/CreateTeam.spec.tsx b/frontend/src/components/Teams/CreateTeam/CreateTeam.spec.tsx new file mode 100644 index 000000000..36bc72101 --- /dev/null +++ b/frontend/src/components/Teams/CreateTeam/CreateTeam.spec.tsx @@ -0,0 +1,32 @@ +import { renderWithProviders } from '@/utils/testing/renderWithProviders'; +import { fireEvent, waitFor } from '@testing-library/react'; +import CreateTeam from './CreateTeam'; + +const render = () => renderWithProviders(); + +describe('Teams/CreateTeam', () => { + it('should render correctly', () => { + // Act + const { getByTestId, queryByLabelText } = render(); + + // Assert + expect(getByTestId('createHeader')).toBeInTheDocument(); + expect(getByTestId('createFooter')).toBeInTheDocument(); + expect(getByTestId('tipbar')).toBeInTheDocument(); + expect(queryByLabelText('Team name')).toBeInTheDocument(); + expect(getByTestId('addRemoveMembersTrigger')).toBeInTheDocument(); + expect(getByTestId('teamMembersList')).toBeInTheDocument(); + }); + + it('should open a UserListDialog', async () => { + // Act + const { getByTestId } = render(); + + // Assert + fireEvent.click(getByTestId('addRemoveMembersTrigger')); + + await waitFor(() => { + expect(getByTestId('userListDialog')).toBeInTheDocument(); + }); + }); +}); diff --git a/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx b/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx index c96a2a84f..31b15b299 100644 --- a/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx +++ b/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx @@ -107,7 +107,12 @@ const CreateTeam = () => { Team Members - diff --git a/frontend/src/components/Teams/Team/Header/Header.spec.tsx b/frontend/src/components/Teams/Team/Header/Header.spec.tsx index 9da54bf6d..790fd4884 100644 --- a/frontend/src/components/Teams/Team/Header/Header.spec.tsx +++ b/frontend/src/components/Teams/Team/Header/Header.spec.tsx @@ -1,43 +1,37 @@ import React from 'react'; import { libraryMocks } from '@/utils/testing/mocks'; import { fireEvent, waitFor } from '@testing-library/react'; -import { TeamFactory } from '@/utils/factories/team'; import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import { TEAMS_ROUTE } from '@/utils/routes'; +import { TeamFactory } from '@/utils/factories/team'; import TeamHeader, { TeamHeaderProps } from './Header'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamHeaderProps) => - renderWithProviders(, { routerOptions: mockRouter }); - -describe('Components/Teams/Team/Header', () => { - let defaultProps: TeamHeaderProps; - beforeEach(() => { - const team = TeamFactory.create(); - defaultProps = { - title: team.name, - hasPermissions: true, - }; +libraryMocks.mockReactQuery(); +const render = (props: Partial = {}) => + renderWithProviders(, { + routerOptions: mockRouter, }); +describe('Components/Teams/Team/Header', () => { it('should render correctly', () => { // Arrange - const teamHeaderProps = { ...defaultProps }; + const team = TeamFactory.create(); // Act - const { getByTestId } = render(teamHeaderProps); + const { getByTestId } = render({ title: team.name }); const title = getByTestId('teamHeader').querySelector('span'); // Assert - expect(title).toHaveTextContent(teamHeaderProps.title); + expect(title).toHaveTextContent(team.name); }); it('should render breadcrumbs correctly', async () => { // Arrange - const teamHeaderProps = { ...defaultProps }; + const team = TeamFactory.create(); // Act - const { getByTestId } = render(teamHeaderProps); + const { getByTestId } = render({ title: team.name }); const breadcrumbs = getByTestId('teamHeader').querySelectorAll('li'); const [teamBreadcrumb, currentTeamBreadcrumb] = breadcrumbs; @@ -45,7 +39,8 @@ describe('Components/Teams/Team/Header', () => { // Assert expect(breadcrumbs).toHaveLength(2); - expect(currentTeamBreadcrumb).toHaveTextContent(teamHeaderProps.title); + expect(currentTeamBreadcrumb).toHaveTextContent(team.name); + await waitFor(() => { expect(mockRouter.push).toHaveBeenCalledWith(TEAMS_ROUTE, TEAMS_ROUTE, expect.anything()); }); @@ -53,13 +48,12 @@ describe('Components/Teams/Team/Header', () => { it('should be able to open the team members dialog', async () => { // Arrange - const teamHeaderProps = { ...defaultProps }; const setState = jest.fn(); const useStateMock: any = (initState: boolean) => [initState, setState]; jest.spyOn(React, 'useState').mockImplementationOnce(useStateMock); // Act - const { getByTestId } = render(teamHeaderProps); + const { getByTestId } = render(); const button = getByTestId('teamHeader').querySelector('button'); if (button) fireEvent.click(button); diff --git a/frontend/src/components/Teams/Team/Header/Header.stories.tsx b/frontend/src/components/Teams/Team/Header/Header.stories.tsx new file mode 100644 index 000000000..845b27278 --- /dev/null +++ b/frontend/src/components/Teams/Team/Header/Header.stories.tsx @@ -0,0 +1,41 @@ +import { ComponentStory } from '@storybook/react'; +import Header from './Header'; + +export default { + title: 'Teams/Header', + component: Header, + parameters: { + layout: 'padded', + previewTabs: { + 'storybook/docs/panel': { + hidden: true, + }, + }, + }, + args: { + title: 'My Team', + hasPermissions: true, + }, + argTypes: { + title: { + type: { required: true, name: 'string' }, + description: 'Team Name', + table: { + type: { summary: 'string' }, + }, + }, + hasPermissions: { + type: { required: true, name: 'boolean' }, + description: + "Controls if the User is able to add/remove members (plase don't cancel the dialog)", + table: { + type: { summary: 'boolean' }, + }, + }, + }, +}; + +const Template: ComponentStory = (props) =>
; + +export const Default = Template.bind({}); +Default.storyName = 'Basic Usage'; diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/MemberTitle/MemberTitle.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/MemberTitle/MemberTitle.spec.tsx index 129b77455..a15555ba4 100644 --- a/frontend/src/components/Teams/Team/TeamMemberItem/MemberTitle/MemberTitle.spec.tsx +++ b/frontend/src/components/Teams/Team/TeamMemberItem/MemberTitle/MemberTitle.spec.tsx @@ -6,40 +6,36 @@ import { UserFactory } from '@/utils/factories/user'; import MemberTitle, { MemberTitleProps } from './MemberTitle'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: MemberTitleProps) => - renderWithProviders(, { routerOptions: mockRouter }); - -describe('Components/Teams/Team/TeamMemberItem/MemberTitle', () => { - let defaultProps: MemberTitleProps; - beforeEach(() => { - const user = UserFactory.create(); - defaultProps = { name: user.firstName, userId: user._id, hasPermissions: false }; +const render = (props: Partial) => + renderWithProviders(, { + routerOptions: mockRouter, }); +describe('Components/Teams/Team/TeamMemberItem/MemberTitle', () => { it('should render correctly', () => { // Arrange - const memberTitleProps = { ...defaultProps }; + const user = UserFactory.create(); // Act - const { getByText } = render(memberTitleProps); + const { getByText } = render({ name: user.firstName }); // Assert - expect(getByText(memberTitleProps.name)).toBeInTheDocument(); + expect(getByText(user.firstName)).toBeInTheDocument(); }); it('should redirect to user page', async () => { // Arrange - const memberTitleProps = { ...defaultProps, hasPermissions: true }; + const user = UserFactory.create(); // Act - const { getByText } = render(memberTitleProps); - fireEvent.click(getByText(memberTitleProps.name)); + const { getByText } = render({ name: user.firstName, userId: user._id, hasPermissions: true }); + fireEvent.click(getByText(user.firstName)); // Assert await waitFor(() => { expect(mockRouter.push).toHaveBeenCalledWith( - ROUTES.UserPage(memberTitleProps.userId), - ROUTES.UserPage(memberTitleProps.userId), + ROUTES.UserPage(user._id), + ROUTES.UserPage(user._id), expect.anything(), ); }); diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx index 44463a81d..1ed95557e 100644 --- a/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx +++ b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx @@ -3,50 +3,45 @@ import { libraryMocks } from '@/utils/testing/mocks'; import { TeamFactory } from '@/utils/factories/team'; import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import { getFormattedTeamUserRole } from '@/utils/getFormattedTeamUserRole'; +import { TeamUserRoles } from '@/utils/enums/team.user.roles'; import RoleSelector, { RoleSelectorProps } from './RoleSelector'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: RoleSelectorProps) => - renderWithProviders(, { routerOptions: mockRouter }); +const render = (props: Partial = {}) => + renderWithProviders( + , + { routerOptions: mockRouter }, + ); describe('Components/Teams/Team/TeamMemberItem/RoleSelector', () => { - let defaultProps: RoleSelectorProps; - beforeEach(() => { - const team = TeamFactory.create(); - defaultProps = { - role: team.users[0].role, - userId: team.users[0].user._id, - isTeamPage: true, - canChangeRole: true, - }; - }); - it('should render correctly', () => { // Arrange - const roleSelectorProps = { ...defaultProps }; + const team = TeamFactory.create(); + // Act - const { getByText } = render(roleSelectorProps); + const { getByText } = render({ role: team.users[0].role }); // Assert - expect(getByText(getFormattedTeamUserRole(roleSelectorProps.role))).toBeInTheDocument(); + expect(getByText(getFormattedTeamUserRole(team.users[0].role))).toBeInTheDocument(); }); it('should allow to change role', () => { - // Arrange - const roleSelectorProps = { ...defaultProps }; // Act - const { getByRole } = render(roleSelectorProps); + const { getByRole } = render({ canChangeRole: true }); // Assert expect(getByRole('button')).toBeInTheDocument(); }); it('should not allow to change role', () => { - // Arrange - const roleSelectorProps = { ...defaultProps, canChangeRole: false }; // Act - const { queryByRole } = render(roleSelectorProps); + const { queryByRole } = render({ canChangeRole: false }); // Assert expect(queryByRole('button')).not.toBeInTheDocument(); diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx index 1746e98bb..de5ee3dfc 100644 --- a/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx +++ b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx @@ -5,57 +5,42 @@ import { getFormattedUsername } from '@/utils/getFormattedUsername'; import { libraryMocks } from '@/utils/testing/mocks'; import TeamMemberItem, { TeamMemberItemProps } from './TeamMemberItem'; -const DEFAULT_PROPS = { - member: TeamUserFactory.create(), - isTeamPage: true, -}; - const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamMemberItemProps) => - renderWithProviders(, { routerOptions: mockRouter }); +const render = (props: Partial = {}) => + renderWithProviders(, { + routerOptions: mockRouter, + }); describe('Components/Teams/Team/TeamMemberItem', () => { it('should render correctly', () => { // Arrange - const teamMemberItemProps = { ...DEFAULT_PROPS }; + const member = TeamUserFactory.create(); // Act - const { getByText, getByTestId } = render(teamMemberItemProps); + const { getByText, getByTestId } = render({ member }); // Assert expect( - getByText( - getFormattedUsername( - teamMemberItemProps.member.user.firstName, - teamMemberItemProps.member.user.lastName, - ), - ), + getByText(getFormattedUsername(member.user.firstName, member.user.lastName)), ).toBeInTheDocument(); expect(getByTestId('roleSelector')).toBeInTheDocument(); }); it('should allow to change new joiner status', () => { - // Arrange - const teamMemberItemProps = { ...DEFAULT_PROPS, hasPermissions: true }; - // Act - const { getByTestId } = render(teamMemberItemProps); + const { getByTestId } = render({ hasPermissions: true }); // Assert expect(getByTestId('boardRolePopover')).toBeInTheDocument(); }); it('should not allow to change new joiner status', () => { - // Arrange - const teamMemberItemProps = { - ...DEFAULT_PROPS, + // Act + const { getByTestId } = render({ member: TeamUserFactory.create({ isNewJoiner: true }), hasPermissions: false, - }; - - // Act - const { getByTestId } = render(teamMemberItemProps); + }); // Assert expect(getByTestId('newJoinerTooltip')).toBeInTheDocument(); diff --git a/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx b/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx index 38693d52b..9bff73782 100644 --- a/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx +++ b/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx @@ -1,28 +1,31 @@ import React from 'react'; import { libraryMocks } from '@/utils/testing/mocks'; import { renderWithProviders } from '@/utils/testing/renderWithProviders'; -import { TeamFactory } from '@/utils/factories/team'; +import { TeamUserFactory } from '@/utils/factories/user'; import TeamMembersList, { TeamMembersListProps } from './TeamMembersList'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamMembersListProps) => - renderWithProviders(, { routerOptions: mockRouter }); +const render = (props: Partial = {}) => + renderWithProviders( + , + { routerOptions: mockRouter }, + ); describe('Components/Teams/Team/TeamMembersList', () => { it('should render correctly', () => { // Arrange - const team = TeamFactory.create(); - const teamMembersListProps: TeamMembersListProps = { - teamUsers: team.users, - isTeamPage: true, - hasPermissions: true, - }; + const teamUsers = TeamUserFactory.createMany(3); // Act - const { getAllByTestId } = render(teamMembersListProps); + const { getAllByTestId } = render({ teamUsers }); // Assert - expect(getAllByTestId('teamMemberItem')).toHaveLength(team.users.length); + expect(getAllByTestId('teamMemberItem')).toHaveLength(teamUsers.length); }); }); diff --git a/frontend/src/components/Teams/Team/TeamMembersList.tsx b/frontend/src/components/Teams/Team/TeamMembersList.tsx index 32b1e297f..3ce2c10d5 100644 --- a/frontend/src/components/Teams/Team/TeamMembersList.tsx +++ b/frontend/src/components/Teams/Team/TeamMembersList.tsx @@ -16,7 +16,7 @@ const TeamMembersList = ({ hasPermissions, isTeamPage = false, }: TeamMembersListProps) => ( - + {teamUsers.map((teamUser) => ( = () => ; + +export const Default = Template.bind({}); +Default.storyName = 'Basic Usage'; diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx index b7aff38ff..330b0118b 100644 --- a/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx +++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx @@ -6,19 +6,18 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import TeamBoards, { TeamBoardsProps } from './TeamBoards'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamBoardsProps) => - renderWithProviders(, { routerOptions: mockRouter }); +const render = (props: Partial = {}) => + renderWithProviders(, { + routerOptions: mockRouter, + }); describe('Components/Teams/TeamsList/TeamItem/TeamBoards', () => { it('should render No boards', () => { // Arrange - const teamBoardsProps = { - team: TeamFactory.create({ boardsCount: 0 }), - havePermissions: false, - }; + const team = TeamFactory.create({ boardsCount: 0 }); // Act - const { getByText } = render(teamBoardsProps); + const { getByText } = render({ team, havePermissions: false }); // Assert expect(getByText('No boards')).toBeInTheDocument(); @@ -26,21 +25,18 @@ describe('Components/Teams/TeamsList/TeamItem/TeamBoards', () => { it('should render Create first board', async () => { // Arrange - const teamBoardsProps = { - team: TeamFactory.create({ boardsCount: 0 }), - havePermissions: true, - }; + const team = TeamFactory.create({ boardsCount: 0 }); // Act - const { getByText } = render(teamBoardsProps); + const { getByText } = render({ team }); const link = getByText('Create first board'); fireEvent.click(link); // Assert await waitFor(() => { expect(mockRouter.push).toHaveBeenCalledWith( - ROUTES.NewTeamBoard(teamBoardsProps.team.id), - ROUTES.NewTeamBoard(teamBoardsProps.team.id), + ROUTES.NewTeamBoard(team.id), + ROUTES.NewTeamBoard(team.id), expect.anything(), ); }); @@ -51,21 +47,18 @@ describe('Components/Teams/TeamsList/TeamItem/TeamBoards', () => { it('should render N boards', async () => { // Arrange - const teamBoardsProps = { - team: TeamFactory.create({ boardsCount: 3 }), - havePermissions: true, - }; + const team = TeamFactory.create({ boardsCount: 3 }); // Act - const { getByText } = render(teamBoardsProps); + const { getByText } = render({ team }); const link = getByText('3 team boards'); fireEvent.click(link); // Assert await waitFor(() => { expect(mockRouter.push).toHaveBeenCalledWith( - ROUTES.TeamBoards(teamBoardsProps.team.id), - ROUTES.TeamBoards(teamBoardsProps.team.id), + ROUTES.TeamBoards(team.id), + ROUTES.TeamBoards(team.id), expect.anything(), ); }); diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx index a25431373..a631f30ea 100644 --- a/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx +++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx @@ -4,7 +4,7 @@ import TeamItem from '@/components/Teams/TeamsList/TeamItem/TeamItem'; import { TeamFactory } from '@/utils/factories/team'; import { ComponentStory } from '@storybook/react'; -import { createTeamUser } from '../../../../stories/utils/createTeamUser'; +import { createTeamUser } from '@/stories/utils/createTeamUser'; export default { title: 'Teams/TeamItem', @@ -16,6 +16,10 @@ export default { hidden: true, }, }, + nextRouter: { + pathname: '/teams', + query: {}, + }, }, args: { team: TeamFactory.create(), @@ -39,8 +43,19 @@ const Template: ComponentStory = ({ team }) => { createTeamUser(user, team); } - return ; + return ; }; export const Default = Template.bind({}); -Default.storyName = 'Basic Usage'; +Default.storyName = 'Team Page'; + +export const UserPage = Template.bind({}); +UserPage.storyName = 'User Page'; +UserPage.parameters = { + nextRouter: { + pathname: '/users', + query: { + userId: '420', + }, + }, +}; diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx index 00b5b9cc4..e26b6a70a 100644 --- a/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx +++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx @@ -6,40 +6,36 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import TeamTitle, { TeamTitleProps } from './TeamTitle'; const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamTitleProps) => - renderWithProviders(, { routerOptions: mockRouter }); - -describe('Components/Teams/TeamsList/TeamItem/TeamTitle', () => { - let defaultProps: TeamTitleProps; - beforeEach(() => { - const team = TeamFactory.create(); - defaultProps = { title: team.name, teamId: team.id, isTeamPage: false }; +const render = (props: Partial) => + renderWithProviders(, { + routerOptions: mockRouter, }); +describe('Components/Teams/TeamsList/TeamItem/TeamTitle', () => { it('should render correctly', () => { // Arrange - const teamTitleProps = { ...defaultProps }; + const team = TeamFactory.create(); // Act - const { getByText } = render(teamTitleProps); + const { getByText } = render({ title: team.name }); // Assert - expect(getByText(teamTitleProps.title)).toBeInTheDocument(); + expect(getByText(team.name)).toBeInTheDocument(); }); it('should redirect to team page', async () => { // Arrange - const teamTitleProps = { ...defaultProps, isTeamPage: true }; + const team = TeamFactory.create(); // Act - const { getByText } = render(teamTitleProps); - fireEvent.click(getByText(teamTitleProps.title)); + const { getByText } = render({ title: team.name, teamId: team.id }); + fireEvent.click(getByText(team.name)); // Assert await waitFor(() => { expect(mockRouter.push).toHaveBeenCalledWith( - ROUTES.TeamPage(teamTitleProps.teamId), - ROUTES.TeamPage(teamTitleProps.teamId), + ROUTES.TeamPage(team.id), + ROUTES.TeamPage(team.id), expect.anything(), ); }); diff --git a/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx index 290833def..13274bbbe 100644 --- a/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx +++ b/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx @@ -3,40 +3,34 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders'; import { TeamFactory } from '@/utils/factories/team'; import { fireEvent, waitFor } from '@testing-library/react'; import { ROUTES } from '@/utils/routes'; +import { Team } from '@/types/team/team'; import TeamsList, { TeamsListProps } from './TeamList'; -const DEFAULT_PROPS = { - teams: TeamFactory.createMany(3), -}; - const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' }); -const render = (props: TeamsListProps = DEFAULT_PROPS) => - renderWithProviders(, { routerOptions: mockRouter }); - -describe('Components/Teams/TeamsList', () => { - let testProps: TeamsListProps; - beforeEach(() => { - testProps = { ...DEFAULT_PROPS }; +const render = (props: Partial = {}) => + renderWithProviders(, { + routerOptions: mockRouter, }); +describe('Components/Teams/TeamsList', () => { it('should render correctly', () => { // Arrange - const teamItemProps = { ...testProps }; + const teams = TeamFactory.createMany(3); // Act - const { getAllByTestId } = render(teamItemProps); + const { getAllByTestId } = render({ teams }); // Assert - expect(getAllByTestId('teamItem')).toHaveLength(teamItemProps.teams.length); + expect(getAllByTestId('teamItem')).toHaveLength(teams.length); }); it('should render empty state correctly', async () => { // Arrange - const teamItemProps = { ...testProps, teams: [] }; + const teams: Team[] = []; // Act - const { getByTestId, getByText } = render(teamItemProps); + const { getByTestId, getByText } = render({ teams }); fireEvent.click(getByText('Create your first team')); // Assert diff --git a/frontend/src/components/Users/User/UserTeamsList.spec.tsx b/frontend/src/components/Users/User/UserTeamsList.spec.tsx deleted file mode 100644 index 0df350f8d..000000000 --- a/frontend/src/components/Users/User/UserTeamsList.spec.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { libraryMocks } from '@/utils/testing/mocks'; -import { renderWithProviders } from '@/utils/testing/renderWithProviders'; -import { TeamFactory } from '@/utils/factories/team'; -import UserTeamsList, { UserTeamsListProps } from './UserTeamsList'; - -const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/users' }); - -const render = (props: Partial = {}) => - renderWithProviders(, { - routerOptions: mockRouter, - }); - -describe('Components/Users/User/UserTeamsList', () => { - it('should render correctly', () => { - // Arrange - const teams = TeamFactory.createMany(); - - // Act - const { getAllByTestId } = render({ userTeams: teams }); - - // Assert - expect(getAllByTestId('teamItem')).toHaveLength(teams.length); - }); -}); diff --git a/frontend/src/components/Users/User/UserTeamsList.tsx b/frontend/src/components/Users/User/UserTeamsList.tsx deleted file mode 100644 index 8479befee..000000000 --- a/frontend/src/components/Users/User/UserTeamsList.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { Team } from '@/types/team/team'; -import Flex from '@/components/Primitives/Layout/Flex/Flex'; - -import TeamItem from '@/components/Teams/TeamsList/TeamItem/TeamItem'; -import useCurrentSession from '@/hooks/useCurrentSession'; - -export type UserTeamsListProps = { - userTeams: Team[]; -}; - -const UserTeamsList = ({ userTeams }: UserTeamsListProps) => { - const { userId, isSAdmin } = useCurrentSession(); - - return ( - - {userTeams.map((team) => ( - - ))} - - ); -}; - -export default UserTeamsList;