Add to ActivityIndicator tests

This commit is contained in:
Nicolas Gallagher
2020-10-01 16:40:51 -07:00
parent 7bc6fc8347
commit 0fb3036f31
2 changed files with 306 additions and 0 deletions
@@ -1,5 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] = `
<div
aria-label="accessibility label"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is set 1`] = `
<div
aria-live="polite"
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
<div
aria-valuemax="1"
@@ -97,6 +171,44 @@ exports[`components/ActivityIndicator prop "color" 1`] = `
</svg>
`;
exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
data-one="one"
data-two="two"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
<div
aria-valuemax="1"
@@ -169,6 +281,43 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
</div>
`;
exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
id="123"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
<div
aria-valuemax="1"
@@ -241,3 +390,77 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
</div>
</div>
`;
exports[`components/ActivityIndicator prop "style" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
role="progressbar"
style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
data-testid="123"
role="progressbar"
>
<div
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
>
<svg
height="100%"
viewBox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; opacity: 0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
/>
</svg>
</div>
</div>
`;
@@ -2,9 +2,25 @@
import ActivityIndicator from '..';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { createEventTarget } from 'dom-event-testing-library';
import { render } from '@testing-library/react';
describe('components/ActivityIndicator', () => {
describe('prop "accessibilityLabel"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator accessibilityLabel="accessibility label" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "accessibilityLiveRegion"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator accessibilityLiveRegion="polite" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "animating"', () => {
test('is "true"', () => {
const { container } = render(<ActivityIndicator animating={true} />);
@@ -23,6 +39,13 @@ describe('components/ActivityIndicator', () => {
expect(svg).toMatchSnapshot();
});
describe('prop "dataSet"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "hidesWhenStopped"', () => {
test('is "true"', () => {
const { container } = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
@@ -37,6 +60,52 @@ describe('components/ActivityIndicator', () => {
});
});
describe('prop "nativeID"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator nativeID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "onBlur"', () => {
test('is called', () => {
const onBlur = jest.fn();
const ref = React.createRef();
act(() => {
render(<ActivityIndicator onBlur={onBlur} ref={ref} />);
});
const target = createEventTarget(ref.current);
act(() => {
target.focus();
target.blur();
});
expect(onBlur).toBeCalled();
});
});
describe('prop "onFocus"', () => {
test('is called', () => {
const onFocus = jest.fn();
const ref = React.createRef();
act(() => {
render(<ActivityIndicator onFocus={onFocus} ref={ref} />);
});
const target = createEventTarget(ref.current);
act(() => {
target.focus();
});
expect(onFocus).toBeCalled();
});
});
describe('prop "ref"', () => {
test('value is set', () => {
const ref = jest.fn();
render(<ActivityIndicator ref={ref} />);
expect(ref).toBeCalled();
});
});
describe('prop "size"', () => {
test('is "large"', () => {
const { container } = render(<ActivityIndicator size="large" />);
@@ -48,4 +117,18 @@ describe('components/ActivityIndicator', () => {
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "style"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator style={{ borderWidth: 5 }} />);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "testID"', () => {
test('value is set', () => {
const { container } = render(<ActivityIndicator testID="123" />);
expect(container.firstChild).toMatchSnapshot();
});
});
});