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

     1  import React from 'react';
     2  import { mount } from 'enzyme';
     3  import { Button, Collapse, Table, Badge } from 'reactstrap';
     4  import StorePoolPanel, { StorePoolPanelProps, storeTimeRangeMsg } from './StorePoolPanel';
     5  import StoreLabels from './StoreLabels';
     6  import { getColor } from '../../../pages/targets/target';
     7  import { formatTime, parseTime, isValidTime } from '../../../utils';
     8  import { sampleAPIResponse } from './__testdata__/testdata';
     9  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    10  
    11  describe('StorePoolPanel', () => {
    12    const defaultProps: StorePoolPanelProps = {
    13      title: 'sidecar',
    14      storePool: sampleAPIResponse.data.sidecar,
    15    };
    16  
    17    const storePoolPanel = mount(<StorePoolPanel {...defaultProps} />);
    18  
    19    it('renders a container', () => {
    20      const div = storePoolPanel.find('div').filterWhere((elem) => elem.hasClass('container-fluid'));
    21      expect(div).toHaveLength(1);
    22    });
    23  
    24    describe('Header', () => {
    25      it('renders a span with title', () => {
    26        const span = storePoolPanel.find('h3 > span');
    27        expect(span).toHaveLength(1);
    28        expect(span.text()).toEqual('sidecar');
    29      });
    30  
    31      it('collapses the table when clicked on show less button', () => {
    32        const btn = storePoolPanel.find(Button);
    33        expect(btn).toHaveLength(1);
    34        btn.simulate('click');
    35  
    36        const collapse = storePoolPanel.find(Collapse);
    37        expect(collapse.prop('isOpen')).toBe(false);
    38      });
    39  
    40      it('expands the table again after clicking show more button', () => {
    41        const btn = storePoolPanel.find(Button);
    42        expect(btn).toHaveLength(1);
    43        btn.simulate('click');
    44  
    45        const collapse = storePoolPanel.find(Collapse);
    46        expect(collapse.prop('isOpen')).toBe(true);
    47      });
    48    });
    49  
    50    it('renders an open Collapse component by default', () => {
    51      const collapse = storePoolPanel.find(Collapse);
    52      expect(collapse.prop('isOpen')).toBe(true);
    53    });
    54  
    55    describe('for each store', () => {
    56      const table = storePoolPanel.find(Table);
    57      defaultProps.storePool.forEach((store, idx) => {
    58        const { name, minTime, maxTime, labelSets, lastCheck, lastError } = store;
    59        const row = table.find('tr').at(idx + 1);
    60        const validMinTime = isValidTime(minTime);
    61        const validMaxTime = isValidTime(maxTime);
    62  
    63        it('renders store endpoint', () => {
    64          const td = row.find({ 'data-testid': 'endpoint' });
    65          expect(td).toHaveLength(1);
    66          expect(td.prop('title')).toBe(storeTimeRangeMsg(validMinTime, validMaxTime));
    67        });
    68  
    69        it('renders a badge for health', () => {
    70          const health = lastError ? 'down' : 'up';
    71          const td = row.find({ 'data-testid': 'health' });
    72          expect(td).toHaveLength(1);
    73  
    74          const badge = td.find(Badge);
    75          expect(badge).toHaveLength(1);
    76          expect(badge.prop('color')).toEqual(getColor(health));
    77          expect(badge.text()).toEqual(health.toUpperCase());
    78        });
    79  
    80        it('renders labelSets', () => {
    81          const td = row.find({ 'data-testid': 'storeLabels' });
    82          expect(td).toHaveLength(1);
    83  
    84          const storeLabels = td.find(StoreLabels);
    85          expect(storeLabels).toHaveLength(1);
    86          expect(storeLabels.prop('labelSets')).toEqual(labelSets);
    87        });
    88  
    89        it('renders minTime', () => {
    90          const td = row.find({ 'data-testid': 'minTime' });
    91          expect(td).toHaveLength(1);
    92          expect(td.prop('title')).toBe(storeTimeRangeMsg(validMinTime, validMaxTime));
    93  
    94          if (!validMinTime) {
    95            const minusIcon = td.find(FontAwesomeIcon);
    96            expect(minusIcon).toHaveLength(1);
    97          } else {
    98            expect(td.text()).toBe(formatTime(minTime));
    99          }
   100        });
   101  
   102        it('renders maxTime', () => {
   103          const td = row.find({ 'data-testid': 'maxTime' });
   104          expect(td).toHaveLength(1);
   105          expect(td.prop('title')).toBe(storeTimeRangeMsg(validMinTime, validMaxTime));
   106  
   107          if (!validMaxTime) {
   108            const minusIcon = td.find(FontAwesomeIcon);
   109            expect(minusIcon).toHaveLength(1);
   110          } else {
   111            expect(td.text()).toBe(formatTime(maxTime));
   112          }
   113        });
   114  
   115        it('renders lastCheck', () => {
   116          const td = row.find({ 'data-testid': 'lastCheck' });
   117          expect(td).toHaveLength(1);
   118  
   119          if (!isValidTime(parseTime(lastCheck))) {
   120            const minusIcon = td.find(FontAwesomeIcon);
   121            expect(minusIcon).toHaveLength(1);
   122          }
   123        });
   124  
   125        it('renders a badge for Errors', () => {
   126          const td = row.find({ 'data-testid': 'lastError' });
   127          const badge = td.find(Badge);
   128          expect(badge).toHaveLength(lastError ? 1 : 0);
   129          if (lastError) {
   130            expect(badge.prop('color')).toEqual('danger');
   131            expect(badge.children().text()).toEqual(lastError);
   132          }
   133        });
   134      });
   135    });
   136  });