Setup error screens

src/APICardCatch.test.tsx

@@ -12,6 +12,7 @@ import {
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
 import { MemoryCard } from './utils/Card'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
 
@@ -21,8 +22,9 @@ beforeEach(() => {
 
 it('Cause "/card/read" API to catch', async () => {
   // Configure Machine
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
   setElectionInStorage(storage)
   setStateInStorage(storage)
 
@@ -32,7 +34,9 @@ it('Cause "/card/read" API to catch', async () => {
     .mockImplementation(() => {
       throw new Error('NOPE')
     })
-  const { getByText } = render(<App storage={storage} card={card} />)
+  const { getByText } = render(
+    <App card={card} hardware={hardware} storage={storage} />
+  )
 
   // Ensure card polling interval time is passed
   advanceTimers()

src/App.tsx

@@ -4,9 +4,7 @@ import { BrowserRouter, Route } from 'react-router-dom'
 import 'normalize.css'
 import './App.css'
 
-import FocusManager from './components/FocusManager'
-
-import AppRoot, { Props as AppRootProps, AppStorage } from './AppRoot'
+import memoize from './utils/memoize'
 import {
   ScreenReader,
   AriaScreenReader,
@@ -17,21 +15,25 @@ import {
 import { WebServiceCard } from './utils/Card'
 import { LocalStorage } from './utils/Storage'
 import { getUSEnglishVoice } from './utils/voices'
-import memoize from './utils/memoize'
 import getPrinter from './utils/printer'
+import { getHardware } from './utils/Hardware'
+
+import AppRoot, { Props as AppRootProps, AppStorage } from './AppRoot'
+import FocusManager from './components/FocusManager'
 
 window.oncontextmenu = (e: MouseEvent): void => {
   e.preventDefault()
 }
 
 export interface Props {
+  hardware?: AppRootProps['hardware']
+  card?: AppRootProps['card']
+  storage?: AppRootProps['storage']
+  printer?: AppRootProps['printer']
   tts?: {
     enabled: TextToSpeech
     disabled: TextToSpeech
   }
-  card?: AppRootProps['card']
-  storage?: AppRootProps['storage']
-  printer?: AppRootProps['printer']
 }
 
 const App = ({
@@ -42,6 +44,7 @@ const App = ({
   card = new WebServiceCard(),
   storage = new LocalStorage<AppStorage>(),
   printer = getPrinter(),
+  hardware = getHardware(),
 }: Props) => {
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
   const [screenReader, setScreenReader] = useState<ScreenReader>(
@@ -115,7 +118,6 @@ const App = ({
     },
     [screenReader]
   )
-
   return (
     <BrowserRouter>
       <FocusManager
@@ -129,8 +131,9 @@ const App = ({
           render={props => (
             <AppRoot
               card={card}
-              storage={storage}
               printer={printer}
+              hardware={hardware}
+              storage={storage}
               {...props}
             />
           )}

src/AppCardUnhappyPaths.test.tsx

@@ -20,25 +20,30 @@ import utcTimestamp from './utils/utcTimestamp'
 import { MemoryCard } from './utils/Card'
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
+jest.setTimeout(20000) // TODO: Added after hardware polling added. Why?
 
 beforeEach(() => {
   window.location.href = '/'
 })
 
-it('VxMark+Print end-to-end flow', async () => {
+it('Display App Card Unhappy Paths', async () => {
   // ====================== BEGIN CONTEST SETUP ====================== //
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
 
   card.removeCard()
 
   setElectionInStorage(storage)
   setStateInStorage(storage)
 
-  const { getByText } = render(<App storage={storage} card={card} />)
+  const { getByText } = render(
+    <App card={card} hardware={hardware} storage={storage} />
+  )
 
   // ====================== END CONTEST SETUP ====================== //
 

src/AppContestMultiSeat.test.tsx

@@ -13,6 +13,7 @@ import {
 import { MemoryCard } from './utils/Card'
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
 
@@ -23,14 +24,15 @@ beforeEach(() => {
 it('Single Seat Contest', async () => {
   // ====================== BEGIN CONTEST SETUP ====================== //
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
 
   setElectionInStorage(storage)
   setStateInStorage(storage)
 
   const { container, getByText, queryByText } = render(
-    <App storage={storage} card={card} />
+    <App card={card} hardware={hardware} storage={storage} />
   )
 
   // Insert Voter Card

src/AppContestSingleSeat.test.tsx

@@ -13,6 +13,7 @@ import {
 import { MemoryCard } from './utils/Card'
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
 
@@ -23,13 +24,16 @@ beforeEach(() => {
 it('Single Seat Contest', async () => {
   // ====================== BEGIN CONTEST SETUP ====================== //
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
 
   setElectionInStorage(storage)
   setStateInStorage(storage)
 
-  const { container, getByText } = render(<App storage={storage} card={card} />)
+  const { container, getByText } = render(
+    <App card={card} hardware={hardware} storage={storage} />
+  )
 
   // Insert Voter Card
   card.insertCard(getNewVoterCard())

src/AppContestWriteIn.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { fireEvent, render, wait, within } from '@testing-library/react'
-import fetchMock from 'fetch-mock'
 
 import App from './App'
 
@@ -18,6 +17,7 @@ import { MemoryCard } from './utils/Card'
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
 import fakePrinter from '../test/helpers/fakePrinter'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
 
@@ -28,17 +28,18 @@ beforeEach(() => {
 it('Single Seat Contest with Write In', async () => {
   // ====================== BEGIN CONTEST SETUP ====================== //
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
   const printer = fakePrinter()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
 
   setElectionInStorage(storage)
   setStateInStorage(storage, {
     appMode: VxMarkPlusVxPrint,
   })
 
   const { container, getByText, queryByText, getByTestId } = render(
-    <App storage={storage} card={card} printer={printer} />
+    <App card={card} hardware={hardware} printer={printer} storage={storage} />
   )
   const getByTextWithMarkup = withMarkup(getByText)
 

src/AppContestYesNo.test.tsx

@@ -15,6 +15,7 @@ import {
 import { MemoryCard } from './utils/Card'
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
+import { MemoryHardware } from './utils/Hardware'
 
 jest.useFakeTimers()
 
@@ -25,14 +26,15 @@ beforeEach(() => {
 it('Single Seat Contest', async () => {
   // ====================== BEGIN CONTEST SETUP ====================== //
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
 
   setElectionInStorage(storage)
   setStateInStorage(storage)
 
   const { getByText, queryByText, getByTestId } = render(
-    <App storage={storage} card={card} />
+    <App card={card} hardware={hardware} storage={storage} />
   )
 
   // Insert Voter Card

src/AppData.test.tsx

@@ -25,6 +25,15 @@ describe('loads election', () => {
     getByText('Device Not Configured')
   })
 
+  it('from storage', () => {
+    const storage = new MemoryStorage<AppStorage>()
+    setElectionInStorage(storage)
+    setStateInStorage(storage)
+    const { getByText } = render(<App storage={storage} />)
+    getByText(election.title)
+    expect(storage.get(electionStorageKey)).toBeTruthy()
+  })
+
   it('sample app loads election and activates ballot', async () => {
     const storage = getSampleStorage()
     const { getAllByText, getByText } = render(<SampleApp storage={storage} />)
@@ -37,13 +46,4 @@ describe('loads election', () => {
     expect(storage.get(electionStorageKey)).toBeTruthy()
     expect(storage.get(activationStorageKey)).toBeTruthy()
   })
-
-  it('from storage', () => {
-    const storage = new MemoryStorage<AppStorage>()
-    setElectionInStorage(storage)
-    setStateInStorage(storage)
-    const { getByText } = render(<App storage={storage} />)
-    getByText(election.title)
-    expect(storage.get(electionStorageKey)).toBeTruthy()
-  })
 })

src/AppEndToEnd.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { fireEvent, render, wait, within } from '@testing-library/react'
-import fetchMock from 'fetch-mock'
 import { advanceBy } from 'jest-date-mock'
 
 import { electionSample } from '@votingworks/ballot-encoder'
@@ -29,20 +28,23 @@ import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
 import { MemoryCard } from './utils/Card'
 import fakePrinter from '../test/helpers/fakePrinter'
+import { MemoryHardware } from './utils/Hardware'
 
 beforeEach(() => {
   window.location.href = '/'
 })
 
-it('VxMark+Print end-to-end flow', async () => {
-  jest.useFakeTimers()
+jest.useFakeTimers()
+jest.setTimeout(20000) // TODO: Added after hardware polling added. Why?
 
-  const storage = new MemoryStorage<AppStorage>()
+it('VxMark+Print end-to-end flow', async () => {
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
   const printer = fakePrinter()
+  const storage = new MemoryStorage<AppStorage>()
   const writeLongUint8ArrayMock = jest.spyOn(card, 'writeLongUint8Array')
   const { getByLabelText, getByText, getByTestId } = render(
-    <App storage={storage} card={card} printer={printer} />
+    <App card={card} hardware={hardware} storage={storage} printer={printer} />
   )
   const getByTextWithMarkup = withMarkup(getByText)
 

src/AppMarkOnly.test.tsx

@@ -22,6 +22,7 @@ import {
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
 import { MemoryCard } from './utils/Card'
+import { MemoryHardware } from './utils/Hardware'
 
 beforeEach(() => {
   window.location.href = '/'
@@ -30,10 +31,11 @@ beforeEach(() => {
 it('VxMarkOnly flow', async () => {
   jest.useFakeTimers()
 
-  const storage = new MemoryStorage<AppStorage>()
   const card = new MemoryCard()
+  const hardware = new MemoryHardware()
+  const storage = new MemoryStorage<AppStorage>()
   const { getByTestId, getByLabelText, getByText } = render(
-    <App storage={storage} card={card} />
+    <App card={card} hardware={hardware} storage={storage} />
   )
   const getByTextWithMarkup = withMarkup(getByText)
 

src/AppMarkVoterCardInvalid.test.tsx

@@ -17,26 +17,29 @@ import {
 import { MemoryStorage } from './utils/Storage'
 import { AppStorage } from './AppRoot'
 import { MemoryCard } from './utils/Card'
-
-jest.useFakeTimers()
+import { MemoryHardware } from './utils/Hardware'
 
 beforeEach(() => {
   window.location.href = '/'
 })
 
+jest.useFakeTimers()
+jest.setTimeout(20000) // TODO: Added after hardware polling added. Why?
+
 const idleScreenCopy =
   'This voting station has been inactive for more than 5 minutes.'
 
 describe('Mark Card Void when voter is idle too long', () => {
   it('Display expired card if card marked as voided', async () => {
-    const storage = new MemoryStorage<AppStorage>()
     const card = new MemoryCard()
+    const hardware = new MemoryHardware()
+    const storage = new MemoryStorage<AppStorage>()
 
     setElectionInStorage(storage)
     setStateInStorage(storage)
 
     const { getByText, queryByText } = render(
-      <App storage={storage} card={card} />
+      <App card={card} hardware={hardware} storage={storage} />
     )
 
     // Insert Voter card
@@ -88,13 +91,16 @@ describe('Mark Card Void when voter is idle too long', () => {
     // https://github.com/votingworks/bmd/issues/714
     fetchMock.get('/machine-id', () => JSON.stringify({ machineId: '1' }))
 
-    const storage = new MemoryStorage<AppStorage>()
     const card = new MemoryCard()
+    const hardware = new MemoryHardware()
+    const storage = new MemoryStorage<AppStorage>()
 
     setElectionInStorage(storage)
     setStateInStorage(storage)
 
-    const { getByText } = render(<App storage={storage} card={card} />)
+    const { getByText } = render(
+      <App card={card} hardware={hardware} storage={storage} />
+    )
 
     // Insert Voter card
     card.insertCard(getNewVoterCard())