refactor: convert remaining tests to TypeScript (callstack#3655)

src/components/__tests__/ActivityIndicator.test.js → src/components/__tests__/ActivityIndicator.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import renderer from 'react-test-renderer';
 
-import ActivityIndicator from '../ActivityIndicator.tsx';
+import ActivityIndicator from '../ActivityIndicator';
 
 it('renders indicator', () => {
  const tree = renderer.create(<ActivityIndicator animating />).toJSON();

src/components/__tests__/Avatar.test.js → src/components/__tests__/Avatar.test.tsx

@@ -5,7 +5,7 @@ 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.tsx';
+import * as Avatar from '../Avatar/Avatar';
 
 const styles = StyleSheet.create({
  bgColor: {
@@ -57,7 +57,7 @@ it('renders avatar with icon and custom background color', () => {
 
 it('renders avatar with image', () => {
  const tree = renderer
- .create(<Avatar.Image source={{ src: 'avatar.png' }} />)
+ .create(<Avatar.Image source={{ uri: 'avatar.png' }} />)
  .toJSON();
 
  expect(tree).toMatchSnapshot();
@@ -70,6 +70,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}
@@ -86,6 +87,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}
@@ -102,6 +104,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}
@@ -118,6 +121,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}
@@ -134,6 +138,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}
@@ -150,6 +155,7 @@ describe('AvatarImage listener', () => {
  const { getByTestId } = render(
  <Avatar.Image
  testID={'avatar-image'}
+ source={{ uri: 'avatar.png' }}
  onError={onListenerMock}
  onLayout={onListenerMock}
  onLoad={onListenerMock}

src/components/__tests__/Badge.test.js → src/components/__tests__/Badge.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import renderer from 'react-test-renderer';
 
 import { red500 } from '../../styles/themes/v2/colors';
-import Badge from '../Badge.tsx';
+import Badge from '../Badge';
 
 jest.mock('react-native', () => {
  const RN = jest.requireActual('react-native');

src/components/__tests__/Checkbox/CheckboxItem.test.js → src/components/__tests__/Checkbox/CheckboxItem.test.tsx

@@ -80,7 +80,12 @@ it('should have `accessibilityState={ checked: false }` when `status="indetermin
 
 it('disables the row when the prop disabled is true', () => {
  const { getByLabelText } = render(
- <Checkbox.Item accessibilityLabel="some checkbox" disabled />
+ <Checkbox.Item
+ status="unchecked"
+ label=""
+ accessibilityLabel="some checkbox"
+ disabled
+ />
  );
 
  const touchable = getByLabelText('some checkbox');

src/components/__tests__/Checkbox/utils.test.js → src/components/__tests__/Checkbox/utils.test.tsx

@@ -12,6 +12,7 @@ describe('getAndroidSelectionControlColor - ripple color', () => {
  getAndroidSelectionControlColor({
  theme: getTheme(),
  disabled: true,
+ checked: false,
  })
  ).toMatchObject({
  rippleColor: color(getTheme().colors.onSurface)
@@ -26,6 +27,7 @@ describe('getAndroidSelectionControlColor - ripple color', () => {
  getAndroidSelectionControlColor({
  theme: getTheme(false, false),
  disabled: true,
+ checked: false,
  })
  ).toMatchObject({
  rippleColor: color(getTheme(false, false).colors.text)
@@ -40,6 +42,7 @@ describe('getAndroidSelectionControlColor - ripple color', () => {
  getAndroidSelectionControlColor({
  theme: getTheme(),
  customColor: 'purple',
+ checked: false,
  })
  ).toMatchObject({
  rippleColor: color('purple').fade(0.32).rgb().string(),
@@ -50,6 +53,7 @@ describe('getAndroidSelectionControlColor - ripple color', () => {
  expect(
  getAndroidSelectionControlColor({
  theme: getTheme(),
+ checked: false,
  })
  ).toMatchObject({
  rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(),
@@ -60,6 +64,7 @@ describe('getAndroidSelectionControlColor - ripple color', () => {
  expect(
  getAndroidSelectionControlColor({
  theme: getTheme(false, false),
+ checked: false,
  })
  ).toMatchObject({
  rippleColor: color(getTheme(false, false).colors.accent)
@@ -76,6 +81,7 @@ describe('getAndroidSelectionControlColor - checkbox color', () => {
  getAndroidSelectionControlColor({
  theme: getTheme(),
  disabled: true,
+ checked: false,
  })
  ).toMatchObject({
  selectionControlColor: getTheme().colors.onSurfaceDisabled,
@@ -87,6 +93,7 @@ describe('getAndroidSelectionControlColor - checkbox color', () => {
  getAndroidSelectionControlColor({
  theme: getTheme(false, false),
  disabled: true,
+ checked: false,
  })
  ).toMatchObject({
  selectionControlColor: getTheme(false, false).colors.text,
@@ -270,7 +277,6 @@ describe('getSelectionControlIOSColor - checked color', () => {
  expect(
  getSelectionControlIOSColor({
  theme: getTheme(),
- checked: true,
  customColor: 'purple',
  })
  ).toMatchObject({
@@ -282,7 +288,6 @@ describe('getSelectionControlIOSColor - checked color', () => {
  expect(
  getSelectionControlIOSColor({
  theme: getTheme(),
- checked: true,
  })
  ).toMatchObject({
  checkedColor: getTheme().colors.primary,
@@ -293,7 +298,6 @@ describe('getSelectionControlIOSColor - checked color', () => {
  expect(
  getSelectionControlIOSColor({
  theme: getTheme(false, false),
- checked: true,
  })
  ).toMatchObject({
  checkedColor: getTheme(false, false).colors.accent,

src/components/__tests__/DataTable.test.js → src/components/__tests__/DataTable.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
-import DataTable from '../DataTable/DataTable.tsx';
+import DataTable from '../DataTable/DataTable';
 
 it('renders data table header', () => {
  const tree = renderer

src/components/__tests__/Drawer/DrawerSection.test.js → src/components/__tests__/Drawer/DrawerSection.test.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import renderer from 'react-test-renderer';
 
-import DrawerSection from '../../Drawer/DrawerSection.tsx';
+import DrawerSection from '../../Drawer/DrawerSection';
 
 describe('DrawerSection', () => {
  it('renders properly', () => {

src/components/__tests__/DrawerItem.test.js → src/components/__tests__/DrawerItem.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import renderer from 'react-test-renderer';
 
-import DrawerItem from '../Drawer/DrawerItem.tsx';
+import DrawerItem from '../Drawer/DrawerItem';
 
 it('renders basic DrawerItem', () => {
  const tree = renderer

src/components/__tests__/ListAccordion.test.js → src/components/__tests__/ListAccordion.test.tsx

@@ -6,9 +6,9 @@ import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { red500 } from '../../styles/themes/v2/colors';
-import ListAccordion from '../List/ListAccordion.tsx';
-import ListIcon from '../List/ListIcon.tsx';
-import ListItem from '../List/ListItem.tsx';
+import ListAccordion from '../List/ListAccordion';
+import ListIcon from '../List/ListIcon';
+import ListItem from '../List/ListItem';
 import { getAccordionColors } from '../List/utils';
 
 const styles = StyleSheet.create({

src/components/__tests__/ListItem.test.js → src/components/__tests__/ListItem.test.tsx

@@ -6,8 +6,8 @@ import renderer from 'react-test-renderer';
 
 import { red500 } from '../../styles/themes/v2/colors';
 import Chip from '../Chip/Chip';
-import ListIcon from '../List/ListIcon.tsx';
-import ListItem from '../List/ListItem.tsx';
+import ListIcon from '../List/ListIcon';
+import ListItem from '../List/ListItem';
 
 const styles = StyleSheet.create({
  title: {

src/components/__tests__/ListSection.test.js → src/components/__tests__/ListSection.test.tsx

@@ -4,10 +4,10 @@ import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 
 import { red500 } from '../../styles/themes/v2/colors';
-import ListIcon from '../List/ListIcon.tsx';
-import ListItem from '../List/ListItem.tsx';
-import ListSection from '../List/ListSection.tsx';
-import ListSubheader from '../List/ListSubheader.tsx';
+import ListIcon from '../List/ListIcon';
+import ListItem from '../List/ListItem';
+import ListSection from '../List/ListSection';
+import ListSubheader from '../List/ListSubheader';
 
 const styles = StyleSheet.create({
  itemColor: {

src/components/__tests__/MenuItem.test.js → src/components/__tests__/MenuItem.test.tsx

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
-import Menu from '../Menu/Menu.tsx';
+import Menu from '../Menu/Menu';
 import { getMenuItemColor } from '../Menu/utils';
 
 describe('getMenuItemColor - title color', () => {

src/components/__tests__/Portal.test.js → src/components/__tests__/Portal.test.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 
 import { render, waitFor } from '@testing-library/react-native';
 
-import Portal from '../Portal/Portal.tsx';
+import Portal from '../Portal/Portal';
 
 jest.useRealTimers();
 

src/components/__tests__/ProgressBar.test.js → src/components/__tests__/ProgressBar.test.tsx

@@ -3,7 +3,7 @@ import { Animated } from 'react-native';
 
 import { render, waitFor } from '@testing-library/react-native';
 
-import ProgressBar from '../ProgressBar.tsx';
+import ProgressBar, { Props } from '../ProgressBar';
 
 const layoutEvent = {
  nativeEvent: {
@@ -15,11 +15,7 @@ const layoutEvent = {
 
 const a11yRole = 'progressbar';
 
-class ClassProgressBar extends React.Component {
- constructor(props) {
- super(props);
- }
-
+class ClassProgressBar extends React.Component<Props> {
  render() {
  return <ProgressBar {...this.props} />;
  }

src/components/__tests__/RadioButton/RadioButton.test.js → src/components/__tests__/RadioButton/RadioButton.test.tsx

@@ -12,7 +12,7 @@ describe('RadioButton', () => {
  const RN = jest.requireActual('react-native');
 
  RN.Platform = () => ({
- select: (objs) => objs.default,
+ select: (objs: { default: object }) => objs.default,
  });
 
  return RN;
@@ -32,7 +32,7 @@ describe('RadioButton', () => {
  const RN = jest.requireActual('react-native');
 
  RN.Platform = () => ({
- select: (objs) => objs.ios,
+ select: (objs: { ios: object }) => objs.ios,
  });
 
  return RN;
@@ -50,7 +50,9 @@ describe('RadioButton', () => {
  it('renders properly', () => {
  const tree = renderer
  .create(
- <RadioButtonContext.Provider value="first" onValueChange={() => {}}>
+ <RadioButtonContext.Provider
+ value={{ value: 'first', onValueChange: () => {} }}
+ >
  <RadioButton value="first" />
  </RadioButtonContext.Provider>
  )

src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap → src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap

@@ -253,7 +253,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
  accessibilityRole="radio"
  accessibilityState={
  Object {
- "checked": false,
+ "checked": true,
  "disabled": false,
  }
  }
@@ -285,7 +285,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
  <View
  style={
  Object {
- "opacity": 0,
+ "opacity": 1,
  }
  }
  >