Angular放上github並套用CircleCI

angular angularjs github circelci git

里歐 2019-11-27 01:08:27 ‧ 1298 瀏覽

問題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)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Leo

iT邦新手 3 級 ‧ 2019-11-27 13:51:09

最佳解答

關於問題一：

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

關於問題二：

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

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

里歐 iT邦新手 4 級 ‧ 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邦新手 3 級 ‧ 2019-12-02 11:57:38 檢舉

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

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

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

里歐 iT邦新手 4 級 ‧ 2019-12-10 17:56:48 檢舉

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

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

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙