refactor: convert remaining tests to TypeScript (#3655)

Author: DimitarNestorov

src/components/__tests__/ActivityIndicator.test.js renamed to 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 renamed to 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 renamed to 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/Checkbox.test.js renamed to src/components/__tests__/Checkbox/Checkbox.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/CheckboxItem.test.js renamed to src/components/__tests__/Checkbox/CheckboxItem.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__/Checkbox/__snapshots__/Checkbox.test.js.snap renamed to src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -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