來到 Typescript 測試倒數第二天，今天繼續學習不同的 ts 測試

課程名稱如下：

• Testing Navigation
• Testing Local Storage

元件的 function 變數

我們先來看看，原始元件 typescript 檔案

1. Navigation 元件，這邊主要測試 「Route」，元件內沒有要測試的項目，以 mock 方式寫在 testing-utils
   

2. Local Storage 元件
   

如何測試 Route 和 LocalStorage

來看看，對應的 Spec 檔案，configureTestingModule 一樣取代成測試用的元件

1. Navigation 元件

  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            TestingNavigationComponent
          ],
      }).compileComponents();
  }));

測試案例:分成登入成功後轉到 home，登入未成功則不轉到 home
(1) 使用登入用 service，AuthorisationService，在利用 SpyOn 避免 service被實際使用到，然後回傳 true 假設登入成功的情況。

接著執行 router 轉頁到 home 路徑，因為換頁需要一點點時間，所以用 tick 跳過等待時間，最後預期 router.url 會與 home 路徑相同

(2) 假設登入失敗的情況，所以回傳 false，最後檢查 router.url 不該是 /home

  it('should navigate to the home page if the user is logged in', fakeAsync(() => {
    //Assign
    const router = TestBed.inject(Router);
    const authorisationService = TestBed.inject(AuthorisationService);
    spyOn(authorisationService, 'canActivate').and.returnValue(true); // The user is allowed to navigate

    //Act
    router.navigate(['home']); // try navigating home
    tick(); // Skip ahead to when navigation is complete

    //Assert
    expect(router.url).toBe('/home');
  }));

  it('shouldnt navigate to the home page if the user is not logged in', fakeAsync(() => {
    //Assign
    const router = TestBed.inject(Router);
    const authorisationService = TestBed.inject(AuthorisationService);
    spyOn(authorisationService, 'canActivate').and.returnValue(false); // The user is not allowed to navigate

    //Act
    router.navigate(['home']); // try navigating home
    tick(); // Skip ahead to when navigation is complete

    //Assert
    expect(router.url).not.toBe('/home');
  }));

2. Local Storage 元件
   測試模組取代成要測試用的元件

  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            TestingLocalStorageComponent
          ],
      }).compileComponents();
  }));

localstorage 測試時不是真的將資料存在 local，測試時只是模擬的，那因為有些瀏覽器考量安全性問題，沒有支援存取 localstorage，所以用 javascript prototype 來取得 localstorage 的 instance 來使用。

  it('should save data to local storage', () => {
    //Assign
    const spy = spyOn(Storage.prototype, 'setItem');
    // const spy = spyOn(localStorage, 'setItem'); //doesn't work in Firefox

    //Act
    component.setData();

    //Assert
    expect(spy).toHaveBeenCalledWith('data', 'value');
  });

  it('should load data from local storage', () => {
    //Assign
    const data = "value";
    const spy = spyOn(Storage.prototype, 'getItem').and.returnValue(JSON.stringify(data));
    // const spy = spyOn(localStorage, 'setItem').and.returnValue(JSON.stringify(data)); //doesn't work in Firefox

    //Act
    component.loadData();

    //Assert
    expect(spy).toHaveBeenCalledWith("data");
  })

今日心得

不知道 Neil 實做測試過多少個單元測試，才有這些範例可以分享，在上週才以為單元測試只會測欄位值、UI，沒想到 localstorage 和 route 也可以測試，透過這些簡單的範例，降低想學習擔測試的門檻，期待後面的測試範例。