lundi 25 janvier 2021

Angular Testing - How to cover the lines in my test file

I am new to Angular/Typescript/Javascript. The challenge I am facing right now since few hours is: I have this function to test:

setupIFrame($event: any): void {
    this.iframeWrappers = document.getElementsByClassName('iframe-wrapper');
    this.iframeButtons = document.getElementsByClassName('iframe-button');

    const closeListener: any = (payload) => {
      if (payload.data?.eventId === 'closeEvent') {
        this.iframeWrappers[$event.rowIndex].classList.remove('open');
        window.removeEventListener('message', closeListener, false);
      }
    }

    this.iframeButtons[$event.rowIndex].addEventListener('click', () => {
      this.iframeWrappers[$event.rowIndex].classList.add('open');
      window.addEventListener('message', closeListener, false);
    }, false);
  }

But I cannot cover the closeListener and these two lines:

this.iframeWrappers[$event.rowIndex].classList.add('open');
window.addEventListener('message', closeListener, false);

What can I do in order to cover these two lines? This is my current test:

it('test iFrame setup', () => {

    Object.defineProperty(document, 'getElementsByClassName', {
      value: mockedGetElementsByClassName
    })

    configureTestBed();

    const rowIndex: RowIndex = {rowIndex: 0};

    expect(component).toBeTruthy();
    expect(fixture).toMatchSnapshot();

    component.setupIFrame(rowIndex);
    expect(document.getElementsByClassName).toBeCalledTimes(2);
    expect(mockedIFrameButton.addEventListener).toBeCalledWith('click', expect.any(Function), false);

    // expect(mockedIFrameWrapper.classList.add).toBeCalled();
  });

I feel like mocking the getElementsByClassName function is not the right thing to do, but otherwise I would get a undefined HTMLElement and cannot call the addEventListener function either. But I am very unsure how to approach the test properly tbh :/

Aucun commentaire:

Enregistrer un commentaire