Skip to content

Commit

Permalink
test: fix tests and update snapshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@DimitarNestorov
DimitarNestorov committed Mar 13, 2023
1 parent c760c94 commit 019d96a
Show file tree
Hide file tree
Showing 17 changed files with 235 additions and 27 deletions.
12 changes: 12 additions & 0 deletions src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgba(255, 251, 254, 1)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -58,6 +59,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(238, 232, 244)",
"borderRadius": 28,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -106,6 +109,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -297,6 +302,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -446,6 +453,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgba(255, 251, 254, 1)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -498,6 +506,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -751,6 +761,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down
2 changes: 2 additions & 0 deletions src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ exports[`Card renders an outlined card 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgba(255, 251, 254, 1)",
"borderRadius": 12,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down
70 changes: 43 additions & 27 deletions src/components/__tests__/Surface.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,23 +74,39 @@ describe('Surface', () => {
expect(getByTestId('surface-test')).not.toHaveStyle(style);
});

it.each`
property | value
${'padding'} | ${12}
${'paddingLeft'} | ${12.1}
${'paddingRight'} | ${12.2}
${'paddingTop'} | ${12.3}
${'paddingBottom'} | ${12.4}
${'paddingHorizontal'} | ${12.5}
${'paddingVertical'} | ${12.6}
${'borderWidth'} | ${2}
${'borderColor'} | ${'black'}
`('applies $property to inner layer only', ({ property, value }) => {
const style = { [property]: value };

const { getByTestId } = render(
<Surface testID="surface-test" style={style}>
{null}
</Surface>
);

expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
expect(getByTestId('surface-test')).toHaveStyle(style);
});

it.each`
property | value
${'padding'} | ${12}
${'paddingLeft'} | ${12.1}
${'paddingRight'} | ${12.2}
${'paddingTop'} | ${12.3}
${'paddingBottom'} | ${12.4}
${'paddingHorizontal'} | ${12.5}
${'paddingVertical'} | ${12.6}
${'borderWidth'} | ${2}
${'borderColor'} | ${'black'}
${'borderRadius'} | ${3}
${'borderTopLeftRadius'} | ${1}
${'borderTopRightRadius'} | ${2}
${'borderBottomLeftRadius'} | ${3}
${'borderBottomRightRadius'} | ${4}
`('applies $property to inner layer only', ({ property, value }) => {
${'backgroundColor'} | ${'rgb(4, 5, 6)'}
`('applies $property to every layer', ({ property, value }) => {
const style = { [property]: value };

const { getByTestId } = render(
Expand All @@ -99,7 +115,7 @@ describe('Surface', () => {
</Surface>
);

expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
expect(getByTestId('surface-test')).toHaveStyle(style);
});

Expand Down Expand Up @@ -148,22 +164,6 @@ describe('Surface', () => {
});

describe('inner layer', () => {
it('applies backgroundColor to inner layer only', () => {
const backgroundColor = 'rgb(1,2,3)';
const { getByTestId } = render(
<Surface
testID="surface-test"
theme={{ colors: { elevation: { level1: backgroundColor } } }}
>
{null}
</Surface>
);

const style = { backgroundColor };
expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
expect(getByTestId('surface-test')).toHaveStyle(style);
});

it('should render inner layer styles on the inner layer', () => {
const testID = 'surface-test';

Expand All @@ -177,6 +177,22 @@ describe('Surface', () => {
});
});

it('applies backgroundColor to every layer', () => {
const backgroundColor = 'rgb(1, 2, 3)';
const { getByTestId } = render(
<Surface
testID="surface-test"
theme={{ colors: { elevation: { level1: backgroundColor } } }}
>
{null}
</Surface>
);

const style = { backgroundColor };
expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
expect(getByTestId('surface-test')).toHaveStyle(style);
});

describe('children wrapper', () => {
it('should render rest styles', () => {
const testID = 'surface-test';
Expand Down
6 changes: 6 additions & 0 deletions src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ exports[`renders animated fab 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 16,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -295,6 +297,8 @@ exports[`renders animated fab with label on the left 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 16,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -586,6 +590,8 @@ exports[`renders animated fab with label on the right by default 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 16,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down
14 changes: 14 additions & 0 deletions src/components/__tests__/__snapshots__/Banner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`render visible banner, with custom theme 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -129,6 +130,8 @@ exports[`render visible banner, with custom theme 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -285,6 +288,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -427,6 +431,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -572,6 +577,8 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -728,6 +735,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -851,6 +859,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -999,6 +1009,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"borderRadius": 20,
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -1155,6 +1167,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -1307,6 +1320,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
style={
Object {
"alignSelf": undefined,
"backgroundColor": "rgb(247, 243, 249)",
"bottom": undefined,
"end": undefined,
"flex": undefined,
Expand Down
10 changes: 10 additions & 0 deletions src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -822,6 +823,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -1701,6 +1703,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -3409,6 +3412,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -4877,6 +4881,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -5564,6 +5569,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -6532,6 +6538,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -7624,6 +7631,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -8572,6 +8580,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down Expand Up @@ -9664,6 +9673,7 @@ exports[`renders shifting bottom navigation 1`] = `
style={
Object {
"alignSelf": undefined,
"backgroundColor": "transparent",
"bottom": 0,
"end": undefined,
"flex": undefined,
Expand Down
Loading

0 comments on commit 019d96a

Please sign in to comment.