Skip to content

Commit ab295eb

Browse files
mdjastrzebskimdjastrzebski
committed
refactor: tests
1 parent c88ba76 commit ab295eb

File tree

1 file changed

+176
-185
lines changed

1 file changed

+176
-185
lines changed

‎src/matchers/__tests__/to-be-disabled.test.tsx

Lines changed: 176 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,81 @@ import {
1313
import { render } from '../..';
1414
import '../extend-expect';
1515

16-
const DISABLED_PROP_COMPONENTS = {
17-
TouchableHighlight,
18-
TouchableOpacity,
19-
TouchableWithoutFeedback,
20-
TouchableNativeFeedback,
21-
Pressable,
22-
};
16+
test('toBeDisabled/toBeEnabled supports basic case', () => {
17+
const screen = render(
18+
<View>
19+
<View testID="disabled-parent" aria-disabled>
20+
<View>
21+
<View testID="disabled-child" />
22+
</View>
23+
</View>
24+
<View>
25+
<View testID="enabled-view" />
26+
<Text testID="enabled-text">Text</Text>
27+
<TextInput testID="enabled-text-input" />
28+
<Pressable testID="enabled-pressable" />
29+
</View>
30+
</View>
31+
);
2332

24-
const ARIA_DISABLED_PROP_COMPONENTS = {
25-
View,
26-
TextInput,
27-
};
33+
expect(screen.getByTestId('disabled-parent')).toBeDisabled();
34+
expect(screen.getByTestId('disabled-child')).toBeDisabled();
35+
expect(screen.getByTestId('enabled-view')).not.toBeDisabled();
36+
expect(screen.getByTestId('enabled-text')).not.toBeDisabled();
37+
expect(screen.getByTestId('enabled-text-input')).not.toBeDisabled();
38+
expect(screen.getByTestId('enabled-pressable')).not.toBeDisabled();
39+
40+
expect(() => expect(screen.getByTestId('disabled-parent')).not.toBeDisabled())
41+
.toThrowErrorMatchingInlineSnapshot(`
42+
"expect(element).not.toBeDisabled()
43+
44+
Received element is disabled:
45+
<View
46+
aria-disabled={true}
47+
testID="disabled-parent"
48+
/>"
49+
`);
50+
51+
expect(() => expect(screen.getByTestId('enabled-view')).toBeDisabled())
52+
.toThrowErrorMatchingInlineSnapshot(`
53+
"expect(element).toBeDisabled()
54+
55+
Received element is not disabled:
56+
<View
57+
testID="enabled-view"
58+
/>"
59+
`);
60+
61+
expect(screen.getByTestId('disabled-parent')).not.toBeEnabled();
62+
expect(screen.getByTestId('disabled-child')).not.toBeEnabled();
63+
expect(screen.getByTestId('enabled-view')).toBeEnabled();
64+
expect(screen.getByTestId('enabled-text')).toBeEnabled();
65+
expect(screen.getByTestId('enabled-text-input')).toBeEnabled();
66+
expect(screen.getByTestId('enabled-pressable')).toBeEnabled();
67+
68+
expect(() => expect(screen.getByTestId('disabled-parent')).toBeEnabled())
69+
.toThrowErrorMatchingInlineSnapshot(`
70+
"expect(element).toBeEnabled()
71+
72+
Received element is not enabled:
73+
<View
74+
aria-disabled={true}
75+
testID="disabled-parent"
76+
/>"
77+
`);
2878

29-
const ALL_COMPONENTS = {
30-
...DISABLED_PROP_COMPONENTS,
31-
...ARIA_DISABLED_PROP_COMPONENTS,
32-
};
79+
expect(() => expect(screen.getByTestId('enabled-view')).not.toBeEnabled())
80+
.toThrowErrorMatchingInlineSnapshot(`
81+
"expect(element).not.toBeEnabled()
3382
34-
test('toBeDisabled/toBeEnabled works with disabled Pressable', () => {
83+
Received element is enabled:
84+
<View
85+
testID="enabled-view"
86+
/>"
87+
`);
88+
});
89+
90+
test('toBeDisabled/toBeEnabled supports Pressable with "disabled" prop', () => {
3591
const screen = render(
3692
<Pressable disabled testID="subject">
3793
<Text>Button</Text>
@@ -98,184 +154,119 @@ test('toBeDisabled/toBeEnabled works with disabled Pressable', () => {
98154
`);
99155
});
100156

101-
describe('toBeDisabled()', () => {
102-
Object.entries(DISABLED_PROP_COMPONENTS).forEach(([name, Component]) => {
103-
test(`handle disabled prop for element ${name}`, () => {
104-
const { queryByTestId } = render(
105-
//@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
106-
<Component disabled testID={name}>
107-
<TextInput />
108-
</Component>
109-
);
110-
111-
expect(queryByTestId(name)).toBeDisabled();
112-
expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrow();
113-
});
114-
});
115-
116-
Object.entries(ARIA_DISABLED_PROP_COMPONENTS).forEach(([name, Component]) => {
117-
test(`handle aria-disabled prop for element ${name}`, () => {
118-
const { queryByTestId } = render(
119-
<Component aria-disabled testID={name}>
120-
<TextInput />
121-
</Component>
122-
);
123-
124-
expect(queryByTestId(name)).toBeDisabled();
125-
expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrow();
126-
});
127-
});
128-
129-
Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
130-
test(`handle disabled in accessibilityState for element ${name}`, () => {
131-
const { queryByTestId } = render(
132-
//@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
133-
<Component accessibilityState={{ disabled: true }} testID={name}>
134-
<TextInput />
135-
</Component>
136-
);
137-
138-
expect(queryByTestId(name)).toBeDisabled();
139-
expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrow();
140-
});
141-
});
142-
143-
Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
144-
test(`handle when parent element is disabled for element ${name}`, () => {
145-
const { queryByTestId } = render(
146-
<View aria-disabled={true}>
147-
<View>
148-
{/* @ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604) */}
149-
<Component testID={name}>
150-
<TextInput />
151-
</Component>
152-
</View>
153-
</View>
154-
);
155-
156-
expect(queryByTestId(name)).toBeDisabled();
157-
});
158-
});
159-
160-
test('handle editable prop for TextInput', () => {
161-
const { getByTestId, getByPlaceholderText } = render(
162-
<View>
163-
<TextInput testID="disabled" placeholder="disabled" editable={false} />
164-
<TextInput
165-
testID="enabled-by-default"
166-
placeholder="enabled-by-default"
167-
/>
168-
<TextInput testID="enabled" placeholder="enabled" editable />
169-
</View>
157+
test.each([
158+
['Pressable', Pressable],
159+
['TouchableOpacity', TouchableOpacity],
160+
['TouchableHighlight', TouchableHighlight],
161+
['TouchableWithoutFeedback', TouchableWithoutFeedback],
162+
['TouchableNativeFeedback', TouchableNativeFeedback],
163+
] as const)(
164+
'toBeDisabled/toBeEnabled supports %s with "disabled" prop',
165+
(_, Component) => {
166+
const screen = render(
167+
// @ts-expect-error disabled prop is not available on all Touchables
168+
<Component disabled testID="subject">
169+
<Text>Button</Text>
170+
</Component>
170171
);
171172

172-
// Check host TextInput
173-
expect(getByTestId('disabled')).toBeDisabled();
174-
expect(getByTestId('enabled-by-default')).not.toBeDisabled();
175-
expect(getByTestId('enabled')).not.toBeDisabled();
176-
177-
// Check composite TextInput
178-
expect(getByPlaceholderText('disabled')).toBeDisabled();
179-
expect(getByPlaceholderText('enabled-by-default')).not.toBeDisabled();
180-
expect(getByPlaceholderText('enabled')).not.toBeDisabled();
181-
});
182-
});
183-
184-
describe('.toBeEnabled', () => {
185-
Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
186-
test(`handle disabled prop for element ${name} when undefined`, () => {
187-
const { queryByTestId } = render(
188-
//@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
189-
<Component testID={name}>
190-
<TextInput />
191-
</Component>
192-
);
193-
194-
expect(queryByTestId(name)).toBeEnabled();
195-
expect(() => expect(queryByTestId(name)).not.toBeEnabled()).toThrow();
196-
});
197-
});
198-
199-
Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
200-
test(`handle disabled in accessibilityState for element ${name} when false`, () => {
201-
const { queryByTestId } = render(
202-
//@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
203-
<Component accessibilityState={{ disabled: false }} testID={name}>
204-
<TextInput />
205-
</Component>
206-
);
207-
208-
expect(queryByTestId(name)).toBeEnabled();
209-
expect(() => expect(queryByTestId(name)).not.toBeEnabled()).toThrow();
210-
});
211-
});
212-
213-
test('handle editable prop for TextInput', () => {
214-
const { getByTestId, getByPlaceholderText } = render(
215-
<View>
216-
<TextInput
217-
testID="enabled-by-default"
218-
placeholder="enabled-by-default"
219-
/>
220-
<TextInput testID="enabled" placeholder="enabled" editable />
221-
<TextInput testID="disabled" placeholder="disabled" editable={false} />
222-
</View>
173+
const touchable = screen.getByTestId('subject');
174+
expect(touchable).toBeDisabled();
175+
expect(touchable).not.toBeEnabled();
176+
177+
const title = screen.getByText('Button');
178+
expect(title).toBeDisabled();
179+
expect(title).not.toBeEnabled();
180+
181+
expect(() => expect(touchable).toBeEnabled()).toThrow();
182+
expect(() => expect(touchable).not.toBeDisabled()).toThrow();
183+
expect(() => expect(title).toBeEnabled()).toThrow();
184+
expect(() => expect(title).not.toBeDisabled()).toThrow();
185+
}
186+
);
187+
188+
test.each([
189+
['View', View],
190+
['Text', Text],
191+
['TextInput', TextInput],
192+
['Pressable', Pressable],
193+
['TouchableOpacity', TouchableOpacity],
194+
['TouchableWithoutFeedback', TouchableWithoutFeedback],
195+
['TouchableNativeFeedback', TouchableNativeFeedback],
196+
] as const)(
197+
'toBeDisabled/toBeEnabled supports %s with "aria-disabled" prop',
198+
(_, Component) => {
199+
const screen = render(
200+
// @ts-expect-error too generic for typescript
201+
<Component testID="subject" aria-disabled>
202+
<Text>Hello</Text>
203+
</Component>
223204
);
224205

225-
// Check host TextInput
226-
expect(getByTestId('enabled-by-default')).toBeEnabled();
227-
expect(getByTestId('enabled')).toBeEnabled();
228-
expect(getByTestId('disabled')).not.toBeEnabled();
206+
const view = screen.getByTestId('subject');
207+
expect(view).toBeDisabled();
208+
expect(view).not.toBeEnabled();
209+
expect(() => expect(view).toBeEnabled()).toThrow();
210+
expect(() => expect(view).not.toBeDisabled()).toThrow();
211+
}
212+
);
213+
214+
test.each([
215+
['View', View],
216+
['Text', Text],
217+
['TextInput', TextInput],
218+
['Pressable', Pressable],
219+
['TouchableOpacity', TouchableOpacity],
220+
['TouchableHighlight', TouchableHighlight],
221+
['TouchableWithoutFeedback', TouchableWithoutFeedback],
222+
['TouchableNativeFeedback', TouchableNativeFeedback],
223+
] as const)(
224+
'toBeDisabled/toBeEnabled supports %s with "accessibilityState.disabled" prop',
225+
(_, Component) => {
226+
const screen = render(
227+
// @ts-expect-error disabled prop is not available on all Touchables
228+
<Component testID="subject" accessibilityState={{ disabled: true }}>
229+
<Text>Hello</Text>
230+
</Component>
231+
);
229232

230-
// Check composite TextInput
231-
expect(getByPlaceholderText('enabled-by-default')).toBeEnabled();
232-
expect(getByPlaceholderText('enabled')).toBeEnabled();
233-
expect(getByPlaceholderText('disabled')).not.toBeEnabled();
234-
});
235-
});
233+
const view = screen.getByTestId('subject');
234+
expect(view).toBeDisabled();
235+
expect(view).not.toBeEnabled();
236+
expect(() => expect(view).toBeEnabled()).toThrow();
237+
expect(() => expect(view).not.toBeDisabled()).toThrow();
238+
}
239+
);
236240

237-
describe('for .toBeEnabled/Disabled Button', () => {
238-
test('handles disabled prop for button', () => {
239-
const { queryByTestId } = render(
240-
<View>
241-
<Button testID="enabled" title="enabled" />
242-
<Button disabled testID="disabled" title="disabled" />
243-
</View>
244-
);
241+
test('toBeDisabled/toBeEnabled supports "editable" prop on TextInput', () => {
242+
const screen = render(
243+
<View>
244+
<TextInput testID="enabled-by-default" />
245+
<TextInput testID="enabled" editable />
246+
<TextInput testID="disabled" editable={false} />
247+
</View>
248+
);
245249

246-
expect(queryByTestId('enabled')).toBeEnabled();
247-
expect(queryByTestId('disabled')).toBeDisabled();
248-
});
250+
expect(screen.getByTestId('enabled-by-default')).not.toBeDisabled();
251+
expect(screen.getByTestId('enabled')).not.toBeDisabled();
252+
expect(screen.getByTestId('disabled')).toBeDisabled();
249253

250-
test('handles button a11y state', () => {
251-
const { queryByTestId } = render(
252-
<View>
253-
<Button
254-
accessibilityState={{ disabled: false }}
255-
testID="enabled"
256-
title="enabled"
257-
/>
258-
<Button
259-
accessibilityState={{ disabled: true }}
260-
testID="disabled"
261-
title="disabled"
262-
/>
263-
</View>
264-
);
254+
expect(screen.getByTestId('enabled-by-default')).toBeEnabled();
255+
expect(screen.getByTestId('enabled')).toBeEnabled();
256+
expect(screen.getByTestId('disabled')).not.toBeEnabled();
257+
});
265258

266-
expect(queryByTestId('enabled')).toBeEnabled();
267-
expect(queryByTestId('disabled')).toBeDisabled();
268-
});
259+
test('toBeDisabled/toBeEnabled supports "disabled" prop on Button', () => {
260+
const screen = render(
261+
<View>
262+
<Button testID="enabled" title="enabled" />
263+
<Button testID="disabled" title="disabled" disabled />
264+
</View>
265+
);
269266

270-
test('Errors when matcher misses', () => {
271-
const { queryByTestId, queryByText } = render(
272-
<View>
273-
<Button testID="enabled" title="enabled" />
274-
<Button disabled testID="disabled" title="disabled" />
275-
</View>
276-
);
267+
expect(screen.getByTestId('enabled')).not.toBeDisabled();
268+
expect(screen.getByTestId('disabled')).toBeDisabled();
277269

278-
expect(() => expect(queryByTestId('enabled')).toBeDisabled()).toThrow();
279-
expect(() => expect(queryByText('disabled')).toBeEnabled()).toThrow();
280-
});
270+
expect(screen.getByTestId('enabled')).toBeEnabled();
271+
expect(screen.getByTestId('disabled')).not.toBeEnabled();
281272
});

0 commit comments

Comments
 (0)