How to write unit tests for Accordion

[René Fabel]

Hello Support,

I am having trouble writing unit tests for the Accordion component.
I have created a small sample application to show the problems.

Run "npm install" and "npm test" to see the failed tests.

Why does this not work? It looks like the component gets not renderes and the By.css selectors cant find something.
What is the right way to test this component?

Regards
René

Attachment: syncfusionaccordion_f3cf1ea0.zip

[Satheesh Kumar Balasubramanian]

Hi Rene,

We have modified the test cases to achieve your requirement.

App.component.spec.ts

import { TestBed, async,ComponentFixture } from '@angular/core/testing';

import { By } from '@angular/platform-browser';

import { DebugElement } from '@angular/core';

import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

describe('AppComponent', () => {

  let component: AppComponent;

  let fixture: ComponentFixture<AppComponent>;

  let heroDe: DebugElement;

  let heroEl: HTMLElement;

  beforeEach(async(() => {

    fixture = TestBed.configureTestingModule({

      imports: [AccordionModule],

      declarations: [

        AppComponent

      ]

    }).createComponent(AppComponent);

    component = fixture.componentInstance;

    fixture.detectChanges(); // initial binding

  }));

  it('should render one ejs-accordion', (done: Function) => {

    setTimeout(() => {

      heroDe = fixture.debugElement.query(By.css('.e-accordion'));

      heroEl = heroDe.nativeElement;

      expect(heroEl.classList.contains('e-accordion')).toBe(true);

      expect(heroEl.tagName === 'EJS-ACCORDION').toBe(true);

      expect(heroEl.classList.contains('e-control')).toBe(true);

      console.log("##############################===>",heroDe)

        done();

    }, 1000);

  });

  it('should render three e-accordionitem', (done: Function) => {

    setTimeout(() => {

      const compiled = fixture.debugElement.nativeElement;

      const hits = compiled.querySelectorAll('.e-acrdn-item');

      expect(hits.length).toBe(3);

        done();

    }, 1000);

  });

  it('should render two headers elements', (done: Function) => {

    setTimeout(() => {

      const compiled = fixture.debugElement.nativeElement;

      const headers = compiled.querySelectorAll('div.header');

      expect(headers.length).toBe(2);

        done();

    }, 1000);

  });

  it('should render one content element', (done: Function) => {

    setTimeout(() => {

      const compiled = fixture.debugElement.nativeElement;

      const content = compiled.querySelectorAll('div.content');

      expect(content.length).toBe(1);

        done();

    }, 1000);

  });

});

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

Attachment: syncfusionaccordion_9894274c.zip

[René Fabel]

Hello  Satheesh Kumar B,

thank you very much for your fast reply.

You got it working :) So that's better than not working at all :)

But I wonder if it's a good idea to use .setTimeout() in unit tests. Unit tests should work fast, they should run in a few milliseconds. But now we have to wait a whole second before the assertions are applied. We want to use a lot of unit tests and for me sounds like a problem to wait on every component unit test one second.

Do you have another approach without using setTimeout?

Regards,

René

[Satheesh Kumar Balasubramanian]

Hi Rene,

You can write unit test cases without setTimeout. Also, we have modified the test cases without setTimeout in the attached sample.

App.component.spec.ts

import { TestBed, async,ComponentFixture } from '@angular/core/testing';

import { By } from '@angular/platform-browser';

import { DebugElement } from '@angular/core';

import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

describe('AppComponent', () => {

  let component: AppComponent;

  let fixture: ComponentFixture<AppComponent>;

  let heroDe: DebugElement;

  let heroEl: HTMLElement;

  beforeEach(async(() => {

    fixture = TestBed.configureTestingModule({

      imports: [AccordionModule],

      declarations: [

        AppComponent

      ]

    }).createComponent(AppComponent);

    component = fixture.componentInstance;

    fixture.detectChanges(); // initial binding

  }));

  it('should render one ejs-accordion', (done: Function) => {

    heroDe = fixture.debugElement.query(By.css('.e-accordion'));

    heroEl = heroDe.nativeElement;

    expect(heroEl.classList.contains('e-accordion')).toBe(true);

    expect(heroEl.tagName === 'EJS-ACCORDION').toBe(true);

    expect(heroEl.classList.contains('e-control')).toBe(true);

    console.log("##############################===>",heroDe)

      done();

  });

  it('should render three e-accordionitem', (done: Function) => {

    const compiled = fixture.debugElement.nativeElement;

    const hits = compiled.querySelectorAll('.e-acrdn-item');

    expect(hits.length).toBe(3);

      done();

  });

  it('should render two headers elements', (done: Function) => {

    const compiled = fixture.debugElement.nativeElement;

    const headers = compiled.querySelectorAll('div.header');

    expect(headers.length).toBe(2);

      done();

  });

  it('should render one content element', (done: Function) => {

    const compiled = fixture.debugElement.nativeElement;

    const content = compiled.querySelectorAll('div.content');

    expect(content.length).toBe(1);

      done();

  });

});

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

Attachment: syncfusionaccordion_c97cecaa.zip

[René Fabel]

Hello  Satheesh Kumar B,

thanks for the code. With done this works and I also find out with fakeAsync() and tick()

I can achieve the same. I added some more tests and code examples. I want to find dynamic rendered html elements (a tags) in the content div. But all tests are failing. 

Can you also take a look at these tests please.
Thanks in advance

René

Attachment: syncfusionaccordion_b9afbaf9.zip

[Satheesh Kumar Balasubramanian]

Hi Rene,

Sorry for the delay caused.

We are able to reproduce the reported issue on our end. We have already confirmed that the issue is a defect and logged a defect report. The fix will be included with our Volume 2 release which is to be rolled out by end of June 2022. You can track the status of this bug using the below link from our feedback portal. We appreciate your patience until then.

Feedback: https://www.syncfusion.com/feedback/24608/ng-template-malfunction-in-karma-unit-test

Please get back to us if you have any queries.

Regards,

Satheesh Kumar B

[René Fabel]

Hello  Satheesh Kumar B,

thank you for your feedback. We will track the issue.

Regards

René

[Satheesh Kumar Balasubramanian]

Hi Rene,

Thanks for the update.

We will let you know once the patch will be published.

Regards,

Satheesh Kumar B

[Theveshwar Jayakumar]

Hi Rene,

 

Sorry for the inconvenience caused.

 

We are unable to complete it as planned. However, we will prioritize and it will be included with our Volume 3 release which is scheduled on the end of September 2022. 

 

We appreciate your patience until then.

 

Regards,

Theveshwar

[Theveshwar Jayakumar]

Hi Rene,

 

We deeply regret for the delay caused.

 

We are glad to announce that our Essential Studio 2022 Volume 3 release v20.3.0.47 is rolled out and is available for download under the following link.

 

https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download

 

The issue with “ng-template-malfunction-in-karma-unit-test” has been resolved and included in this release. You can update to the latest package version (20.3.47) to resolve the issue in your sample.

 

https://ej2.syncfusion.com/angular/documentation/release-notes/20.3.47/?type=all#common

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards, 

Theveshwar