mirador/__tests__/src/components/LabelValueMetadata.test.jsx at 06da4012ae47e59bc7ea4548409e2783cde3e172 · ProjectMirador/mirador · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { render, screen } from '@tests/utils/test-utils';
import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';

/** */
function createWrapper(props) {
  return render(
    <LabelValueMetadata
      {...props}
    />,
  );
}

/* eslint-disable testing-library/no-node-access */
describe('LabelValueMetadata', () => {
  let wrapper;
  let labelValuePairs;

  describe('when the labelValuePair has content', () => {
    beforeEach(() => {
      labelValuePairs = [
        {
          label: 'Label 1',
          values: ['Value 1'],
        },
        {
          label: 'Label 2',
          values: ['Value 2', 'Value 3'],
        },
      ];

      wrapper = createWrapper({ labelValuePairs });
    });

    it('renders a dt/dd for each label/value pair', () => {
      expect(wrapper.container.querySelector('dl')).toBeInTheDocument();
      expect(wrapper.container.querySelectorAll('dt').length).toEqual(2);
      expect(wrapper.container.querySelectorAll('dd').length).toEqual(2);
    });

    it('renders correct labels in dt', () => {
      expect(screen.getByText('Label 1')).toBeInTheDocument();
      expect(screen.getByText('Label 2')).toBeInTheDocument();
    });

    it('renders SanitizedHtml component in dd for each value', () => {
      expect(screen.getByText('Value 1')).toBeInTheDocument();
      expect(screen.getByText('Value 2, Value 3')).toBeInTheDocument();
    });

    it('uses the default labelValueJoiner from config', () => {
      expect(screen.getByText('Value 2, Value 3')).toBeInTheDocument();
    });
  });

  describe('when the labelValuePair has no content', () => {
    it('renders an empty fragment instead of an empty dl', () => {
      wrapper = createWrapper({ labelValuePairs: [] });
      expect(wrapper.container).toBeEmptyDOMElement();
    });
  });

  describe('when the labelValuePair has content and labelValueJoiner is set to a custom variable', () => {
    beforeEach(() => {
      labelValuePairs = [
        {
          label: 'Label 1',
          values: ['Value 1', 'Value 2'],
        },
      ];
      wrapper = createWrapper({ labelValueJoiner: '*', labelValuePairs });
    });

    it('renders a dt/dd for each label/value pair', () => {
      expect(wrapper.container.querySelector('dl')).toBeInTheDocument();
      expect(wrapper.container.querySelectorAll('dt').length).toEqual(1);
      expect(wrapper.container.querySelectorAll('dd').length).toEqual(1);
    });

    it('renders correct label in dt', () => {
      expect(screen.getByText('Label 1')).toBeInTheDocument();
    });

    it('renders SanitizedHtml component in dd for each value with correct joiner', () => {
      expect(screen.getByText('Value 1*Value 2')).toBeInTheDocument();
    });
  });

  describe('when the labelValuePair has a default label', () => {
    beforeEach(() => {
      labelValuePairs = [
        {
          values: ['Value 1'],
        },
        {
          label: 'Label 2',
          values: ['Value 2'],
        },
      ];
      createWrapper({ defaultLabel: 'Default label', labelValuePairs });
    });

    it('renders correct labels in dt', () => {
      expect(screen.getByText('Default label')).toBeInTheDocument();
      expect(screen.getByText('Label 2')).toBeInTheDocument();
    });
  });
});