mayHaveAccessibleLabel-test.js

import expect from 'expect';
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';

describe('mayHaveAccessibleLabel', () => {
  describe('no label', () => {
    it('should return false', () => {
      expect(mayHaveAccessibleLabel(
        JSXElementMock('div', [], [
          JSXElementMock('div', [], [
            JSXElementMock('span', [], []),
            JSXElementMock('span', [], [
              JSXElementMock('span', [], []),
              JSXElementMock('span', [], [
                JSXElementMock('span', [], []),
              ]),
            ]),
          ]),
          JSXElementMock('span', [], []),
          JSXElementMock('img', [
            JSXAttributeMock('src', 'some/path'),
          ]),
        ]),
        5,
      )).toBe(false);
    });
  });
  describe('label via attributes', () => {
    it('aria-label, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', 'A delicate label'),
      ], []))).toBe(true);
    });
    it('aria-label without content, should return false', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-label', ''),
      ], []))).toBe(false);
    });
    it('aria-labelledby, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', 'elementId'),
      ], []))).toBe(true);
    });
    it('aria-labelledby without content, should return false', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', ''),
      ], []))).toBe(false);
    });
    it('aria-labelledby with an expression container, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [
        JSXAttributeMock('aria-labelledby', 'elementId', true),
      ], []))).toBe(true);
    });
  });
  describe('label via custom label attribute', () => {
    let customLabelProp;
    beforeEach(() => {
      customLabelProp = 'cowbell';
    });
    it('aria-label, should return true', () => {
      expect(mayHaveAccessibleLabel(
        JSXElementMock('div', [
          JSXAttributeMock(customLabelProp, 'A delicate label'),
        ], []),
        1,
        [customLabelProp],
      )).toBe(true);
    });
  });
  describe('text label', () => {
    it('Literal text, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        LiteralMock('A fancy label'),
      ]))).toBe(true);
    });
    it('JSXText, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXTextMock('A fancy label'),
      ]))).toBe(true);
    });
    it('label is outside of default depth, should return false', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('div', [], [
          JSXTextMock('A fancy label'),
        ]),
      ]))).toBe(false);
    });
    it('label is inside of custom depth, should return true', () => {
      expect(mayHaveAccessibleLabel(
        JSXElementMock('div', [], [
          JSXElementMock('div', [], [
            JSXTextMock('A fancy label'),
          ]),
        ]),
        2,
      )).toBe(true);
    });
    it('deep nesting, should return true', () => {
      expect(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,
      )).toBe(true);
    });
  });
  describe('image content', () => {
    it('without alt, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
        ]),
      ]))).toBe(false);
    });
    it('with alt, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
          JSXAttributeMock('alt', 'A sensible label'),
        ]),
      ]))).toBe(true);
    });
    it('with aria-label, should return true', () => {
      expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
        JSXElementMock('img', [
          JSXAttributeMock('src', 'some/path'),
          JSXAttributeMock('aria-label', 'A sensible label'),
        ]),
      ]))).toBe(true);
    });
  });
  describe('Intederminate situations', () => {
    describe('expression container children', () => {
      it('should return true', () => {
        expect(mayHaveAccessibleLabel(JSXElementMock('div', [], [
          JSXExpressionContainerMock('mysteryBox'),
        ]))).toBe(true);
      });
    });
    describe('spread operator in attributes', () => {
      it('should return true', () => {
        expect(mayHaveAccessibleLabel(JSXElementMock('div', [
          JSXAttributeMock('style', 'some-junk'),
          JSXSpreadAttributeMock('props'),
        ], []))).toBe(true);
      });
    });
  });
});