Testes

.js

import LeafletSearch from './leaflet-search';

const { $ } = window;

window.requestAnimationFrame.mockRestore();

const waitRAF = () => new Promise((resolve) => requestAnimationFrame(resolve));

const simulateKeyboardInput = async (text, inputElement) => {
  /*
    Estamos utilizando o jQuery nos testes, entretanto, os eventos disparados através dele
    não são ouvidos pelo vanilla js(cujo qual o componente é baseado). Então, foi necessário
    realizar o "trigger" desse evento através do javascript puro =).
  */
  const event = new Event('input', {
    bubbles: true,
    cancelable: true,
  });

  inputElement.value = text;
  inputElement.dispatchEvent(event);

  await waitRAF();
  await waitRAF();
  await waitRAF();
}

describe('LeafletSearch Component', () => {
  let $element;
  let $content;
  let component;
  let $input;

  describe('Mobile', () => {
    beforeAll(() => {
      $element = $(`
        <div class="leaflet-fixed-menu__leaflet-search-mobile" data-component="LeafletSearch" data-content-selector=".leaflet-content__text">
          <img class="leaflet-fixed-menu__leaflet-search-mobile__logo" src="images/test.jpg">
          <div class="leaflet-fixed-menu__leaflet-search-mobile__navigation-area">
            <input id="teste" placeholder="Digite o termo" data-input-teste>
            <svg class="leaflet-fixed-menu__leaflet-search-mobile__navigation-area__placeholder-icon"> </svg>
            <div class="leaflet-fixed-menu__leaflet-search-mobile__navigation-area__buttons-area">
              <button data-search="previous"> </button>
              <span data-search="navigationIndex"> </span>
              <button data-search="next"> </button>
              <button data-search="clear"> </button>
            </div>
          </div>
        </div>
      `);

      $content = $(`
        <div class="leaflet-content__text">
          Lorem Ipsum Ametsum Et
        </div>
        <div class="leaflet-content__text">
          Lorem Ipsum Ametsum Et
        </div>
      `);

      $(document.body).append($element);
      $(document.body).append($content);

      $input = $element.find('input')[0];
      component = new LeafletSearch($element);
    });

    beforeEach(() => {
      component.init();
    })

    describe('UI State', () => {
      it('should be able to match the default UI State', () => {
        expect($('[data-component="LeafletSearch"]').hasClass('leaflet-fixed-menu__leaflet-search-mobile')).toBe(true);
      });
    });

    describe('Behaviour', () => {
      it('should show a errored component state when there is no match', async () => {

        await simulateKeyboardInput('testete', $input);

        expect($('[data-component="LeafletSearch"]').hasClass('errored')).toBe(true);
        expect(component.navigationIndex.textContent).toBe('0/0');
      });

      it("should be able to show the result's index when found a result match", async () => {
        await simulateKeyboardInput('lorem', $input);

        expect(component.resultsLength).toBe(2);
        expect(component.navigationIndex.textContent).toBe('1/2');
      });

      it('should mark mark text when found a result match', async () => {
        await simulateKeyboardInput('lorem', $input);

        expect($('mark').length).toBe(2);
      });

      it('should highlight the first result when found a result match', async () => {
        await simulateKeyboardInput('lorem', $input);

        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);
      });

      it('should be able to navigate using "next" and "previous" buttons', async () => {
        await simulateKeyboardInput('lorem', $input);

        expect(component.resultsLength).toBe(2);
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);

        $("[data-search='next']").first().click();
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(false);
        expect(document.querySelectorAll('mark')[1].classList.contains('current')).toBe(true);

        $("[data-search='previous']").first().click();
        expect(document.querySelectorAll('mark')[1].classList.contains('current')).toBe(false);
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);
      });

      it('should not be able to navigate when is on maxim index position', async () => {
        await simulateKeyboardInput('lorem', $input);

        expect(component.resultsLength).toBe(2);
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);

        $("[data-search='next']").first().click();
        expect(document.querySelectorAll('mark')[1].classList.contains('current')).toBe(true);

        $("[data-search='next']").first().click();
        expect(document.querySelectorAll('mark')[1].classList.contains('current')).toBe(true);
      });

      it('should not be able to navigate when is on minimum index position', async () => {
        await simulateKeyboardInput('lorem', $input);

        expect(component.resultsLength).toBe(2);
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);

        $("[data-search='previous']").first().click();
        expect(document.querySelectorAll('mark')[0].classList.contains('current')).toBe(true);
        expect(document.querySelectorAll('mark')[1].classList.contains('current')).toBe(false);
      });
    });
  });

  describe('Desktop', () => {No wrap
    beforeEach(() => {
      $element = $(`
        <div data-component="LeafletSearch">
          <img class="leaflet-fixed-menu__leaflet-search-mobile__logo" src="images/test.jpg">

        </div>
      `);
    });

    describe('UI State', () => {

    });
  });
});