@angular/core#NO_ERRORS_SCHEMA TypeScript Examples

@NgModule({
  declarations: [
    AdWrapperComponent
  ],
  imports: [
    NativeScriptCommonModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  exports: [
    AdWrapperComponent
  ]
})
export class AdWrapperModule { }

describe('AboutUsComponent', () => {
    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [AboutUsComponent],
            providers: [{ provide: Title, useClass: MockTitle }],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .createComponent(AboutUsComponent);
        fixture.detectChanges(); // initial binding
    });

    it('should have skyblue <h2>', () => {
        const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
        const bgColor = h2.style.backgroundColor;
        expect(bgColor).toBe('skyblue');
    });
});

describe("Shallow test: ExpensesComponent", () => {
  let fixture: ComponentFixture<ExpensesComponent>;
  let component: ExpensesComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        ExpensesComponent,
        ForRolesDirective, // NO_ERRORS_SCHEMA doesn't work for directives (they NEED to be declared)
      ],
      imports: [HttpClientModule],
      providers: [
        { provide: MatDialog, useValue: {} },
        { provide: MatSnackBar, useValue: {} },
        { provide: CacheService, useValue: {} },
        { provide: ExpensesService, useValue: {} },
        { provide: ExpenseCategoriesService, useValue: {} },
        { provide: AuthService, useValue: {} },
        { provide: AUTH_STRATEGY, useValue: {} },
      ],
      schemas: [NO_ERRORS_SCHEMA],
    });
    fixture = TestBed.createComponent(ExpensesComponent);
    component = fixture.componentInstance;
  });

  it("creates the component", () => {
    expect(component).toBeTruthy();
  });
});

@NgModule({
  declarations: [CloudflareStreamComponent],
  // Necessaary because we render a <stream /> element
  // and Angular will refuse to render this non-standard
  // element unless we use this.
  schemas: [NO_ERRORS_SCHEMA],
  providers: [{ provide: DocumentWrapper, useFactory: getDocumentWrapper }],
  imports: [],
  exports: [CloudflareStreamComponent],
})
export class CloudflareStreamModule {}

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

describe('AppComponent (initial CLI version)', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent, ],
      imports: [ RouterTestingModule ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  it('should create the app', waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  }));

});

describe('SumUpPageIllustrationComponent', () => {
  let component: PublishPageIllustrationComponent
  let fixture: ComponentFixture<PublishPageIllustrationComponent>

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PublishPageIllustrationComponent],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents()
  })

  beforeEach(() => {
    fixture = TestBed.createComponent(PublishPageIllustrationComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it('should create', () => {
    expect(component).toBeTruthy()
  })
})

describe('CardComponent', () => {
    let fixture: ComponentFixture<TestHostComponent>;
    let hostComponent: TestHostComponent;
    let hostComponentDE: DebugElement;
    let hostComponentNE: Element;

    let component: CardComponent;
    let componentDE: DebugElement;
    let componentNE: Element;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHostComponent, CardComponent],
            imports: [NoopAnimationsModule],
            providers: [],
            schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();

        fixture = TestBed.createComponent(TestHostComponent);
        hostComponent = fixture.componentInstance;
        hostComponentDE = fixture.debugElement;
        hostComponentNE = hostComponentDE.nativeElement;

        componentDE = hostComponentDE.children[0];
        component = componentDE.componentInstance;
        componentNE = componentDE.nativeElement;

        fixture.detectChanges();
    });

    it('should display the component', () => {
        expect(hostComponentNE.querySelector('sb-card')).toEqual(jasmine.anything());
    });
});

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    RouterModule,
    MatButtonModule,
    MatDialogModule,
    MatIconModule,
    MatTooltipModule,
  ],
  declarations: [
    HeaderComponent,
    FooterComponent,
    LayoutWrapperComponent,
    SectionBadgesComponent,
    SectionActionsComponent,
    PromptDialog,
  ],
  exports: [
    LayoutWrapperComponent,
    SectionBadgesComponent,
    SectionActionsComponent,
    PromptDialog,
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class LayoutModule {}

describe('DocsComponent', () => {
  let component: DocsComponent;
  let fixture: ComponentFixture<DocsComponent>;
  let activatedRouteStub = new ActivatedRoute();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DocsComponent ],
      imports: [
        AppRoutingModule
      ],
      schemas: [ NO_ERRORS_SCHEMA ],
      providers: [
        { value: ActivatedRoute, useValue: activatedRouteStub }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DocsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('no page route parameter, redirects to default page', () => {
    const result = component.markdownPagePath$;

    expect(result).toContain(component.defaultPage);
  });
});

describe("NgxMatTimepicker24HoursFaceComponent", () => {
    let fixture: ComponentFixture<NgxMatTimepicker24HoursFaceComponent>;
    let component: NgxMatTimepicker24HoursFaceComponent;

    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [NgxMatTimepicker24HoursFaceComponent],
            schemas: [NO_ERRORS_SCHEMA]
        }).createComponent(NgxMatTimepicker24HoursFaceComponent);

        component = fixture.componentInstance;
    });

    it("should call disableHours", () => {
        const spy = spyOn(NgxMatTimepickerUtils, "disableHours");
        const time = DateTime.fromJSDate(new Date());
        const format = 24;
        const hours = NgxMatTimepickerUtils.getHours(format);

        component.minTime = time;
        component.maxTime = time;
        component.format = format;
        component.hoursList = hours;

        component.ngAfterContentInit();
        expect(spy).toHaveBeenCalledWith(hours, {min: time, max: time, format});
    });
});

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'college-web'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('college-web');
  });

  // TODO: Need to fix this test cases.
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    // expect(compiled.querySelector('body > app-root > div > div > div.col-md-9.ml-sm-auto.col-lg-10.px-4 > app-dashboard > h1').innerText).toContain('College Dashboard');
  });

});

describe('Login Page', () => {
  let fixture: ComponentFixture<LoginFormComponent>;
  let instance: LoginFormComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [LoginFormComponent],
      schemas: [NO_ERRORS_SCHEMA],
    });

    fixture = TestBed.createComponent(LoginFormComponent);
    instance = fixture.componentInstance;
  });

  it('should compile', () => {
    fixture.detectChanges();

    /**
     * The login form is a presentational component, as it
     * only derives its state from inputs and communicates
     * externally through outputs. We can use snapshot
     * tests to validate the presentation state of this component
     * by changing its inputs and snapshotting the generated
     * HTML.
     *
     * We can also use this as a validation tool against changes
     * to the component's template against the currently stored
     * snapshot.
     */
    expect(fixture).toMatchSnapshot();
  });

  it('should disable the form if pending', () => {
    instance.pending = true;

    fixture.detectChanges();

    expect(fixture).toMatchSnapshot();
  });

  it('should display an error message if provided', () => {
    instance.errorMessage = 'Invalid credentials';

    fixture.detectChanges();

    expect(fixture).toMatchSnapshot();
  });

  it('should emit an event if the form is valid when submitted', () => {
    const credentials = {
      username: 'user',
      password: 'pass',
    };
    instance.form.setValue(credentials);

    spyOn(instance.submitted, 'emit');
    instance.submit();

    expect(instance.submitted.emit).toHaveBeenCalledWith(credentials);
  });
});

describe('MapViewComponent', () => {
  let component: DataImportValidationMapPanelComponent
  let fixture: ComponentFixture<DataImportValidationMapPanelComponent>

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UtilI18nModule, TranslateModule.forRoot()],
      declarations: [DataImportValidationMapPanelComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { params: of({ id: 1 }) },
        },
      ],
    }).compileComponents()
  })

  beforeEach(() => {
    fixture = TestBed.createComponent(DataImportValidationMapPanelComponent)
    component = fixture.componentInstance
    component.headerLabel = 'title'
    component.geoJson = {
      type: 'Feature',
      properties: {
        id: '0',
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [100.0, 0.0],
            [101.0, 0.0],
            [101.0, 1.0],
            [100.0, 1.0],
            [100.0, 0.0],
          ],
        ],
      },
    }

    fixture.detectChanges()
  })

  it('should create', () => {
    expect(component).toBeTruthy()
  })

  it('should display head title', () => {
    const el = fixture.debugElement.query(By.css('.header-label')).nativeElement
    expect(el.textContent).toEqual(' title ')
  })
})

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptHttpClientModule, AppRoutingModule],
  declarations: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}