[原文：Faking dependencies in Angular applications](https://dev.to/this-is-angular/faking-dependencies-in-angular-applications-4d2f)

使用 Angular 依賴注入系統的強大功能，我們可以偽造特定的用例。 這對於自動化測試很有用，但在本文中，我們將研究一種將其用於手動測試的方法。

為了讓我們的生活更輕鬆，我們將建立一個瀏覽器偽造元件，由於自定義結構指令，該元件僅在開發模式下啟用。 為了好玩，我們將新增文字管道以在我們的元件模板中使用常見的字串操作。

# Simulating a browser environment

# Dynamically replacing a dependency using a class-based service

使用者代理令牌工廠只對每個模組注入器評估一次，如果它沒有被祖先元件或指令提供的元素注入器替換，我們必須使用另一種技術來偽造依賴項。 我們將使用基於類的服務依賴替換依賴注入令牌依賴。

```typescript
// internet-explorer-11-banner.component.ts
import { Component } from '@angular/core';

import { InternetExplorerService } from './internet-explorer.service';

@Component({
  selector: 'internet-explorer-11-banner',
  templateUrl: './internet-explorer-11-banner.component.html',
})
export class InternetExplorer11BannerComponent {
  private isDismissed = false;

get isBannerVisible() {
    return this.internetExplorer.isInternetExplorer11State && !this.isDismissed;
  }

constructor(
    private internetExplorer: InternetExplorerService,
  ) {}

onDismiss() {
    this.isDismissed = true;
  }
}
```

```typescript
// internet-explorer-service.ts
import { Inject, Injectable } from '@angular/core';

import { userAgentToken } from './user-agent.token';

@Injectable({
  providedIn: 'root',
})
export class InternetExplorerService {
  get isInternetExplorer11State(): boolean {
    return this.isInternetExplorer11(this.userAgent);
  }

constructor(
    @Inject(userAgentToken) private userAgent: string,
  ) {}

isInternetExplorer11(userAgent: string): boolean {
    return /Trident\/7\.0.+rv:11\.0/.test(userAgent);
  }
}
```

首先，我們從依賴注入令牌中提取 Internet Explorer 11 檢測到我們新建立的 InternetExplorerService 類。 Internet Explorer 11 檢測令牌現在在根據使用者代理評估其值時委託給服務。

如前所述，我們不會使用元素注入器在模板中以宣告方式動態替換使用者代理令牌。 相反，我們將強制更改狀態。

# Creating an observable state

下面展示的辦法不使用 userAgent token 的 injection token，而是使用 Observable. 這個 Observable 物件從另一個 Browser service 裡獲得。

```typescript
// internet-explorer.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { BrowserService } from './browser.service';

@Injectable({
  providedIn: 'root',
})
export class InternetExplorerService {
  isInternetExplorer11$: Observable<boolean> =
    this.browser.userAgent$.pipe(
      map(userAgent => this.isInternetExplorer11(userAgent)),
    );

constructor(
    private browser: BrowserService,
  ) {}

isInternetExplorer11(userAgent: string): boolean {
    return /Trident\/7\.0.+rv:11\.0/.test(userAgent);
  }
}
```

browser service 實現裡，還是會使用 user agent injection token：

```typescript
// browser.service.ts

import { Inject, Injectable, OnDestroy } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

import { FakeUserAgent } from './fake-user-agent';
import { userAgentToken } from './user-agent.token';

@Injectable({
  providedIn: 'root',
})
export class BrowserService implements OnDestroy {

// 這體現了 Observable 和 BehaviorSubject 的區別：後者例項化時，需要一個初始值：
  
private userAgent = new BehaviorSubject(this.realUserAgent);

userAgent$ = this.userAgent.pipe(
    distinctUntilChanged(),
  );

constructor(
    @Inject(userAgentToken) private realUserAgent: string,
  ) {}

ngOnDestroy() {
    this.userAgent.complete();
  }

fakeUserAgent(value: FakeUserAgent) {
    this.userAgent.next(FakeUserAgent[value]);
  }

stopFakingUserAgent() {
    this.userAgent.next(this.realUserAgent);
  }
}
```

我們將當前使用者代理狀態儲存在 BehaviorSubject<string> 中，它暴露在 BrowserService 的可觀察 userAgent$ 屬性中。 當整個應用程式需要使用者代理時，它應該依賴於這個 observable。

最初，behavior subject 的初始值來自使用者代理令牌的真實使用者代理字串。 該值也被儲存以備後用，因為我們允許透過兩個命令更改瀏覽器狀態。

我們公開了 fakeUserAgent 方法，該方法將使用者代理狀態設定為假使用者代理字串。 此外，我們允許依賴者呼叫 stopFakingUserAgent 方法，該方法將使用者代理狀態重置為真實的使用者代理字串。

Internet Explorer Service 現在公開一個名為 isInternetExplorer11$ 的可觀察屬性，只要瀏覽器服務的可觀察使用者代理屬性發出值，就會評估該屬性。

> The Internet Explorer service now exposes an observable property called isInternetExplorer11$ which is evaluated whenever the observable user agent property of the browser service emits a value.

我們現在需要的只是讓棄用橫幅元件依賴於可觀察的 Internet Explorer 11 檢測屬性，而不是我們替換的常規屬性。

```html

<aside async="">
  Sorry, we will not continue to support Internet Explorer 11.<br>
  Please upgrade to Microsoft Edge.<br>

<button>
    Dismiss
  </button>
</aside>
```

現在 banner 是否 visible，是由兩個 boolean 值控制了，所以使用 combineLatest.

```typescript
// internet-explorer-11-banner.component.ts
import { Component } from '@angular/core';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

import { InternetExplorerService } from './internet-explorer.service';

@Component({
  host: { style: 'display: block;' },
  selector: 'internet-explorer-11-banner',
  templateUrl: './internet-explorer-11-banner.component.html',
})
export class InternetExplorer11BannerComponent {
  private isDismissed = new BehaviorSubject(false);

isBannerVisible$ = combineLatest(
    this.internetExplorer.isInternetExplorer11$,
    this.isDismissed,
  ).pipe(
    map(([isInternetExplorer11, isDismissed]) =>
      isInternetExplorer11 && !isDismissed),
  );

constructor(
    private internetExplorer: InternetExplorerService,
  ) {}

onDismiss(): void {
    this.isDismissed.next(true);
  }
}
```

在棄用橫幅元件中，我們將 Boolean isDismissed 屬性替換為 BehaviorSubject<boolean> ，該屬性最初被清除（設定為 false）。 我們現在有一個可觀察的 isBannerVisible$ 屬性，它是來自 isDismissed 和 InternetExplorerService#isInternetExplorer11$ 的可觀察狀態的組合。 UI 行為邏輯與之前類似，不同之處在於它現在表示為 observable 管道的一部分。

現在，onDismiss 事件處理程式不再為屬性分配布林值，而是透過 isDismissed 行為主體發出布林值。

此時，應用程式的行為與我們引入 Internet Explorer 服務和瀏覽器服務之前的行為完全相同。 我們有瀏覽器狀態更改命令，但我們需要某種機制來觸發它們。

為此，我們將開發一個瀏覽器偽造器元件，使我們能夠為應用程式的其餘部分偽造瀏覽器環境。

```html

<label>
  Fake a browser

<select>
    <option value="">
      My browser
    </option>

<option browser="" of="" browsers="">
      {{browser | replace:wordStartPattern:' $&' | trim}}
    </option>
  </select>
</label>
```

```typescript
// browser-faker.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

import { BrowserService } from './browser.service';
import { FakeUserAgent } from './fake-user-agent';

@Component({
  host: { style: 'display: block;' },
  selector: 'browser-faker',
  templateUrl: './browser-faker.component.html',
})
export class BrowserFakerComponent implements OnDestroy, OnInit {
  private defaultOptionValue = '';
  private destroy = new Subject<void>();
  private fakeBrowserSelection$: Observable<fakeuseragent>;
  private realBrowserSelection$: Observable<void>;

browsers = Object.keys(FakeUserAgent);
  selectedBrowser = new FormControl(this.defaultOptionValue);
  wordStartPattern = /[A-Z]|\d+/g;

constructor(
    private browser: BrowserService,
  ) {
    this.realBrowserSelection$ = this.selectedBrowser.valueChanges.pipe(
      filter(value => value === this.defaultOptionValue),
      takeUntil(this.destroy),
    );
    this.fakeBrowserSelection$ = this.selectedBrowser.valueChanges.pipe(
      filter(value => value !== this.defaultOptionValue),
      takeUntil(this.destroy),
    );
  }

ngOnInit(): void {
    this.bindEvents();
  }

ngOnDestroy() {
    this.unbindEvents();
  }

private bindEvents(): void {
// 一旦這個 Observable 有事件發生，說明使用者選擇了 fake browser
    this.fakeBrowserSelection$.subscribe(userAgent =>
      this.browser.fakeUserAgent(userAgent));
    this.realBrowserSelection$.subscribe(() =>
      this.browser.stopFakingUserAgent());
  }

private unbindEvents(): void {
    this.destroy.next();
    this.destroy.complete();
  }
}
```
browser faker 元件注入瀏覽器服務。 它有一個繫結到本機 select 控制元件的表單控制元件。 選擇瀏覽器後，我們開始透過瀏覽器服務偽造其使用者代理。 選擇預設瀏覽器選項後，我們會停止偽造使用者代理。

現在我們有一個瀏覽器偽造元件，但我們只希望在開發過程中啟用它。 讓我們建立一個僅在開發模式下有條件地呈現的結構指令。

建立一個 injection token：

```typescript
// is-development-mode.token.ts
import { InjectionToken, isDevMode } from '@angular/core';

export const isDevelopmentModeToken: InjectionToken<boolean> =
  new InjectionToken('Development mode flag', {
    factory: (): boolean => isDevMode(),
    providedIn: 'root',
  });
```

```typescript
// development-only.directive.ts
import {
  Directive,
  Inject,
  OnDestroy,
  OnInit,
  TemplateRef,
  ViewContainerRef,
} from '@angular/core';

import { isDevelopmentModeToken } from './is-development-mode.token';

@Directive({
  exportAs: 'developmentOnly',
  selector: '[developmentOnly]',
})
export class DevelopmentOnlyDirective implements OnDestroy, OnInit {
  private get isEnabled(): boolean {
    return this.isDevelopmentMode;
  }

constructor(
    private container: ViewContainerRef,
    private template: TemplateRef<any>,
    @Inject(isDevelopmentModeToken) private isDevelopmentMode: boolean,
  ) {}

ngOnInit(): void {
    if (this.isEnabled) {
      this.createAndAttachView();
    }
  }

ngOnDestroy(): void {
    this.destroyView();
  }

private createAndAttachView(): void {
    this.container.createEmbeddedView(this.template);
  }

private destroyView(): void {
    this.container.clear();
  }
}
```

![](https://img-blog.csdnimg.cn/img_convert/241a6e56ff29e779b3c53a63ba696564.png)

如果應用程式在開發模式下執行，則此結構指令僅呈現它所附加的元件或元素，正如其測試套件所驗證的那樣。

現在，剩下的就是將棄用橫幅和瀏覽器偽裝器新增到我們的應用程式中。

```html

<browser-faker></browser-faker>
<internet-explorer-11-banner></internet-explorer-11-banner>

URL: <code class=" prettyprint"><browser-url></browser-url></code>
```

最後的效果：選擇 IE 11 時，出現 deprecation 提示：

![](https://img-blog.csdnimg.cn/img_convert/7091fd8d5028d5d7ffce1ff7926450e4.png)

選擇其他瀏覽器時，該提示消失：

![](https://img-blog.csdnimg.cn/img_convert/a517d99a4b74c248755e15084f79e1fd.png)

# Summary

為了能夠模擬使用者環境，我們建立了一個在開發模式下有條件地呈現的瀏覽器偽造元件。 我們將瀏覽器狀態封裝在一個基於類的服務中，並讓應用程式依賴它。 這與瀏覽器偽造者使用的服務相同。

瀏覽器偽造器是在 Angular 應用程式中偽造依賴項的一個簡單示例。 我們討論了動態配置 Angular 依賴注入機制的其他技術。

本文提到的測試程式地址：https://stackblitz.com/edit/testing-and-faking-angular-dependencies-app?file=src%2Fapp%2Fbrowser%2Fbrowser-faker.component.html</any></boolean></void></fakeuseragent></void></boolean></string></boolean>

Angular 應用級別的依賴 Fake

相關文章