Skip to content

Commit 019d96a

Browse files
DimitarNestorovDimitarNestorov
committed
test: fix tests and update snapshots
1 parent c760c94 commit 019d96a

17 files changed

+235
-27
lines changed

‎src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
66
style={
77
Object {
88
"alignSelf": undefined,
9+
"backgroundColor": "rgba(255, 251, 254, 1)",
910
"bottom": undefined,
1011
"end": undefined,
1112
"flex": undefined,
@@ -58,6 +59,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
5859
style={
5960
Object {
6061
"alignSelf": undefined,
62+
"backgroundColor": "rgb(238, 232, 244)",
63+
"borderRadius": 28,
6164
"bottom": undefined,
6265
"end": undefined,
6366
"flex": undefined,
@@ -106,6 +109,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
106109
style={
107110
Object {
108111
"alignSelf": undefined,
112+
"backgroundColor": "transparent",
113+
"borderRadius": 20,
109114
"bottom": undefined,
110115
"end": undefined,
111116
"flex": undefined,
@@ -297,6 +302,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
297302
style={
298303
Object {
299304
"alignSelf": undefined,
305+
"backgroundColor": "transparent",
306+
"borderRadius": 20,
300307
"bottom": undefined,
301308
"end": undefined,
302309
"flex": undefined,
@@ -446,6 +453,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
446453
style={
447454
Object {
448455
"alignSelf": undefined,
456+
"backgroundColor": "rgba(255, 251, 254, 1)",
449457
"bottom": undefined,
450458
"end": undefined,
451459
"flex": undefined,
@@ -498,6 +506,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
498506
style={
499507
Object {
500508
"alignSelf": undefined,
509+
"backgroundColor": "transparent",
510+
"borderRadius": 20,
501511
"bottom": undefined,
502512
"end": undefined,
503513
"flex": undefined,
@@ -751,6 +761,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
751761
style={
752762
Object {
753763
"alignSelf": undefined,
764+
"backgroundColor": "transparent",
765+
"borderRadius": 20,
754766
"bottom": undefined,
755767
"end": undefined,
756768
"flex": undefined,

‎src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ exports[`Card renders an outlined card 1`] = `
66
style={
77
Object {
88
"alignSelf": undefined,
9+
"backgroundColor": "rgba(255, 251, 254, 1)",
10+
"borderRadius": 12,
911
"bottom": undefined,
1012
"end": undefined,
1113
"flex": undefined,

‎src/components/__tests__/Surface.test.tsx

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -74,23 +74,39 @@ describe('Surface', () => {
7474
expect(getByTestId('surface-test')).not.toHaveStyle(style);
7575
});
7676

77+
it.each`
78+
property | value
79+
${'padding'} | ${12}
80+
${'paddingLeft'} | ${12.1}
81+
${'paddingRight'} | ${12.2}
82+
${'paddingTop'} | ${12.3}
83+
${'paddingBottom'} | ${12.4}
84+
${'paddingHorizontal'} | ${12.5}
85+
${'paddingVertical'} | ${12.6}
86+
${'borderWidth'} | ${2}
87+
${'borderColor'} | ${'black'}
88+
`('applies $property to inner layer only', ({ property, value }) => {
89+
const style = { [property]: value };
90+
91+
const { getByTestId } = render(
92+
<Surface testID="surface-test" style={style}>
93+
{null}
94+
</Surface>
95+
);
96+
97+
expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
98+
expect(getByTestId('surface-test')).toHaveStyle(style);
99+
});
100+
77101
it.each`
78102
property | value
79-
${'padding'} | ${12}
80-
${'paddingLeft'} | ${12.1}
81-
${'paddingRight'} | ${12.2}
82-
${'paddingTop'} | ${12.3}
83-
${'paddingBottom'} | ${12.4}
84-
${'paddingHorizontal'} | ${12.5}
85-
${'paddingVertical'} | ${12.6}
86-
${'borderWidth'} | ${2}
87-
${'borderColor'} | ${'black'}
88103
${'borderRadius'} | ${3}
89104
${'borderTopLeftRadius'} | ${1}
90105
${'borderTopRightRadius'} | ${2}
91106
${'borderBottomLeftRadius'} | ${3}
92107
${'borderBottomRightRadius'} | ${4}
93-
`('applies $property to inner layer only', ({ property, value }) => {
108+
${'backgroundColor'} | ${'rgb(4, 5, 6)'}
109+
`('applies $property to every layer', ({ property, value }) => {
94110
const style = { [property]: value };
95111

96112
const { getByTestId } = render(
@@ -99,7 +115,7 @@ describe('Surface', () => {
99115
</Surface>
100116
);
101117

102-
expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
118+
expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
103119
expect(getByTestId('surface-test')).toHaveStyle(style);
104120
});
105121

@@ -148,22 +164,6 @@ describe('Surface', () => {
148164
});
149165

150166
describe('inner layer', () => {
151-
it('applies backgroundColor to inner layer only', () => {
152-
const backgroundColor = 'rgb(1,2,3)';
153-
const { getByTestId } = render(
154-
<Surface
155-
testID="surface-test"
156-
theme={{ colors: { elevation: { level1: backgroundColor } } }}
157-
>
158-
{null}
159-
</Surface>
160-
);
161-
162-
const style = { backgroundColor };
163-
expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
164-
expect(getByTestId('surface-test')).toHaveStyle(style);
165-
});
166-
167167
it('should render inner layer styles on the inner layer', () => {
168168
const testID = 'surface-test';
169169

@@ -177,6 +177,22 @@ describe('Surface', () => {
177177
});
178178
});
179179

180+
it('applies backgroundColor to every layer', () => {
181+
const backgroundColor = 'rgb(1, 2, 3)';
182+
const { getByTestId } = render(
183+
<Surface
184+
testID="surface-test"
185+
theme={{ colors: { elevation: { level1: backgroundColor } } }}
186+
>
187+
{null}
188+
</Surface>
189+
);
190+
191+
const style = { backgroundColor };
192+
expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
193+
expect(getByTestId('surface-test')).toHaveStyle(style);
194+
});
195+
180196
describe('children wrapper', () => {
181197
it('should render rest styles', () => {
182198
const testID = 'surface-test';

‎src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ exports[`renders animated fab 1`] = `
66
style={
77
Object {
88
"alignSelf": undefined,
9+
"backgroundColor": "transparent",
10+
"borderRadius": 16,
911
"bottom": undefined,
1012
"end": undefined,
1113
"flex": undefined,
@@ -295,6 +297,8 @@ exports[`renders animated fab with label on the left 1`] = `
295297
style={
296298
Object {
297299
"alignSelf": undefined,
300+
"backgroundColor": "transparent",
301+
"borderRadius": 16,
298302
"bottom": undefined,
299303
"end": undefined,
300304
"flex": undefined,
@@ -586,6 +590,8 @@ exports[`renders animated fab with label on the right by default 1`] = `
586590
style={
587591
Object {
588592
"alignSelf": undefined,
593+
"backgroundColor": "transparent",
594+
"borderRadius": 16,
589595
"bottom": undefined,
590596
"end": undefined,
591597
"flex": undefined,

‎src/components/__tests__/__snapshots__/Banner.test.tsx.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`render visible banner, with custom theme 1`] = `
66
style={
77
Object {
88
"alignSelf": undefined,
9+
"backgroundColor": "rgb(247, 243, 249)",
910
"bottom": undefined,
1011
"end": undefined,
1112
"flex": undefined,
@@ -129,6 +130,8 @@ exports[`render visible banner, with custom theme 1`] = `
129130
style={
130131
Object {
131132
"alignSelf": undefined,
133+
"backgroundColor": "transparent",
134+
"borderRadius": 20,
132135
"bottom": undefined,
133136
"end": undefined,
134137
"flex": undefined,
@@ -285,6 +288,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
285288
style={
286289
Object {
287290
"alignSelf": undefined,
291+
"backgroundColor": "rgb(247, 243, 249)",
288292
"bottom": undefined,
289293
"end": undefined,
290294
"flex": undefined,
@@ -427,6 +431,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
427431
style={
428432
Object {
429433
"alignSelf": undefined,
434+
"backgroundColor": "rgb(247, 243, 249)",
430435
"bottom": undefined,
431436
"end": undefined,
432437
"flex": undefined,
@@ -572,6 +577,8 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
572577
style={
573578
Object {
574579
"alignSelf": undefined,
580+
"backgroundColor": "transparent",
581+
"borderRadius": 20,
575582
"bottom": undefined,
576583
"end": undefined,
577584
"flex": undefined,
@@ -728,6 +735,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
728735
style={
729736
Object {
730737
"alignSelf": undefined,
738+
"backgroundColor": "rgb(247, 243, 249)",
731739
"bottom": undefined,
732740
"end": undefined,
733741
"flex": undefined,
@@ -851,6 +859,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
851859
style={
852860
Object {
853861
"alignSelf": undefined,
862+
"backgroundColor": "transparent",
863+
"borderRadius": 20,
854864
"bottom": undefined,
855865
"end": undefined,
856866
"flex": undefined,
@@ -999,6 +1009,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
9991009
style={
10001010
Object {
10011011
"alignSelf": undefined,
1012+
"backgroundColor": "transparent",
1013+
"borderRadius": 20,
10021014
"bottom": undefined,
10031015
"end": undefined,
10041016
"flex": undefined,
@@ -1155,6 +1167,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
11551167
style={
11561168
Object {
11571169
"alignSelf": undefined,
1170+
"backgroundColor": "rgb(247, 243, 249)",
11581171
"bottom": undefined,
11591172
"end": undefined,
11601173
"flex": undefined,
@@ -1307,6 +1320,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
13071320
style={
13081321
Object {
13091322
"alignSelf": undefined,
1323+
"backgroundColor": "rgb(247, 243, 249)",
13101324
"bottom": undefined,
13111325
"end": undefined,
13121326
"flex": undefined,

‎src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
7575
style={
7676
Object {
7777
"alignSelf": undefined,
78+
"backgroundColor": "transparent",
7879
"bottom": 0,
7980
"end": undefined,
8081
"flex": undefined,
@@ -822,6 +823,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
822823
style={
823824
Object {
824825
"alignSelf": undefined,
826+
"backgroundColor": "transparent",
825827
"bottom": 0,
826828
"end": undefined,
827829
"flex": undefined,
@@ -1701,6 +1703,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
17011703
style={
17021704
Object {
17031705
"alignSelf": undefined,
1706+
"backgroundColor": "transparent",
17041707
"bottom": 0,
17051708
"end": undefined,
17061709
"flex": undefined,
@@ -3409,6 +3412,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
34093412
style={
34103413
Object {
34113414
"alignSelf": undefined,
3415+
"backgroundColor": "transparent",
34123416
"bottom": 0,
34133417
"end": undefined,
34143418
"flex": undefined,
@@ -4877,6 +4881,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
48774881
style={
48784882
Object {
48794883
"alignSelf": undefined,
4884+
"backgroundColor": "transparent",
48804885
"bottom": 0,
48814886
"end": undefined,
48824887
"flex": undefined,
@@ -5564,6 +5569,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
55645569
style={
55655570
Object {
55665571
"alignSelf": undefined,
5572+
"backgroundColor": "transparent",
55675573
"bottom": 0,
55685574
"end": undefined,
55695575
"flex": undefined,
@@ -6532,6 +6538,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
65326538
style={
65336539
Object {
65346540
"alignSelf": undefined,
6541+
"backgroundColor": "transparent",
65356542
"bottom": 0,
65366543
"end": undefined,
65376544
"flex": undefined,
@@ -7624,6 +7631,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
76247631
style={
76257632
Object {
76267633
"alignSelf": undefined,
7634+
"backgroundColor": "transparent",
76277635
"bottom": 0,
76287636
"end": undefined,
76297637
"flex": undefined,
@@ -8572,6 +8580,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
85728580
style={
85738581
Object {
85748582
"alignSelf": undefined,
8583+
"backgroundColor": "transparent",
85758584
"bottom": 0,
85768585
"end": undefined,
85778586
"flex": undefined,
@@ -9664,6 +9673,7 @@ exports[`renders shifting bottom navigation 1`] = `
96649673
style={
96659674
Object {
96669675
"alignSelf": undefined,
9676+
"backgroundColor": "transparent",
96679677
"bottom": 0,
96689678
"end": undefined,
96699679
"flex": undefined,

0 commit comments

Comments
 (0)