vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/tablet/Tablet.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 { createMemoryHistory, MemoryHistory } from 'history';
    19  import { QueryClient, QueryClientProvider } from 'react-query';
    20  import { Route, Router, Switch } from 'react-router-dom';
    21  
    22  import { Tablet } from './Tablet';
    23  
    24  // Preserve process.env to restore its original values after each test run
    25  const ORIGINAL_PROCESS_ENV = { ...process.env };
    26  
    27  const INITIAL_HISTORY = ['/tablet/someCluster/someAlias/qps'];
    28  
    29  const renderHelper = (history?: MemoryHistory) => {
    30      const queryClient = new QueryClient();
    31  
    32      // Note that when testing redirects, history.location will have the expected value
    33      // but window.location will not.
    34      const _history = history || createMemoryHistory({ initialEntries: INITIAL_HISTORY });
    35  
    36      return render(
    37          <QueryClientProvider client={queryClient}>
    38              <Router history={_history}>
    39                  <Switch>
    40                      <Route path="/tablet/:clusterID/:alias">
    41                          <Tablet />
    42                      </Route>
    43  
    44                      {/* <Route path="/tablet/:clusterID/:alias">
    45                          <Tablet />
    46                      </Route> */}
    47  
    48                      <Route>
    49                          <div>no match</div>
    50                      </Route>
    51                  </Switch>
    52              </Router>
    53          </QueryClientProvider>
    54      );
    55  };
    56  
    57  describe('Tablet view', () => {
    58      afterEach(() => {
    59          process.env = ORIGINAL_PROCESS_ENV;
    60          jest.clearAllMocks();
    61      });
    62  
    63      it('renders', async () => {
    64          const history = createMemoryHistory({ initialEntries: INITIAL_HISTORY });
    65          renderHelper(history);
    66          const title = screen.getByRole('heading', { level: 1 });
    67          expect(title).toHaveTextContent('someAlias');
    68      });
    69  
    70      it('displays the advanced tab', async () => {
    71          expect(process.env.REACT_APP_READONLY_MODE).toBeFalsy();
    72          renderHelper();
    73  
    74          const tab = screen.getByRole('tab', { name: 'Advanced' });
    75          expect(tab).toHaveTextContent('Advanced');
    76      });
    77  
    78      // Weird thing worth mentioning -- when testing redirects, the page contents doesn't render
    79      // as expected, so any assertions against `screen` will (probably) not work. This might be an async thing;
    80      // either way, this kind of redirect is deprecated in the next version of react-router.
    81      it('redirects from "/" to a default route', () => {
    82          const history = createMemoryHistory({ initialEntries: INITIAL_HISTORY });
    83          renderHelper(history);
    84          expect(history.location.pathname).toEqual('/tablet/someCluster/someAlias/qps');
    85      });
    86  
    87      describe('read-only mode', () => {
    88          beforeEach(() => {
    89              (process as any).env.REACT_APP_READONLY_MODE = 'true';
    90          });
    91  
    92          it('hides the "Advanced" tab', () => {
    93              renderHelper();
    94              const tab = screen.queryByRole('tab', { name: 'Advanced' });
    95              expect(tab).toBe(null);
    96          });
    97  
    98          it('redirects from /advanced', () => {
    99              const history = createMemoryHistory({ initialEntries: ['/tablet/someCluster/someAlias/advanced'] });
   100              renderHelper(history);
   101              expect(history.location.pathname).toEqual('/tablet/someCluster/someAlias/qps');
   102          });
   103      });
   104  });