【工程专题】推行一年最终失败的单元测试

describe("Other components should render correctly", () => {  
    type ComponentsResult = {  
      'thumbnail': 0 | 1,  
      'loading': 0 | 1,  
      'controlButton': 0 | 1,  
      'muteButton': 0 | 1,  
      'duration': 0 | 1  
    }   
		// 对于不同的 video 状态 component 中所有不同的组件的被查找时的期望值  
    let expectResult = {  
      [VideoState.idle]: {'thumbnail': 1, 'loading': 0, 'controlButton': 1, 'muteButton': 0,'duration': 0},  
      [VideoState.loading]:  {'thumbnail': 1, 'loading': 1, 'controlButton': 0, 'muteButton': 0,'duration': 0},  
      [VideoState.ready]:  {'thumbnail': 1, 'loading': 0, 'controlButton': 1, 'muteButton': 0,'duration': 0},  
      [VideoState.playing] :  {'thumbnail': 0, 'loading': 0, 'controlButton': 1, 'muteButton': 1,'duration': 1},  
      [VideoState.paused]:  {'thumbnail': 0, 'loading': 0, 'controlButton': 1, 'muteButton': 1,'duration': 1},  
      [VideoState.buffering]:  {'thumbnail': 0, 'loading': 1, 'controlButton': 0, 'muteButton': 1,'duration': 1},  
    } as {[key: string]: ComponentsResult}  
  
	  // 遍历所有 video 的状态  
    Object.keys(expectResult).forEach(state =>{  
      describe(` when videostate = ${state}`, ()=>{  
        let results: {[key: string]: number} = expectResult[state]  
			// 遍历所有 Component  
        Object.keys(results).forEach(component => {  
				// 测试这些 component 在对应的 videostate 下是否被正确渲染了  
          test(`component = ${component} expectResult = ${results[component]}`, () =>{  
            wrapper.setState({videoState: state as VideoState})  
				// 测试方式: 看是否能查到这个 component  
            expect(wrapper.find({testID:component}).length).toBe(results[component])  
            expect(wrapper).toMatchSnapshot()  
          })  
        })  
      })  
    })  
  })  

test("DiscoverVideo state should correct when onLoadStart", () => {  
    let wrapper = setup()  
    let defaultState = wrapper.state()  
		// 初始化要测试的 Component state  
    let initState: States = {...defaultState, videoControl: VideoControl.play}  
    wrapper.setState(initState)  
    const loadStartState = VideoState.loading  
		// mock 一个内部函数被调用了  
    wrapper.find({testID: 'video'}).simulate('loadStart')  
    // 判断需要变化的 state 是否按预想的变化了  
    expect(wrapper.state().videoState).toEqual(loadStartState)  
     // 进一步判断是否有意料之外的其他state修改  
    expect(wrapper.state()).toEqual({...initState, videoState:loadStartState})  
  })  

test("Update muted should be called When onMutePress", () =>{  
    let wrapper = setup()  
    wrapper.find({testID: 'muteButton'}).simulate('press')  
    expect(wrapper.prop("didMutedUpdated")).toBeCalled()  
})  

it('should create an Action AddHighPriorityAlert', () => {  
      let actions = [{title:"button", action:()=>{}}]  
      let title = "title"  
      let message = "message"  
		 // 将参数写入  
      expect(ActionCreator.addHighPriorityAlert(actions, title,message)).toEqual({  
        type: ActionType.AddHighPriorityAlert,  
        payload: {  
          type: AlertType.normal,  
          title: title,  
          message: message,  
          actions: actions  
        }  
      } as Action.AddHighPriorityAlert)  
    })  

describe('ActionCreator: getDiscoverDatas', () => {  
		// Mock 一个 store  
    const middlewares = [promiseMiddleware]  
    const mockStore = configureMockStore(middlewares)  
    const store = mockStore({  
      discover: discoverInitialState  
    })  
		// mock 指定的请求,并返回我们期望返回的内容  
	  fetchMock.get('www.getHover.com', new Response(JSON.stringify(mockListDatas)))  
  
    it('should create an Action FetchDiscoverList', () => {  
      let {skip, take} = {skip: 0, take: 10}  
		// 判断  getDiscoverDatas Action 被 dispatch 入 store 后是否能拿到期望的返回值  
      store.dispatch(ActionCreator.getDiscoverDatas(skip,take)).then(()=>{  
        expect(store.getActions()[0]).toEqual(mockListDatas)  
      })  
    })  
  })  

it('should handle ADD_HIGH_PRIORITY_ALERT', () => {  
    let actions = [{title:"button", action:()=>{}}]  
    let title = "title"  
    let message = "message"  
		// 创建一个正确的 Action  
    let action: Action.AddHighPriorityAlert = ActionCreator.addHighPriorityAlert(actions, title,message)  
    let expectAlertQueue = alertInitialState.alertQueue.slice()  
    expectAlertQueue.unshift(action.payload)  
	  // 判断这个 Action 被传入 reducer 后是否有正确的返回值  
    expect(alertReducers(alertInitialState, action)).toEqual({  
      ...alertInitialState,  
      alertQueue: expectAlertQueue  
    } as AlertState)  
  )  

it('should return the initial state', () => {  
    expect(alertReducers(alertInitialState,{})).toEqual(alertInitialState)  
})  

test("connect is correctly", () =>{  
		// mock 一个 store  
    let store = mockStore({  
      alert: {  
        isShowAlert: true,  
        alertQueue: [{title: "测试弹窗", message: "测试消息", actions:[{title:"测试按钮", action:()=>{}}]}],  
        showingAlert: {title: "测试弹窗", message: "测试消息", actions:[{title:"测试按钮", action:()=>{}}]}  
      } as AlertState  
    })  
    // mock 一个 container  并为其赋值 mockstore  
    let alertWrapper = shallow(<AlertContainer store={store}/>)  
  
    let alertState = store.getState().alert  
  
	  // 测试 container 的 props 对应了正确的 state  
    expect(alertWrapper.props()).toEqual(expect.objectContaining({  
      isShowAlert: alertState.isShowAlert,  
      alertQueue: alertState.alertQueue,  
      showingAlert: alertState.showingAlert,  
      showAlert: expect.any(Function),  
      hideAlert: expect.any(Function)  
    }))  
  })  

test("props.hideAlert should dispatch HideAlertAction", () =>{  
		// 触发 container.props.function()  
    alertWrapper.props().hideAlert()  
		// 有一个正确的 action 被 dispatch 了  
    expect(store.dispatch).toHaveBeenCalledWith({  
       type: ActionType.HideAlert  
     })  
  })  

test(`***`, ()=>{  
	mockData.contentWidth = testCase.input.width  
	mockData.contentHeight = testCase.input.height  
	expect(discoverList.calculateCellHeight(mockData)).toBe(expectResults[caseName].expect)  
})