平常除了用 local server 下 console.log 外，再來就是用 Chrome DevTool 或插件工具進行 debug。新增 debug 效率方法還有好多好多可以學習，像更多的 DevTool 功能應用，或是撰寫測試。

這章想學到什麼？

• 重新思考紀錄與中斷點
• 關於測試想到什麼？Ninja 裡分享的概念跟原理
• 測試的工具有哪些？

程式碼閱讀練習與撰寫

如何使用紀錄與中斷點

• 紀錄

console.log()

//新發現 console 有 group 功能
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();

• 中斷點
  可以使用 watch 工具進行變數的變化關注

debugger;

Google 使用 devTool debug 分享案例：

關於測試想到什麼(無程式碼)

好的測試性質有哪些

• 可重複性
• 簡單性
• 獨立性

測試基礎要件

• 斷言
• 測試群組
• 非同步測試

測試的工具有哪些？

目前查到的：MochaJS、Jest、Jasmine、Karma、Puppeteer(Node Library) 、NightwatchJS、Cypress、AVA、其他好多好多

Ninja 提供的: QUniy、YUI Test、JsUnit

以 Jest 為例

## 斷言
const can = {
  name: 'pamplemousse',
  ounces: 12,
};

describe('the can', () => {
  test('has 12 ounces', () => {
    expect(can.ounces).toBe(12);
  });

  test('has a sophisticated name', () => {
    expect(can.name).toBe('pamplemousse');
  });
});

## 測試群組
describe('describe outer', () => {
  console.log('describe outer-a');

  describe('describe inner 1', () => {
    console.log('describe inner 1');

    test('test 1', () => console.log('test 1'));
  });

  console.log('describe outer-b');

  test('test 2', () => console.log('test 2'));

  describe('describe inner 2', () => {
    console.log('describe inner 2');

    test('test 3', () => console.log('test 3'));
  });

  console.log('describe outer-c');
});

## 非同步測試
test('async test', async () => {
  const asyncMock = jest.fn().mockResolvedValue(43);

  await asyncMock(); // 43
});

憑一口氣，點一盞燈，要知道念念不忘必有迴響，有燈就有人。—— <一代宗師>

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/API/Console
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/debugger
https://codepen.io/iamjpg/pen/jOqRXwd?editors=0010
Jest 文件