Skip to content

Commit 4a86740

Browse files
✅ [#59] Add test for conditionally showing a nested component
1 parent 5cf367f commit 4a86740

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

src/reference/hidden.stories.ts

+49
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,52 @@ const {custom: NestedHidden, reference: NestedHiddenReference} = storyFactory({
116116
});
117117

118118
export {NestedHidden, NestedHiddenReference};
119+
120+
const {custom: ConditionallyNestedVisible, reference: ConditionallyNestedVisibleReference} =
121+
storyFactory({
122+
args: {
123+
components: [
124+
{
125+
type: 'fieldset',
126+
id: 'fieldset',
127+
key: 'fieldset',
128+
label: 'Layout container',
129+
hideHeader: false,
130+
components: [
131+
{
132+
type: 'textfield',
133+
id: 'textfieldTrigger',
134+
key: 'textfieldTrigger',
135+
label: 'Trigger',
136+
},
137+
{
138+
type: 'textfield',
139+
id: 'textfieldHide',
140+
key: 'textfieldHide',
141+
label: 'Dynamically visible',
142+
conditional: {
143+
when: 'textfieldTrigger',
144+
eq: 'show other field',
145+
show: true,
146+
},
147+
},
148+
],
149+
},
150+
],
151+
},
152+
153+
play: async ({canvasElement}) => {
154+
const canvas = within(canvasElement);
155+
156+
const triggerField = await canvas.findByLabelText('Trigger');
157+
expect(canvas.queryByLabelText('Dynamically visible')).not.toBeInTheDocument();
158+
159+
await userEvent.type(triggerField, 'show other field');
160+
expect(triggerField).toHaveDisplayValue('show other field');
161+
162+
const followerField = await canvas.findByLabelText('Dynamically visible');
163+
expect(followerField).toBeVisible();
164+
},
165+
});
166+
167+
export {ConditionallyNestedVisible, ConditionallyNestedVisibleReference};

0 commit comments

Comments
 (0)