Skip to content

Commit 4a97503

Browse files
KneesalKneesal
committed
fix: journey customize team select tests
1 parent cc222be commit 4a97503

File tree

5 files changed

+159
-142
lines changed

5 files changed

+159
-142
lines changed

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect/JourneyCustomizeTeamSelect.spec.tsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { MockedProvider } from '@apollo/client/testing'
2+
import { fireEvent, render, waitFor, within } from '@testing-library/react'
3+
import { Formik } from 'formik'
4+
5+
import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
6+
7+
import {
8+
GET_LAST_ACTIVE_TEAM_ID_AND_TEAMS,
9+
TeamProvider
10+
} from '@core/journeys/ui/TeamProvider'
11+
12+
describe('JourneyCustomizeTeamSelect', () => {
13+
beforeEach(() => {
14+
jest.clearAllMocks()
15+
})
16+
17+
it('renders selected team title', () => {
18+
const teams = [
19+
{ id: 'teamId2', title: 'Team Two', publicTitle: 'Team 2' },
20+
{ id: 'teamId1', title: 'Team One', publicTitle: 'Team 1' }
21+
]
22+
23+
const { getByText } = render(
24+
<MockedProvider
25+
mocks={[
26+
{
27+
request: { query: GET_LAST_ACTIVE_TEAM_ID_AND_TEAMS },
28+
result: {
29+
data: {
30+
getJourneyProfile: {
31+
id: 'p1',
32+
lastActiveTeamId: null,
33+
__typename: 'JourneyProfile'
34+
},
35+
teams: teams.map((t) => ({
36+
__typename: 'Team',
37+
id: t.id,
38+
title: t.title,
39+
publicTitle: t.publicTitle,
40+
userTeams: [],
41+
customDomains: []
42+
}))
43+
}
44+
}
45+
}
46+
]}
47+
>
48+
<TeamProvider>
49+
<Formik initialValues={{ teamSelect: 'teamId2' }} onSubmit={() => {}}>
50+
<JourneyCustomizeTeamSelect />
51+
</Formik>
52+
</TeamProvider>
53+
</MockedProvider>
54+
)
55+
56+
return waitFor(() => expect(getByText('Team Two')).toBeInTheDocument())
57+
})
58+
59+
it('falls back to publicTitle when title is not available', () => {
60+
const teams = [
61+
{ id: 'teamId1', title: null, publicTitle: 'Team 1' },
62+
{ id: 'teamId2', title: 'Team Two', publicTitle: 'Team 2' }
63+
]
64+
65+
const { getByText } = render(
66+
<MockedProvider
67+
mocks={[
68+
{
69+
request: { query: GET_LAST_ACTIVE_TEAM_ID_AND_TEAMS },
70+
result: {
71+
data: {
72+
getJourneyProfile: {
73+
id: 'p1',
74+
lastActiveTeamId: null,
75+
__typename: 'JourneyProfile'
76+
},
77+
teams: teams.map((t) => ({
78+
__typename: 'Team',
79+
id: t.id,
80+
title: t.title,
81+
publicTitle: t.publicTitle,
82+
userTeams: [],
83+
customDomains: []
84+
}))
85+
}
86+
}
87+
}
88+
]}
89+
>
90+
<TeamProvider>
91+
<Formik initialValues={{ teamSelect: 'teamId1' }} onSubmit={() => {}}>
92+
<JourneyCustomizeTeamSelect />
93+
</Formik>
94+
</TeamProvider>
95+
</MockedProvider>
96+
)
97+
98+
return waitFor(() => expect(getByText('Team 1')).toBeInTheDocument())
99+
})
100+
101+
it('lists teams sorted by title and updates selection', async () => {
102+
const teams = [
103+
{ id: 'teamId3', title: 'Team Three', publicTitle: 'Team 3' },
104+
{ id: 'teamId1', title: 'Team One', publicTitle: 'Team 1' },
105+
{ id: 'teamId2', title: 'Team Two', publicTitle: 'Team 2' }
106+
]
107+
108+
const { getByRole, getAllByRole } = render(
109+
<MockedProvider
110+
mocks={[
111+
{
112+
request: { query: GET_LAST_ACTIVE_TEAM_ID_AND_TEAMS },
113+
result: {
114+
data: {
115+
getJourneyProfile: {
116+
id: 'p1',
117+
lastActiveTeamId: null,
118+
__typename: 'JourneyProfile'
119+
},
120+
teams: teams.map((t) => ({
121+
__typename: 'Team',
122+
id: t.id,
123+
title: t.title,
124+
publicTitle: t.publicTitle,
125+
userTeams: [],
126+
customDomains: []
127+
}))
128+
}
129+
}
130+
}
131+
]}
132+
>
133+
<TeamProvider>
134+
<Formik initialValues={{ teamSelect: 'teamId1' }} onSubmit={() => {}}>
135+
<JourneyCustomizeTeamSelect />
136+
</Formik>
137+
</TeamProvider>
138+
</MockedProvider>
139+
)
140+
141+
const combobox = getByRole('combobox', { name: 'Team' })
142+
fireEvent.focus(combobox)
143+
fireEvent.keyDown(combobox, { key: 'ArrowDown' })
144+
145+
await waitFor(async () => {
146+
expect(getByRole('option', { name: 'Team One' })).toBeInTheDocument()
147+
expect(getByRole('option', { name: 'Team Two' })).toBeInTheDocument()
148+
expect(getByRole('option', { name: 'Team Three' })).toBeInTheDocument()
149+
})
150+
151+
fireEvent.click(getByRole('option', { name: 'Team Two' }))
152+
153+
expect(getByRole('combobox', { name: 'Team' })).toHaveTextContent(
154+
'Team Two'
155+
)
156+
})
157+
})

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect.tsx‎ renamed to ‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect/JourneyCustomizeTeamSelect.tsx‎

File renamed without changes.

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,14 @@ import Typography from '@mui/material/Typography'
44
import { ReactElement, useState } from 'react'
55

66
import ArrowRightIcon from '@core/shared/ui/icons/ArrowRight'
7-
import Box from '@mui/material/Box'
87

98
import { useTranslation } from 'next-i18next'
109
import { LanguageScreenCardPreview } from './LanguageScreenCardPreview'
1110
import { useUser } from 'next-firebase-auth'
1211
import { useTeam } from '@core/journeys/ui/TeamProvider'
1312
import FormControl from '@mui/material/FormControl'
1413
import { Formik, FormikValues } from 'formik'
15-
import { boolean, object, string } from 'yup'
16-
import sortBy from 'lodash/sortBy'
14+
import { object, string } from 'yup'
1715
import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
1816
import { useJourneyDuplicateMutation } from '@core/journeys/ui/useJourneyDuplicateMutation'
1917
import { useJourney } from '@core/journeys/ui/JourneyProvider'
@@ -37,7 +35,6 @@ export function LanguageScreen({
3735
//If the user is not authenticated, useUser will return a User instance with a null id https://github.com/gladly-team/next-firebase-auth?tab=readme-ov-file#useuser
3836
const isSignedIn = user?.id != null
3937
const { query } = useTeam()
40-
const teams = query?.data?.teams ?? []
4138

4239
const validationSchema = object({
4340
teamSelect: string().required()

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreenCardPreview.tsx‎

Lines changed: 0 additions & 138 deletions
This file was deleted.

0 commit comments

Comments
 (0)