karma-unit-test-input-eventlistener-4.ts

karma-unit-test-input-eventlistener-4.ts

import FormEventHandler from '../FormEventHandler';

describe('FormEventHandler.spec.ts', () => {
  beforeEach(() => {
    const fixture = `<form id="fixture">
      <div role="radiogroup">
        <h3>Radio buttons</h3>
        <div role="radio" class="radio-input-ac" 
          value="option1" id="option1">
          Option 1
        </div>
        <div role="radio" class="radio-input-ac" 
          value="option2" id="option2">
          Option 2
        </div>
        <div role="radio" class="radio-input-ac" 
          value="option3" id="option3">
          Option 3
        </div>
      </div>
      <div class="select-section">
        <span role="checkbox" aria-checked="false" 
          class="checkbox-input-ac"
          id="subscribe" name="subscribe" /></span>
        <label for="subscribe">subscribe</label>
      </div>
    </form>`;

    document.body.insertAdjacentHTML('afterbegin', fixture);
  });

  afterEach(() => {
    document.body.removeChild((document.getElementById('fixture') as HTMLElement));
  });

  it('should set correct aria-checked attritube on radio input', () => {
    // Arrange
    const formElement = document.querySelector('#fixture') as HTMLElement;
    const formEventHandler = new FormEventHandler(formElement);

    // Act
    formEventHandler.init();
    const clickedElement = document.getElementById('option1') as HTMLInputElement;
    clickedElement.checked = true;
    clickedElement.click();

    // Assert
    const radioGroupElements = document.querySelectorAll('.radio-input-ac') as any;
    for (let elem of radioGroupElements) {
      if (elem.getAttribute('id') === 'option1') {
        expect(elem.getAttribute('aria-checked')).toBe('true');
      } else {
        expect(elem.getAttribute('aria-checked')).toBe('false');
      }
    }
  });

  it('should set aria-checked to true on checkbox input when ticked', () => {
    // Arrange
    const formElement = document.querySelector('#fixture') as HTMLElement;
    const formEventHandler = new FormEventHandler(formElement);

    // Act
    formEventHandler.init();
    const clickedElement = document.getElementById('subscribe') as HTMLInputElement;
    clickedElement.checked = true;
    clickedElement.click();

    // Assert
    expect(clickedElement.getAttribute('aria-checked')).toBe('true');
  });

  it('should set aria-checked to false on checkbox input when not ticked', () => {
    // Arrange
    const formElement = document.querySelector('#fixture') as HTMLElement;
    const formEventHandler = new FormEventHandler(formElement);

    // Act
    formEventHandler.init();
    const clickedElement = document.getElementById('subscribe') as HTMLInputElement;
    clickedElement.click();

    // Assert
    expect(clickedElement.getAttribute('aria-checked')).toBe('false');
  });
});