test(ui): Add MetricsRequest test coverage [INGEST-542] (#30290)

static/app/utils/metrics/metricsRequest.tsx

@@ -140,9 +140,9 @@ class MetricsRequest extends React.Component<Props, State> {
 
   render() {
     const {reloading, errored, response} = this.state;
-    const {children} = this.props;
+    const {children, isDisabled} = this.props;
 
-    const loading = response === null;
+    const loading = response === null && !isDisabled;
 
     return children?.({
       loading,

tests/js/spec/utils/metrics/metricsRequest.spec.tsx

@@ -0,0 +1,122 @@
+import {mountWithTheme, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import MetricsRequest from 'sentry/utils/metrics/metricsRequest';
+
+describe('MetricsRequest', () => {
+  const project = TestStubs.Project();
+  const organization = TestStubs.Organization();
+  const childrenMock = jest.fn(() => null);
+  const props = {
+    api: new MockApiClient(),
+    organization,
+    field: ['fieldA'],
+    project: [project.id],
+    environment: ['prod'],
+    statsPeriod: '14d',
+    query: 'abc',
+    groupBy: ['status'],
+    orderBy: 'fieldA',
+    limit: 3,
+  };
+  let metricsMock;
+
+  beforeEach(() => {
+    metricsMock = MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/organizations/org-slug/metrics/data/`,
+      body: {intervals: [], groups: []},
+    });
+    childrenMock.mockClear();
+  });
+
+  it('makes request and passes correct render props', async () => {
+    mountWithTheme(<MetricsRequest {...props}>{childrenMock}</MetricsRequest>);
+
+    expect(childrenMock).toHaveBeenNthCalledWith(1, {
+      errored: false,
+      loading: true,
+      reloading: false,
+      response: null,
+    });
+
+    expect(metricsMock).toHaveBeenCalledTimes(1);
+    expect(metricsMock).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        query: {
+          end: undefined,
+          environment: ['prod'],
+          field: ['fieldA'],
+          groupBy: ['status'],
+          interval: '1h',
+          limit: 3,
+          orderBy: 'fieldA',
+          project: ['2'],
+          query: 'abc',
+          start: undefined,
+          statsPeriod: '14d',
+        },
+      })
+    );
+
+    await waitFor(() =>
+      expect(childrenMock).toHaveBeenLastCalledWith({
+        errored: false,
+        loading: false,
+        reloading: false,
+        response: {groups: [], intervals: []},
+      })
+    );
+  });
+
+  it('does not make request if isDisabled', () => {
+    mountWithTheme(
+      <MetricsRequest {...props} isDisabled>
+        {childrenMock}
+      </MetricsRequest>
+    );
+
+    expect(metricsMock).toHaveBeenCalledTimes(0);
+
+    expect(childrenMock).toHaveBeenCalledTimes(1);
+    expect(childrenMock).toHaveBeenCalledWith({
+      errored: false,
+      loading: false,
+      reloading: false,
+      response: null,
+    });
+  });
+
+  it('refetches when props change', () => {
+    const {rerender} = mountWithTheme(
+      <MetricsRequest {...props}>{childrenMock}</MetricsRequest>
+    );
+
+    expect(metricsMock).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <MetricsRequest {...props} field={['fieldB']}>
+        {childrenMock}
+      </MetricsRequest>
+    );
+
+    expect(metricsMock).toHaveBeenCalledTimes(2);
+    expect(metricsMock).toHaveBeenLastCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        query: expect.objectContaining({field: ['fieldB']}),
+      })
+    );
+  });
+
+  it('does not refetch when ignored props change', () => {
+    const {rerender} = mountWithTheme(
+      <MetricsRequest {...props}>{childrenMock}</MetricsRequest>
+    );
+
+    const differentChildrenMock = jest.fn(() => 'lorem ipsum');
+    rerender(<MetricsRequest {...props}>{differentChildrenMock}</MetricsRequest>);
+
+    expect(metricsMock).toHaveBeenCalledTimes(1);
+  });
+});