[CityOfZion#1318] Actual 2/2: Added camera availability unit tests

__tests__/components/Login.test.js

@@ -3,11 +3,15 @@ import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux'
 import { MemoryRouter } from 'react-router-dom'
 import { shallow, mount } from 'enzyme'
+import { waitForElement } from '../testHelpers'
+
 
 import Login from '../../app/containers/LoginPrivateKey/LoginPrivateKey'
+import LoginWithHOC from '../../app/containers/LoginPrivateKey/'
 
 const setup = (
   shallowRender = true,
+  withHOC = false,
   state = {
     account: {
       loggedIn: true,
@@ -16,15 +20,16 @@ const setup = (
   }
 ) => {
   const store = configureStore()(state)
+  const Component = withHOC ? LoginWithHOC : Login
 
   let wrapper
   if (shallowRender) {
-    wrapper = shallow(<Login store={store} />)
+    wrapper = shallow(<Component store={store} />)
   } else {
     wrapper = mount(
       <Provider store={store}>
         <MemoryRouter>
-          <Login store={store} />
+          <Component store={store} />
         </MemoryRouter>
       </Provider>
     )
@@ -55,6 +60,39 @@ describe('Login', () => {
     expect(wrapper.find('input').get(0).props.type).toEqual('text')
   })
 
+  test('qr scan button should be active according to camera availability', async () => {
+    // mount Login with HOC
+    const { wrapper } = setup(false, true)
+
+    // mock 1 available camera
+    global.navigator.mediaDevices = {
+      enumerateDevices: jest.fn().mockResolvedValue([{ kind: 'videoinput' }])
+    }
+
+    // wait until the enabled button is found in dom
+    const enabledButton = await waitForElement(
+      wrapper,
+      '#scan-private-key-qr-button[disabled=false]'
+    )
+
+    // assert that the enabled button exists
+    expect(enabledButton).toBeDefined()
+
+    // mock 0 available cameras
+    global.navigator.mediaDevices = {
+      enumerateDevices: jest.fn().mockResolvedValue([])
+    }
+
+    // wait until the disabled button is found in dom
+    const disabledButton = await waitForElement(
+      wrapper,
+      '#scan-private-key-qr-button[disabled=true]'
+    )
+
+    // assert that the disabled button exists
+    expect(disabledButton).toBeDefined()
+  })
+
   // test('private key field input onChange dispatches LOGIN action', () => {
   //   const { store, wrapper } = setup();
   //   let preventDefault = jest.fn();

__tests__/testHelpers.js

@@ -2,6 +2,7 @@ import React from 'react'
 import thunk from 'redux-thunk'
 import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux'
+import poll from '../app/util/poll'
 
 export const createStore = configureStore([thunk])
 
@@ -27,3 +28,18 @@ export const mockPromiseRejected = (message = 'test error') =>
       reject(new Error(message))
     })
   })
+
+// polls for an enzyme element existence for 2s
+export const waitForElement = async (
+  wrapper,
+  selector,
+  config = { attempts: 10, frequency: 200 }
+) => {
+  const findElement = async () => {
+    const element = wrapper.update().find(selector)
+    return element.length
+      ? Promise.resolve(element.get(0))
+      : Promise.reject('Element not found')
+  }
+  return poll(findElement, config)
+}