Skip to content

Commit 1f30205

Browse files
mocca102mocca102
committed
Fix Storybook tests
1 parent 5ad0b4d commit 1f30205

File tree

2 files changed

+50
-4
lines changed

2 files changed

+50
-4
lines changed

‎src/stories/tests/ComponentTests.stories.tsx

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { within, userEvent, expect } from '@storybook/test';
1+
import { within, userEvent, expect, fn } from '@storybook/test';
22
import { CioAutocomplete } from '../../index';
33
import { argTypes } from '../Autocomplete/argTypes';
44
import { getCioClient, sleep } from '../../utils/helpers';
@@ -26,6 +26,11 @@ export default {
2626
},
2727
};
2828

29+
const explicitActionsSpies = {
30+
onFocus: fn(),
31+
onChange: fn(),
32+
};
33+
2934
const defaultArgs: CioAutocompleteProps = {
3035
apiKey,
3136
onSubmit,
@@ -37,8 +42,14 @@ const defaultArgs: CioAutocompleteProps = {
3742
indexSectionName: 'Products',
3843
},
3944
],
45+
...explicitActionsSpies,
4046
};
4147

48+
// @ts-ignore
49+
// eslint-disable-next-line
50+
window.navigator.__defineGetter__('webdriver', () => false);
51+
window.sessionStorage.setItem('_constructorio_is_human', 'true');
52+
4253
// - No Interaction => Correctly render default state
4354
export const RenderAutocompleteDefaultState = ComponentTemplate.bind({});
4455
RenderAutocompleteDefaultState.args = defaultArgs;
@@ -83,6 +94,7 @@ FocusNoZeroStateShowNoResults.play = async ({ canvasElement }) => {
8394
// - type whitespace search term => doesn't run an autocomplete request
8495
export const TypeWhitespaceSearchTermNoError = ComponentTemplate.bind({});
8596
TypeWhitespaceSearchTermNoError.args = {
97+
...explicitActionsSpies,
8698
apiKey,
8799
};
88100
let isAutocompleteResultsError = false;
@@ -120,6 +132,7 @@ TypeWhitespaceSearchTermNoError.play = async ({ canvasElement }) => {
120132
// - type search term => render term suggestions
121133
export const TypeSearchTermRenderSearchSuggestions = ComponentTemplate.bind({});
122134
TypeSearchTermRenderSearchSuggestions.args = {
135+
...explicitActionsSpies,
123136
apiKey,
124137
sections: [
125138
{
@@ -138,6 +151,7 @@ TypeSearchTermRenderSearchSuggestions.play = async ({ canvasElement }) => {
138151
// - type search term => render products suggestions
139152
export const TypeSearchTermRenderProducts = ComponentTemplate.bind({});
140153
TypeSearchTermRenderProducts.args = {
154+
...explicitActionsSpies,
141155
apiKey,
142156
sections: [
143157
{
@@ -158,6 +172,7 @@ TypeSearchTermRenderProducts.play = async ({ canvasElement }) => {
158172
// - type search term => render recommendations section
159173
export const TypeSearchTermRenderRecommendations = ComponentTemplate.bind({});
160174
TypeSearchTermRenderRecommendations.args = {
175+
...explicitActionsSpies,
161176
apiKey,
162177
sections: [
163178
{
@@ -177,6 +192,7 @@ TypeSearchTermRenderRecommendations.play = async ({ canvasElement }) => {
177192
// - Overwrite recommendations display name set at the dashboard
178193
export const TypeSearchTermRenderOverriddenRecommendationsDisplayName = ComponentTemplate.bind({});
179194
TypeSearchTermRenderOverriddenRecommendationsDisplayName.args = {
195+
...explicitActionsSpies,
180196
apiKey,
181197
sections: [
182198
{
@@ -202,6 +218,7 @@ TypeSearchTermRenderOverriddenRecommendationsDisplayName.play = async ({ canvasE
202218
// - type search term => render all sections in default order
203219
export const TypeSearchTermRenderSectionsDefaultOrder = ComponentTemplate.bind({});
204220
TypeSearchTermRenderSectionsDefaultOrder.args = {
221+
...explicitActionsSpies,
205222
apiKey,
206223
sections: [
207224
{
@@ -246,6 +263,7 @@ TypeSearchTermRenderSectionsDefaultOrder.play = async ({ canvasElement }) => {
246263
// - type search term => render all sections in custom order
247264
export const TypeSearchTermRenderSectionsCustomOrder = ComponentTemplate.bind({});
248265
TypeSearchTermRenderSectionsCustomOrder.args = {
266+
...explicitActionsSpies,
249267
apiKey,
250268
sections: [
251269
{
@@ -364,6 +382,7 @@ ClearButtonClearInput.play = async ({ canvasElement }) => {
364382
// - focus in input field with zero state => render zero state section
365383
export const FocusRenderZeroStateSection = ComponentTemplate.bind({});
366384
FocusRenderZeroStateSection.args = {
385+
...explicitActionsSpies,
367386
apiKey,
368387
zeroStateSections: [
369388
{
@@ -402,6 +421,7 @@ NoOpenOnFocusDontRenderZeroStateSection.play = async ({ canvasElement }) => {
402421

403422
export const ZeroStateRenderCustomSection = ComponentTemplate.bind({});
404423
ZeroStateRenderCustomSection.args = {
424+
...explicitActionsSpies,
405425
apiKey,
406426
zeroStateSections: [
407427
{
@@ -438,6 +458,7 @@ ZeroStateRenderCustomSection.play = async ({ canvasElement }) => {
438458

439459
export const ZeroStateRenderProductsSection = ComponentTemplate.bind({});
440460
ZeroStateRenderProductsSection.args = {
461+
...explicitActionsSpies,
441462
apiKey,
442463
sections: [
443464
{
@@ -472,6 +493,7 @@ ZeroStateRenderProductsSection.play = async ({ canvasElement }) => {
472493

473494
export const InGroupSuggestions = ComponentTemplate.bind({});
474495
InGroupSuggestions.args = {
496+
...explicitActionsSpies,
475497
apiKey,
476498
advancedParameters: {
477499
numTermsWithGroupSuggestions: 1,
@@ -483,11 +505,12 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
483505
const canvas = within(canvasElement);
484506
await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
485507
await sleep(1000);
486-
expect(canvas.getAllByText('in Socks & Underwear').length).toEqual(1);
508+
expect(canvas.getAllByText('in Socks').length).toEqual(1);
487509
};
488510

489511
export const InGroupSuggestionsTwo = ComponentTemplate.bind({});
490512
InGroupSuggestionsTwo.args = {
513+
...explicitActionsSpies,
491514
apiKey,
492515
advancedParameters: {
493516
numTermsWithGroupSuggestions: 3,

‎src/stories/tests/HooksTests.stories.tsx

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { within, userEvent, expect } from '@storybook/test';
1+
import { within, userEvent, expect, fn } from '@storybook/test';
22
import { CioAutocomplete } from '../../index';
33
import { argTypes } from '../Autocomplete/argTypes';
44
import { getCioClient, sleep } from '../../utils/helpers';
@@ -23,6 +23,11 @@ export default {
2323
},
2424
};
2525

26+
const explicitActionsSpies = {
27+
onFocus: fn(),
28+
onChange: fn(),
29+
};
30+
2631
const defaultArgs: CioAutocompleteProps = {
2732
apiKey,
2833
onSubmit,
@@ -34,8 +39,14 @@ const defaultArgs: CioAutocompleteProps = {
3439
indexSectionName: 'Search Suggestions',
3540
},
3641
],
42+
...explicitActionsSpies,
3743
};
3844

45+
// @ts-ignore
46+
// eslint-disable-next-line
47+
window.navigator.__defineGetter__('webdriver', () => false);
48+
window.sessionStorage.setItem('_constructorio_is_human', 'true');
49+
3950
// - No Interaction => Correctly render default state
4051
export const RenderAutocompleteDefaultState = HooksTemplate.bind({});
4152
RenderAutocompleteDefaultState.args = defaultArgs;
@@ -80,6 +91,7 @@ FocusNoZeroStateShowNoResults.play = async ({ canvasElement }) => {
8091
// - type whitespace search term => doesn't run an autocomplete request
8192
export const TypeWhitespaceSearchTermNoError = HooksTemplate.bind({});
8293
TypeWhitespaceSearchTermNoError.args = {
94+
...explicitActionsSpies,
8395
apiKey,
8496
};
8597
let isAutocompleteResultsError = false;
@@ -117,6 +129,7 @@ TypeWhitespaceSearchTermNoError.play = async ({ canvasElement }) => {
117129
// - type search term => render term suggestions
118130
export const TypeSearchTermRenderSearchSuggestions = HooksTemplate.bind({});
119131
TypeSearchTermRenderSearchSuggestions.args = {
132+
...explicitActionsSpies,
120133
apiKey,
121134
sections: [
122135
{
@@ -135,6 +148,7 @@ TypeSearchTermRenderSearchSuggestions.play = async ({ canvasElement }) => {
135148
// - type search term => render products section
136149
export const TypeSearchTermRenderProducts = HooksTemplate.bind({});
137150
TypeSearchTermRenderProducts.args = {
151+
...explicitActionsSpies,
138152
apiKey,
139153
sections: [
140154
{
@@ -155,6 +169,7 @@ TypeSearchTermRenderProducts.play = async ({ canvasElement }) => {
155169
// - type search term => render Recommendations
156170
export const TypeSearchTermRenderRecommendations = HooksTemplate.bind({});
157171
TypeSearchTermRenderRecommendations.args = {
172+
...explicitActionsSpies,
158173
apiKey,
159174
sections: [
160175
{
@@ -174,6 +189,7 @@ TypeSearchTermRenderRecommendations.play = async ({ canvasElement }) => {
174189
// - Overwrite recommendations display name set at the dashboard
175190
export const TypeSearchTermRenderOverriddenRecommendationsDisplayName = HooksTemplate.bind({});
176191
TypeSearchTermRenderOverriddenRecommendationsDisplayName.args = {
192+
...explicitActionsSpies,
177193
apiKey,
178194
sections: [
179195
{
@@ -194,6 +210,7 @@ TypeSearchTermRenderOverriddenRecommendationsDisplayName.play = async ({ canvasE
194210
// - type search term => render all sections in default order
195211
export const TypeSearchTermRenderSectionsDefaultOrder = HooksTemplate.bind({});
196212
TypeSearchTermRenderSectionsDefaultOrder.args = {
213+
...explicitActionsSpies,
197214
apiKey,
198215
sections: [
199216
{
@@ -226,6 +243,7 @@ TypeSearchTermRenderSectionsDefaultOrder.play = async ({ canvasElement }) => {
226243
// - type search term => render all sections in custom order
227244
export const TypeSearchTermRenderSectionsCustomOrder = HooksTemplate.bind({});
228245
TypeSearchTermRenderSectionsCustomOrder.args = {
246+
...explicitActionsSpies,
229247
apiKey,
230248
sections: [
231249
{
@@ -294,6 +312,7 @@ SelectProductSuggestionFiresTrackingAndFillInput.play = async ({ canvasElement }
294312
// - focus in input field with zero state => render zero state section
295313
export const FocusRenderZeroStateSection = HooksTemplate.bind({});
296314
FocusRenderZeroStateSection.args = {
315+
...explicitActionsSpies,
297316
apiKey,
298317
zeroStateSections: [
299318
{
@@ -332,6 +351,7 @@ NoOpenOnFocusDontRenderZeroStateSection.play = async ({ canvasElement }) => {
332351

333352
export const ZeroStateRenderCustomSection = HooksTemplate.bind({});
334353
ZeroStateRenderCustomSection.args = {
354+
...explicitActionsSpies,
335355
apiKey,
336356
zeroStateSections: [
337357
{
@@ -368,6 +388,7 @@ ZeroStateRenderCustomSection.play = async ({ canvasElement }) => {
368388

369389
export const ZeroStateRenderProductsSection = HooksTemplate.bind({});
370390
ZeroStateRenderProductsSection.args = {
391+
...explicitActionsSpies,
371392
apiKey,
372393
sections: [
373394
{
@@ -402,6 +423,7 @@ ZeroStateRenderProductsSection.play = async ({ canvasElement }) => {
402423

403424
export const InGroupSuggestions = HooksTemplate.bind({});
404425
InGroupSuggestions.args = {
426+
...explicitActionsSpies,
405427
apiKey,
406428
advancedParameters: {
407429
numTermsWithGroupSuggestions: 1,
@@ -413,11 +435,12 @@ InGroupSuggestions.play = async ({ canvasElement }) => {
413435
const canvas = within(canvasElement);
414436
await userEvent.type(canvas.getByTestId('cio-input'), 'socks', { delay: 100 });
415437
await sleep(1000);
416-
expect(canvas.getAllByText('in Socks & Underwear').length).toEqual(1);
438+
expect(canvas.getAllByText('in Socks').length).toEqual(1);
417439
};
418440

419441
export const InGroupSuggestionsTwo = HooksTemplate.bind({});
420442
InGroupSuggestionsTwo.args = {
443+
...explicitActionsSpies,
421444
apiKey,
422445
advancedParameters: {
423446
numTermsWithGroupSuggestions: 3,

0 commit comments

Comments
 (0)