rabumaabraham commented on code in PR #44803:
URL: https://github.com/apache/superset/pull/44803#discussion_r4337729416
##########
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx:
##########
@@ -1529,3 +1552,177 @@ test('FilterBar with orientation=Vertical renders
Vertical layout (sanity counte
screen.queryByRole('img', { name: 'setting' }),
).not.toBeInTheDocument();
});
+
+const TIME_FILTER_ID = 'NATIVE_FILTER-time-range';
+
+function mockTimeRangeRequests() {
+ setupTimeRangeMocks();
+ mockedFetchTimeRange.mockResolvedValue({
+ value: '2021-04-01T00:00:00 ≤ ds < 2021-05-01T00:00:00',
+ });
+ fetchMock.removeRoute('time-filter-chart-data');
+ fetchMock.post(
+ 'glob:*/api/v1/chart/data',
+ {
+ result: [
+ {
+ data: [{ ds: '2021-04-14T00:00:00' }],
+ colnames: ['ds'],
+ coltypes: [2],
+ applied_filters: [],
+ },
+ ],
+ },
+ { name: 'time-filter-chart-data' },
+ );
+}
+
+function renderTimeFilterBar(
+ dataMask: Record<string, unknown>,
+ dashboardInfoOverrides: Record<string, unknown> = {},
+) {
+ const filter = createFilter({
+ id: TIME_FILTER_ID,
+ name: 'Time range',
+ filterType: 'filter_time',
+ targets: [{ datasetId: 7, column: { name: 'ds' } }],
+ chartsInScope: [18],
+ });
+ const state = {
+ ...createStateWithFilter(filter, createDataMask(TIME_FILTER_ID), {
+ filterBarOrientation: FilterBarOrientation.Horizontal,
+ metadata: {
+ native_filter_configuration: [filter],
+ chart_configuration: {},
+ },
+ ...dashboardInfoOverrides,
+ }),
+ dataMask,
+ };
+ const store: Store = createStore(state, reducerIndex);
+
+ render(<FilterBar orientation={FilterBarOrientation.Horizontal} />, {
+ store,
+ useDnd: true,
+ useRouter: true,
+ });
+
+ return store;
+}
+
+const getAppliedTimeMask = (store: Store) =>
+ (store.getState() as RootState).dataMask[TIME_FILTER_ID];
+
+async function selectCurrentMonth(currentLabel: string) {
+ await userEvent.click(screen.getByText(currentLabel));
+ await userEvent.click(screen.getByLabelText('Range type'));
+ await userEvent.click(screen.getByText('Current'));
+ await userEvent.click(screen.getByRole('radio', { name: 'Current month' }));
+ await userEvent.click(
+ screen.getByTestId('date-filter-control__apply-button'),
+ );
+}
+
+async function applyAndClearCurrentMonth(store: Store) {
+ const applyButton = screen.getByTestId(getTestId('apply-button'));
+
+ await selectCurrentMonth('No filter');
+
+ // The selected range differs from the applied state, so Apply enables.
+ expect(screen.getByText('Current month')).toBeInTheDocument();
+ expect(applyButton).toBeEnabled();
+
+ await userEvent.click(applyButton);
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(getAppliedTimeMask(store)).toEqual(
+ expect.objectContaining({
+ filterState: expect.objectContaining({ value: 'Current month' }),
+ extraFormData: { time_range: 'Current month' },
+ }),
+ );
+ // The applied range stays visible in the filter bar.
+ expect(screen.getByText('Current month')).toBeInTheDocument();
+ expect(screen.queryByText('No filter')).not.toBeInTheDocument();
+ expect(applyButton).toBeDisabled();
+
+ // Clear All stays available and clears the applied range.
+ const clearAllButton = screen.getByRole('button', { name: 'Clear all' });
+ expect(clearAllButton).toBeEnabled();
+ await userEvent.click(clearAllButton);
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(applyButton).toBeEnabled();
+ await userEvent.click(applyButton);
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(getAppliedTimeMask(store)?.extraFormData).toEqual({});
+ expect(screen.getByText('No filter')).toBeInTheDocument();
+}
+
+test('FilterBar applies a time range selected from an empty applied entry and
keeps its label', async () => {
+ mockTimeRangeRequests();
+ const store = renderTimeFilterBar({
+ [TIME_FILTER_ID]: {
+ id: TIME_FILTER_ID,
+ filterState: {},
+ extraFormData: {},
+ ownState: {},
+ },
+ });
+
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(screen.getByText('No filter')).toBeInTheDocument();
+ expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
+
+ await applyAndClearCurrentMonth(store);
+});
+
+test('FilterBar applies a time range selected for a filter without an applied
entry', async () => {
+ mockTimeRangeRequests();
+ const store = renderTimeFilterBar({});
+
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(screen.getByText('No filter')).toBeInTheDocument();
+
+ await applyAndClearCurrentMonth(store);
+});
+
+test('FilterBar drops the selected time range when cross-filtering is
disabled', async () => {
+ mockTimeRangeRequests();
+ const store = renderTimeFilterBar(
+ {
+ [TIME_FILTER_ID]: createDataMask(TIME_FILTER_ID, 'Last week', {
+ time_range: 'Last week',
+ }),
+ },
+ { crossFiltersEnabled: true },
+ );
+
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(screen.getByText('Last week')).toBeInTheDocument();
+
+ await act(async () => {
+ store.dispatch(dataMaskActions.clearDataMaskState());
Review Comment:
@sadpandajoe, Thanks, updated. The test now turns cross-filtering off by
clicking the toggle in the settings menu, so it goes through
updateCrossFiltersSetting. I also tried removing the clearDataMaskState() call
from FilterBarSettings: the test fails, and passes again with it back.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
