charts filter tests

x-pack/plugins/data_usage/public/app/components/filters/charts_filters.test.tsx

@@ -0,0 +1,144 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { TestProvider } from '../../../../common/test_utils';
+import { render, type RenderResult } from '@testing-library/react';
+import { ChartsFilters, type ChartsFiltersProps } from './charts_filters';
+import { FilterName } from '../../hooks';
+import { mockUseKibana } from '../../mocks';
+
+const mockUseLocation = jest.fn(() => ({ pathname: '/' }));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => mockUseLocation(),
+  useHistory: jest.fn().mockReturnValue({
+    push: jest.fn(),
+    listen: jest.fn(),
+    location: {
+      search: '',
+    },
+  }),
+}));
+
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    useKibana: () => mockUseKibana,
+  };
+});
+
+describe('Charts Filters', () => {
+  const testId = 'test';
+  const testIdFilter = `${testId}-filter`;
+  const onClick = jest.fn();
+  const dateRangePickerState = {
+    startDate: 'now-15m',
+    endDate: 'now',
+    recentlyUsedDateRanges: [],
+    autoRefreshOptions: {
+      enabled: false,
+      duration: 0,
+    },
+  };
+  const defaultProps = {
+    dateRangePickerState,
+    isDataLoading: false,
+    isUpdateDisabled: false,
+    isValidDateRange: true,
+    filterOptions: {
+      dataStreams: {
+        filterName: 'dataStreams' as FilterName,
+        isFilterLoading: false,
+        options: ['.ds-1', '.ds-2'],
+        onChangeFilterOptions: jest.fn(),
+      },
+      metricTypes: {
+        filterName: 'metricTypes' as FilterName,
+        isFilterLoading: false,
+        options: ['ingest_rate', 'storage_size'],
+        onChangeFilterOptions: jest.fn(),
+      },
+    },
+    onClick,
+    onRefresh: jest.fn(),
+    onRefreshChange: jest.fn(),
+    onTimeChange: jest.fn(),
+  };
+
+  let renderComponent: (props: ChartsFiltersProps) => RenderResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    renderComponent = (props: ChartsFiltersProps) =>
+      render(
+        <TestProvider>
+          <ChartsFilters data-test-subj={testIdFilter} {...props} />
+        </TestProvider>
+      );
+  });
+
+  it('renders data streams filter, date range filter and refresh button', () => {
+    const { getByTestId } = renderComponent(defaultProps);
+    expect(getByTestId(`${testIdFilter}-dataStreams-popoverButton`)).toBeTruthy();
+    expect(getByTestId(`${testIdFilter}-date-range`)).toBeTruthy();
+    expect(getByTestId(`${testIdFilter}-super-refresh-button`)).toBeTruthy();
+  });
+
+  it('renders metric filter', () => {
+    const { getByTestId } = renderComponent({ ...defaultProps, showMetricsTypesFilter: true });
+    expect(getByTestId(`${testIdFilter}-metricTypes-popoverButton`)).toBeTruthy();
+    expect(getByTestId(`${testIdFilter}-dataStreams-popoverButton`)).toBeTruthy();
+    expect(getByTestId(`${testIdFilter}-date-range`)).toBeTruthy();
+    expect(getByTestId(`${testIdFilter}-super-refresh-button`)).toBeTruthy();
+  });
+
+  it('should show invalid date range info', () => {
+    const { getByTestId } = renderComponent({
+      ...defaultProps,
+      // using this prop to set invalid date range
+      isValidDateRange: false,
+    });
+    expect(getByTestId(`${testIdFilter}-invalid-date-range`)).toBeTruthy();
+  });
+
+  it('should not show invalid date range info', () => {
+    const { queryByTestId } = renderComponent(defaultProps);
+    expect(queryByTestId(`${testIdFilter}-invalid-date-range`)).toBeNull();
+  });
+
+  it('should disable refresh button', () => {
+    const { getByTestId } = renderComponent({
+      ...defaultProps,
+      isUpdateDisabled: true,
+    });
+    expect(getByTestId(`${testIdFilter}-super-refresh-button`)).toBeDisabled();
+  });
+
+  it('should show `updating` on refresh button', () => {
+    const { getByTestId } = renderComponent({
+      ...defaultProps,
+      isDataLoading: true,
+    });
+    expect(getByTestId(`${testIdFilter}-super-refresh-button`)).toBeDisabled();
+    expect(getByTestId(`${testIdFilter}-super-refresh-button`).textContent).toEqual('Updating');
+  });
+
+  it('should call onClick on refresh button click', () => {
+    const { getByTestId } = renderComponent(defaultProps);
+    getByTestId(`${testIdFilter}-super-refresh-button`).click();
+    expect(onClick).toHaveBeenCalled();
+  });
+});

x-pack/plugins/data_usage/public/app/components/filters/charts_filters.tsx

@@ -75,7 +75,7 @@ export const ChartsFilters = memo<ChartsFiltersProps>(
             data-test-subj={dataTestSubj}
           />
           {!isValidDateRange && (
-            <EuiText color="danger" size="s">
+            <EuiText color="danger" size="s" data-test-subj={getTestId('invalid-date-range')}>
               <EuiTextAlign textAlign="center">
                 <p>The date range should be within 10 days from now.</p>
               </EuiTextAlign>