Remove C8Y warnings from Jest tests

,
1

I am trying to incorporate Jest unit testing in a web application built with C8Y CLI v. 1016.0.324.

I have written an initial test on a component called the LiveDashboardComponent that uses two services: LiveDashBoardService and the FormBuilder. The LiveDashboardService, in turn, is injected with Cumulocity’s own MeasurementService.

I have setup my spec file as follows:

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NO_ERRORS_SCHEMA } from '@angular/compiler';

import { LiveDashboardComponent } from '../../app/live-dashboard/live-dashboard.component';
import { LiveDashboardService } from '../../app/live-dashboard/live-dashboard.service';
import { MeasurementService } from '@c8y/client';

describe('LiveDashboardComponent', () => {
    let component: LiveDashboardComponent;
    let fixture: ComponentFixture<LiveDashboardComponent>;
    let mockDashboardService: LiveDashboardService;
    let mockFormBuilder: FormBuilder;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule,
            ],
            declarations: [
                LiveDashboardComponent,
            ],
            providers: [    
                LiveDashboardService,
                FormBuilder,
                MeasurementService
            ],
            schemas: [
                NO_ERRORS_SCHEMA
            ]
        }).compileComponents();
    })

    beforeEach(() => {
        fixture = TestBed.createComponent(LiveDashboardComponent);
        component = fixture.componentInstance;
        mockDashboardService = fixture.debugElement.injector.get(LiveDashboardService);
        mockFormBuilder = fixture.debugElement.injector.get(FormBuilder);
    })

    afterEach(() => {
        jest.clearAllMocks();
    })
    
    describe('ngOnInit', () => {
        describe('getDays', () => {
            it('should call the method getDays once', () => {
                const spy1 = jest.spyOn(mockDashboardService, 'getDays').mockImplementation(() => null);
    
                component.getDays();
    
                expect(spy1).toBeCalledTimes(1);
            })
            it
        })
    }) 
})

The tests pass, but the compiler returns warnings signs because it cannot recognize the C8Y component <c8y-title> as a regular Angular component.

> marketing-demo@1016.0.324 test:coverage
> jest --coverage

 PASS  ./app.module.spec.ts
 PASS  src/test/live-dashboard.component/live-dashboard.component.spec.ts
  ● Console

    console.error
      NG0304: 'c8y-title' is not a known element (used in the 'LiveDashboardComponent' component template):
      1. If 'c8y-title' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
      2. If 'c8y-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

      at validateElementIsKnown (node_modules/@angular/core/fesm2020/core.mjs:10449:25)
      at elementStartFirstCreatePass (node_modules/@angular/core/fesm2020/core.mjs:14471:9)
      at ɵɵelementStart (node_modules/@angular/core/fesm2020/core.mjs:14509:9)
      at LiveDashboardComponent_Template (ng:/LiveDashboardComponent.js:18:9)
      at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:11835:9)
      at renderView (node_modules/@angular/core/fesm2020/core.mjs:11635:13)
      at renderComponent (node_modules/@angular/core/fesm2020/core.mjs:12840:5)
      at renderChildComponents (node_modules/@angular/core/fesm2020/core.mjs:11494:9)

-|---------|----------|---------|---------|------------------- | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-|---------|----------|---------|---------|------------------- |   18.28 |        0 |    6.38 |   18.29 |
  |     100 |      100 |     100 |     100 |
  |   14.28 |        0 |    5.55 |    14.7 | 89-130,141-652

  |   43.75 |      100 |    9.09 |      40 | 130-209

-|---------|----------|---------|---------|-------------------
Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        5.713 s
Ran all test suites.

Is there a way to solve this error or, if it’s not an error, is there a way I can hide these messages from the compiler?

2

Hi Lucas,

like the error suggest, you have the following two options:

1. If 'c8y-title' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'c8y-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

You can either just add the CoreModule to the imports within TestBed.configureTestingModule or you add CUSTOM_ELEMENTS_SCHEMA to the schemas like you did with NO_ERRORS_SCHEMA already.

Regards,
Tristan

3

Hi Tristan,

I had tried solution 2, but the problem persisted.

When I try the first solution, the application requires me to add the following modules:

  • AppStateService
  • ApplicationService
  • FetchClient

Afterwhich, when I run the application, I get a new error:

    NG0204: Can't resolve all parameters for FetchClient: (?, ?).

      40 |
      41 |     beforeEach(() => {
    > 42 |         fixture = TestBed.createComponent(LiveDashboardComponent);
         |                           ^
      43 |         component = fixture.componentInstance;
      44 |         mockDashboardService = fixture.debugElement.injector.get(LiveDashboardService);
      45 |     })
4

Hi @Tristan_Bastian, I am not sure if you had checked my reply to your original reply.

5

Hi Lucas,

please try importing CoreModule.forRoot() instead. This should include the services that you’ve been missing.

Regards,
Tristan