Rice testing

client/src/AppRoot.tsx

@@ -6,7 +6,7 @@ import { sha256 } from 'js-sha256'
 import {
   Election,
   OptionalElection,
-  parseElection,
+  // parseElection,
 } from '@votingworks/ballot-encoder'
 
 import AppContext from './contexts/AppContext'
@@ -18,6 +18,7 @@ import { Storage } from './utils/Storage'
 
 import ElectionManager from './components/ElectionManager'
 import { SaveElection, OptionalVoteCounts } from './config/types'
+import testElection from './screens/testElection.json'
 
 export interface AppStorage {
   election?: Election
@@ -36,16 +37,20 @@ export const isOfficialResultsKey = 'isOfficialResults'
 const AppRoot = ({ storage }: Props) => {
   const printBallotRef = useRef<HTMLDivElement>(null)
 
-  const getElection = async () => {
-    const election = await storage.get(electionStorageKey)
+  // const getElection = async () => {
+  //   const election = await storage.get(electionStorageKey)
 
-    return election ? parseElection(election) : undefined
-  }
+  //   return election ? parseElection(election) : undefined
+  // }
 
-  const getCVRFiles = async () => storage.get(cvrsStorageKey)
-  const getIsOfficialResults = async () => storage.get(isOfficialResultsKey)
+  // const getCVRFiles = async () => storage.get(cvrsStorageKey)
+  // const getIsOfficialResults = async () => storage.get(isOfficialResultsKey)
 
-  const [election, setElection] = useState<OptionalElection>(undefined)
+  const [election, setElection] = useState<OptionalElection>(
+    undefined
+    // testElection as Election
+  )
+  // console.log({ election })
   const [electionHash, setElectionHash] = useState('')
   const [castVoteRecordFiles, setCastVoteRecordFiles] = useState(
     CastVoteRecordFiles.empty
@@ -60,19 +65,20 @@ const AppRoot = ({ storage }: Props) => {
   useEffect(() => {
     ;(async () => {
       if (!election) {
-        const storageElection = await getElection()
-        if (storageElection) {
-          setElection(storageElection)
-          setElectionHash(sha256(JSON.stringify(storageElection)))
+        // const storageElection = await getElection()
+        const fooElection = testElection as Election
+        if (fooElection) {
+          setElection(fooElection)
+          setElectionHash(sha256(JSON.stringify(fooElection)))
         }
 
-        if (castVoteRecordFiles === CastVoteRecordFiles.empty) {
-          const storageCVRFiles = await getCVRFiles()
-          if (storageCVRFiles) {
-            setCastVoteRecordFiles(CastVoteRecordFiles.import(storageCVRFiles))
-            setIsOfficialResults((await getIsOfficialResults()) || false)
-          }
-        }
+        // if (castVoteRecordFiles === CastVoteRecordFiles.empty) {
+        //   const storageCVRFiles = await getCVRFiles()
+        //   if (storageCVRFiles) {
+        //     setCastVoteRecordFiles(CastVoteRecordFiles.import(storageCVRFiles))
+        //     setIsOfficialResults((await getIsOfficialResults()) || false)
+        //   }
+        // }
       }
     })()
   })
@@ -128,6 +134,7 @@ const AppRoot = ({ storage }: Props) => {
     >
       <ElectionManager />
       <div ref={printBallotRef} />
+      <div id="print-target" />
     </AppContext.Provider>
   )
 }

client/src/components/ElectionManager.tsx

@@ -1,87 +1,91 @@
-import React, { useContext } from 'react'
-import { Switch, Route, Redirect } from 'react-router-dom'
+import React from 'react' // useContext
+// import { Switch, Route, Redirect } from 'react-router-dom'
 
-import AppContext from '../contexts/AppContext'
+// import AppContext from '../contexts/AppContext'
 
-import ElectionEditDefinitionScreen from '../screens/ElectionEditDefinitionScreen'
-import BallotListScreen from '../screens/BallotListScreen'
-import BallotScreen from '../screens/BallotScreen'
-import ExportElectionBallotPackageScreen from '../screens/ExportElectionBallotPackageScreen'
-import UnconfiguredScreen from '../screens/UnconfiguredScreen'
-import TestDeckScreen from '../screens/TestDeckScreen'
-import TallyScreen from '../screens/TallyScreen'
-import TallyReportScreen from '../screens/TallyReportScreen'
+// import ElectionEditDefinitionScreen from '../screens/ElectionEditDefinitionScreen'
+// import BallotListScreen from '../screens/BallotListScreen'
+// import BallotScreen from '../screens/BallotScreen'
+// import ExportElectionBallotPackageScreen from '../screens/ExportElectionBallotPackageScreen'
+// import UnconfiguredScreen from '../screens/UnconfiguredScreen'
+// import TestDeckScreen from '../screens/TestDeckScreen'
+// import TallyScreen from '../screens/TallyScreen'
+// import TallyReportScreen from '../screens/TallyReportScreen'
 
-import routerPaths from '../routerPaths'
-import OvervoteCombinationReportScreen from '../screens/OvervoteCombinationReportScreen'
+import UserTestingBallotScreen from '../screens/UserTestingBallotScreen'
+
+// import routerPaths from '../routerPaths'
+// import OvervoteCombinationReportScreen from '../screens/OvervoteCombinationReportScreen'
 
 const ElectionManager = () => {
-  const { election: e } = useContext(AppContext)
-  const election = e!
+  // const { election: e } = useContext(AppContext)
+  // const election = e!
+
+  return <UserTestingBallotScreen />
 
-  if (!election) {
-    return <UnconfiguredScreen />
-  }
+  // if (!election) {
+  //   return <UnconfiguredScreen />
+  // }
 
-  return (
-    <Switch>
-      <Route path={routerPaths.electionDefinition}>
-        <ElectionEditDefinitionScreen />
-      </Route>
-      <Route exact path={routerPaths.ballotsList}>
-        <BallotListScreen />
-      </Route>
-      <Route
-        path={[
-          routerPaths.testDeckResultsReport({ precinctId: ':precinctId' }),
-          routerPaths.testDecksTally,
-        ]}
-      >
-        <TestDeckScreen />
-      </Route>
-      <Route
-        path={[
-          routerPaths.ballotsViewLanguage({
-            ballotStyleId: ':ballotStyleId',
-            precinctId: ':precinctId',
-            localeCode: ':localeCode',
-          }),
-          routerPaths.ballotsView({
-            ballotStyleId: ':ballotStyleId',
-            precinctId: ':precinctId',
-          }),
-        ]}
-      >
-        <BallotScreen />
-      </Route>
-      <Route exact path={routerPaths.export}>
-        <ExportElectionBallotPackageScreen />
-      </Route>
-      <Route exact path={routerPaths.tally}>
-        <TallyScreen />
-      </Route>
-      <Route
-        path={[
-          routerPaths.tallyPrecinctReport({ precinctId: ':precinctId' }),
-          routerPaths.tallyFullReport,
-        ]}
-      >
-        <TallyReportScreen />
-      </Route>
-      <Route
-        path={[
-          routerPaths.tallyScannerReport({ scannerId: ':scannerId' }),
-          routerPaths.tallyFullReport,
-        ]}
-      >
-        <TallyReportScreen />
-      </Route>
-      <Route path={routerPaths.overvoteCombinationReport}>
-        <OvervoteCombinationReportScreen />
-      </Route>
-      <Redirect to={routerPaths.ballotsList} />
-    </Switch>
-  )
+  // return (
+  //   <Switch>
+  //     <Route path={routerPaths.electionDefinition}>
+  //       <ElectionEditDefinitionScreen />
+  //     </Route>
+  //     <Route exact path={routerPaths.ballotsList}>
+  //       <BallotListScreen />
+  //     </Route>
+  //     <Route
+  //       path={[
+  //         routerPaths.testDeckResultsReport({ precinctId: ':precinctId' }),
+  //         routerPaths.testDecksTally,
+  //       ]}
+  //     >
+  //       <TestDeckScreen />
+  //     </Route>
+  //     <Route
+  //       path={[
+  //         routerPaths.ballotsViewLanguage({
+  //           ballotStyleId: ':ballotStyleId',
+  //           precinctId: ':precinctId',
+  //           localeCode: ':localeCode',
+  //         }),
+  //         routerPaths.ballotsView({
+  //           ballotStyleId: ':ballotStyleId',
+  //           precinctId: ':precinctId',
+  //         }),
+  //       ]}
+  //     >
+  //       <BallotScreen />
+  //     </Route>
+  //     <Route exact path={routerPaths.export}>
+  //       <ExportElectionBallotPackageScreen />
+  //     </Route>
+  //     <Route exact path={routerPaths.tally}>
+  //       <TallyScreen />
+  //     </Route>
+  //     <Route
+  //       path={[
+  //         routerPaths.tallyPrecinctReport({ precinctId: ':precinctId' }),
+  //         routerPaths.tallyFullReport,
+  //       ]}
+  //     >
+  //       <TallyReportScreen />
+  //     </Route>
+  //     <Route
+  //       path={[
+  //         routerPaths.tallyScannerReport({ scannerId: ':scannerId' }),
+  //         routerPaths.tallyFullReport,
+  //       ]}
+  //     >
+  //       <TallyReportScreen />
+  //     </Route>
+  //     <Route path={routerPaths.overvoteCombinationReport}>
+  //       <OvervoteCombinationReportScreen />
+  //     </Route>
+  //     <Redirect to={routerPaths.ballotsList} />
+  //   </Switch>
+  // )
 }
 
 export default ElectionManager

client/src/components/HandMarkedPaperBallot.tsx

@@ -449,6 +449,8 @@ const HandMarkedPaperBallot = ({
   useLayoutEffect(() => {
     const printBallot = printBallotRef?.current
 
+    console.log('printballot', printBallot)
+
     if (!printBallot) {
       return
     }

client/src/routerPaths.ts

@@ -27,6 +27,8 @@ const routerPaths = {
     `/tally/test-ballot-deck/${precinctId}`,
   overvoteCombinationReport: '/tally/pairs',
   export: '/export-election-ballot-package',
+  combineResultsFiles: '/tally/combine-results-files',
+  userTestingBallot: '/usertesting/ballot',
 }
 
 export default routerPaths

client/src/screens/UserTestingBallotScreen.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { getPrecinctById, Election } from '@votingworks/ballot-encoder'
+
+import { BallotLocale } from '../config/types'
+
+import PrintButton from '../components/PrintButton'
+import HandMarkedPaperBallot from '../components/HandMarkedPaperBallot'
+import NavigationScreen from '../components/NavigationScreen'
+
+import testElection from './testElection.json'
+
+const UserTestingBallotScreen = () => {
+  const precinctId = '23'
+  const ballotStyleId = '12'
+  const election = (testElection as unknown) as Election
+  const locales: BallotLocale = {
+    primary: 'en-US',
+  }
+
+  const params = new URL(document.location.toString()).searchParams
+  const ballotId = params.get('ballotId') || undefined
+  const withSpanish = params.get('spanish') || false
+
+  if (withSpanish) {
+    locales.secondary = 'es-US'
+  }
+
+  const precinctName = getPrecinctById({ election, precinctId })?.name
+
+  return (
+    <React.Fragment>
+      <NavigationScreen>
+        <h1>
+          Ballot Style <strong>{ballotStyleId}</strong> for {precinctName}
+        </h1>
+        <p>
+          <PrintButton primary>Print Ballot</PrintButton>
+        </p>
+      </NavigationScreen>
+      <HandMarkedPaperBallot
+        ballotId={ballotId}
+        ballotStyleId={ballotStyleId}
+        election={election}
+        isLiveMode
+        precinctId={precinctId}
+        locales={locales}
+      />
+    </React.Fragment>
+  )
+}
+
+export default UserTestingBallotScreen