github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/blocks/Blocks.test.tsx (about)

     1  import React from 'react';
     2  import { mount, ReactWrapper } from 'enzyme';
     3  import { FetchMock } from 'jest-fetch-mock/types';
     4  import { UncontrolledAlert } from 'reactstrap';
     5  import Blocks from './Blocks';
     6  import { QueryParamProvider } from 'use-query-params';
     7  import { SourceView } from './SourceView';
     8  import { sampleAPIResponse } from './__testdata__/testdata';
     9  import { act } from 'react-dom/test-utils';
    10  
    11  describe('Blocks', () => {
    12    beforeEach(() => {
    13      fetchMock.resetMocks();
    14    });
    15  
    16    describe('when data is returned', () => {
    17      let blocks: ReactWrapper;
    18      let mock: FetchMock;
    19  
    20      beforeEach(() => {
    21        mock = fetchMock.mockResponse(JSON.stringify(sampleAPIResponse));
    22      });
    23  
    24      it('renders sources', async () => {
    25        await act(async () => {
    26          blocks = mount(
    27            <QueryParamProvider>
    28              <Blocks />
    29            </QueryParamProvider>
    30          );
    31        });
    32        blocks.update();
    33        expect(mock).toHaveBeenCalledWith('/api/v1/blocks?view=global', { cache: 'no-store', credentials: 'same-origin' });
    34  
    35        const sourceViews = blocks.find(SourceView);
    36        expect(sourceViews).toHaveLength(8);
    37      });
    38  
    39      it('fetched data with different view', async () => {
    40        await act(async () => {
    41          blocks = mount(
    42            <QueryParamProvider>
    43              <Blocks view="loaded" />
    44            </QueryParamProvider>
    45          );
    46        });
    47        blocks.update();
    48        expect(mock).toHaveBeenCalledWith('/api/v1/blocks?view=loaded', { cache: 'no-store', credentials: 'same-origin' });
    49  
    50        const sourceViews = blocks.find(SourceView);
    51        expect(sourceViews).toHaveLength(8);
    52      });
    53    });
    54  
    55    describe('when there are no blocks', () => {
    56      it('displays a warning alert', async () => {
    57        const mock = fetchMock.mockResponse(
    58          JSON.stringify({
    59            status: 'success',
    60            data: {
    61              blocks: [],
    62            },
    63          })
    64        );
    65  
    66        let blocks: any;
    67        await act(async () => {
    68          blocks = mount(
    69            <QueryParamProvider>
    70              <Blocks />
    71            </QueryParamProvider>
    72          );
    73        });
    74        blocks.update();
    75  
    76        expect(mock).toHaveBeenCalledWith('/api/v1/blocks?view=global', { cache: 'no-store', credentials: 'same-origin' });
    77  
    78        const alert = blocks.find(UncontrolledAlert);
    79        expect(alert.prop('color')).toBe('warning');
    80        expect(alert.text()).toContain('No blocks found.');
    81      });
    82    });
    83  
    84    describe('when an error is returned', () => {
    85      it('displays an error alert', async () => {
    86        const mock = fetchMock.mockReject(new Error('Error fetching blocks'));
    87  
    88        let blocks: any;
    89        await act(async () => {
    90          blocks = mount(
    91            <QueryParamProvider>
    92              <Blocks />
    93            </QueryParamProvider>
    94          );
    95        });
    96        blocks.update();
    97  
    98        expect(mock).toHaveBeenCalledWith('/api/v1/blocks?view=global', { cache: 'no-store', credentials: 'same-origin' });
    99  
   100        const alert = blocks.find(UncontrolledAlert);
   101        expect(alert.prop('color')).toBe('danger');
   102        expect(alert.text()).toContain('Error fetching blocks');
   103      });
   104    });
   105  });