dewedev/node_modules/eslint-plugin-jsx-a11y/__tests__/src/util/mayHaveAccessibleLabel-test.js

import test from 'tape';

import mayHaveAccessibleLabel from '../../../src/util/mayHaveAccessibleLabel';
import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
import JSXElementMock from '../../../__mocks__/JSXElementMock';
import JSXExpressionContainerMock from '../../../__mocks__/JSXExpressionContainerMock';
import JSXSpreadAttributeMock from '../../../__mocks__/JSXSpreadAttributeMock';
import JSXTextMock from '../../../__mocks__/JSXTextMock';
import LiteralMock from '../../../__mocks__/LiteralMock';

test('mayHaveAccessibleLabel', (t) => {
  t.equal(
    mayHaveAccessibleLabel(
      JSXElementMock('div', [], [
        JSXElementMock('div', [], [
          JSXElementMock('span', [], []),
          JSXElementMock('span', [], [
            JSXElementMock('span', [], []),
            JSXElementMock('span', [], [
              JSXElementMock('span', [], []),
            ]),
          ]),
        ]),
        JSXElementMock('span', [], []),
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
        ]),
      ]),
      5,
    ),
    false,
    'no label returns false',
  );

  t.test('label via attributes', (st) => {
    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', 'A delicate label'),
      ], [])),
      true,
      'aria-label returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', ''),
      ], [])),
      false,
      'aria-label without content returns false',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', ' '),
      ], [])),
      false,
      'aria-label with only spaces whitespace, should return false',
    );
    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', '\n'),
      ], [])),
      false,
      'aria-label with only newline whitespace, should return false',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', 'elementId'),
      ], [])),
      true,
      'aria-labelledby returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', ''),
      ], [])),
      false,
      'aria-labelledby without content returns false',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', 'elementId', true),
      ], [])),
      true,
      'aria-labelledby with an expression container, should return true',
    );

    st.end();
  });

  t.test('label via custom label attribute', (st) => {
    const customLabelProp = 'cowbell';

    st.equal(
      mayHaveAccessibleLabel(
        JSXElementMock('div', [
          JSXAttributeMock(customLabelProp, 'A delicate label'),
        ], []),
        1,
        [customLabelProp],
      ),
      true,
      'aria-label returns true',
    );

    st.end();
  });

  t.test('text label', (st) => {
    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        LiteralMock('A fancy label'),
      ])),
      true,
      'Literal text, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        LiteralMock(' '),
      ])),
      false,
      'Literal spaces whitespace, returns false',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        LiteralMock('\n'),
      ])),
      false,
      'Literal newline whitespace, returns false',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXTextMock('A fancy label'),
      ])),
      true,
      'JSXText, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('div', [], [
          JSXTextMock('A fancy label'),
        ]),
      ])),
      false,
      'label is outside of default depth, returns false',
    );

    st.equal(
      mayHaveAccessibleLabel(
        JSXElementMock('div', [], [
          JSXElementMock('div', [], [
            JSXTextMock('A fancy label'),
          ]),
        ]),
        2,
      ),
      true,
      'label is inside of custom depth, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(
        JSXElementMock('div', [], [
          JSXElementMock('div', [], [
            JSXElementMock('span', [], []),
            JSXElementMock('span', [], [
              JSXElementMock('span', [], []),
              JSXElementMock('span', [], [
                JSXElementMock('span', [], [
                  JSXElementMock('span', [], [
                    JSXTextMock('A fancy label'),
                  ]),
                ]),
              ]),
            ]),
          ]),
          JSXElementMock('span', [], []),
          JSXElementMock('img', [
            JSXAttributeMock('src', 'some/path'),
          ]),
        ]),
        6,
      ),
      true,
      'deep nesting, returns true',
    );

    st.end();
  });

  t.test('image content', (st) => {
    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
        ]),
      ])),
      false,
      'without alt, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
          JSXAttributeMock('alt', 'A sensible label'),
        ]),
      ])),
      true,
      'with alt, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
          JSXAttributeMock('aria-label', 'A sensible label'),
        ]),
      ])),
      true,
      'with aria-label, returns true',
    );

    st.end();
  });

  t.test('Intederminate situations', (st) => {
    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXExpressionContainerMock('mysteryBox'),
      ])),
      true,
      'expression container children, returns true',
    );

    st.equal(
      mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('style', 'some-junk'),
        JSXSpreadAttributeMock('props'),
      ], [])),
      true,
      'spread operator in attributes, returns true',
    );

    st.end();
  });

  t.end();
});