ref(ts): Remove usage of `TestStubs.Widget` (#62391)

7EZ.

- Replace `TestStubs.Widget` with import
- Fix `Widget` fixture API
- Add missing `orderby` property
- Use enum for `widgetType`
- Fix incorrect `layout` property

getsentry/frontend-tsc#49

fixtures/js-stubs/widget.tsx

@@ -1,15 +1,12 @@
-import type {
-  Widget as TWidget,
-  WidgetQuery as TWidgetQuery,
-} from 'sentry/views/dashboards/types';
+import type {Widget as TWidget} from 'sentry/views/dashboards/types';
 import {DisplayType} from 'sentry/views/dashboards/types';
 
-export function Widget(queries: TWidgetQuery[], options: Partial<TWidget>): TWidget {
+export function Widget(params: Partial<TWidget> = {}): TWidget {
   return {
     displayType: DisplayType.LINE,
     interval: '1d',
-    queries,
+    queries: [],
     title: 'Widget',
-    ...options,
+    ...params,
   };
 }

static/app/views/dashboards/detail.spec.tsx

@@ -5,6 +5,7 @@ import {Organization} from 'sentry-fixture/organization';
 import {Project as ProjectFixture} from 'sentry-fixture/project';
 import {Release as ReleaseFixture} from 'sentry-fixture/release';
 import RouteComponentPropsFixture from 'sentry-fixture/routeComponentPropsFixture';
+import {Widget as WidgetFixture} from 'sentry-fixture/widget';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
@@ -107,36 +108,34 @@ describe('Dashboards > Detail', function () {
         url: '/organizations/org-slug/dashboards/default-overview/',
         body: DashboardFixture(
           [
-            TestStubs.Widget(
-              [
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'Default Widget 1',
-                interval: '1d',
-              }
-            ),
-            TestStubs.Widget(
-              [
+              title: 'Default Widget 1',
+              interval: '1d',
+            }),
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:transaction',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'Default Widget 2',
-                interval: '1d',
-              }
-            ),
+              title: 'Default Widget 2',
+              interval: '1d',
+            }),
           ],
           {id: 'default-overview', title: 'Default'}
         ),
@@ -201,7 +200,7 @@ describe('Dashboards > Detail', function () {
                 },
               ],
               title: 'Events',
-              widgetType: 'discover',
+              widgetType: types.WidgetType.DISCOVER,
             }),
             onClose: expect.anything(),
           })
@@ -222,56 +221,53 @@ describe('Dashboards > Detail', function () {
         },
       });
       widgets = [
-        TestStubs.Widget(
-          [
+        WidgetFixture({
+          queries: [
             {
               name: '',
               conditions: 'event.type:error',
               fields: ['count()'],
               columns: [],
               aggregates: ['count()'],
+              orderby: '-count()',
             },
           ],
-          {
-            title: 'Errors',
-            interval: '1d',
-            widgetType: 'discover',
-            id: '1',
-          }
-        ),
-        TestStubs.Widget(
-          [
+          title: 'Errors',
+          interval: '1d',
+          widgetType: types.WidgetType.DISCOVER,
+          id: '1',
+        }),
+        WidgetFixture({
+          queries: [
             {
               name: '',
               conditions: 'event.type:transaction',
               fields: ['count()'],
               columns: [],
               aggregates: ['count()'],
+              orderby: '-count()',
             },
           ],
-          {
-            title: 'Transactions',
-            interval: '1d',
-            widgetType: 'discover',
-            id: '2',
-          }
-        ),
-        TestStubs.Widget(
-          [
+          title: 'Transactions',
+          interval: '1d',
+          widgetType: types.WidgetType.DISCOVER,
+          id: '2',
+        }),
+        WidgetFixture({
+          queries: [
             {
               name: '',
               conditions: 'event.type:transaction transaction:/api/cats',
               fields: ['p50()'],
               columns: [],
               aggregates: ['p50()'],
+              orderby: '-p50()',
             },
           ],
-          {
-            title: 'p50 of /api/cats',
-            interval: '1d',
-            id: '3',
-          }
-        ),
+          title: 'p50 of /api/cats',
+          interval: '1d',
+          id: '3',
+        }),
       ];
       mockVisit = MockApiClient.addMockResponse({
         url: '/organizations/org-slug/dashboards/1/visit/',
@@ -543,39 +539,37 @@ describe('Dashboards > Detail', function () {
         url: '/organizations/org-slug/dashboards/1/',
         body: DashboardFixture(
           [
-            TestStubs.Widget(
-              [
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'First Widget',
-                interval: '1d',
-                id: '1',
-                layout: {i: 'grid-item-1', x: 0, y: 0, w: 2, h: 6},
-              }
-            ),
-            TestStubs.Widget(
-              [
+              title: 'First Widget',
+              interval: '1d',
+              id: '1',
+              layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
+            }),
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'Second Widget',
-                interval: '1d',
-                id: '2',
-              }
-            ),
+              title: 'Second Widget',
+              interval: '1d',
+              id: '2',
+            }),
           ],
           {id: '1', title: 'Custom Errors'}
         ),
@@ -603,23 +597,22 @@ describe('Dashboards > Detail', function () {
         url: '/organizations/org-slug/dashboards/1/',
         body: DashboardFixture(
           [
-            TestStubs.Widget(
-              [
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'First Widget',
-                interval: '1d',
-                id: '1',
-                layout: {i: 'grid-item-1', x: 0, y: 0, w: 2, h: 6},
-              }
-            ),
+              title: 'First Widget',
+              interval: '1d',
+              id: '1',
+              layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
+            }),
           ],
           {id: '1', title: 'Custom Errors'}
         ),
@@ -650,23 +643,22 @@ describe('Dashboards > Detail', function () {
         url: '/organizations/org-slug/dashboards/1/',
         body: DashboardFixture(
           [
-            TestStubs.Widget(
-              [
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'First Widget',
-                interval: '1d',
-                id: '1',
-                layout: {i: 'grid-item-1', x: 0, y: 0, w: 2, h: 6},
-              }
-            ),
+              title: 'First Widget',
+              interval: '1d',
+              id: '1',
+              layout: {x: 0, y: 0, w: 2, h: 6, minH: 0},
+            }),
           ],
           {id: '1', title: 'Custom Errors'}
         ),
@@ -699,23 +691,22 @@ describe('Dashboards > Detail', function () {
         url: '/organizations/org-slug/dashboards/1/',
         body: DashboardFixture(
           [
-            TestStubs.Widget(
-              [
+            WidgetFixture({
+              queries: [
                 {
                   name: '',
                   conditions: 'event.type:error',
                   fields: ['count()'],
                   aggregates: ['count()'],
                   columns: [],
+                  orderby: '-count()',
                 },
               ],
-              {
-                title: 'First Widget',
-                interval: '1d',
-                id: '1',
-                layout: null,
-              }
-            ),
+              title: 'First Widget',
+              interval: '1d',
+              id: '1',
+              layout: null,
+            }),
           ],
           {id: '1', title: 'Custom Errors'}
         ),
@@ -742,8 +733,8 @@ describe('Dashboards > Detail', function () {
 
     it('opens the widget viewer modal using the widget id specified in the url', async () => {
       const openWidgetViewerModal = jest.spyOn(modals, 'openWidgetViewerModal');
-      const widget = TestStubs.Widget(
-        [
+      const widget = WidgetFixture({
+        queries: [
           {
             name: '',
             conditions: 'event.type:error',
@@ -753,13 +744,11 @@ describe('Dashboards > Detail', function () {
             orderby: '',
           },
         ],
-        {
-          title: 'First Widget',
-          interval: '1d',
-          id: '1',
-          layout: null,
-        }
-      );
+        title: 'First Widget',
+        interval: '1d',
+        id: '1',
+        layout: null,
+      });
       MockApiClient.addMockResponse({
         url: '/organizations/org-slug/dashboards/1/',
         body: DashboardFixture([widget], {id: '1', title: 'Custom Errors'}),