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

     1  import * as React from 'react';
     2  import { shallow } from 'enzyme';
     3  import { FlagsContent } from './Flags';
     4  import { Input, Table } from 'reactstrap';
     5  import toJson from 'enzyme-to-json';
     6  
     7  const sampleFlagsResponse = {
     8    'alertmanager.notification-queue-capacity': '10000',
     9    'alertmanager.timeout': '10s',
    10    'config.file': './documentation/examples/prometheus.yml',
    11    'log.format': 'logfmt',
    12    'log.level': 'info',
    13    'query.lookback-delta': '5m',
    14    'query.max-concurrency': '20',
    15    'query.max-samples': '50000000',
    16    'query.timeout': '2m',
    17    'rules.alert.for-grace-period': '10m',
    18    'rules.alert.for-outage-tolerance': '1h',
    19    'rules.alert.resend-delay': '1m',
    20    'storage.remote.flush-deadline': '1m',
    21    'storage.remote.read-concurrent-limit': '10',
    22    'storage.remote.read-max-bytes-in-frame': '1048576',
    23    'storage.remote.read-sample-limit': '50000000',
    24    'storage.tsdb.allow-overlapping-blocks': 'false',
    25    'storage.tsdb.max-block-duration': '36h',
    26    'storage.tsdb.min-block-duration': '2h',
    27    'storage.tsdb.no-lockfile': 'false',
    28    'storage.tsdb.path': 'data/',
    29    'storage.tsdb.retention': '0s',
    30    'storage.tsdb.retention.size': '0B',
    31    'storage.tsdb.retention.time': '0s',
    32    'storage.tsdb.wal-compression': 'false',
    33    'storage.tsdb.wal-segment-size': '0B',
    34    'web.console.libraries': 'console_libraries',
    35    'web.console.templates': 'consoles',
    36    'web.cors.origin': '.*',
    37    'web.enable-admin-api': 'false',
    38    'web.enable-lifecycle': 'false',
    39    'web.external-url': '',
    40    'web.listen-address': '0.0.0.0:9090',
    41    'web.max-connections': '512',
    42    'web.page-title': 'Prometheus Time Series Collection and Processing Server',
    43    'web.read-timeout': '5m',
    44    'web.route-prefix': '/',
    45    'web.user-assets': '',
    46  };
    47  
    48  describe('Flags', () => {
    49    it('renders a table with properly configured props', () => {
    50      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    51      const table = w.find(Table);
    52      expect(table.props()).toMatchObject({
    53        bordered: true,
    54        size: 'sm',
    55        striped: true,
    56      });
    57    });
    58  
    59    it('should not fail if data is missing', () => {
    60      expect(shallow(<FlagsContent />)).toHaveLength(1);
    61    });
    62  
    63    it('should match snapshot', () => {
    64      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    65      expect(toJson(w)).toMatchSnapshot();
    66    });
    67  
    68    it('is sorted by flag by default', (): void => {
    69      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    70      const td = w.find('tbody').find('td').find('span').first();
    71      expect(td.html()).toBe('<span>--alertmanager.notification-queue-capacity</span>');
    72    });
    73  
    74    it('sorts', (): void => {
    75      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    76      const th = w
    77        .find('thead')
    78        .find('td')
    79        .filterWhere((td): boolean => td.hasClass('Flag'));
    80      th.simulate('click');
    81      const td = w.find('tbody').find('td').find('span').first();
    82      expect(td.html()).toBe('<span>--web.user-assets</span>');
    83    });
    84  
    85    it('filters by flag name', (): void => {
    86      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    87      const input = w.find(Input);
    88      input.simulate('change', { target: { value: 'timeout' } });
    89      const tds = w
    90        .find('tbody')
    91        .find('td')
    92        .filterWhere((code) => code.hasClass('flag-item'));
    93      expect(tds.length).toEqual(3);
    94    });
    95  
    96    it('filters by flag value', (): void => {
    97      const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
    98      const input = w.find(Input);
    99      input.simulate('change', { target: { value: '10s' } });
   100      const tds = w
   101        .find('tbody')
   102        .find('td')
   103        .filterWhere((code) => code.hasClass('flag-value'));
   104      expect(tds.length).toEqual(1);
   105    });
   106  });