feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.tsx

@@ -16,11 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { act } from 'react-dom/test-utils';
 import { QueryState } from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { render, waitFor } from 'spec/helpers/testing-library';
+import { cleanup } from '@testing-library/react';
 import { LOG_ACTIONS_SQLLAB_FETCH_FAILED_QUERY } from 'src/logger/LogUtils';
 import {
   CLEAR_INACTIVE_QUERIES,
@@ -41,46 +43,42 @@ const mockState = {
   databases: mockDatabases,
 };
 
-// NOTE: The uses of @ts-ignore in this file is to enable testing of bad inputs to verify the
-// function / component handles bad data elegantly
 describe('QueryAutoRefresh', () => {
-  const runningQueries: QueryDictionary = {};
-  runningQueries[runningQuery.id] = runningQuery;
-
-  const successfulQueries: QueryDictionary = {};
-  successfulQueries[successfulQuery.id] = successfulQuery;
-
+  const runningQueries: QueryDictionary = { [runningQuery.id]: runningQuery };
+  const successfulQueries: QueryDictionary = {
+    [successfulQuery.id]: successfulQuery,
+  };
   const queriesLastUpdate = Date.now();
-
   const refreshApi = 'glob:*/api/v1/query/updated_since?*';
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
   afterEach(() => {
     fetchMock.reset();
+    cleanup();
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
   });
 
   it('isQueryRunning returns true for valid running query', () => {
-    const running = isQueryRunning(runningQuery);
-    expect(running).toBe(true);
+    expect(isQueryRunning(runningQuery)).toBe(true);
   });
 
   it('isQueryRunning returns false for valid not-running query', () => {
-    const running = isQueryRunning(successfulQuery);
-    expect(running).toBe(false);
+    expect(isQueryRunning(successfulQuery)).toBe(false);
   });
 
   it('isQueryRunning returns false for invalid query', () => {
     // @ts-ignore
-    let running = isQueryRunning(null);
-    expect(running).toBe(false);
+    expect(isQueryRunning(null)).toBe(false);
     // @ts-ignore
-    running = isQueryRunning(undefined);
-    expect(running).toBe(false);
+    expect(isQueryRunning(undefined)).toBe(false);
     // @ts-ignore
-    running = isQueryRunning('I Should Be An Object');
-    expect(running).toBe(false);
+    expect(isQueryRunning('I Should Be An Object')).toBe(false);
     // @ts-ignore
-    running = isQueryRunning({ state: { badFormat: true } });
-    expect(running).toBe(false);
+    expect(isQueryRunning({ state: { badFormat: true } })).toBe(false);
   });
 
   it('shouldCheckForQueries is true for valid running query', () => {
@@ -112,16 +110,10 @@ describe('QueryAutoRefresh', () => {
   });
 
   it('Attempts to refresh when given pending query', async () => {
-    const store = mockStore({
-      sqlLab: { ...mockState },
-    });
+    const store = mockStore({ sqlLab: { ...mockState } });
+
     fetchMock.get(refreshApi, {
-      result: [
-        {
-          id: runningQuery.id,
-          status: 'success',
-        },
-      ],
+      result: [{ id: runningQuery.id, status: 'success' }],
     });
 
     render(
@@ -131,22 +123,22 @@ describe('QueryAutoRefresh', () => {
       />,
       { useRedux: true, store },
     );
-    await waitFor(
-      () =>
-        expect(store.getActions()).toContainEqual(
-          expect.objectContaining({
-            type: REFRESH_QUERIES,
-          }),
-        ),
-      { timeout: QUERY_UPDATE_FREQ + 100 },
+
+    await act(async () => {
+      jest.advanceTimersByTime(QUERY_UPDATE_FREQ + 100);
+    });
+
+    await waitFor(() =>
+      expect(store.getActions()).toContainEqual(
+        expect.objectContaining({ type: REFRESH_QUERIES }),
+      ),
     );
   });
 
   it('Attempts to clear inactive queries when updated queries are empty', async () => {
     const store = mockStore({ sqlLab: { ...mockState } });
-    fetchMock.get(refreshApi, {
-      result: [],
-    });
+
+    fetchMock.get(refreshApi, { result: [] });
 
     render(
       <QueryAutoRefresh
@@ -155,30 +147,28 @@ describe('QueryAutoRefresh', () => {
       />,
       { useRedux: true, store },
     );
-    await waitFor(
-      () =>
-        expect(store.getActions()).toContainEqual(
-          expect.objectContaining({
-            type: CLEAR_INACTIVE_QUERIES,
-          }),
-        ),
-      { timeout: QUERY_UPDATE_FREQ + 100 },
+
+    await act(async () => {
+      jest.advanceTimersByTime(QUERY_UPDATE_FREQ + 100);
+    });
+
+    await waitFor(() =>
+      expect(store.getActions()).toContainEqual(
+        expect.objectContaining({ type: CLEAR_INACTIVE_QUERIES }),
+      ),
     );
+
     expect(
       store.getActions().filter(({ type }) => type === REFRESH_QUERIES),
     ).toHaveLength(0);
     expect(fetchMock.calls(refreshApi)).toHaveLength(1);
   });
 
-  it('Does not fail and attempts to refresh when given pending query and invalid query', async () => {
+  it('Does not fail and attempts to refresh with mixed valid/invalid queries', async () => {
     const store = mockStore({ sqlLab: { ...mockState } });
+
     fetchMock.get(refreshApi, {
-      result: [
-        {
-          id: runningQuery.id,
-          status: 'success',
-        },
-      ],
+      result: [{ id: runningQuery.id, status: 'success' }],
     });
 
     render(
@@ -189,27 +179,25 @@ describe('QueryAutoRefresh', () => {
       />,
       { useRedux: true, store },
     );
-    await waitFor(
-      () =>
-        expect(store.getActions()).toContainEqual(
-          expect.objectContaining({
-            type: REFRESH_QUERIES,
-          }),
-        ),
-      { timeout: QUERY_UPDATE_FREQ + 100 },
+
+    await act(async () => {
+      jest.advanceTimersByTime(QUERY_UPDATE_FREQ + 100);
+    });
+
+    await waitFor(() =>
+      expect(store.getActions()).toContainEqual(
+        expect.objectContaining({ type: REFRESH_QUERIES }),
+      ),
     );
   });
 
   it('Does NOT Attempt to refresh when given only completed queries', async () => {
     const store = mockStore({ sqlLab: { ...mockState } });
+
     fetchMock.get(refreshApi, {
-      result: [
-        {
-          id: runningQuery.id,
-          status: 'success',
-        },
-      ],
+      result: [{ id: runningQuery.id, status: 'success' }],
     });
+
     render(
       <QueryAutoRefresh
         queries={successfulQueries}
@@ -217,20 +205,23 @@ describe('QueryAutoRefresh', () => {
       />,
       { useRedux: true, store },
     );
-    await waitFor(
-      () =>
-        expect(store.getActions()).toContainEqual(
-          expect.objectContaining({
-            type: CLEAR_INACTIVE_QUERIES,
-          }),
-        ),
-      { timeout: QUERY_UPDATE_FREQ + 100 },
+
+    await act(async () => {
+      jest.advanceTimersByTime(QUERY_UPDATE_FREQ + 100);
+    });
+
+    await waitFor(() =>
+      expect(store.getActions()).toContainEqual(
+        expect.objectContaining({ type: CLEAR_INACTIVE_QUERIES }),
+      ),
     );
+
     expect(fetchMock.calls(refreshApi)).toHaveLength(0);
   });
 
   it('logs the failed error for async queries', async () => {
     const store = mockStore({ sqlLab: { ...mockState } });
+
     fetchMock.get(refreshApi, {
       result: [
         {
@@ -257,6 +248,7 @@ describe('QueryAutoRefresh', () => {
         },
       ],
     });
+
     render(
       <QueryAutoRefresh
         queries={runningQueries}
@@ -264,21 +256,24 @@ describe('QueryAutoRefresh', () => {
       />,
       { useRedux: true, store },
     );
-    await waitFor(
-      () =>
-        expect(store.getActions()).toContainEqual(
-          expect.objectContaining({
-            payload: expect.objectContaining({
-              eventName: LOG_ACTIONS_SQLLAB_FETCH_FAILED_QUERY,
-              eventData: expect.objectContaining({
-                error_type: 'TEST_ERROR',
-                error_details: 'Syntax invalid',
-                issue_codes: [102],
-              }),
+
+    await act(async () => {
+      jest.advanceTimersByTime(QUERY_UPDATE_FREQ + 100);
+    });
+
+    await waitFor(() =>
+      expect(store.getActions()).toContainEqual(
+        expect.objectContaining({
+          payload: expect.objectContaining({
+            eventName: LOG_ACTIONS_SQLLAB_FETCH_FAILED_QUERY,
+            eventData: expect.objectContaining({
+              error_type: 'TEST_ERROR',
+              error_details: 'Syntax invalid',
+              issue_codes: [102],
             }),
           }),
-        ),
-      { timeout: QUERY_UPDATE_FREQ + 100 },
+        }),
+      ),
     );
   });
 });