Skip to content

Commit 370858d

Browse files
mdjastrzebskimdjastrzebski
committed
refactor: clean up tests
1 parent ebcbab5 commit 370858d

File tree

4 files changed

+172
-153
lines changed

4 files changed

+172
-153
lines changed

‎src/helpers/format-default.ts

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { StyleSheet, ViewStyle } from 'react-native';
2+
import { removeUndefinedKeys } from './object';
23

34
const propsToDisplay = [
45
'accessible',
@@ -64,27 +65,6 @@ export function defaultMapProps(
6465
return result;
6566
}
6667

67-
function isObject(value: unknown): value is Record<string, unknown> {
68-
return typeof value === 'object' && value !== null && !Array.isArray(value);
69-
}
70-
71-
function removeUndefinedKeys(prop: unknown) {
72-
if (!isObject(prop)) {
73-
return prop;
74-
}
75-
76-
let hasKeys = false;
77-
const result: Record<string, unknown> = {};
78-
Object.entries(prop).forEach(([key, value]) => {
79-
if (value !== undefined) {
80-
result[key] = value;
81-
hasKeys = true;
82-
}
83-
});
84-
85-
return hasKeys ? result : undefined;
86-
}
87-
8868
function extractStyle(style: ViewStyle | undefined) {
8969
if (style == null) {
9070
return undefined;

‎src/helpers/object.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,24 @@ export function pick<T extends {}>(object: T, keys: (keyof T)[]): Partial<T> {
88

99
return result;
1010
}
11+
12+
function isObject(value: unknown): value is Record<string, unknown> {
13+
return typeof value === 'object' && value !== null && !Array.isArray(value);
14+
}
15+
16+
export function removeUndefinedKeys(prop: unknown) {
17+
if (!isObject(prop)) {
18+
return prop;
19+
}
20+
21+
let hasKeys = false;
22+
const result: Record<string, unknown> = {};
23+
Object.entries(prop).forEach(([key, value]) => {
24+
if (value !== undefined) {
25+
result[key] = value;
26+
hasKeys = true;
27+
}
28+
});
29+
30+
return hasKeys ? result : undefined;
31+
}

‎src/matchers/__tests__/to-have-accessibility-value.test.tsx

Lines changed: 148 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -3,147 +3,164 @@ import { View } from 'react-native';
33
import { render, screen } from '../..';
44
import '../extend-expect';
55

6-
function renderViewsWithAccessibilityValue() {
7-
return render(
8-
<>
9-
<View testID="min" accessibilityValue={{ min: 0 }} />
10-
<View testID="max" accessibilityValue={{ max: 100 }} />
11-
<View testID="now" accessibilityValue={{ now: 65 }} />
12-
<View testID="min-max" accessibilityValue={{ min: 0, max: 100 }} />
13-
<View
14-
testID="min-max-now"
15-
accessibilityValue={{ min: 0, max: 100, now: 65 }}
16-
/>
17-
<View
18-
testID="min-max-now-text"
19-
accessibilityValue={{ text: 'test', min: 0, max: 100, now: 65 }}
20-
/>
21-
<View
22-
testID="text"
23-
accessibilityValue={{ text: 'accessibility value' }}
24-
/>
25-
</>
26-
);
27-
}
28-
29-
test('toHaveAccessibilityValue() on matching accessibility value', () => {
30-
renderViewsWithAccessibilityValue();
31-
32-
const min = screen.getByTestId('min');
33-
const max = screen.getByTestId('max');
34-
const now = screen.getByTestId('now');
35-
const text = screen.getByTestId('text');
36-
const minMax = screen.getByTestId('min-max');
37-
const minMaxNow = screen.getByTestId('min-max-now');
38-
const minMaxNowText = screen.getByTestId('min-max-now-text');
39-
40-
expect(min).toHaveAccessibilityValue({ min: 0 });
41-
expect(max).toHaveAccessibilityValue({ max: 100 });
42-
expect(now).toHaveAccessibilityValue({ now: 65 });
43-
expect(minMax).toHaveAccessibilityValue({ min: 0, max: 100 });
44-
expect(minMaxNowText).toHaveAccessibilityValue({
45-
min: 0,
46-
max: 100,
47-
now: 65,
48-
text: 'test',
6+
describe('toHaveAccessibilityValue', () => {
7+
it('supports "accessibilityValue.min"', () => {
8+
render(<View accessibilityValue={{ min: 0 }} />);
9+
expect(screen.root).toHaveAccessibilityValue({ min: 0 });
10+
expect(screen.root).not.toHaveAccessibilityValue({ min: 1 });
4911
});
50-
expect(minMaxNow).toHaveAccessibilityValue({ min: 0, max: 100, now: 65 });
51-
expect(text).toHaveAccessibilityValue({ text: 'accessibility value' });
52-
expect(text).toHaveAccessibilityValue({ text: /accessibility/i });
53-
54-
expect(() => expect(min).not.toHaveAccessibilityValue({ min: 0 }))
55-
.toThrowErrorMatchingInlineSnapshot(`
56-
"expect(element).not.toHaveAccessibilityValue({"min": 0})
57-
58-
Expected the element not to have accessibility value:
59-
{"min": 0}
60-
Received element with accessibility value:
61-
{"max": undefined, "min": 0, "now": undefined, "text": undefined}"
62-
`);
63-
64-
expect(() => expect(text).toHaveAccessibilityValue({ text: 'value' }))
65-
.toThrowErrorMatchingInlineSnapshot(`
66-
"expect(element).toHaveAccessibilityValue({"text": "value"})
67-
68-
Expected the element to have accessibility value:
69-
{"text": "value"}
70-
Received element with accessibility value:
71-
{"max": undefined, "min": undefined, "now": undefined, "text": "accessibility value"}"
72-
`);
73-
74-
expect(() => expect(text).toHaveAccessibilityValue({ text: /test/i }))
75-
.toThrowErrorMatchingInlineSnapshot(`
76-
"expect(element).toHaveAccessibilityValue({"text": /test/i})
77-
78-
Expected the element to have accessibility value:
79-
{"text": /test/i}
80-
Received element with accessibility value:
81-
{"max": undefined, "min": undefined, "now": undefined, "text": "accessibility value"}"
82-
`);
83-
});
8412

85-
test('toHaveAccessibilityValue() on non-matching accessibility value', () => {
86-
renderViewsWithAccessibilityValue();
87-
88-
const min = screen.getByTestId('min');
89-
const max = screen.getByTestId('max');
90-
const now = screen.getByTestId('now');
91-
const text = screen.getByTestId('text');
92-
const minMax = screen.getByTestId('min-max');
93-
const minMaxNow = screen.getByTestId('min-max-now');
94-
const minMaxNowText = screen.getByTestId('min-max-now-text');
95-
96-
expect(min).not.toHaveAccessibilityValue({ min: 100 });
97-
expect(max).not.toHaveAccessibilityValue({ max: 0 });
98-
expect(now).not.toHaveAccessibilityValue({ now: 0 });
99-
expect(text).not.toHaveAccessibilityValue({ text: 'accessibility' });
100-
expect(minMax).not.toHaveAccessibilityValue({ min: 100, max: 0 });
101-
expect(minMaxNow).not.toHaveAccessibilityValue({ min: 100, max: 0, now: 0 });
102-
expect(minMaxNowText).not.toHaveAccessibilityValue({
103-
min: 100,
104-
max: 0,
105-
now: 0,
106-
text: 'accessibility',
13+
it('supports "accessibilityValue.max"', () => {
14+
render(<View accessibilityValue={{ max: 100 }} />);
15+
expect(screen.root).toHaveAccessibilityValue({ max: 100 });
16+
expect(screen.root).not.toHaveAccessibilityValue({ max: 99 });
10717
});
10818

109-
expect(() => expect(min).toHaveAccessibilityValue({ min: 100 }))
110-
.toThrowErrorMatchingInlineSnapshot(`
111-
"expect(element).toHaveAccessibilityValue({"min": 100})
19+
it('supports "accessibilityValue.now"', () => {
20+
render(<View accessibilityValue={{ now: 33 }} />);
21+
expect(screen.root).toHaveAccessibilityValue({ now: 33 });
22+
expect(screen.root).not.toHaveAccessibilityValue({ now: 34 });
23+
});
11224

113-
Expected the element to have accessibility value:
114-
{"min": 100}
115-
Received element with accessibility value:
116-
{"max": undefined, "min": 0, "now": undefined, "text": undefined}"
117-
`);
118-
});
25+
it('supports "accessibilityValue.text"', () => {
26+
render(<View testID="view" accessibilityValue={{ text: 'Hello' }} />);
27+
expect(screen.root).toHaveAccessibilityValue({ text: 'Hello' });
28+
expect(screen.root).toHaveAccessibilityValue({ text: /He/ });
29+
expect(screen.root).not.toHaveAccessibilityValue({ text: 'Hi' });
30+
expect(screen.root).not.toHaveAccessibilityValue({ text: /Hi/ });
31+
});
11932

120-
test('toHaveAccessibilityValue() when no accessibilityValue prop is provided', () => {
121-
render(<View testID="view" />);
33+
it('supports "aria-valuemin"', () => {
34+
render(<View testID="view" aria-valuemin={0} />);
35+
expect(screen.root).toHaveAccessibilityValue({ min: 0 });
36+
expect(screen.root).not.toHaveAccessibilityValue({ min: 1 });
37+
});
12238

123-
const view = screen.getByTestId('view');
39+
it('supports "aria-valuemax"', () => {
40+
render(<View testID="view" aria-valuemax={100} />);
41+
expect(screen.root).toHaveAccessibilityValue({ max: 100 });
42+
expect(screen.root).not.toHaveAccessibilityValue({ max: 99 });
43+
});
12444

125-
expect(() => expect(view).toHaveAccessibilityValue({ min: 0 }))
126-
.toThrowErrorMatchingInlineSnapshot(`
127-
"expect(element).toHaveAccessibilityValue({"min": 0})
45+
it('supports "aria-valuenow"', () => {
46+
render(<View testID="view" aria-valuenow={33} />);
47+
expect(screen.root).toHaveAccessibilityValue({ now: 33 });
48+
expect(screen.root).not.toHaveAccessibilityValue({ now: 34 });
49+
});
12850

129-
Expected the element to have accessibility value:
130-
{"min": 0}
131-
Received element with accessibility value:
132-
undefined"
133-
`);
134-
});
51+
it('supports "aria-valuetext"', () => {
52+
render(<View testID="view" aria-valuetext="Hello" />);
53+
expect(screen.root).toHaveAccessibilityValue({ text: 'Hello' });
54+
expect(screen.root).toHaveAccessibilityValue({ text: /He/ });
55+
expect(screen.root).not.toHaveAccessibilityValue({ text: 'Hi' });
56+
expect(screen.root).not.toHaveAccessibilityValue({ text: /Hi/ });
57+
});
13558

136-
test('toHaveAccessibilityValue() on partially matching accessibility value', () => {
137-
renderViewsWithAccessibilityValue();
59+
it('supports multi-argument matching', () => {
60+
render(
61+
<View accessibilityValue={{ min: 1, max: 10, now: 5, text: '5/10' }} />
62+
);
63+
64+
expect(screen.root).toHaveAccessibilityValue({ now: 5 });
65+
expect(screen.root).toHaveAccessibilityValue({ now: 5, min: 1 });
66+
expect(screen.root).toHaveAccessibilityValue({ now: 5, max: 10 });
67+
expect(screen.root).toHaveAccessibilityValue({ now: 5, min: 1, max: 10 });
68+
expect(screen.root).toHaveAccessibilityValue({ text: '5/10' });
69+
expect(screen.root).toHaveAccessibilityValue({ now: 5, text: '5/10' });
70+
expect(screen.root).toHaveAccessibilityValue({
71+
now: 5,
72+
min: 1,
73+
max: 10,
74+
text: '5/10',
75+
});
76+
77+
expect(screen.root).not.toHaveAccessibilityValue({ now: 6 });
78+
expect(screen.root).not.toHaveAccessibilityValue({ now: 5, min: 0 });
79+
expect(screen.root).not.toHaveAccessibilityValue({ now: 5, max: 9 });
80+
expect(screen.root).not.toHaveAccessibilityValue({
81+
now: 5,
82+
min: 1,
83+
max: 10,
84+
text: '5 of 10',
85+
});
86+
});
87+
88+
it('gives precedence to ARIA values', () => {
89+
render(
90+
<View
91+
testID="view"
92+
aria-valuemin={0}
93+
aria-valuemax={100}
94+
aria-valuenow={33}
95+
aria-valuetext="Hello"
96+
accessibilityValue={{ min: 10, max: 90, now: 30, text: 'Hi' }}
97+
/>
98+
);
13899

139-
const minMax = screen.getByTestId('min-max');
140-
const minMaxNow = screen.getByTestId('min-max-now');
141-
const minMaxNowText = screen.getByTestId('min-max-now-text');
100+
expect(screen.root).toHaveAccessibilityValue({ min: 0 });
101+
expect(screen.root).toHaveAccessibilityValue({ max: 100 });
102+
expect(screen.root).toHaveAccessibilityValue({ now: 33 });
103+
expect(screen.root).toHaveAccessibilityValue({ text: 'Hello' });
142104

143-
expect(minMax).toHaveAccessibilityValue({ min: 0 });
144-
expect(minMax).toHaveAccessibilityValue({ max: 100 });
145-
expect(minMaxNow).toHaveAccessibilityValue({ now: 65 });
146-
expect(minMaxNow).toHaveAccessibilityValue({ min: 0, max: 100 });
147-
expect(minMaxNowText).toHaveAccessibilityValue({ text: 'test' });
148-
expect(minMaxNowText).toHaveAccessibilityValue({ text: /te/i });
105+
expect(screen.root).not.toHaveAccessibilityValue({ min: 10 });
106+
expect(screen.root).not.toHaveAccessibilityValue({ max: 90 });
107+
expect(screen.root).not.toHaveAccessibilityValue({ now: 30 });
108+
expect(screen.root).not.toHaveAccessibilityValue({ text: 'Hi' });
109+
});
110+
111+
it('shows errors in expected format', () => {
112+
render(
113+
<View
114+
testID="view"
115+
aria-valuemin={0}
116+
aria-valuemax={100}
117+
aria-valuenow={33}
118+
aria-valuetext="Hello"
119+
/>
120+
);
121+
122+
expect(() => expect(screen.root).toHaveAccessibilityValue({ min: 10 }))
123+
.toThrowErrorMatchingInlineSnapshot(`
124+
"expect(element).toHaveAccessibilityValue({"min": 10})
125+
126+
Expected the element to have accessibility value:
127+
{"min": 10}
128+
Received element with accessibility value:
129+
{"max": 100, "min": 0, "now": 33, "text": "Hello"}"
130+
`);
131+
132+
expect(() => expect(screen.root).not.toHaveAccessibilityValue({ min: 0 }))
133+
.toThrowErrorMatchingInlineSnapshot(`
134+
"expect(element).not.toHaveAccessibilityValue({"min": 0})
135+
136+
Expected the element not to have accessibility value:
137+
{"min": 0}
138+
Received element with accessibility value:
139+
{"max": 100, "min": 0, "now": 33, "text": "Hello"}"
140+
`);
141+
});
142+
143+
it('shows errors in expected format with partial value', () => {
144+
render(<View testID="view" aria-valuenow={33} aria-valuetext="Hello" />);
145+
146+
expect(() => expect(screen.root).toHaveAccessibilityValue({ min: 30 }))
147+
.toThrowErrorMatchingInlineSnapshot(`
148+
"expect(element).toHaveAccessibilityValue({"min": 30})
149+
150+
Expected the element to have accessibility value:
151+
{"min": 30}
152+
Received element with accessibility value:
153+
{"now": 33, "text": "Hello"}"
154+
`);
155+
156+
expect(() => expect(screen.root).not.toHaveAccessibilityValue({ now: 33 }))
157+
.toThrowErrorMatchingInlineSnapshot(`
158+
"expect(element).not.toHaveAccessibilityValue({"now": 33})
159+
160+
Expected the element not to have accessibility value:
161+
{"now": 33}
162+
Received element with accessibility value:
163+
{"now": 33, "text": "Hello"}"
164+
`);
165+
});
149166
});

‎src/matchers/to-have-accessibility-value.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
AccessibilityValueMatcher,
66
matchAccessibilityValue,
77
} from '../helpers/matchers/accessibilityValue';
8+
import { removeUndefinedKeys } from '../helpers/object';
89
import { checkHostElement, formatMessage } from './utils';
910

1011
export function toHaveAccessibilityValue(
@@ -31,7 +32,7 @@ export function toHaveAccessibilityValue(
3132
} have accessibility value`,
3233
stringify(expectedValue),
3334
'Received element with accessibility value',
34-
stringify(receivedValue)
35+
stringify(removeUndefinedKeys(receivedValue))
3536
);
3637
},
3738
};

0 commit comments

Comments
 (0)