vitess.io/vitess@v0.16.2/web/vtadmin/src/components/placeholders/QueryLoadingPlaceholder.test.tsx (about)

     1  /**
     2   * Copyright 2022 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import { render, screen } from '@testing-library/react';
    18  import { renderHook } from '@testing-library/react-hooks';
    19  import { QueryClient, QueryClientProvider } from 'react-query';
    20  
    21  import * as httpAPI from '../../api/http';
    22  
    23  import { useClusters } from '../../hooks/api';
    24  import { QueryLoadingPlaceholder } from './QueryLoadingPlaceholder';
    25  
    26  jest.mock('../../api/http');
    27  
    28  const queryHelper = () => {
    29      const queryClient = new QueryClient({
    30          defaultOptions: { queries: { retry: false } },
    31      });
    32  
    33      const wrapper: React.FC = ({ children }) => (
    34          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    35      );
    36  
    37      return renderHook(() => useClusters(), { wrapper });
    38  };
    39  
    40  describe('QueryLoadingPlaceholder', () => {
    41      beforeEach(() => {
    42          jest.clearAllMocks();
    43      });
    44  
    45      it('renders only when loading', async () => {
    46          (httpAPI.fetchClusters as any).mockResolvedValueOnce({ clusters: [] });
    47          const { result, waitFor } = queryHelper();
    48  
    49          const { rerender } = render(<QueryLoadingPlaceholder query={result.current} />);
    50  
    51          await waitFor(() => result.current.isLoading);
    52  
    53          let placeholder = screen.queryByRole('status');
    54          expect(placeholder).not.toBeNull();
    55          expect(placeholder?.textContent).toEqual('Loading...');
    56  
    57          await waitFor(() => result.current.isSuccess);
    58  
    59          rerender(<QueryLoadingPlaceholder query={result.current} />);
    60          placeholder = screen.queryByRole('status');
    61          expect(placeholder).toBeNull();
    62      });
    63  });