ref(ts): Convert tests to typescript (#35898)

static/app/components/loading/loadingContainer.tsx

@@ -3,28 +3,27 @@ import styled from '@emotion/styled';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import theme from 'sentry/utils/theme';
 
-const defaultProps = {
-  isLoading: false,
-  isReloading: false,
-  maskBackgroundColor: theme.white,
-};
-
-type DefaultProps = Readonly<typeof defaultProps>;
-
-type Props = {
+export type LoadingContainerProps = {
   children?: React.ReactNode;
   className?: string;
-} & DefaultProps;
+  isLoading?: boolean;
+  isReloading?: boolean;
+  maskBackgroundColor?: string;
+};
 
 type MaskProps = {
   isReloading: boolean;
   maskBackgroundColor: string;
 };
 
-export default function LoadingContainer(props: Props) {
-  const {className, children, isReloading, isLoading, maskBackgroundColor} = props;
+export default function LoadingContainer({
+  isLoading = false,
+  isReloading = false,
+  maskBackgroundColor = theme.white,
+  className,
+  children,
+}: LoadingContainerProps) {
   const isLoadingOrReloading = isLoading || isReloading;
-
   return (
     <Container className={className}>
       {isLoadingOrReloading && (
@@ -41,8 +40,6 @@ export default function LoadingContainer(props: Props) {
   );
 }
 
-LoadingContainer.defaultProps = defaultProps;
-
 const Container = styled('div')`
   position: relative;
 `;

tests/js/spec/components/deprecatedforms/numberField.spec.jsx → tests/js/spec/components/deprecatedforms/numberField.spec.tsx

@@ -11,7 +11,7 @@ describe('NumberField', function () {
     });
 
     it('renders with optional attributes', function () {
-      const wrapper = render(<NumberField name="fieldName" min="0" max="100" />);
+      const wrapper = render(<NumberField name="fieldName" min={0} max={100} />);
       expect(wrapper.container).toSnapshot();
     });
 

tests/js/spec/components/idBadge/baseBadge.spec.jsx → tests/js/spec/components/idBadge/baseBadge.spec.tsx

@@ -7,18 +7,17 @@ describe('BadgeBadge', function () {
     render(
       <BaseBadge
         organization={TestStubs.Organization()}
-        displayName={<span data-test-id="test">display name</span>}
+        displayName={<span>display name</span>}
       />
     );
-    expect(screen.getByTestId('test')).toHaveTextContent('display name');
+    expect(screen.getByText('display name')).toBeInTheDocument();
   });
 
   it('can hide avatar', function () {
     render(
       <BaseBadge organization={TestStubs.Organization()} displayName="hello" hideAvatar />
     );
-
-    expect(screen.queryByTestId('badge-styled-avatar')).not.toBeInTheDocument(0);
+    expect(screen.queryByTestId('badge-styled-avatar')).not.toBeInTheDocument();
     expect(screen.getByTestId('badge-display-name')).toHaveTextContent('hello');
   });
 
@@ -27,9 +26,9 @@ describe('BadgeBadge', function () {
       <BaseBadge
         organization={TestStubs.Organization()}
         hideName
-        displayName={<span data-test-id="test">display name</span>}
+        displayName={<span>display name</span>}
       />
     );
-    expect(screen.queryByTestId('test')).not.toBeInTheDocument('display name');
+    expect(screen.queryByText('display name')).not.toBeInTheDocument();
   });
 });

tests/js/spec/components/idBadge/index.spec.jsx → tests/js/spec/components/idBadge/index.spec.tsx

@@ -6,27 +6,23 @@ describe('IdBadge', function () {
   it('renders the correct component when `user` property is passed', function () {
     const user = TestStubs.User();
     render(<IdBadge user={user} />);
-
     expect(screen.getByTestId('letter_avatar-avatar')).toHaveTextContent('FB');
     expect(screen.getByText(user.email)).toBeInTheDocument();
   });
 
   it('renders the correct component when `team` property is passed', function () {
     render(<IdBadge team={TestStubs.Team()} />);
-
     expect(screen.getByTestId('badge-styled-avatar')).toHaveTextContent('TS');
     expect(screen.getByTestId('badge-display-name')).toHaveTextContent('#team-slug');
   });
 
   it('renders the correct component when `project` property is passed', function () {
     render(<IdBadge project={TestStubs.Project()} />);
-
     expect(screen.getByTestId('badge-display-name')).toHaveTextContent('project-slug');
   });
 
   it('renders the correct component when `organization` property is passed', function () {
     render(<IdBadge organization={TestStubs.Organization()} />);
-
     expect(screen.getByTestId('badge-styled-avatar')).toHaveTextContent('OS');
     expect(screen.getByTestId('badge-display-name')).toHaveTextContent('org-slug');
   });

tests/js/spec/components/idBadge/memberBadge.spec.jsx

@@ -21,7 +21,6 @@ describe('MemberBadge', function () {
     const wrapper = mountWithTheme(
       <MemberBadge member={member} useLink={false} orgId="orgId" />
     );
-
     expect(wrapper.find('StyledName Link')).toHaveLength(0);
   });
 

tests/js/spec/components/idBadge/teamBadge.spec.tsx

@@ -7,6 +7,7 @@ describe('TeamBadge', function () {
   beforeEach(() => {
     TeamStore.init();
   });
+
   afterEach(() => {
     TeamStore.teardown();
   });
@@ -34,9 +35,7 @@ describe('TeamBadge', function () {
   it('updates state from props', async function () {
     const team = TestStubs.Team();
     const {rerender} = render(<TeamBadge team={team} />);
-
     rerender(<TeamBadge team={TestStubs.Team({slug: 'new-team-slug'})} />);
-
     expect(await screen.findByText(/#new-team-slug/)).toBeInTheDocument();
   });
 });

tests/js/spec/components/idBadge/userBadge.spec.jsx → tests/js/spec/components/idBadge/userBadge.spec.tsx

@@ -1,9 +1,10 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import UserBadge from 'sentry/components/idBadge/userBadge';
+import {AvatarUser} from 'sentry/types';
 
 describe('UserBadge', function () {
-  const user = TestStubs.User();
+  const user: AvatarUser = TestStubs.User();
 
   it('renders with no link when user is supplied', function () {
     render(<UserBadge user={user} />);
@@ -62,9 +63,7 @@ describe('UserBadge', function () {
   });
 
   it('can hide email address', function () {
-    const email = 'email@example.com';
-    render(<UserBadge user={user} hideEmail email={email} />);
-
-    expect(screen.queryByText(email)).not.toBeInTheDocument();
+    render(<UserBadge user={user} hideEmail />);
+    expect(screen.queryByText(user.email)).not.toBeInTheDocument();
   });
 });

tests/js/spec/components/loading/loadingContainer.spec.jsx → tests/js/spec/components/loading/loadingContainer.spec.tsx

@@ -1,8 +1,10 @@
-import {cleanup, render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import LoadingContainer from 'sentry/components/loading/loadingContainer';
+import LoadingContainer, {
+  LoadingContainerProps,
+} from 'sentry/components/loading/loadingContainer';
 
-function renderComponent(props) {
+function renderComponent(props: LoadingContainerProps = {}) {
   return render(
     <LoadingContainer {...props}>
       <div>hello!</div>
@@ -11,18 +13,14 @@ function renderComponent(props) {
 }
 
 describe('LoadingContainer', () => {
-  afterEach(cleanup);
-
-  it('handles normal state', () => {
+  it('handles normal state', function () {
     renderComponent();
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(() => screen.getByTestId('loading-indicator')).toThrow();
   });
 
-  it('handles loading state', () => {
-    const {rerender} = renderComponent({
-      isLoading: true,
-    });
+  it('handles loading state', function () {
+    const {rerender} = renderComponent({isLoading: true});
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
     rerender(<LoadingContainer isLoading />);
@@ -30,10 +28,8 @@ describe('LoadingContainer', () => {
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
   });
 
-  it('handles reloading state', () => {
-    const {rerender} = renderComponent({
-      isReloading: true,
-    });
+  it('handles reloading state', function () {
+    const {rerender} = renderComponent({isReloading: true});
     expect(screen.getByText('hello!')).toBeInTheDocument();
     expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
     rerender(<LoadingContainer isReloading />);