diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx
index 91c138d22..f566d4f0f 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx
@@ -19,7 +19,12 @@
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
-import { render, screen } from 'spec/helpers/testing-library';
+import {
+ render,
+ screen,
+ waitForElementToBeRemoved,
+ waitFor,
+} from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { CustomFrame } from '../components';
@@ -44,12 +49,14 @@ const emptyStore = mockStore({});
// case when common.locale is populated with invalid locale
const invalidStore = mockStore({ common: { locale: 'invalid_locale' } });
-test('renders with default props', () => {
+test('renders with default props', async () => {
render(
,
);
+ expect(screen.getByLabelText('Loading')).toBeVisible();
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
expect(screen.getByRole('spinbutton')).toBeInTheDocument();
@@ -106,88 +113,96 @@ test('renders since and until with specific date/time with invalid locale', () =
expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
});
-test('renders since and until with specific date/time', () => {
+test('renders since and until with specific date/time', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
});
-test('renders since and until with relative date/time', () => {
+test('renders since and until with relative date/time', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getAllByText('Relative Date/Time').length).toBe(2);
expect(screen.getAllByRole('spinbutton').length).toBe(2);
expect(screen.getByText('Days Before')).toBeInTheDocument();
expect(screen.getByText('Days After')).toBeInTheDocument();
});
-test('renders since and until with Now option', () => {
+test('renders since and until with Now option', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getAllByText('Now').length).toBe(2);
});
-test('renders since and until with Midnight option', () => {
+test('renders since and until with Midnight option', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getAllByText('Midnight').length).toBe(2);
});
-test('renders anchor with now option', () => {
+test('renders anchor with now option', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getByText('Anchor to')).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument();
expect(screen.queryByPlaceholderText('Select date')).not.toBeInTheDocument();
});
-test('renders anchor with date/time option', () => {
+test('renders anchor with date/time option', async () => {
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
expect(screen.getByText('Anchor to')).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument();
expect(screen.getByPlaceholderText('Select date')).toBeInTheDocument();
});
-test('triggers onChange when the anchor changes', () => {
+test('triggers onChange when the anchor changes', async () => {
const onChange = jest.fn();
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
userEvent.click(screen.getByRole('radio', { name: 'Date/Time' }));
expect(onChange).toHaveBeenCalled();
});
-test('triggers onChange when the value changes', () => {
+test('triggers onChange when the value changes', async () => {
const onChange = jest.fn();
render(
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
userEvent.click(screen.getByRole('img', { name: 'up' }));
expect(onChange).toHaveBeenCalled();
});
@@ -199,6 +214,7 @@ test('triggers onChange when the mode changes', async () => {
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
userEvent.click(screen.getByTitle('Midnight'));
expect(await screen.findByTitle('Relative Date/Time')).toBeInTheDocument();
userEvent.click(screen.getByTitle('Relative Date/Time'));
@@ -207,7 +223,7 @@ test('triggers onChange when the mode changes', async () => {
await screen.findByText('Configure custom time range'),
).toBeInTheDocument();
userEvent.click(screen.getAllByTitle('Specific Date/Time')[1]);
- expect(onChange).toHaveBeenCalledTimes(2);
+ await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2));
});
test('triggers onChange when the grain changes', async () => {
@@ -217,13 +233,14 @@ test('triggers onChange when the grain changes', async () => {
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
userEvent.click(screen.getByText('Days Before'));
expect(await screen.findByText('Weeks Before')).toBeInTheDocument();
userEvent.click(screen.getByText('Weeks Before'));
userEvent.click(screen.getByText('Days After'));
expect(await screen.findByText('Weeks After')).toBeInTheDocument();
userEvent.click(screen.getByText('Weeks After'));
- expect(onChange).toHaveBeenCalledTimes(2);
+ await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2));
});
test('triggers onChange when the date changes', async () => {
@@ -233,6 +250,7 @@ test('triggers onChange when the date changes', async () => {
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
const inputs = screen.getAllByPlaceholderText('Select date');
userEvent.click(inputs[0]);
userEvent.click(screen.getAllByText('Now')[0]);
@@ -241,7 +259,7 @@ test('triggers onChange when the date changes', async () => {
expect(onChange).toHaveBeenCalledTimes(2);
});
-test('should translate Date Picker', () => {
+test('should translate Date Picker', async () => {
const onChange = jest.fn();
const store = mockStore({
common: { locale: 'fr' },
@@ -251,6 +269,7 @@ test('should translate Date Picker', () => {
,
);
+ await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
userEvent.click(screen.getAllByRole('img', { name: 'calendar' })[0]);
expect(screen.getByText('2021')).toBeInTheDocument();
expect(screen.getByText('lu')).toBeInTheDocument();
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
index cad7a0e81..dee66da7d 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
@@ -139,20 +139,20 @@ export const SEVEN_DAYS_AGO = moment()
export const MIDNIGHT = moment().utc().startOf('day').format(MOMENT_FORMAT);
export const LOCALE_MAPPING = {
- en: 'en_US',
- fr: 'fr_FR',
- es: 'es_ES',
- it: 'it_IT',
- zh: 'zh_CN',
- ja: 'ja_JP',
- de: 'de_DE',
- pt: 'pt_PT',
- pt_BR: 'pt_BR',
- ru: 'ru_RU',
- ko: 'ko_KR',
- sk: 'sk_SK',
- sl: 'sl_SI',
- nl: 'nl_NL',
+ en: () => import('antd/lib/date-picker/locale/en_US'),
+ fr: () => import('antd/lib/date-picker/locale/fr_FR'),
+ es: () => import('antd/lib/date-picker/locale/es_ES'),
+ it: () => import('antd/lib/date-picker/locale/it_IT'),
+ zh: () => import('antd/lib/date-picker/locale/zh_CN'),
+ ja: () => import('antd/lib/date-picker/locale/ja_JP'),
+ de: () => import('antd/lib/date-picker/locale/de_DE'),
+ pt: () => import('antd/lib/date-picker/locale/pt_PT'),
+ pt_BR: () => import('antd/lib/date-picker/locale/pt_BR'),
+ ru: () => import('antd/lib/date-picker/locale/ru_RU'),
+ ko: () => import('antd/lib/date-picker/locale/ko_KR'),
+ sk: () => import('antd/lib/date-picker/locale/sk_SK'),
+ sl: () => import('antd/lib/date-picker/locale/sl_SI'),
+ nl: () => import('antd/lib/date-picker/locale/nl_NL'),
};
export enum DateFilterTestKey {