// index.js
function ZcyZooTeam(str) {
  return 'Zcy' + str;
}

// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
  throw Error(`ZcyZooTeam 結果應為${value}, 但實際結果為${result}`);
}

// no-jest.js
function expect(result) {
  return {
    // 用于判斷是否為期望值
    toBe(value) {
      if(result !== value) {
        throw Error(`結果應為${value}, 但實際結果為${result}`);
      }
      console.log('測試通過！');
    }
  }
}

// 執行測試
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');

// no-jest.js
// 再封裝如下方法
function test(msg, fn) {
  try {
    fn();
    console.log(msg + '測試通過！');
  } catch (error) {
    console.log(msg + '測試未通過！' + error);
  }
}

test('測試ZcyZooTeam', () => {
  expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})

npm i jest --save-D

// 初始化 jest 的配置文件
npx jest --init

// 你將在那個環境進行測試，回車即可選擇
// 第一個是 node 環境、第二個是瀏覽器環境
? Choose the test environment that will be used for testing ? - Use arrow-keys. Return to submit.
    node
?   jsdom (browser-like)

// 是否需要 jest 生成測試覆蓋率報告
? Do you want Jest to add coverage reports? ? (y/N)

// 是否需要在測試結束后清除模擬調用
? Automatically clear mock calls and instances between every test? ? (y/N)

// 創建 jest.config.js 文件
??  Configuration file created at /Users/zcy1/Desktop/demo/auto-test-jest-demo/jest.config.js

// .babelrc
// 如果想用 es6 的形式導出，需要使用 babel 插件進行轉換
// @babel/core  @babel/preset-env

// 創建 .babelrc 文件
// 為了在 node 環境下使用 es6 的導出，需要使用 babel 進行轉換
{
  // 設置插件集合
  "presets": [
    // 使用當前插件，可以進行轉換
    // 數組的第二項為插件的配置項
    [
      "@babel/preset-env", {
        // 根據 node 的版本號來結合插件對代碼進行轉換
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

npx jest --coverage

// jest.test.js
test("測試", () => {
  expect(1).toBe(1);  // 通過
  const a = { name: 'Zero' };
  // 因為 a 的引用地址，和 toBe 中對象的引用地址不一致，會導致測試不通過，需要使用其他的匹配器
  expect(a).toBe({ name: 'Zero' });  // 失敗
});

// jest.test.js
test('測試對象相等', () => {
  const a = { name: 'Zero' };
  expect(a).toEqual({ name: 'Zero' });  // 斷言
})

// jest.test.js
test('測試是否為null', () => {
  const a = null;
  expect(a).toBeNull();
})

// jest.test.js
test('測試是否為undefined', () => {
  const a = undefined;
  expect(a).toBeUndefined();
})

// jest.test.js
test('測試變量是否定義過', () => {
  const a = '';
  expect(a).toBeDefined();
})

// jest.test.js
test('測試變量真值', () => {
  const a = '123';
  expect(a).toBeTruthy();
})

// jest.test.js
test('測試變量假值', () => {
  const a = '';
  expect(a).toBeFalsy();
})

// jest.test.js
test('測試變量不是假值', () => {
  const a = '1';
  expect(a).not.toBeFalsy();
})

// jest.test.js
test('是否大于 a 的數字', () => {
  const a = 123;
  expect(a).toBeGreaterThan(1);
})

// jest.test.js
test('是否小于 a 的數字', () => {
  const a = 0;
  expect(a).toBeLessThan(1);
})

// jest.test.js
test('是否大于等于 a 的數字', () => {
  // toBeLessOrEqual 匹配器，與之相反
  const a = 123;
  expect(a).toBeGreaterThanOrEqual(1);
})

// jest.test.js
test('是否大于等于 a 的數字', () => {
  const a1 = 0.1;
  const a2 = 0.2;
  expect(a1 + a2).toBeCloseTo(0.3);
})

// jest.test.js
test('是否包含 day ', () => {
  const a = 'happy every day';
  expect(a).toMatch('day');
})

// jest.test.js
test('數組中是否包含 zoo 這個元素', () => {
  const a = ['zoo', 'ZooTeam', 'Zero'];
  expect(a).toContain('zoo');
})

// jest.test.js
const error = () => {
  throw new Error('error');
}
test('是否存在異常', () => {
  expect(error).toThrow();
})

// getData.js
export const getData = (fn) => {
  axios.get('/getData').then((res) => {
    fn(res.data);
  })
}

// jest.test.js
// 異步調用回調函數需要添加 done 參數，是一個函數
test('getData 返回結果為 { success: true }', (done) => {
  // 此處代碼無效，因為測試用例不會等待請求結束后的回調，測試用例執行完就直接結束了
  // getData1((data) => {
  //   expect(data).toEqual({
  //     success: true
  //   })
  // })
  
  getData1((data) => {
    expect(data).toEqual({
      success: true
    })
    // 需要在結束前調用 done 函數， Jest 會知道到 done 才會結束，才可以正確測試異步函數
    done();
  })
})

// getData.js
export const getData2 = () => {
  return axios.get('http://www.dell-lee.com/react/api/demo.json')
}

// jest.test.js
test('getData 返回結果為 { success: true }', () => {
  // 使用 promise 時需要 return，在 then 中使用 done 也可以
  return getData2().then(res => {
    expect(res.data).toEqual({
      success: true
    })
  })
})

// 測試請求是否 404
test('getData 返回結果為 404', () => {
  // 由于不觸發 catch 就不會走測試校驗，所以會成功，我們需要做一下限制
  // 這行代碼限制下面的代碼中必須要執行一次 expect 方法，如果非 404 就不會走下面的 expect，則測試不會通過
  expect.assertions(1);
  // 使用 promise 時需要 return
  // 如果只想測試 404 這樣寫是有問題的，需要配合 assertions 使用
  return getData2().catch(err => {
    expect(err.toString().indexOf('404') > -1).toBe(true)
  })
})

// 另一種寫法
test('getData 返回結果為 { success: true }', () => {
  // 會返回很多數據，其中包含 data 對象
  // getData2().then((res) => console.log(res))
  // {
  //   status: 200,
  //   statusText: 'OK',
  //   headers: {},
  //   ......
  //   data: { success: true }
  // }
  // resolves 方法會將接口返回的字段全部獲取，再使用 toMatchObject 方法進行匹配大對象中是否存在 data 對象
  return expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})

// 還可以使用 async/await
test('getData 返回結果為 { success: true }', async () => {
  await expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})

// Counter.js
class Counter {
  constructor() {
    this.number = 0;
  }

  add() {
    this.number += 1;
  }

  minus() {
    this.number -= 1;
  }
}

export default Counter;

// jest.test.js
const count = new Counter();
// 使用下方兩種測試方法會互相影響，先加一后減一，結果永遠是 0
test('測試加法', () => {
  count.add();
  expect(count.number).toBe(1);
})

test('測試減法', () => {
  count.minus();
  expect(count.number).toBe(-1);
})

// jest.test.js
let count = null;
// 類似于生命周期
// 會在測試用例執行前運行
beforeAll(() => {
  console.log('beforeAll')
});

// 會在每個測試用例執行前執行一次，這樣就會解決上面互相影響的問題
beforeEach(() => {
  console.log('beforeEach')
  count = new Counter();
});

// 會在每個測試用例執行后執行一次
afterEach(() => {
  console.log('afterEach')
});

// 會在所有測試用例結束后運行
afterAll(() => {
  console.log('afterAll');
});

test('測試加法', () => {
  console.log('add')
  count.add();
  expect(count.number).toBe(1);
})

test('測試減法', () => {
  console.log('minus')
  count.minus();
  expect(count.number).toBe(-1);
})

// jest.test.js
let count = null;
// describe 方法，可以將測試用例進行分組，更加好維護同類型功能的測試用例
describe('count 測試', () => {
  beforeAll(() => {
    console.log('beforeAll')
  });
  beforeEach(() => {
    console.log('beforeEach')
    count = new Counter();
  });
  afterEach(() => {
    console.log('afterEach')
  });
  afterAll(() => {
    console.log('afterAll');
  });
  
  // 將 add 類型進行分組
  describe('測試 add 類型用例', () => {
    // 在 describe 方法中，鉤子函數會按照層級嵌套進行執行，先執行外部，再執行內部，不同的 describe 互不干擾
    beforeEach(() => {
      console.log('beforeEach add');
    });
    test('測試加法', () => {
      console.log('add')
      count.add();
      expect(count.number).toBe(1);
    })
  })

  // 將 minus 類型進行分組
  describe('測試 minus 類型用例', () => {
    test('測試減法', () => {
      console.log('minus')
      count.minus();
      expect(count.number).toBe(-1);
    })
  })
})

// mock.js
export const runFn = (fn) => {
  fn(123);
}

// mock.test.js
test('測試 runFn', () => {
  // 通過 jest 的 fn 方法創建一個模擬函數，如果不傳參數會默認生成一個函數
  // 1. 通過 func.mock 獲取想要的值
  // 2. 可以自定義返回值
  // 3. 改變內部函數的實現，模擬接口請求，不請求代碼中的接口
  const func = jest.fn( () => 456 );

  // 還可以使用 mockReturnValueOnce 方法進行控制輸出，兩種方法都使用時會覆蓋 fn 方法中的返回值，支持鏈式調用
  // 將 Once 去掉與 fn 方法一樣，多次會返回相同的值
  func.mockReturnValueOnce('zoo')

  // 返回 this 方法 mockReturnThis
  func.mockReturnThis();

  // 還可以使用 mockImplementation 方法書寫函數內部，可以在函數內部寫邏輯，與 jest.fn 方法的參數一樣，還可以填加 Once
  func.mockImplementation(() => {
    return '123';
  })

  // 執行被測函數
  runFn(func);
  runFn(func);
  
  // console.log(func.mock)
  // 因為被調用了兩次，所以長度都是 2
  // {
  //   calls: [ [123], [123] ],  // 每次的調用情況，傳遞的參數是什么
  //   instances: [ undefined, undefined ],  // 每次調用的 this 指向，被調用了幾次
  //   invocationCallOrder: [ 1, 2 ],  // 執行順序，可能會傳入同一個或多個方法中，需要記錄一下順序
  //   results: [  // mock 函數每次執行后的返回值
  //     { type: 'return', value: 456 },
  //     { type: 'return', value: 456 }
  //   ]
  // }

  // 通過 toBeCalled 判斷函數是否被調用
  expect(func).toBeCalled();

  // 判斷當前函數調用了幾次 被調用了兩次
  expect(func.mock.calls.length).toBe(2);

  // 判斷參數是什么
  expect(func.mock.calls[0]).toEqual([123]);

  // 判斷每次調用的時候參數是什么
  expect(func).toBeCalledWith(123);

  // 判斷返回值
  expect(func.mock.results[0].value).toBe('zoo');
})

// mocker.test.js
// 使用 mock 方法引用 __mocks__ 下創建的 mock.js
jest.mock("./mock");
// 執行完上面的方法，會直接尋找 __mocks__ 下的getData，而不是正常的請求文件
// 由于 mock 中沒有 getCode 方法，最好只 mock 異步函數，同步函數直接測試即可
// 可以不必須創建 __mocks__ 文件夾
import {
  getData,
} from "./mock";

// 需要使用下面的 requireActual 方法來引用非 mock 文件夾下的 getCode
const { getData } = jest.requireActual("./mock");

// 高階mock
// 此處直接使用 __mocks__ 目錄下的 mock 文件中的函數
test("測試 getData", () => {
  return getData().then((data) => {
    expect(eval(data)).toEqual("123");
  });
});

// mock.js
export const timer = (fn) => {
  setTimeout(() => {
    fn();
    setTimeout(() => {
      fn();
    }, 3000)
  }, 3000)
}

// mock-timers.test.js
import { timer } from './mock';

// 使用 useFakeTimers 方法告知 Jest 在下面的測試用例，如果用到了定時器異步函數的時候，都是用假的 timers 進行模擬
jest.useFakeTimers();

test('測試 timer', () => {
  const fn = jest.fn();
  timer(fn);

  // 使用 runAllTimers 方法，讓定時器立即執行，和 useFakeTimers 配合使用
  jest.runAllTimers();

  // 如果代碼中有多個定時器嵌套，只想測試最外層的定時器，則需要使用 runOnlyPendingTimers 方法
  // 這個方法會只執行當前在隊列中的函數，可以多次調用
  jest.runOnlyPendingTimers();
  jest.runOnlyPendingTimers();

  // advanceTimersByTime 方法，可以快進時間
  // 因為 timer 中，三秒后只執行了第一層，如果是六秒，則會執行兩次 fn
  jest.advanceTimersByTime(3000);
})

// snapshot.js
export const config1 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date()
  }
}

export const config2 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date().getTime()
  }
}

// snapshot.test.js
import { config1, config2 } from "./snapshot";

test('測試 config1 返回值', () => {
  // 但如果每次函數修改的時候，當前測試用例也要不斷地修改
  // expect(config()).toEqual({
  //   method: 'GET',
  //   url: '/api'
  // });

  // 需要使用快照匹配 toMatchSnapshot 方法
  // 此方法會生成一個 __snapshots__ 目錄，下面的文件中，第一次執行中 config 生成的結果會存到快照文件中
  // 快照會根據 test 方法中的描述生成一個映射關系
  // 修改后的 config 的執行結果與快照中的結果不同時會報錯，需要更新快照
  // 如果 config 中有的值是每次運行都會變化的，那么每次快照都不會與當前執行相同，除非執行后再更新快照
  // 需要將在 toMatchSnapshot 方法中傳遞一個參數，設置一下 time 為任意格式的 Date 類型
  expect(config1()).toMatchSnapshot({
    time: expect.any(Date)
  });
})

test('測試 config2 返回值', () => {
  expect(config2()).toMatchSnapshot({
    time: expect.any(Number)
  });
})

// snapshot.test.js
// 需要安裝 prettier
test("測試 config2 返回值", () => {
  // toMatchInlineSnapshot 方法，將執行快照放到行內中，會放到 toMatchInlineSnapshot 方法中
  expect(config2()).toMatchInlineSnapshot(
    {
      time: expect.any(Number)
    },
    `
    Object {
      "method": "GET",
      "time": Any<Number>,
      "url": "/api",
    }
  `
  );
});

// dom.js
import $ from 'jquery';
const addDiv = () => {
  // jQuery
  $('body').append('<div/>');
}

export default addDiv;

// dom.test.js
import addDiv from './dom';
import $ from 'jquery';

test('測試 addDiv', () => {
  addDiv();
  addDiv();
  console.log($('body').find('div').length);

  // 測試dom
  expect($('body').find('div').length).toBe(2);
  expect(document.getElementsByTagName('div').length).toBe(2);
})

module.exports = {
  // 檢測從哪個目錄開始，rootDir 代表根目錄
  roots: ["<rootDir>/src"],

  // 代碼測試覆蓋率通過分析那些文件生成的，!代表不要分析
  collectCoverageFrom: [
    // src 下所有 js jsx ts tsx 后綴的文件
    "src/**/*.{js,jsx,ts,tsx}",

    // src 下所有 .d.ts 后綴的文件
    "!src/**/*.d.ts"
  ],

  // 運行測試之前，我們額外需要準備什么
  setupFiles: ["react-app-polyfill/jsdom"],

  // 當測試環境建立好后，需要做其他事情時可以引入對應的文件
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],

  // 哪些文件會被認為測試文件
  testMatch: [
    // src 下的所有 __tests__ 文件夾中的所有的 js jsx ts tsx 后綴的文件都會被認為是測試文件
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",

    // scr 下的所有一 .test/spec.js/jsx/ts/tsx 后綴的文件都會被認為是測試文件
    "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
  ],

  // 測試運行的環境，會模擬 dom
  testEnvironment: "jsdom",

  // 測試文件中引用一下后綴結尾的文件會使用對應的處理方式
  transform: {
    // 如果引用的是 js jsx mjs cjs ts tsx 后綴的文件會使用 /config/jest/babelTransform.js 文件進行處理
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",

    // 如果引用的是 css 后綴的文件，會使用 /config/jest/cssTransform.js 文件處理
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

    // 不是以 js jsx mjs cjs ts tsx css json 這些為后綴的文件會使用 /config/jest/fileTransform.js 文件進行處理
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
      "<rootDir>/config/jest/fileTransform.js",
  },

  // 忽略 transform 配置轉化的文件
  transformIgnorePatterns: [
    // node_modules 目錄下的 js jsx mjs cjs ts tsx 后綴的文件都不需要轉化
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",

    // .module.css/sass/scss 后綴的文件都不需要轉化
    "^.+\\.module\\.(css|sass|scss)$",
  ],

  // 自動化測試時，應用的模塊應該從哪里尋找，默認是在 node_modules
  modulePaths: [],

  // 模塊名字使用哪種工具進行映射
  moduleNameMapper: {
    // 針對于 native 移動端
    // "^react-native$": "react-native-web",

    // 將 .module.css/sass/scss 模塊使用 identity-obj-proxy 工具進行轉化
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  },

  // 引入模塊時，進行自動查找模塊類型，逐個匹配
  moduleFileExtensions: [
    "web.js",
    "js",
    "web.ts",
    "ts",
    "web.tsx",
    "tsx",
    "json",
    "web.jsx",
    "jsx",
    "node",
  ],

  // 監聽插件
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],

  // 重置 mock
  resetMocks: true,
};