From c2ba8bc71112cde6fe8812c58f9af4132c33b51c Mon Sep 17 00:00:00 2001 From: Kevin Shen Date: Tue, 12 Sep 2023 12:28:55 -0700 Subject: [PATCH] support a large top margin on bmd_paper_ballot (#3936) * support a large top margin on bmd_paper_ballot * pass prop to styled component * use assert * update snapshots --- .../src/__snapshots__/app.test.tsx.snap | 4 +++ .../src/custom-paper-handler/state_machine.ts | 27 +++++++++--------- .../frontend/src/pages/print_page.tsx | 6 ++-- .../__snapshots__/print_page.test.tsx.snap | 3 ++ libs/mark-flow-ui/src/pages/print_page.tsx | 4 +++ .../bmd_paper_ballot.test.tsx.snap | 1 + libs/ui/src/bmd_paper_ballot.test.tsx | 28 +++++++++++++++++++ libs/ui/src/bmd_paper_ballot.tsx | 10 +++++-- 8 files changed, 64 insertions(+), 19 deletions(-) diff --git a/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap b/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap index b2cdaf9172..a6479ea5d2 100644 --- a/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap +++ b/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap @@ -1371,6 +1371,7 @@ exports[`L&A (logic and accuracy) flow 2`] = ` >
{ - // Need to hint to Typescript that we want the 'VOTER_INITIATED_PRINT' event in our union type of events - if ('pdfData' in event) { - void driverPrintBallot(context.driver, event.pdfData, {}); - } else { - throw new Error( - `printing_ballot entry called by unsupported event type: ${event.type}` - ); - } - }, - on: { - PAPER_IN_OUTPUT: 'scanning', - }, + invoke: [ + { + id: 'printBallot', + src: (context, event) => { + assert(event.type === 'VOTER_INITIATED_PRINT'); + return driverPrintBallot(context.driver, event.pdfData, {}); + }, + onDone: { + target: 'scanning', + }, + }, + pollPaperStatus(), + ], }, scanning: { invoke: [ diff --git a/apps/mark-scan/frontend/src/pages/print_page.tsx b/apps/mark-scan/frontend/src/pages/print_page.tsx index ba933837db..4bb776873b 100644 --- a/apps/mark-scan/frontend/src/pages/print_page.tsx +++ b/apps/mark-scan/frontend/src/pages/print_page.tsx @@ -29,9 +29,8 @@ export function PrintPage(): JSX.Element | null { options: PrintOptions ): Promise { debug(`Ignoring print options with keys: ${Object.keys(options)}`); - const pdfData = await printElementToPdf(element); - debug(`got pdf data length ${pdfData.byteLength}`); - printBallotMutation.mutate({ pdfData: Buffer.from(pdfData) }); + const pdfData = Buffer.from(await printElementToPdf(element)); + printBallotMutation.mutate({ pdfData }); } function onPrintStarted() { @@ -48,6 +47,7 @@ export function PrintPage(): JSX.Element | null { generateBallotId={generateBallotId} onPrintStarted={onPrintStarted} printElement={printElementToCustomPaperHandler} + largeTopMargin /> ); } diff --git a/libs/mark-flow-ui/src/pages/__snapshots__/print_page.test.tsx.snap b/libs/mark-flow-ui/src/pages/__snapshots__/print_page.test.tsx.snap index 7d03620d6a..a64efb7cbe 100644 --- a/libs/mark-flow-ui/src/pages/__snapshots__/print_page.test.tsx.snap +++ b/libs/mark-flow-ui/src/pages/__snapshots__/print_page.test.tsx.snap @@ -268,6 +268,7 @@ exports[`no votes 1`] = ` >
Promise; + largeTopMargin?: boolean; } export function PrintPage({ @@ -44,6 +45,7 @@ export function PrintPage({ generateBallotId, onPrintStarted, printElement = DefaultPrintElement, + largeTopMargin, }: PrintPageProps): JSX.Element { const printLock = useLock(); @@ -58,6 +60,7 @@ export function PrintPage({ isLiveMode={isLiveMode} precinctId={precinctId} votes={votes} + largeTopMargin={largeTopMargin} />, { sides: 'one-sided' } ); @@ -72,6 +75,7 @@ export function PrintPage({ votes, onPrintStarted, printElement, + largeTopMargin, ]); useEffect(() => { diff --git a/libs/ui/src/__snapshots__/bmd_paper_ballot.test.tsx.snap b/libs/ui/src/__snapshots__/bmd_paper_ballot.test.tsx.snap index 4a53855e82..be8ce4d6a6 100644 --- a/libs/ui/src/__snapshots__/bmd_paper_ballot.test.tsx.snap +++ b/libs/ui/src/__snapshots__/bmd_paper_ballot.test.tsx.snap @@ -271,6 +271,7 @@ exports[`BmdPaperBallot renders votes for candidate contests and yes-no contests >
void; + largeTopMargin?: boolean; }) { return render( ); } @@ -264,3 +267,28 @@ describe('BmdPaperBallot calls onRendered', () => { expect(onRendered).toHaveBeenCalledTimes(1); }); }); + +test('BmdPaperBallot renders a large top margin when prop is passed', () => { + renderBmdPaperBallot({ + electionDefinition: electionWithMsEitherNeitherDefinition, + ballotStyleId: '1', + precinctId: '6525', + votes: {}, + largeTopMargin: true, + }); + + const header = screen.getByTestId('header'); + expect(header).toHaveStyle(`margin-top: 1.75in`); +}); + +test('BmdPaperBallot does not render a large top margin when prop is not passed', () => { + renderBmdPaperBallot({ + electionDefinition: electionWithMsEitherNeitherDefinition, + ballotStyleId: '1', + precinctId: '6525', + votes: {}, + }); + + const header = screen.getByTestId('header'); + expect(header).not.toHaveStyle(`margin-top: 1.75in`); +}); diff --git a/libs/ui/src/bmd_paper_ballot.tsx b/libs/ui/src/bmd_paper_ballot.tsx index 7439e0ff65..c0943582c0 100644 --- a/libs/ui/src/bmd_paper_ballot.tsx +++ b/libs/ui/src/bmd_paper_ballot.tsx @@ -51,11 +51,15 @@ const Ballot = styled.div` } `; -const Header = styled.div` +interface StyledHeaderProps { + largeTopMargin?: boolean; +} +const Header = styled.div` display: flex; flex-direction: row; align-items: center; border-bottom: 0.2em solid #000; + margin-top: ${(p) => (p.largeTopMargin ? '1.75in' : undefined)}; & > .seal { margin: 0.25em 0; @@ -217,6 +221,7 @@ interface Props { precinctId: PrecinctId; votes: VotesDict; onRendered?: () => void; + largeTopMargin?: boolean; } /** @@ -242,6 +247,7 @@ export function BmdPaperBallot({ precinctId, votes, onRendered, + largeTopMargin, }: Props): JSX.Element { const ballotId = generateBallotId(); const { @@ -275,7 +281,7 @@ export function BmdPaperBallot({ return withPrintTheme( -
+