Skip to content

Commit

Permalink
test: replace Enzyme with React Testing Library
Browse files Browse the repository at this point in the history
  • Loading branch information
tusharnagar17 committed Dec 4, 2024
1 parent 7bb23c9 commit 4007153
Show file tree
Hide file tree
Showing 43 changed files with 3,564 additions and 4,658 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Third party dependencies.
import React from 'react';
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react-native';

// External dependencies.
import { IconName } from '../../../../Icons/Icon';
Expand All @@ -16,13 +17,13 @@ import {

describe('AccordionHeader - Snapshot', () => {
it('should render default settings correctly', () => {
const wrapper = shallow(
const wrapper = render(
<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />,
);
expect(wrapper).toMatchSnapshot();
});
it('should render a rotated down Arrow if isExpanded is true', () => {
const wrapper = shallow(
const wrapper = render(
<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} isExpanded />,
);
expect(wrapper).toMatchSnapshot();
Expand All @@ -31,31 +32,23 @@ describe('AccordionHeader - Snapshot', () => {

describe('AccordionHeader', () => {
it('should render AccordionHeader', () => {
const wrapper = shallow(
<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />,
);
const accordionHeaderComponent = wrapper.findWhere(
(node) => node.prop('testID') === TESTID_ACCORDIONHEADER,
);
expect(accordionHeaderComponent.exists()).toBe(true);
render(<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />);

const accordionHeaderComponent = screen.getByTestId(TESTID_ACCORDIONHEADER);
expect(accordionHeaderComponent).toBeTruthy();
});
it('should render the given title', () => {
const wrapper = shallow(
<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />,
);
const titleElement = wrapper.findWhere(
(node) => node.prop('testID') === TESTID_ACCORDIONHEADER_TITLE,
);
expect(titleElement.props().children).toBe(SAMPLE_ACCORDIONHEADER_TITLE);
render(<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />);

const titleElement = screen.getByText(SAMPLE_ACCORDIONHEADER_TITLE);
expect(titleElement).toBeTruthy();
});
it('should render the proper arrow down icon', () => {
const wrapper = shallow(
<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />,
);
const iconElement = wrapper.findWhere(
(node) => node.prop('testID') === TESTID_ACCORDIONHEADER_ARROWICON,
);
expect(iconElement.props().name).toBe(IconName.ArrowDown);
render(<AccordionHeader title={SAMPLE_ACCORDIONHEADER_TITLE} />);

const iconElement = screen.getByTestId(TESTID_ACCORDIONHEADER_ARROWICON);
const iconProps = iconElement.props;
expect(iconProps.name).toBe(IconName.ArrowDown);
});
//TODO: Add Test for Pressed state and animation
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,18 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa
testID="accordionheader"
>
<Text
accessibilityRole="text"
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="accordionheader-title"
variant="sBodyMD"
>
Sample Accordion Header Title
</Text>
Expand All @@ -42,11 +47,18 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa
}
testID="accordionheader-arrow-icon-animation"
>
<Icon
<SvgMock
color="#0376c9"
height={16}
name="ArrowDown"
size="16"
style={
{
"height": 16,
"width": 16,
}
}
testID="accordionheader-arrow-icon"
width={16}
/>
</View>
</TouchableOpacity>
Expand All @@ -67,13 +79,18 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`]
testID="accordionheader"
>
<Text
accessibilityRole="text"
style={
{
"color": "#0376c9",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
}
}
testID="accordionheader-title"
variant="sBodyMD"
>
Sample Accordion Header Title
</Text>
Expand All @@ -94,11 +111,18 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`]
}
testID="accordionheader-arrow-icon-animation"
>
<Icon
<SvgMock
color="#0376c9"
height={16}
name="ArrowDown"
size="16"
style={
{
"height": 16,
"width": 16,
}
}
testID="accordionheader-arrow-icon"
width={16}
/>
</View>
</TouchableOpacity>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
// Third party dependencies.
import React from 'react';
import { Image } from 'react-native';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react-native';

// Internal dependencies.
import AvatarBase from './AvatarBase';
import { SAMPLE_AVATARBASE_IMAGESOURCE } from './AvatarBase.constants';

describe('AvatarBase', () => {
it('should render correctly', () => {
const wrapper = shallow(
const wrapper = render(
<AvatarBase>
<Image source={SAMPLE_AVATARBASE_IMAGESOURCE} />
</AvatarBase>,
);

expect(wrapper).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Third party dependencies.
import React from 'react';
import { shallow } from 'enzyme';
import { render, fireEvent, screen } from '@testing-library/react-native';

// Internal dependencies.
import AvatarFavicon from './AvatarFavicon';
Expand All @@ -10,36 +10,36 @@ import {
SAMPLE_AVATARFAVICON_IMAGESOURCE_LOCAL,
SAMPLE_AVATARFAVICON_SVGIMAGESOURCE_REMOTE,
} from './AvatarFavicon.constants';
import { queryByTestId } from '@testing-library/react';

describe('AvatarFavicon', () => {
it('should match the snapshot', () => {
const wrapper = shallow(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);
const wrapper = render(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);
expect(wrapper).toMatchSnapshot();
});

it('should render favicon with remote image', () => {
const wrapper = shallow(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);
const imageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
);
expect(imageComponent.exists()).toBe(true);
render(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);

const imageComponent = screen.getByTestId(AVATARFAVICON_IMAGE_TESTID);
expect(imageComponent).toBeTruthy();
});

it('should render favicon with local image', () => {
const wrapper = shallow(
render(
<AvatarFavicon
{...SAMPLE_AVATARFAVICON_PROPS}
imageSource={SAMPLE_AVATARFAVICON_IMAGESOURCE_LOCAL}
/>,
);
const imageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
);
expect(imageComponent.exists()).toBe(true);

const imageComponent = screen.getByTestId(AVATARFAVICON_IMAGE_TESTID);

expect(imageComponent).toBeTruthy();
});

it('should render SVG', () => {
const wrapper = shallow(
const wrapper = render(
<AvatarFavicon
{...SAMPLE_AVATARFAVICON_PROPS}
imageSource={SAMPLE_AVATARFAVICON_SVGIMAGESOURCE_REMOTE}
Expand All @@ -50,34 +50,41 @@ describe('AvatarFavicon', () => {
});

it('should render fallback', () => {
const wrapper = shallow(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);
const prevImageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
);
render(<AvatarFavicon {...SAMPLE_AVATARFAVICON_PROPS} />);

const prevImageComponent = screen.getByTestId(AVATARFAVICON_IMAGE_TESTID);

// Simulate onError on Image component
prevImageComponent.props().onError({ nativeEvent: { error: 'ERROR!' } });
const currentImageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
fireEvent(prevImageComponent, 'onError', {
nativeEvent: { error: 'ERROR!' },
});

const currentImageComponent = screen.queryByTestId(
AVATARFAVICON_IMAGE_TESTID,
);
expect(currentImageComponent.exists()).toBe(false);

expect(currentImageComponent).toBeNull();
});

it('should render fallback when svg has error', () => {
const wrapper = shallow(
const wrapper = render(
<AvatarFavicon
{...SAMPLE_AVATARFAVICON_PROPS}
imageSource={SAMPLE_AVATARFAVICON_SVGIMAGESOURCE_REMOTE}
/>,
);
const prevImageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
);
const prevImageComponent = screen.getByTestId(AVATARFAVICON_IMAGE_TESTID);

// Simulate onError on Image component
prevImageComponent.props().onError(new Error('ERROR!'));
const currentImageComponent = wrapper.findWhere(
(node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
fireEvent(prevImageComponent, 'onError', {
nativeEvent: { error: 'ERROR!' },
});

const currentImageComponent = screen.queryByTestId(
AVATARFAVICON_IMAGE_TESTID,
);
expect(currentImageComponent.exists()).toBe(true);

expect(currentImageComponent).toBeNull();
expect(wrapper).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AvatarFavicon should match the snapshot 1`] = `
<AvatarBase
size="32"
style={{}}
<View
style={
{
"backgroundColor": "#ffffff",
"borderRadius": 16,
"height": 32,
"overflow": "hidden",
"width": 32,
}
}
>
<Image
onError={[Function]}
Expand All @@ -22,13 +29,20 @@ exports[`AvatarFavicon should match the snapshot 1`] = `
}
testID="favicon-avatar-image"
/>
</AvatarBase>
</View>
`;

exports[`AvatarFavicon should render SVG 1`] = `
<AvatarBase
size="32"
style={{}}
<View
style={
{
"backgroundColor": "#ffffff",
"borderRadius": 16,
"height": 32,
"overflow": "hidden",
"width": 32,
}
}
>
<Image
onError={[Function]}
Expand All @@ -47,30 +61,32 @@ exports[`AvatarFavicon should render SVG 1`] = `
}
testID="favicon-avatar-image"
/>
</AvatarBase>
</View>
`;

exports[`AvatarFavicon should render fallback when svg has error 1`] = `
<AvatarBase
size="32"
style={{}}
>
<Image
onError={[Function]}
resizeMode="contain"
source={
{
"uri": "https://metamask.github.io/test-dapp/metamask-fox.svg",
}
<View
style={
{
"backgroundColor": "#ffffff",
"borderRadius": 16,
"height": 32,
"overflow": "hidden",
"width": 32,
}
}
>
<SvgMock
color="#141618"
height={20}
name="Global"
style={
{
"flex": 1,
"height": undefined,
"width": undefined,
"height": 20,
"width": 20,
}
}
testID="favicon-avatar-image"
width={20}
/>
</AvatarBase>
</View>
`;
Loading

0 comments on commit 4007153

Please sign in to comment.