Skip to content

Commit

Permalink
test: use testing library for snapshots (#3802)
Browse files Browse the repository at this point in the history
  • Loading branch information
lukewalczak authored Apr 5, 2023
1 parent 1b747fa commit f9d3db1
Show file tree
Hide file tree
Showing 34 changed files with 749 additions and 958 deletions.
1 change: 1 addition & 0 deletions src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,7 @@ class Menu extends React.Component<Props, State> {
style={[styles.wrapper, positionStyle, style]}
pointerEvents={visible ? 'box-none' : 'none'}
onAccessibilityEscape={onDismiss}
testID={`${testID}-view`}
>
<Animated.View style={{ transform: positionTransforms }}>
<Surface
Expand Down
14 changes: 7 additions & 7 deletions src/components/__tests__/ActivityIndicator.test.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import * as React from 'react';

import renderer from 'react-test-renderer';
import { render } from '@testing-library/react-native';

import ActivityIndicator from '../ActivityIndicator';

it('renders indicator', () => {
const tree = renderer.create(<ActivityIndicator animating />).toJSON();
const tree = render(<ActivityIndicator animating />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders hidden indicator', () => {
const tree = renderer
.create(<ActivityIndicator animating={false} hidesWhenStopped />)
.toJSON();
const tree = render(
<ActivityIndicator animating={false} hidesWhenStopped />
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders large indicator', () => {
const tree = renderer.create(<ActivityIndicator size="large" />).toJSON();
const tree = render(<ActivityIndicator size="large" />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders colored indicator', () => {
const tree = renderer.create(<ActivityIndicator color="#FF0000" />).toJSON();
const tree = render(<ActivityIndicator color="#FF0000" />).toJSON();

expect(tree).toMatchSnapshot();
});
37 changes: 15 additions & 22 deletions src/components/__tests__/AnimatedFAB.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as React from 'react';
import { Animated, StyleSheet } from 'react-native';

import { render } from '@testing-library/react-native';
import renderer from 'react-test-renderer';

import { MD3Colors } from '../../styles/themes/v3/tokens';
import AnimatedFAB from '../FAB/AnimatedFAB';
Expand All @@ -16,37 +15,31 @@ const styles = StyleSheet.create({
});

it('renders animated fab', () => {
const tree = renderer
.create(
<AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
)
.toJSON();
const tree = render(
<AnimatedFAB onPress={() => {}} label="" extended={false} icon="plus" />
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders animated fab with label on the right by default', () => {
const tree = renderer
.create(
<AnimatedFAB label="text" extended onPress={() => {}} icon="plus" />
)
.toJSON();
const tree = render(
<AnimatedFAB label="text" extended onPress={() => {}} icon="plus" />
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders animated fab with label on the left', () => {
const tree = renderer
.create(
<AnimatedFAB
label="text"
extended
animateFrom="left"
onPress={() => {}}
icon="plus"
/>
)
.toJSON();
const tree = render(
<AnimatedFAB
label="text"
extended
animateFrom="left"
onPress={() => {}}
icon="plus"
/>
).toJSON();

expect(tree).toMatchSnapshot();
});
Expand Down
29 changes: 12 additions & 17 deletions src/components/__tests__/Appbar/Appbar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Animated, Platform } from 'react-native';

import { render } from '@testing-library/react-native';
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
import renderer from 'react-test-renderer';

import Provider from '../../../core/Provider';
import { getTheme } from '../../../core/theming';
Expand Down Expand Up @@ -33,27 +32,23 @@ const renderAppbarContent = utilRenderAppbarContent as (

describe('Appbar', () => {
it('does not pass any additional props to Searchbar', () => {
const tree = renderer
.create(
<Appbar>
<Searchbar placeholder="Search" value="" />
</Appbar>
)
.toJSON();
const tree = render(
<Appbar>
<Searchbar placeholder="Search" value="" />
</Appbar>
).toJSON();

expect(tree).toMatchSnapshot();
});

it('passes additional props to AppbarBackAction, AppbarContent and AppbarAction', () => {
const tree = renderer
.create(
<Appbar>
<Appbar.BackAction onPress={() => {}} />
<Appbar.Content title="Examples" />
<Appbar.Action icon="menu" onPress={() => {}} />
</Appbar>
)
.toJSON();
const tree = render(
<Appbar>
<Appbar.BackAction onPress={() => {}} />
<Appbar.Content title="Examples" />
<Appbar.Action icon="menu" onPress={() => {}} />
</Appbar>
).toJSON();

expect(tree).toMatchSnapshot();
});
Expand Down
27 changes: 11 additions & 16 deletions src/components/__tests__/Avatar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react';
import { StyleSheet } from 'react-native';

import { fireEvent, render } from '@testing-library/react-native';
import renderer from 'react-test-renderer';

import { red500 } from '../../styles/themes/v2/colors';
import * as Avatar from '../Avatar/Avatar';
Expand All @@ -14,51 +13,47 @@ const styles = StyleSheet.create({
});

it('renders avatar with text', () => {
const tree = renderer.create(<Avatar.Text label="XD" />).toJSON();
const tree = render(<Avatar.Text label="XD" />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with text and custom size', () => {
const tree = renderer.create(<Avatar.Text size={96} label="XD" />).toJSON();
const tree = render(<Avatar.Text size={96} label="XD" />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with text and custom background color', () => {
const tree = renderer
.create(<Avatar.Text style={styles.bgColor} label="XD" />)
.toJSON();
const tree = render(
<Avatar.Text style={styles.bgColor} label="XD" />
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with text and custom colors', () => {
const tree = renderer
.create(<Avatar.Text color="#FFFFFF" label="XD" />)
.toJSON();
const tree = render(<Avatar.Text color="#FFFFFF" label="XD" />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with icon', () => {
const tree = renderer.create(<Avatar.Icon icon="information" />).toJSON();
const tree = render(<Avatar.Icon icon="information" />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with icon and custom background color', () => {
const tree = renderer
.create(<Avatar.Icon style={styles.bgColor} icon="information" />)
.toJSON();
const tree = render(
<Avatar.Icon style={styles.bgColor} icon="information" />
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders avatar with image', () => {
const tree = renderer
.create(<Avatar.Image source={{ uri: 'avatar.png' }} />)
.toJSON();
const tree = render(<Avatar.Image source={{ uri: 'avatar.png' }} />).toJSON();

expect(tree).toMatchSnapshot();
});
Expand Down
26 changes: 12 additions & 14 deletions src/components/__tests__/Badge.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';

import renderer from 'react-test-renderer';
import { render } from '@testing-library/react-native';

import { red500 } from '../../styles/themes/v2/colors';
import Badge from '../Badge';
Expand All @@ -16,39 +16,37 @@ jest.mock('react-native', () => {
});

it('renders badge', () => {
const tree = renderer.create(<Badge />).toJSON();
const tree = render(<Badge />).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders badge with content', () => {
const tree = renderer.create(<Badge>3</Badge>).toJSON();
const tree = render(<Badge>3</Badge>).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders badge in different size', () => {
const tree = renderer.create(<Badge size={12}>3</Badge>).toJSON();
const tree = render(<Badge size={12}>3</Badge>).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders badge as hidden', () => {
const tree = renderer
.create(
<Badge visible={false} size={12}>
3
</Badge>
)
.toJSON();
const tree = render(
<Badge visible={false} size={12}>
3
</Badge>
).toJSON();

expect(tree).toMatchSnapshot();
});

it('renders badge in different color', () => {
const tree = renderer
.create(<Badge style={{ backgroundColor: red500 }}>3</Badge>)
.toJSON();
const tree = render(
<Badge style={{ backgroundColor: red500 }}>3</Badge>
).toJSON();

expect(tree).toMatchSnapshot();
});
Loading

0 comments on commit f9d3db1

Please sign in to comment.