ref(tsc): more tests to tsx (#52388)

More typescript coming to tests near you.

fixtures/js-stubs/frame.tsx

@@ -0,0 +1,24 @@
+import type {Frame as FrameType} from 'sentry/types';
+
+export function Frame(props: Partial<FrameType> = {}): FrameType {
+  return {
+    absPath: 'abs/path/to/file.js',
+    colNo: null,
+    lineNo: null,
+    context: [],
+    errors: [],
+    filename: 'file.js',
+    function: 'functionName',
+    inApp: true,
+    instructionAddr: '0x0000000',
+    module: 'abs.path.to:file',
+    package: null,
+    platform: 'javascript',
+    rawFunction: 'functionName',
+    symbol: 'functionName',
+    symbolAddr: '0x0000000',
+    trust: 'none',
+    vars: {},
+    ...props,
+  };
+}

fixtures/js-stubs/types.tsx

@@ -65,6 +65,7 @@ type TestStubFixtures = {
   EventsStats: OverridableStub;
   ExceptionWithMeta: OverridableStubList;
   ExceptionWithRawStackTrace: OverridableStub;
+  Frame: OverridableStub;
   GitHubIntegration: OverridableStub;
   GitHubIntegrationConfig: SimpleStub;
   GitHubIntegrationProvider: OverridableStub;

static/app/components/events/eventVitals.spec.jsx → static/app/components/events/eventVitals.spec.tsx

@@ -1,16 +1,18 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import EventVitals from 'sentry/components/events/eventVitals';
+import {Event} from 'sentry/types';
 
-function makeEvent(measurements = {}, sdk = {version: '5.27.3'}) {
+function makeEvent(measurements = {}, sdk = {version: '5.27.3'}): Event {
   const formattedMeasurements = {};
   for (const [name, value] of Object.entries(measurements)) {
     formattedMeasurements[name] = {value};
   }
-  const event = {measurements: formattedMeasurements};
+  const event = TestStubs.Event({measurements: formattedMeasurements});
   if (sdk !== null) {
     event.sdk = sdk;
   }
+
   return event;
 }
 

static/app/components/events/interfaces/crashContent/stackTrace/rawContent.spec.jsx

@@ -1,101 +0,0 @@
-import displayRawContent, {
-  getJavaFrame,
-  getJavaPreamble,
-} from 'sentry/components/events/interfaces/crashContent/stackTrace/rawContent';
-
-describe('RawStacktraceContent', function () {
-  describe('getJavaFrame()', function () {
-    it('should render java frames', function () {
-      expect(
-        getJavaFrame({
-          module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
-          function: 'run',
-          filename: 'QueuedThreadPool.java',
-          lineNo: 582,
-        })
-      ).toEqual(
-        '    at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java:582)'
-      );
-
-      // without line number
-      expect(
-        getJavaFrame({
-          module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
-          function: 'run',
-          filename: 'QueuedThreadPool.java',
-        })
-      ).toEqual(
-        '    at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java)'
-      );
-
-      // without line number and filename
-      expect(
-        getJavaFrame({
-          module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
-          function: 'run',
-        })
-      ).toEqual('    at org.mortbay.thread.QueuedThreadPool$PoolThread.run');
-    });
-  });
-
-  describe('getJavaPreamble()', function () {
-    it('takes a type and value', () => {
-      expect(
-        getJavaPreamble({
-          type: 'Baz',
-          value: 'message',
-        })
-      ).toEqual('Baz: message');
-    });
-
-    it('takes a module name', () => {
-      expect(
-        getJavaPreamble({
-          module: 'foo.bar',
-          type: 'Baz',
-          value: 'message',
-        })
-      ).toEqual('foo.bar.Baz: message');
-    });
-  });
-
-  describe('render()', function () {
-    const exception = {
-        module: 'example.application',
-        type: 'Error',
-        value: 'an error occurred',
-      },
-      data = {
-        frames: [
-          {
-            function: 'main',
-            module: 'example.application',
-            lineNo: 1,
-            filename: 'application',
-          },
-          {
-            function: 'doThing',
-            module: 'example.application',
-            lineNo: 2,
-            filename: 'application',
-          },
-        ],
-      };
-
-    it('renders java example', () => {
-      expect(displayRawContent(data, 'java', exception)).toEqual(
-        `example.application.Error: an error occurred
-    at example.application.doThing(application:2)
-    at example.application.main(application:1)`
-      );
-    });
-
-    it('renders python example', () => {
-      expect(displayRawContent(data, 'python', exception)).toEqual(
-        `Error: an error occurred
-  File "application", line 1, in main
-  File "application", line 2, in doThing`
-      );
-    });
-  });
-});

static/app/components/events/interfaces/crashContent/stackTrace/rawContent.spec.tsx

@@ -0,0 +1,122 @@
+import displayRawContent, {
+  getJavaFrame,
+  getJavaPreamble,
+} from 'sentry/components/events/interfaces/crashContent/stackTrace/rawContent';
+import type {StacktraceType} from 'sentry/types';
+
+describe('RawStacktraceContent', function () {
+  describe('getJavaFrame()', function () {
+    it('should render java frames', function () {
+      expect(
+        getJavaFrame(
+          TestStubs.Frame({
+            module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
+            function: 'run',
+            filename: 'QueuedThreadPool.java',
+            lineNo: 582,
+          })
+        )
+      ).toEqual(
+        '    at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java:582)'
+      );
+
+      // without line number
+      expect(
+        getJavaFrame(
+          TestStubs.Frame({
+            module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
+            function: 'run',
+            filename: 'QueuedThreadPool.java',
+          })
+        )
+      ).toEqual(
+        '    at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java)'
+      );
+
+      // without line number and filename
+      expect(
+        getJavaFrame(
+          TestStubs.Frame({
+            module: 'org.mortbay.thread.QueuedThreadPool$PoolThread',
+            function: 'run',
+            filename: 'QueuedThreadPool.java',
+          })
+        )
+      ).toEqual(
+        '    at org.mortbay.thread.QueuedThreadPool$PoolThread.run(QueuedThreadPool.java)'
+      );
+    });
+  });
+
+  describe('getJavaPreamble()', function () {
+    it('takes a type and value', () => {
+      expect(
+        getJavaPreamble(
+          TestStubs.Frame({
+            type: 'Baz',
+            value: 'message',
+            module: undefined,
+          })
+        )
+      ).toEqual('Baz: message');
+    });
+
+    it('takes a module name', () => {
+      expect(
+        getJavaPreamble(
+          TestStubs.Frame({
+            module: 'foo.bar',
+            type: 'Baz',
+            value: 'message',
+          })
+        )
+      ).toEqual('foo.bar.Baz: message');
+    });
+  });
+
+  describe('render()', function () {
+    const exception = TestStubs.EventStacktraceException({
+      module: 'example.application',
+      type: 'Error',
+      value: 'an error occurred',
+    });
+
+    const data: StacktraceType = {
+      hasSystemFrames: false,
+      framesOmitted: null,
+      registers: {},
+      frames: [
+        TestStubs.Frame({
+          function: 'main',
+          module: 'example.application',
+          lineNo: 1,
+          filename: 'application',
+          platform: undefined,
+        }),
+        TestStubs.Frame({
+          function: 'doThing',
+          module: 'example.application',
+          lineNo: 2,
+          filename: 'application',
+          platform: undefined,
+        }),
+      ],
+    };
+
+    it('renders java example', () => {
+      expect(displayRawContent(data, 'java', exception)).toEqual(
+        `example.application.Error: an error occurred
+    at example.application.doThing(application:2)
+    at example.application.main(application:1)`
+      );
+    });
+
+    it('renders python example', () => {
+      expect(displayRawContent(data, 'python', exception)).toEqual(
+        `Error: an error occurred
+  File "application", line 1, in main
+  File "application", line 2, in doThing`
+      );
+    });
+  });
+});

static/app/components/events/interfaces/crashContent/stackTrace/rawContent.tsx

@@ -81,6 +81,7 @@ export function getPythonFrame(frame: Frame): string {
 
 export function getJavaFrame(frame: Frame): string {
   let result = '    at';
+
   if (defined(frame.module)) {
     result += ' ' + frame.module + '.';
   }

static/app/components/events/interfaces/utils.spec.jsx → static/app/components/events/interfaces/utils.spec.tsx

@@ -15,6 +15,7 @@ describe('components/interfaces/utils', function () {
     it('should convert an http request object to an equivalent unix curl command string', function () {
       expect(
         getCurlCommand({
+          apiTarget: null,
           cookies: [
             ['foo', 'bar'],
             ['biz', 'baz'],
@@ -48,6 +49,7 @@ describe('components/interfaces/utils', function () {
       // --compressed (because Accept-Encoding: gzip)
       expect(
         getCurlCommand({
+          apiTarget: null,
           url: 'http://example.com/foo',
           headers: [
             ['Content-Type', 'application/json'],
@@ -75,6 +77,7 @@ describe('components/interfaces/utils', function () {
       // Do not add data if data is empty
       expect(
         getCurlCommand({
+          apiTarget: null,
           url: 'http://example.com/foo',
           headers: [],
           env: {
@@ -89,6 +92,7 @@ describe('components/interfaces/utils', function () {
       // Do not add data if data is empty object
       expect(
         getCurlCommand({
+          apiTarget: null,
           url: 'http://example.com/foo',
           headers: [],
           env: {
@@ -104,6 +108,7 @@ describe('components/interfaces/utils', function () {
       // Escape escaped strings.
       expect(
         getCurlCommand({
+          apiTarget: null,
           cookies: [
             ['foo', 'bar'],
             ['biz', 'baz'],
@@ -137,6 +142,7 @@ describe('components/interfaces/utils', function () {
       // Escape strings with special bash characters
       expect(
         getCurlCommand({
+          apiTarget: null,
           url: 'http://example.com/foo${not_a_variable}',
           headers: [
             ['Referer', 'http://example.com'],
@@ -164,6 +170,7 @@ describe('components/interfaces/utils', function () {
     it('works with a Proxy', function () {
       const spy = jest.spyOn(MetaProxy.prototype, 'get');
       const data = {
+        apiTarget: null,
         fragment: '',
         cookies: [],
         inferredContentType: null,
@@ -182,7 +189,7 @@ describe('components/interfaces/utils', function () {
           ['Content-Type', 'application/json'],
           ['Referer', 'http://example.com'],
           ['Accept-Encoding', 'gzip'],
-        ],
+        ] as [string, string][],
         url: 'https://www.sentry.io',
         query: [],
         data: null,
@@ -249,56 +256,59 @@ describe('components/interfaces/utils', function () {
   });
 
   describe('getCurrentThread()', function () {
-    const event = {
-      entries: [
-        {
-          data: {
-            values: [
-              {
-                id: 13920,
-                current: true,
-                crashed: true,
-                name: 'puma 002',
-                stacktrace: null,
-                rawStacktrace: null,
-                state: 'WAITING',
-              },
-            ],
-          },
-          type: EntryType.THREADS,
-        },
-      ],
-    };
     it('should return current thread if available', function () {
-      const thread = getCurrentThread(event);
-      expect(thread.name).toEqual('puma 002');
+      const thread = getCurrentThread(
+        TestStubs.Event({
+          entries: [
+            {
+              data: {
+                values: [
+                  {
+                    id: 13920,
+                    current: true,
+                    crashed: true,
+                    name: 'puma 002',
+                    stacktrace: null,
+                    rawStacktrace: null,
+                    state: 'WAITING',
+                  },
+                ],
+              },
+              type: EntryType.THREADS,
+            },
+          ],
+        })
+      );
+      expect(thread?.name).toEqual('puma 002');
     });
   });
 
   describe('getThreadById()', function () {
-    const event = {
-      entries: [
-        {
-          data: {
-            values: [
-              {
-                id: 13920,
-                current: true,
-                crashed: true,
-                name: 'puma 002',
-                stacktrace: null,
-                rawStacktrace: null,
-                state: 'WAITING',
-              },
-            ],
-          },
-          type: EntryType.THREADS,
-        },
-      ],
-    };
     it('should return thread by given id if available', function () {
-      const thread = getThreadById(event, 13920);
-      expect(thread.name).toEqual('puma 002');
+      const thread = getThreadById(
+        TestStubs.Event({
+          entries: [
+            {
+              data: {
+                values: [
+                  {
+                    id: 13920,
+                    current: true,
+                    crashed: true,
+                    name: 'puma 002',
+                    stacktrace: null,
+                    rawStacktrace: null,
+                    state: 'WAITING',
+                  },
+                ],
+              },
+              type: EntryType.THREADS,
+            },
+          ],
+        }),
+        13920
+      );
+      expect(thread?.name).toEqual('puma 002');
     });
   });
 });

static/app/components/group/externalIssueForm.spec.jsx → static/app/components/group/externalIssueForm.spec.tsx

@@ -1,5 +1,8 @@
+import styled from '@emotion/styled';
+
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
+import {makeCloseButton} from 'sentry/components/globalModal/components';
 import ExternalIssueForm from 'sentry/components/group/externalIssueForm';
 
 jest.mock('lodash/debounce', () => {
@@ -41,13 +44,19 @@ describe('ExternalIssueForm', () => {
       body: formConfig,
       match: [MockApiClient.matchQuery({action: 'create'})],
     });
+
+    const styledWrapper = styled(c => c.children);
     const wrapper = render(
       <ExternalIssueForm
-        Body={p => p.children}
-        Header={p => p.children}
+        Body={styledWrapper()}
+        Footer={styledWrapper()}
+        organization={TestStubs.Organization()}
+        Header={c => <span>{c.children}</span>}
         group={group}
         integration={integration}
         onChange={onChange}
+        CloseButton={makeCloseButton(() => {})}
+        closeModal={() => {}}
       />
     );
     await userEvent.click(screen.getByText(action));
@@ -174,8 +183,8 @@ describe('ExternalIssueForm', () => {
       });
 
       afterEach(() => {
-        window.fetch.mockClear();
-        delete window.fetch;
+        (window.fetch as jest.Mock).mockClear();
+        (window.fetch as jest.Mock | undefined) = undefined;
       });
 
       it('fast typing is debounced and uses trailing call when fetching data', async () => {

static/app/components/group/tagDistributionMeter.spec.jsx → static/app/components/group/tagDistributionMeter.spec.tsx

@@ -10,7 +10,10 @@ describe('TagDistributionMeter', function () {
     render(
       <GroupTagDistributionMeter
         tag="browser"
-        group={{id: '1337'}}
+        name="Browser"
+        topValues={[]}
+        onTagClick={jest.fn()}
+        group={TestStubs.Group({id: '1337'})}
         organization={organization}
         projectId="456"
         totalValues={0}
@@ -23,7 +26,9 @@ describe('TagDistributionMeter', function () {
     render(
       <GroupTagDistributionMeter
         tag="browser"
-        group={{id: '1337'}}
+        name="Browser"
+        onTagClick={jest.fn()}
+        group={TestStubs.Group({id: '1337'})}
         organization={organization}
         projectId="456"
         totalValues={tags[0].totalValues}

static/app/components/modals/createTeamModal.spec.jsx → static/app/components/modals/createTeamModal.spec.tsx

@@ -1,32 +1,35 @@
+import styled from '@emotion/styled';
+
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {createTeam} from 'sentry/actionCreators/teams';
+import {makeCloseButton} from 'sentry/components/globalModal/components';
 import CreateTeamModal from 'sentry/components/modals/createTeamModal';
 
 jest.mock('sentry/actionCreators/teams', () => ({
-  createTeam: jest.fn((...args) => new Promise(resolve => resolve(...args))),
+  createTeam: jest.fn((...args: any[]) => new Promise(resolve => resolve(args))),
 }));
 
 describe('CreateTeamModal', function () {
   const org = TestStubs.Organization();
   const closeModal = jest.fn();
   const onClose = jest.fn();
-  const onSuccess = jest.fn();
 
   beforeEach(function () {
     onClose.mockReset();
-    onSuccess.mockReset();
   });
 
   it('calls createTeam action creator on submit', async function () {
+    const styledWrapper = styled(c => c.children);
     render(
       <CreateTeamModal
-        Body={p => p.children}
-        Header={p => p.children}
+        Body={styledWrapper()}
+        Footer={styledWrapper()}
+        Header={p => <span>{p.children}</span>}
         organization={org}
         closeModal={closeModal}
         onClose={onClose}
-        onSuccess={onSuccess}
+        CloseButton={makeCloseButton(() => {})}
       />
     );
 
@@ -36,6 +39,5 @@ describe('CreateTeamModal', function () {
     await waitFor(() => expect(createTeam).toHaveBeenCalledTimes(1));
     expect(onClose).toHaveBeenCalled();
     expect(closeModal).toHaveBeenCalled();
-    expect(onSuccess).toHaveBeenCalledTimes(1);
   });
 });