Skip to content

Commit df71266

Browse files
csiyangcsiyang
authored
test: add tests (#7435)
1 parent 305ee80 commit df71266

File tree

20 files changed

+1443
-41
lines changed

20 files changed

+1443
-41
lines changed

‎apps/journeys-admin/pages/journeys/[journeyId]/quick.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,7 @@ function JourneyQuickSettingsPage({ status }): ReactElement {
5151
{status === 'noAccess' ? (
5252
<AccessDenied />
5353
) : (
54-
<JourneyProvider
55-
value={{
56-
journey:
57-
data?.journey != null
58-
? {
59-
...data.journey,
60-
journeyCustomizationFields:
61-
(data.journey as any).journeyCustomizationFields ?? []
62-
}
63-
: undefined,
64-
variant: 'admin'
65-
}}
66-
>
54+
<JourneyProvider value={{ journey: data?.journey, variant: 'admin' }}>
6755
<EditorProvider>
6856
<JourneyQuickSettings displayName={displayName ?? undefined} />
6957
</EditorProvider>

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/CustomizationToggle/CustomizationToggle.spec.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import { fireEvent, render, screen } from '@testing-library/react'
2+
import React from 'react'
3+
4+
import { EditorProvider } from '@core/journeys/ui/EditorProvider'
5+
import { TreeBlock } from '@core/journeys/ui/block'
6+
import {
7+
BlockFields_StepBlock as StepBlock,
8+
BlockFields_ButtonBlock as ButtonBlock
9+
} from '../../../../../../../../../../__generated__/BlockFields'
10+
11+
import { CustomizationToggle } from './CustomizationToggle'
12+
13+
jest.mock('../../../../../../../utils/useActionCommand', () => ({
14+
useActionCommand: () => ({ addAction: jest.fn() })
15+
}))
16+
17+
describe('CustomizationToggle', () => {
18+
it('renders toggle for LinkAction and reflects checked state', () => {
19+
const selectedBlock = {
20+
id: 'button-1',
21+
__typename: 'ButtonBlock',
22+
action: {
23+
__typename: 'LinkAction',
24+
url: 'https://example.com',
25+
customizable: true,
26+
parentStepId: 'step-1'
27+
}
28+
} as unknown as TreeBlock<ButtonBlock>
29+
const selectedStep = {
30+
id: 'step-1',
31+
__typename: 'StepBlock',
32+
parentBlockId: 'journeyId',
33+
parentOrder: 0,
34+
locked: false,
35+
slug: 'slug'
36+
} as unknown as TreeBlock<StepBlock>
37+
38+
render(
39+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
40+
<CustomizationToggle />
41+
</EditorProvider>
42+
)
43+
44+
expect(screen.getByText('Customize')).toBeInTheDocument()
45+
const toggle = screen.getByRole('checkbox', { name: 'Toggle customizable' })
46+
expect(toggle).toBeChecked()
47+
})
48+
49+
it('renders toggle for EmailAction and reflects unchecked state', () => {
50+
const selectedBlock = {
51+
id: 'button-2',
52+
__typename: 'ButtonBlock',
53+
action: {
54+
__typename: 'EmailAction',
55+
email: '[email protected]',
56+
customizable: false,
57+
parentStepId: 'step-2'
58+
}
59+
} as unknown as TreeBlock<ButtonBlock>
60+
const selectedStep = {
61+
id: 'step-2',
62+
__typename: 'StepBlock',
63+
parentBlockId: 'journeyId',
64+
parentOrder: 0,
65+
locked: false,
66+
slug: 'slug'
67+
} as unknown as TreeBlock<StepBlock>
68+
69+
render(
70+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
71+
<CustomizationToggle />
72+
</EditorProvider>
73+
)
74+
75+
expect(screen.getByText('Customize')).toBeInTheDocument()
76+
const toggle = screen.getByRole('checkbox', { name: 'Toggle customizable' })
77+
expect(toggle).not.toBeChecked()
78+
})
79+
80+
it('dispatches addAction on LinkAction toggle change', () => {
81+
const addAction = jest.fn()
82+
jest
83+
.spyOn(
84+
require('../../../../../../../utils/useActionCommand'),
85+
'useActionCommand'
86+
)
87+
.mockReturnValue({ addAction })
88+
89+
const selectedBlock = {
90+
id: 'button-3',
91+
__typename: 'ButtonBlock',
92+
action: {
93+
__typename: 'LinkAction',
94+
url: 'https://example.com',
95+
customizable: false,
96+
parentStepId: 'step-3'
97+
}
98+
} as unknown as TreeBlock<ButtonBlock>
99+
const selectedStep = {
100+
id: 'step-3',
101+
__typename: 'StepBlock',
102+
parentBlockId: 'journeyId',
103+
parentOrder: 0,
104+
locked: false,
105+
slug: 'slug'
106+
} as unknown as TreeBlock<StepBlock>
107+
108+
render(
109+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
110+
<CustomizationToggle />
111+
</EditorProvider>
112+
)
113+
114+
const toggle = screen.getByRole('checkbox', { name: 'Toggle customizable' })
115+
fireEvent.click(toggle)
116+
117+
expect(addAction).toHaveBeenCalledWith(
118+
expect.objectContaining({
119+
blockId: 'button-3',
120+
action: expect.objectContaining({
121+
__typename: 'LinkAction',
122+
url: 'https://example.com',
123+
customizable: true,
124+
parentStepId: 'step-3'
125+
})
126+
})
127+
)
128+
})
129+
130+
it('dispatches addAction on EmailAction toggle change', () => {
131+
const addAction = jest.fn()
132+
jest
133+
.spyOn(
134+
require('../../../../../../../utils/useActionCommand'),
135+
'useActionCommand'
136+
)
137+
.mockReturnValue({ addAction })
138+
139+
const selectedBlock = {
140+
id: 'button-4',
141+
__typename: 'ButtonBlock',
142+
action: {
143+
__typename: 'EmailAction',
144+
email: '[email protected]',
145+
customizable: false,
146+
parentStepId: 'step-4'
147+
}
148+
} as unknown as TreeBlock<ButtonBlock>
149+
const selectedStep = {
150+
id: 'step-4',
151+
__typename: 'StepBlock',
152+
parentBlockId: 'journeyId',
153+
parentOrder: 0,
154+
locked: false,
155+
slug: 'slug'
156+
} as unknown as TreeBlock<StepBlock>
157+
158+
render(
159+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
160+
<CustomizationToggle />
161+
</EditorProvider>
162+
)
163+
164+
const toggle = screen.getByRole('checkbox', { name: 'Toggle customizable' })
165+
fireEvent.click(toggle)
166+
167+
expect(addAction).toHaveBeenCalledWith(
168+
expect.objectContaining({
169+
blockId: 'button-4',
170+
action: expect.objectContaining({
171+
__typename: 'EmailAction',
172+
email: '[email protected]',
173+
customizable: true,
174+
parentStepId: 'step-4'
175+
})
176+
})
177+
)
178+
})
179+
})

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/EmailAction/EmailAction.spec.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { blockActionNavigateToBlockUpdateMock } from '../../../../../../../../..
1414
import { CommandUndoItem } from '../../../../../../../Toolbar/Items/CommandUndoItem'
1515

1616
import { EmailAction } from '.'
17+
import { StepFields as StepBlock } from '../../../../../../../../../../__generated__/StepFields'
1718

1819
jest.mock('@mui/material/useMediaQuery', () => ({
1920
__esModule: true,
@@ -44,6 +45,10 @@ describe('EmailAction', () => {
4445
children: [],
4546
settings: null
4647
}
48+
const selectedStep = {
49+
__typename: 'StepBlock',
50+
id: 'step.id'
51+
} as unknown as TreeBlock<StepBlock>
4752

4853
it('displays the action email', async () => {
4954
render(
@@ -62,7 +67,7 @@ describe('EmailAction', () => {
6267
const result = jest.fn().mockReturnValue(blockActionEmailUpdateMock.result)
6368
render(
6469
<MockedProvider mocks={[{ ...blockActionEmailUpdateMock, result }]}>
65-
<EditorProvider initialState={{ selectedBlock }}>
70+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
6671
<EmailAction />
6772
</EditorProvider>
6873
</MockedProvider>
@@ -135,7 +140,8 @@ describe('EmailAction', () => {
135140
gtmEventName: 'gtmEventName',
136141
blockId: 'step2.id'
137142
}
138-
}
143+
},
144+
selectedStep
139145
}}
140146
>
141147
<EmailAction />

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/LinkAction/LinkAction.spec.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { blockActionNavigateToBlockUpdateMock } from '../../../../../../../../..
1515
import { CommandUndoItem } from '../../../../../../../Toolbar/Items/CommandUndoItem'
1616

1717
import { LinkAction } from '.'
18+
import { StepFields as StepBlock } from '../../../../../../../../../../__generated__/StepFields'
1819

1920
jest.mock('@mui/material/useMediaQuery', () => ({
2021
__esModule: true,
@@ -46,10 +47,15 @@ describe('LinkAction', () => {
4647
settings: null
4748
}
4849

50+
const selectedStep = {
51+
__typename: 'StepBlock',
52+
id: 'step.id'
53+
} as unknown as TreeBlock<StepBlock>
54+
4955
it('displays the action url', async () => {
5056
render(
5157
<MockedProvider>
52-
<EditorProvider initialState={{ selectedBlock }}>
58+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
5359
<LinkAction />
5460
</EditorProvider>
5561
</MockedProvider>
@@ -60,10 +66,11 @@ describe('LinkAction', () => {
6066
})
6167

6268
it('updates action url', async () => {
69+
// TODO TEST: update for new props (customizable, parentStepId)
6370
const result = jest.fn().mockReturnValue(blockActionLinkUpdateMock.result)
6471
render(
6572
<MockedProvider mocks={[{ ...blockActionLinkUpdateMock, result }]}>
66-
<EditorProvider initialState={{ selectedBlock }}>
73+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
6774
<LinkAction />
6875
</EditorProvider>
6976
</MockedProvider>
@@ -99,7 +106,7 @@ describe('LinkAction', () => {
99106
const result = jest.fn().mockReturnValue(blockActionLinkUpdateMock.result)
100107
render(
101108
<MockedProvider mocks={[{ ...blockActionLinkUpdateMock, result }]}>
102-
<EditorProvider initialState={{ selectedBlock }}>
109+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
103110
<LinkAction />
104111
</EditorProvider>
105112
</MockedProvider>
@@ -120,7 +127,9 @@ describe('LinkAction', () => {
120127
blockUpdateLinkAction: {
121128
parentBlockId: selectedBlock.id,
122129
gtmEventName: 'gtmEventName',
123-
url: 'viber://'
130+
url: 'viber://',
131+
customizable: false,
132+
parentStepId: 'step.id'
124133
}
125134
}
126135
}))
@@ -134,15 +143,17 @@ describe('LinkAction', () => {
134143
variables: {
135144
id: selectedBlock.id,
136145
input: {
137-
url: 'viber://'
146+
url: 'viber://',
147+
customizable: false,
148+
parentStepId: 'step.id'
138149
}
139150
}
140151
},
141152
result
142153
}
143154
]}
144155
>
145-
<EditorProvider initialState={{ selectedBlock }}>
156+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
146157
<LinkAction />
147158
</EditorProvider>
148159
</MockedProvider>
@@ -178,7 +189,7 @@ describe('LinkAction', () => {
178189
const result = jest.fn().mockReturnValue(blockActionLinkUpdateMock.result)
179190
render(
180191
<MockedProvider mocks={[{ ...blockActionLinkUpdateMock, result }]}>
181-
<EditorProvider initialState={{ selectedBlock }}>
192+
<EditorProvider initialState={{ selectedBlock, selectedStep }}>
182193
<LinkAction />
183194
</EditorProvider>
184195
</MockedProvider>
@@ -216,7 +227,8 @@ describe('LinkAction', () => {
216227
gtmEventName: 'gtmEventName',
217228
blockId: 'step2.id'
218229
}
219-
}
230+
},
231+
selectedStep
220232
}}
221233
>
222234
<LinkAction />

‎apps/journeys-admin/src/components/Editor/Toolbar/Items/TemplateSettingsItem/TemplateSettingsDialog/AboutTabPanel/AboutTabPanel.spec.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,8 @@ describe('AboutTabPanel', () => {
102102
expect(queryByText('Strategy')).not.toBeInTheDocument()
103103
expect(getByTestId('strategy-iframe')).toBeInTheDocument()
104104
})
105+
106+
it('should render Customize Template text area', () => {
107+
// TODO TEST: renders text area
108+
})
105109
})

0 commit comments

Comments
 (0)