iT邦幫忙

0

Angular放上github並套用CircleCI

Leo 2019-11-27 01:08:27359 瀏覽

問題1:
我有一個Angular專案放上github並用CircleCI做Source Code的管理,目前做到的進度是在local branch push上remote後CirCleCI會自動跑Angular test,我想做到控管的方式是,我在本地端分支push上去後,發PR merge進master,如果CI test merge有conflict,則阻擋合併,但好像都是要程式碼有push或是merge才會觸發CI test?請問這個情況可以怎麼解決?

問題2:
我Angular專案有配test,我目前處於全力開發階段,先暫時不管test,只要能build過就好,但我照正常步驟去ng generate東西出來後,正常方式引用各個東西,ng serve也能正常跑專案每個頁面,但跑ng test和ng e2e會有error,是我在ts引入module的話,spec也要引入嗎,請問要怎麼解決?

error:

HeadlessChrome 78.0.3904 (Mac OS X 10.14.6) MajorEntranceGuard should ... FAILED
NullInjectorError: StaticInjectorError(DynamicTestModule)[MajorEntranceGuard -> AngularFireAuth]:
StaticInjectorError(Platform: core)[MajorEntranceGuard -> AngularFireAuth]:
NullInjectorError: No provider for AngularFireAuth!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MajorEntranceGuard', Function ] })
at
at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:855:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30393:1)
at _createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30463:1)
at _createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30426:1)
HeadlessChrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 5 (1 FAILED) (0 secs / 0.07 secs)
HeadlessChrome 78.0.3904 (Mac OS X 10.14.6) MajorEntranceGuard should ... FAILED
NullInjectorError: StaticInjectorError(DynamicTestModule)[MajorEntranceGuard -> AngularFireAuth]:
StaticInjectorError(Platform: core)[MajorEntranceGuard -> AngularFireAuth]:
NullInjectorError: No provider for AngularFireAuth!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MajorEntranceGuard', Function ] })
at
at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:855:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30393:1)
at _createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30463:1)

1 個回答

1
Leo
iT邦新手 4 級 ‧ 2019-11-27 13:51:09
最佳解答

關於問題一:

正常來說,CI 只會測試你發 PR 的最後一筆 commit 是否有通過測試,如果版本有衝突則是在 Github 的介面上就會先擋住不讓你按 merge ,而 hook 的部份本來就是只有當你要抓取的 branch 有新的 commit 時才會觸發 CI ,不太懂你想解決什麼問題,因為就敘述上來看沒啥問題@@

關於問題二:

沒錯, 每個 component.spec 裡的 TestBed.configureTestingModule 是全新、乾淨的 Module ,你需要宣告、引入所有該 component 的所有依賴才會通過測試,除非你把測試全部忽略或註解掉

看更多先前的回應...收起先前的回應...
Leo iT邦新手 5 級 ‧ 2019-11-28 15:46:33 檢舉

問題一經過您的說明我瞭解了!!

問題二:

1.您會建議我先在此階段註解掉測試嗎,或是建議在此時也將unit test一起完成?

2.我該如何在unit test裡宣告與引用component的依賴,網路上不同寫法太多,有點被搞混,附上我的component.ts與附上我的component.spec

component.ts :

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as _firebase from 'firebase/app';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private _router: Router, private _auth: AngularFireAuth) {
  }

  ngOnInit() {
  }

  // Sign In
  signIn = () => {
  }

}

component.spec

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

import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
    })
      .compileComponents();
  }));

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

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

Leo iT邦新手 4 級 ‧ 2019-12-02 11:57:38 檢舉

基本上就是 Component 依賴的所有東西( Component 、 Module 、 Service 等等)都需要 import 進 TestBed.configureTestingModule 裡,如同每個 spec.ts 都是一個全新的 App 一樣。

因此,如果你的 Component 依賴太多東西,那你的 spec.ts 就會寫得很痛苦XD

現階段我是建議你先註解掉或不跑測試,不然你光弄這個就會花掉你大把時間。 XD

Leo iT邦新手 5 級 ‧ 2019-12-10 17:56:48 檢舉

了解!
感謝您的回答!
順帶一提,小弟是看您的文章起手Angular,大神文章寫得非常好!

Leo iT邦新手 4 級 ‧ 2019-12-10 18:24:07 檢舉

非常感謝你不嫌棄!也非常榮幸有幫到你 ^^

我要發表回答

立即登入回答