Skip to content

Commit a46d94d

Browse files
ValentinaKozlovaValentinaKozlova
authored
Added SVG Icon snapshot tests (#2458)
* Added snapshot tests for the Icon
1 parent 85efe90 commit a46d94d

File tree

3 files changed

+173
-6
lines changed

3 files changed

+173
-6
lines changed

‎change/@fluentui-react-native-experimental-icon-26c4024b-3c92-4bfa-b7f3-b32d7d9bc9a9.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Added snapshot tests for the Icon",
4+
"packageName": "@fluentui-react-native/experimental-icon",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/experimental/ExperimentalIcon/src/__tests__/Icon.test.tsx

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,47 @@
11
import * as React from 'react';
2-
import { FontIcon } from '../';
2+
import { Icon, SvgIcon, FontIcon, FontIconProps } from '../';
33
import * as renderer from 'react-test-renderer';
4-
54
import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
6-
7-
const fontProps = {
5+
import { Path, Svg } from 'react-native-svg';
6+
const fontProps: FontIconProps = {
87
fontFamily: 'Arial',
98
codepoint: 0x2663,
109
color: '#f07',
1110
};
11+
12+
const AccessTime20RegularIcon = () => {
13+
return (
14+
<Svg viewBox="0 0 20 20" fill="none">
15+
<Path
16+
clipPath="url(#a)"
17+
d="M6.98811 8.60832C6.92883 8.87568 6.66509 9.04596 6.39655 8.98919C6.12638 8.93207 5.95367 8.66674 6.01079 8.39657L6.01101 8.39557L6.01124 8.39447L6.01178 8.39199C6.01723 8.36769 6.02351 8.34355 6.03036 8.3196C6.04174 8.2798 6.05867 8.22647 6.08271 8.16406C6.13026 8.04058 6.20855 7.87389 6.33261 7.70453C6.58972 7.35354 7.04179 7 7.75359 7C8.30575 7 8.75549 7.21512 9.06185 7.56126C9.35994 7.89804 9.49998 8.33261 9.49998 8.75C9.49998 9.099 9.431 9.39794 9.29507 9.65577C9.15987 9.91222 8.97453 10.0973 8.78808 10.2414C8.63051 10.3631 8.45565 10.4669 8.30894 10.5539L8.25222 10.5877C8.08366 10.6883 7.94599 10.7752 7.82722 10.878C7.43333 11.219 7.1749 11.58 7.06318 12H8.99998C9.27612 12 9.49998 12.2239 9.49998 12.5C9.49998 12.7761 9.27612 13 8.99998 13H6.49999C6.22384 13 5.99999 12.7761 5.99999 12.5C5.99999 11.4894 6.4747 10.7262 7.17274 10.122C7.36392 9.95647 7.56872 9.8311 7.73953 9.7291L7.7978 9.69437C7.95158 9.60281 8.07076 9.53185 8.1768 9.44994C8.28786 9.36416 8.36129 9.28271 8.41048 9.18941C8.45894 9.09749 8.49998 8.9635 8.49998 8.75C8.49998 8.54779 8.43104 8.35736 8.31304 8.22404C8.20332 8.10008 8.02986 8 7.75359 8C7.42321 8 7.24848 8.14646 7.13933 8.29547C7.08025 8.37612 7.04055 8.45943 7.01589 8.52345C7.00383 8.55478 6.9961 8.57958 6.99184 8.59446C6.98973 8.60185 6.98811 8.60832 6.98811 8.60832ZM11 7C11.2761 7 11.5 7.22386 11.5 7.5V10H13V7.5C13 7.22386 13.2239 7 13.5 7C13.7761 7 14 7.22386 14 7.5V12.5C14 12.7761 13.7761 13 13.5 13C13.2239 13 13 12.7761 13 12.5V11H11C10.7239 11 10.5 10.7761 10.5 10.5V7.5C10.5 7.22386 10.7239 7 11 7ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
18+
fill="#333"
19+
/>
20+
</Svg>
21+
);
22+
};
23+
1224
describe('Icon component tests', () => {
13-
it('SVG Icon', () => {
25+
it('renders Font Icon', () => {
1426
const tree = renderer.create(<FontIcon {...fontProps} />).toJSON();
1527
expect(tree).toMatchSnapshot();
1628
});
1729

30+
it('renders Font Icon using Icon component', () => {
31+
const tree = renderer.create(<Icon fontSource={fontProps} />).toJSON();
32+
expect(tree).toMatchSnapshot();
33+
});
34+
35+
it('renders SVG Icon', () => {
36+
const tree = renderer.create(<SvgIcon src={AccessTime20RegularIcon} width={100} height={100} />).toJSON();
37+
expect(tree).toMatchSnapshot();
38+
});
39+
40+
it('renders SVG Icon using Icon component', () => {
41+
const tree = renderer.create(<Icon svgSource={{ src: AccessTime20RegularIcon, width: 20, height: 20 }} />).toJSON();
42+
expect(tree).toMatchSnapshot();
43+
});
44+
1845
it('Icon checkRenderConsistency', () => {
1946
checkRenderConsistency(() => <FontIcon {...fontProps} />, 2);
2047
});

‎packages/experimental/ExperimentalIcon/src/__tests__/__snapshots__/Icon.test.tsx.snap

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Icon component tests SVG Icon 1`] = `
3+
exports[`Icon component tests renders Font Icon 1`] = `
44
<Text
55
accessible={true}
66
style={
@@ -14,3 +14,136 @@ exports[`Icon component tests SVG Icon 1`] = `
1414
♣
1515
</Text>
1616
`;
17+
18+
exports[`Icon component tests renders Font Icon using Icon component 1`] = `
19+
<Text
20+
accessible={true}
21+
style={
22+
Object {
23+
"color": "#f07",
24+
"fontFamily": "Arial",
25+
"fontSize": undefined,
26+
}
27+
}
28+
>
29+
♣
30+
</Text>
31+
`;
32+
33+
exports[`Icon component tests renders SVG Icon 1`] = `
34+
<View
35+
accessibilityRole="image"
36+
accessible={true}
37+
style={
38+
Object {
39+
"height": 100,
40+
"width": 100,
41+
}
42+
}
43+
>
44+
<RNSVGSvgView
45+
align="xMidYMid"
46+
bbHeight="100%"
47+
bbWidth="100%"
48+
fill="none"
49+
focusable={false}
50+
meetOrSlice={0}
51+
minX={0}
52+
minY={0}
53+
style={
54+
Array [
55+
Object {
56+
"backgroundColor": "transparent",
57+
"borderWidth": 0,
58+
},
59+
Object {
60+
"flex": 0,
61+
"height": "100%",
62+
"width": "100%",
63+
},
64+
]
65+
}
66+
vbHeight={20}
67+
vbWidth={20}
68+
>
69+
<RNSVGGroup
70+
fill={null}
71+
propList={
72+
Array [
73+
"fill",
74+
]
75+
}
76+
>
77+
<RNSVGPath
78+
clipPath="a"
79+
d="M6.98811 8.60832C6.92883 8.87568 6.66509 9.04596 6.39655 8.98919C6.12638 8.93207 5.95367 8.66674 6.01079 8.39657L6.01101 8.39557L6.01124 8.39447L6.01178 8.39199C6.01723 8.36769 6.02351 8.34355 6.03036 8.3196C6.04174 8.2798 6.05867 8.22647 6.08271 8.16406C6.13026 8.04058 6.20855 7.87389 6.33261 7.70453C6.58972 7.35354 7.04179 7 7.75359 7C8.30575 7 8.75549 7.21512 9.06185 7.56126C9.35994 7.89804 9.49998 8.33261 9.49998 8.75C9.49998 9.099 9.431 9.39794 9.29507 9.65577C9.15987 9.91222 8.97453 10.0973 8.78808 10.2414C8.63051 10.3631 8.45565 10.4669 8.30894 10.5539L8.25222 10.5877C8.08366 10.6883 7.94599 10.7752 7.82722 10.878C7.43333 11.219 7.1749 11.58 7.06318 12H8.99998C9.27612 12 9.49998 12.2239 9.49998 12.5C9.49998 12.7761 9.27612 13 8.99998 13H6.49999C6.22384 13 5.99999 12.7761 5.99999 12.5C5.99999 11.4894 6.4747 10.7262 7.17274 10.122C7.36392 9.95647 7.56872 9.8311 7.73953 9.7291L7.7978 9.69437C7.95158 9.60281 8.07076 9.53185 8.1768 9.44994C8.28786 9.36416 8.36129 9.28271 8.41048 9.18941C8.45894 9.09749 8.49998 8.9635 8.49998 8.75C8.49998 8.54779 8.43104 8.35736 8.31304 8.22404C8.20332 8.10008 8.02986 8 7.75359 8C7.42321 8 7.24848 8.14646 7.13933 8.29547C7.08025 8.37612 7.04055 8.45943 7.01589 8.52345C7.00383 8.55478 6.9961 8.57958 6.99184 8.59446C6.98973 8.60185 6.98811 8.60832 6.98811 8.60832ZM11 7C11.2761 7 11.5 7.22386 11.5 7.5V10H13V7.5C13 7.22386 13.2239 7 13.5 7C13.7761 7 14 7.22386 14 7.5V12.5C14 12.7761 13.7761 13 13.5 13C13.2239 13 13 12.7761 13 12.5V11H11C10.7239 11 10.5 10.7761 10.5 10.5V7.5C10.5 7.22386 10.7239 7 11 7ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
80+
fill={4281545523}
81+
propList={
82+
Array [
83+
"fill",
84+
]
85+
}
86+
/>
87+
</RNSVGGroup>
88+
</RNSVGSvgView>
89+
</View>
90+
`;
91+
92+
exports[`Icon component tests renders SVG Icon using Icon component 1`] = `
93+
<View
94+
accessibilityRole="image"
95+
accessible={true}
96+
style={
97+
Object {
98+
"height": 20,
99+
"width": 20,
100+
}
101+
}
102+
>
103+
<RNSVGSvgView
104+
align="xMidYMid"
105+
bbHeight="100%"
106+
bbWidth="100%"
107+
fill="none"
108+
focusable={false}
109+
meetOrSlice={0}
110+
minX={0}
111+
minY={0}
112+
style={
113+
Array [
114+
Object {
115+
"backgroundColor": "transparent",
116+
"borderWidth": 0,
117+
},
118+
Object {
119+
"flex": 0,
120+
"height": "100%",
121+
"width": "100%",
122+
},
123+
]
124+
}
125+
vbHeight={20}
126+
vbWidth={20}
127+
>
128+
<RNSVGGroup
129+
fill={null}
130+
propList={
131+
Array [
132+
"fill",
133+
]
134+
}
135+
>
136+
<RNSVGPath
137+
clipPath="a"
138+
d="M6.98811 8.60832C6.92883 8.87568 6.66509 9.04596 6.39655 8.98919C6.12638 8.93207 5.95367 8.66674 6.01079 8.39657L6.01101 8.39557L6.01124 8.39447L6.01178 8.39199C6.01723 8.36769 6.02351 8.34355 6.03036 8.3196C6.04174 8.2798 6.05867 8.22647 6.08271 8.16406C6.13026 8.04058 6.20855 7.87389 6.33261 7.70453C6.58972 7.35354 7.04179 7 7.75359 7C8.30575 7 8.75549 7.21512 9.06185 7.56126C9.35994 7.89804 9.49998 8.33261 9.49998 8.75C9.49998 9.099 9.431 9.39794 9.29507 9.65577C9.15987 9.91222 8.97453 10.0973 8.78808 10.2414C8.63051 10.3631 8.45565 10.4669 8.30894 10.5539L8.25222 10.5877C8.08366 10.6883 7.94599 10.7752 7.82722 10.878C7.43333 11.219 7.1749 11.58 7.06318 12H8.99998C9.27612 12 9.49998 12.2239 9.49998 12.5C9.49998 12.7761 9.27612 13 8.99998 13H6.49999C6.22384 13 5.99999 12.7761 5.99999 12.5C5.99999 11.4894 6.4747 10.7262 7.17274 10.122C7.36392 9.95647 7.56872 9.8311 7.73953 9.7291L7.7978 9.69437C7.95158 9.60281 8.07076 9.53185 8.1768 9.44994C8.28786 9.36416 8.36129 9.28271 8.41048 9.18941C8.45894 9.09749 8.49998 8.9635 8.49998 8.75C8.49998 8.54779 8.43104 8.35736 8.31304 8.22404C8.20332 8.10008 8.02986 8 7.75359 8C7.42321 8 7.24848 8.14646 7.13933 8.29547C7.08025 8.37612 7.04055 8.45943 7.01589 8.52345C7.00383 8.55478 6.9961 8.57958 6.99184 8.59446C6.98973 8.60185 6.98811 8.60832 6.98811 8.60832ZM11 7C11.2761 7 11.5 7.22386 11.5 7.5V10H13V7.5C13 7.22386 13.2239 7 13.5 7C13.7761 7 14 7.22386 14 7.5V12.5C14 12.7761 13.7761 13 13.5 13C13.2239 13 13 12.7761 13 12.5V11H11C10.7239 11 10.5 10.7761 10.5 10.5V7.5C10.5 7.22386 10.7239 7 11 7ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
139+
fill={4281545523}
140+
propList={
141+
Array [
142+
"fill",
143+
]
144+
}
145+
/>
146+
</RNSVGGroup>
147+
</RNSVGSvgView>
148+
</View>
149+
`;

0 commit comments

Comments
 (0)