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

     1  import * as React from 'react';
     2  import { shallow } from 'enzyme';
     3  import SeriesName from './SeriesName';
     4  
     5  describe('SeriesName', () => {
     6    describe('with labels=null', () => {
     7      const seriesNameProps = {
     8        labels: null,
     9        format: false,
    10      };
    11      const seriesName = shallow(<SeriesName {...seriesNameProps} />);
    12      it('renders the string "scalar"', () => {
    13        expect(seriesName.text()).toEqual('scalar');
    14      });
    15    });
    16  
    17    describe('with labels defined and format false', () => {
    18      const seriesNameProps = {
    19        labels: {
    20          __name__: 'metric_name',
    21          label1: 'value_1',
    22          label2: 'value_2',
    23          label3: 'value_3',
    24        },
    25        format: false,
    26      };
    27      const seriesName = shallow(<SeriesName {...seriesNameProps} />);
    28      it('renders the series name as a string', () => {
    29        expect(seriesName.text()).toEqual('metric_name{label1="value_1", label2="value_2", label3="value_3"}');
    30      });
    31    });
    32  
    33    describe('with labels defined and format true', () => {
    34      const seriesNameProps = {
    35        labels: {
    36          __name__: 'metric_name',
    37          label1: 'value_1',
    38          label2: 'value_2',
    39          label3: 'value_3',
    40        },
    41        format: true,
    42      };
    43      const seriesName = shallow(<SeriesName {...seriesNameProps} />);
    44      it('renders the series name as a series of spans', () => {
    45        expect(seriesName.children()).toHaveLength(6);
    46        const testCases = [
    47          { name: 'metric_name', className: 'legend-metric-name' },
    48          { name: '{', className: 'legend-label-brace' },
    49          { name: 'label1', value: 'value_1', className: 'legend-label-name' },
    50          { name: 'label2', value: 'value_2', className: 'legend-label-name' },
    51          { name: 'label3', value: 'value_3', className: 'legend-label-name' },
    52          { name: '}', className: 'legend-label-brace' },
    53        ];
    54        testCases.forEach((tc, i) => {
    55          const child = seriesName.childAt(i);
    56          const text = child
    57            .children()
    58            .map((ch) => ch.text())
    59            .join('');
    60          switch (child.children().length) {
    61            case 1:
    62              expect(text).toEqual(tc.name);
    63              expect(child.prop('className')).toEqual(tc.className);
    64              break;
    65            case 3:
    66              expect(text).toEqual(`${tc.name}="${tc.value}"`);
    67              expect(child.childAt(0).prop('className')).toEqual('legend-label-name');
    68              expect(child.childAt(2).prop('className')).toEqual('legend-label-value');
    69              break;
    70            case 4:
    71              expect(text).toEqual(`, ${tc.name}="${tc.value}"`);
    72              expect(child.childAt(1).prop('className')).toEqual('legend-label-name');
    73              expect(child.childAt(3).prop('className')).toEqual('legend-label-value');
    74              break;
    75            default:
    76              fail('incorrect number of children: ' + child.children().length);
    77          }
    78        });
    79      });
    80    });
    81  });