peer-calls/src/client/components/Media.test.tsx

91 lines
2.3 KiB
TypeScript

jest.mock('../window')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import { createStore, Store } from '../store'
import { Media } from './Media'
import { MEDIA_ENUMERATE } from '../constants'
describe('Media', () => {
beforeEach(() => {
store = createStore()
store.dispatch({
type: MEDIA_ENUMERATE,
status: 'resolved',
payload: [{
id: '123',
name: 'Audio Input',
type: 'audioinput',
}, {
id: '456',
label: 'Video Input',
name: 'videoinput',
}],
})
})
let store: Store
async function render() {
const div = document.createElement('div')
const node = await new Promise<HTMLDivElement>(resolve => {
ReactDOM.render(
<div ref={div => resolve(div!)}>
<Provider store={store}>
<Media />
</Provider>
</div>,
div,
)
})
return node.children[0]
}
describe('submit', () => {
const stream = {} as MediaStream
let promise: Promise<MediaStream>
beforeEach(() => {
navigator.mediaDevices.getUserMedia = async () => {
promise = Promise.resolve(stream)
return promise
}
})
it('tries to retrieve audio/video media stream', async () => {
const node = (await render()).querySelector('.media')!
expect(node.tagName).toBe('FORM')
TestUtils.Simulate.submit(node)
expect(promise).toBeDefined()
await promise
})
})
describe('onVideoChange', () => {
it('calls onSetVideoConstraint', async () => {
const node = await render()
const select = node.querySelector('select[name=video-input]')!
TestUtils.Simulate.change(select, {
target: {
value: '{"deviceId":123}',
} as any,
})
expect(store.getState().media.video).toEqual({ deviceId: 123 })
})
})
describe('onAudioChange', () => {
it('calls onSetAudioConstraint', async () => {
const node = await render()
const select = node.querySelector('select[name="audio-input"]')!
TestUtils.Simulate.change(select, {
target: {
value: '{"deviceId":456}',
} as any,
})
expect(store.getState().media.audio).toEqual({ deviceId: 456 })
})
})
})