測試Component，通常會先建立元件的簡單架構，不會馬上寫style、切版，就只要一個簡單的皮就好。

所以，我們來建立新的元件，稱 user 好了
ng g c user

• 在html寫下簡單的皮，有div, h1, p

<div>
  <h1>User logged in</h1>
  <p>User is: {{ user.name }}</p>
</div>

• 在spec測試，這支spec只要是用command下的 ng g c component-name 預設就會帶出來，測試這顆元件存不存在

describe('Component: User', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [UserComponent]
        });
    });
    
    it('should create the app', () => {
        let fixture = TestBed.createComponent(UserComponent);
        let app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    })
})

• 接著 run ng test，會是pass的，因為是預設建立好的，這邊就不附圖了。

• 在緊接著寫第二個測試

describe('Component: User', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [UserComponent]
        });
    });
    // 第一個test
    it('should create the app', () => {
        let fixture = TestBed.createComponent(UserComponent);
        let app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    });
    // 第二個test
    it('should show login class', () => {
        let fixture = TestBed.createComponent(UserComponent);
        let app = fixture.debugElement.componentInstance;
        expect(fixture.nativeElement.querySelector('[data-test="login"]')).toBeTruthy();
    });
})

• run ng test，會是fail的，因為html還沒有data-test的屬性，所以到html補上

<div data-test="login">
  <h1>User logged in</h1>
  <p>User is: {{ user.name }}</p>
</div>

• 接著在run ng test ，會是pass，就不附圖了

這就稱 red-green test

一開始就是要測出fail，然後補上實做，接著重複這樣的循環，以及重構程式碼

這幾天這樣實做下來，真的有點不太習慣，不知道元件可以測哪些，或是必測的項目有哪些，後來爬文後大概知道會測 (1)class (2)變數 (3) DOM是否有包含特定屬性 (4) function

知道怎麼測上述提到的4個項目，但是導入專案還是沒有概念，雖然入門學習unit test，從元件下手是學習門檻最低的，不過還沒完整的專案可以兜起來，後面介紹完基本的Service, Async, Isolated vs Non-Isolated 後就會開始學習從專案中寫測試了，已經有找到不錯的素材可以學習。

補充 html上的 data-test 是什麼

<div data-test="login">Login</div>

在udemy學習課程中，遇到有用 data-* 的方式當作測試用的屬性，後來爬文查才知道原來是 HTML5的 data-* attribute 屬性，因為在實做的過程中，可能會有客製化的屬性，方便操作或是拿來測試用，所以 HTML5 就有data-* attribute的屬性，也就是為什麼原來平常看別人網頁會出現 data-xxx，但是爬文找不到的原因，==因為是工程師定義的！==

但是，命名也不能亂取MDN有提到要注意：

• 名字絕對不能以 xml 起頭，無論是否用於 xml、
• 名字絕對不能包含分號（U+003A）、
• 名字絕對不能包含大寫 A 到大小 Z 的拉丁字母。

所以，如果要拿來測試用的話，可以試試data-test來測試網頁元素

下一篇，學習Service如何測試