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
votingworks · Sep 12, 2023 · c2ba8bc · c2ba8bc
1 parent b924d1e
commit c2ba8bc
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 19 deletions.
diff --git 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`] = `
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"
@@ -1847,6 +1848,7 @@ House Bill 1796 - Flag Referendum
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"
@@ -2323,6 +2325,7 @@ House Bill 1796 - Flag Referendum
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"
@@ -2799,6 +2802,7 @@ House Bill 1796 - Flag Referendum
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"

diff --git a/apps/mark-scan/backend/src/custom-paper-handler/state_machine.ts b/apps/mark-scan/backend/src/custom-paper-handler/state_machine.ts
@@ -372,20 +372,19 @@ export function buildMachine(
         },
       },
       printing_ballot: {
-        invoke: pollPaperStatus(),
-        entry: (context, event) => {
-          // 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
@@ -29,9 +29,8 @@ export function PrintPage(): JSX.Element | null {
     options: PrintOptions
   ): Promise<void> {
     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
@@ -268,6 +268,7 @@ exports[`no votes 1`] = `
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"
@@ -1023,6 +1024,7 @@ exports[`with votes 1`] = `
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"
@@ -1775,6 +1777,7 @@ exports[`without votes and inline seal 1`] = `
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"

diff --git a/libs/mark-flow-ui/src/pages/print_page.tsx b/libs/mark-flow-ui/src/pages/print_page.tsx
@@ -33,6 +33,7 @@ export interface PrintPageProps {
     element: JSX.Element,
     printOptions: PrintOptions
   ) => Promise<void>;
+  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
@@ -271,6 +271,7 @@ exports[`BmdPaperBallot renders votes for candidate contests and yes-no contests
   >
     <div
       class="c1"
+      data-testid="header"
     >
       <div
         class="seal"

diff --git a/libs/ui/src/bmd_paper_ballot.test.tsx b/libs/ui/src/bmd_paper_ballot.test.tsx
@@ -57,13 +57,15 @@ function renderBmdPaperBallot({
   votes,
   isLiveMode = false,
   onRendered,
+  largeTopMargin,
 }: {
   electionDefinition: ElectionDefinition;
   ballotStyleId: BallotStyleId;
   precinctId: PrecinctId;
   votes: { [key: string]: string | string[] | Candidate };
   isLiveMode?: boolean;
   onRendered?: () => void;
+  largeTopMargin?: boolean;
 }) {
   return render(
     <BmdPaperBallot
@@ -82,6 +84,7 @@ function renderBmdPaperBallot({
         votes
       )}
       onRendered={onRendered}
+      largeTopMargin={largeTopMargin}
     />
   );
 }
@@ -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
@@ -51,11 +51,15 @@ const Ballot = styled.div`
   }
 `;
 
-const Header = styled.div`
+interface StyledHeaderProps {
+  largeTopMargin?: boolean;
+}
+const Header = styled.div<StyledHeaderProps>`
   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(
     <Ballot aria-hidden>
-      <Header>
+      <Header largeTopMargin={largeTopMargin} data-testid="header">
         <div
           className="seal"
           dangerouslySetInnerHTML={{ __html: seal }} // eslint-disable-line react/no-danger
-Original file line number
+Diff line change
@@ Expand Up @@
       >
         <div
           class="c1"
+          data-testid="header"
         >
           <div
             class="seal"
@@ Expand Down @@