fix: npm warnings

Author: rmlzy

Diff for: karma.conf.js

@@ -19,7 +19,7 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      clearContext: true, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
       suppressAll: true, // removes the duplicated traces
@@ -35,7 +35,14 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ["Chrome"],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: "ChromeHeadless",
+        flags: ["--no-sandbox"],
+      },
+    },
     singleRun: false,
     restartOnFileChange: true,
+    browserNoActivityTimeout: 1000 * 60, // (Default: 10000)
   });
 };

Diff for: package-lock.json

@@ -28,7 +28,7 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.10",
+    "@angular-devkit/build-angular": "^0.1102.12",
     "@angular/cli": "~11.2.10",
     "@angular/compiler-cli": "~11.2.11",
     "@types/echarts": "^4.1.8",

Diff for: package.json

@@ -1,24 +1,35 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { ExampleComponent } from "./example.component";
 
 describe("ExampleComponent", () => {
-  let component: ExampleComponent;
-  let fixture: ComponentFixture<ExampleComponent>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ExampleComponent],
     }).compileComponents();
   });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExampleComponent);
-    component = fixture.componentInstance;
+  it("should className correct", () => {
+    const fixture = TestBed.createComponent(ExampleComponent);
+    const cmpt = fixture.debugElement.query(By.css(".example"));
     fixture.detectChanges();
+    expect(cmpt).toBeTruthy();
   });
 
-  it("should create", () => {
-    expect(component).toBeTruthy();
+  it("should theme work", () => {
+    const fixture = TestBed.createComponent(ExampleComponent);
+    const cmpt = fixture.debugElement.query(By.css(".is-dark"));
+    const cmptIns = fixture.componentInstance;
+    cmptIns.theme = "dark";
+    fixture.detectChanges();
+    expect(cmpt).toBeTruthy();
   });
 });
+
+@Component({
+  template: `<example>
+    <h1>H1</h1>
+  </example>`,
+})
+class TestExampleComponent {}

Diff for: src/app/components/example/example.component.spec.ts

@@ -1,10 +1,11 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
 
 @Component({
-  // tslint:disable-next-line:component-selector
   selector: "div[example]",
   templateUrl: "./example.component.html",
   styleUrls: ["./example.component.less"],
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None,
 })
 export class ExampleComponent implements OnInit {
   @Input() theme = "light";

Diff for: src/app/components/example/example.component.ts

@@ -1,24 +1,18 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
+import { By } from "@angular/platform-browser";
+import { TestBed } from "@angular/core/testing";
 import { NzFooterBarComponent } from "./nz-footer-bar.component";
 
 describe("NzFooterBarComponent", () => {
-  let component: NzFooterBarComponent;
-  let fixture: ComponentFixture<NzFooterBarComponent>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [NzFooterBarComponent],
     }).compileComponents();
   });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NzFooterBarComponent);
-    component = fixture.componentInstance;
+  it("should className correct", () => {
+    const fixture = TestBed.createComponent(NzFooterBarComponent);
     fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
+    const cmpt = fixture.debugElement.query(By.css(".nz-footer-bar")).nativeElement;
+    expect(cmpt).toBeTruthy();
   });
 });

Diff for: src/app/components/nz-footer-bar/nz-footer-bar.component.spec.ts

@@ -0,0 +1,39 @@
+import { CommonModule } from "@angular/common";
+import { DebugElement, NgModule, NO_ERRORS_SCHEMA, Type } from "@angular/core";
+import { ComponentFixture, TestBed, TestBedStatic } from "@angular/core/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
+type ComponentBedOptions = Pick<NgModule, "providers" | "declarations" | "imports">;
+export interface ComponentBed<T> {
+  bed: TestBedStatic;
+  fixture: ComponentFixture<T>;
+  nativeElement: HTMLElement;
+  debugElement: DebugElement;
+  component: T;
+}
+export function createComponentBed<T>(
+  component: Type<T>,
+  options: ComponentBedOptions = {
+    providers: [],
+    declarations: [],
+    imports: [],
+  }
+): ComponentBed<T> {
+  const { imports, declarations, providers } = options;
+  const config = {
+    imports: [NoopAnimationsModule, CommonModule, ...(imports || [])],
+    declarations: [component, ...(declarations || [])],
+    schemas: [NO_ERRORS_SCHEMA],
+    providers: providers || [],
+  };
+  const bed = TestBed.configureTestingModule(config);
+  const fixture = TestBed.createComponent<T>(component);
+  fixture.detectChanges();
+  return {
+    bed,
+    fixture,
+    nativeElement: fixture.nativeElement,
+    debugElement: fixture.debugElement,
+    component: fixture.componentInstance,
+  };
+}