import React from 'react' ; import { mount } from 'enzyme' ; import { RcThemeProvider } from '@ringcentral/juno' ; import { BasicSessionPanel , BasicSessionPanelProps } from './BasicSessionPanel' ; let wrapper ; const currentLocale = 'en-US' ; const defaultSkillProfileList = [ { profileId : '1001' , profileName : 'Work' , isDefault : '1' , profileDesc : 'like to work' } , { profileId : '1002' , profileName : 'eat' , isDefault : '1' , profileDesc : 'fat man' } , { profileId : '1003' , profileName : 'play' , isDefault : '1' , profileDesc : 'like to work' } , ] ; const defaultLoginTypeList = [ { label : 'externalPhone' , id : '101' } , { label : 'externalPhone2' , id : '102' } , ] ; function setup ( { selectedSkillProfileId = '1002' , skillProfileList = defaultSkillProfileList , setSkillProfileId = ( ) => { } , loginTypeList = defaultLoginTypeList , loginType = '102' , setLoginType = ( ) => { } , extensionNumber = '' , setExtensionNumber = ( ) => { } , autoAnswer = true , setAutoAnswer = ( ) => { } , inboundQueuesFieldText = '' , isExtensionNumber = false , searchOption , inboundQueues = [ ] , submitInboundQueues , getAssignedInboundQueues = ( ) => [ ] , isAllAssign = ( ) => true , isSeveralAssign = ( ) => false , checkBoxOnChange , allCheckBoxOnChange , showInboundQueues = true , showSkillProfile = true , showAutoAnswer = true , } ) { return mount ( < RcThemeProvider > < BasicSessionPanel currentLocale = { currentLocale } selectedSkillProfileId = { selectedSkillProfileId } skillProfileList = { skillProfileList } setSkillProfileId = { setSkillProfileId } loginTypeList = { loginTypeList } loginType = { loginType } setLoginType = { setLoginType } extensionNumber = { extensionNumber } setExtensionNumber = { setExtensionNumber } autoAnswer = { autoAnswer } setAutoAnswer = { setAutoAnswer } inboundQueuesFieldText = { inboundQueuesFieldText } isExtensionNumber = { isExtensionNumber } searchOption = { searchOption } inboundQueues = { inboundQueues } submitInboundQueues = { submitInboundQueues } getAssignedInboundQueues = { getAssignedInboundQueues } isAllAssign = { isAllAssign } isSeveralAssign = { isSeveralAssign } checkBoxOnChange = { checkBoxOnChange } allCheckBoxOnChange = { allCheckBoxOnChange } showInboundQueues = { showInboundQueues } showSkillProfile = { showSkillProfile } showAutoAnswer = { showAutoAnswer } / > < /RcThemeProvider>); } afterEach ( async ( ) => { wrapper . unmount ( ) ; } ) ; describe ( '<BasicSessionPanel />' , ( ) => { it ( 'Can display extensionNumber correctly, and can be changed.' , ( ) => { const setExtensionNumber = jest . fn ( ) ; const extensionNumber = '65787344333' ; wrapper = setup ( { setExtensionNumber , extensionNumber , isExtensionNumber : true } ) ; const extensionNumberFieldFn = ( ) => wrapper . find ( 'input[data-sign="extensionNumber"]' ) . at ( 0 ) ; const extensionNumberField = extensionNumberFieldFn ( ) ; expect ( extensionNumberField . prop ( 'value' ) ) . toEqual ( extensionNumber ) ; const newExtensionNumber = '65787344366' ; extensionNumberField . simulate ( 'change' , { target : { value : newExtensionNumber } } ) ; expect ( setExtensionNumber ) . toBeCalledWith ( newExtensionNumber ) ; wrapper = setup ( { setExtensionNumber , extensionNumber , isExtensionNumber : false } ) ; const extensionNumberField2 = extensionNumberFieldFn ( ) ; expect ( extensionNumberField2 ) . toHaveLength ( 0 ) ; } ) ; it ( 'Can display skillProfile correctly, and can be changed.' , ( ) => { const setSkillProfileId = jest . fn ( ) ; const selectedSkillProfileId = '1002' ; wrapper = setup ( { setSkillProfileId , selectedSkillProfileId } ) ; const skillProfilePickList = wrapper . find ( 'PickList[data-sign="skillProfile"]' ) ; expect ( skillProfilePickList . prop ( 'value' ) ) . toBe ( selectedSkillProfileId ) ; expect ( skillProfilePickList . find ( 'RcSelect' ) . find ( '[aria-haspopup="listbox"]' ) . text ( ) ) . toBe ( defaultSkillProfileList . find ( ( x ) => x . profileId === selectedSkillProfileId ) . profileName ) ; expect ( skillProfilePickList . prop ( 'options' ) ) . toHaveLength ( defaultSkillProfileList . length ) ; } ) ; it . skip ( 'Can display loginType correctly, and can be changed.' , ( ) => { const setLoginType = jest . fn ( ) ; const loginType = '102' ; wrapper = setup ( { setLoginType , loginType } ) ; const loginTypePickList = wrapper . find ( 'PickList[data-sign="loginType"]' ) ; expect ( loginTypePickList . prop ( 'value' ) ) . toBe ( loginType ) ; expect ( loginTypePickList . find ( '[role="button"]' ) . text ( ) ) . toBe ( defaultLoginTypeList . find ( ( x ) => x . id === loginType ) . label ) ; const changeLoginType = '101' ; loginTypePickList . find ( '[role="button"]' ) . simulate ( 'click' ) ; const menuItems = document . body . querySelectorAll ( '[role="presentation"] li[role="option"]' ) ; expect ( menuItems ) . toHaveLength ( defaultLoginTypeList . length ) ; document . body . querySelector < HTMLButtonElement > ( `li[data-value="${ changeLoginType }"]` ) . click ( ) ; expect ( setLoginType ) . toBeCalledWith ( changeLoginType ) ; } ) ; } ) ;