Event Binding (2/2)

Overview

另外一個常用的 event binding 就是將 <select>change event 綁定到 class 的 method,針對 user 的選擇加以處理。

Version

Angular CLI 1.2.6
Angular 4.3.3  

User Story

畫面有一個下拉選單。
下拉選單內有 AWSAzureAliyun 三個值。
當選擇 AWS 時,在下方顯示 0
當選擇 Azure 時,在下方顯示 1
當選擇 Aliyun 時,在下方顯示 2

驗收測試 (紅燈)

測試案例
  1. 下拉選單應該有 3 個選項
  1. 選擇 AWS 時,下方應該出現 0
  1. 選擇 Azure 時,下方應該出現 1
  1. 選擇 Aliyun 時,下方應該出現 2

e2e/app.e2e-spec.ts
import { NG43ATDDSelectPage } from './app.po';

describe('NG43ATDDSelect', () => {
  let page: NG43ATDDSelectPage;

  beforeEach(() => {
    page = new NG43ATDDSelectPage();
  });

  it(`should have 3 options in select`, () => {
    page.navigateTo();
    expect(page.getSelectCount()).toBe(3);
  });

  it(`should show '0' when selecting 'AWS' `, () => {
    page.navigateTo();
    page.select('AWS');

    expect(page.getSelectedId()).toBe('0');
  });