Merge branch 'staging' into 10413-story

shared/src/business/utilities/documentGenerators/generateAndVerifyPdfDiff.ts

@@ -24,6 +24,21 @@ const convertPdfPageToImageFile = async ({ fileName, pageNumber }) => {
   );
 };
 
+const cropImage = ({
+  height,
+  image,
+  width,
+}: {
+  height: number;
+  image: PNG;
+  width: number;
+}): PNG => {
+  // Cropped from (0, 0) (the top left) to (width, height)
+  const cropped = new PNG({ height, width });
+  PNG.bitblt(image, cropped, 0, 0, width, height, 0, 0);
+  return cropped;
+};
+
 const getImageDiff = ({ actualImage, expectedImage }) => {
   const { height, width } = actualImage;
   const diff = new PNG({ height, width });
@@ -48,10 +63,19 @@ const getImageDiff = ({ actualImage, expectedImage }) => {
 };
 
 export const generateAndVerifyPdfDiff = ({
+  croppedHeight,
+  croppedWidth,
   fileName,
   pageNumber,
   pdfGenerateFunction,
   testDescription,
+}: {
+  croppedHeight?: number;
+  croppedWidth?: number;
+  fileName: string;
+  pageNumber: number;
+  pdfGenerateFunction: any; // TODO
+  testDescription: string;
 }) => {
   const testOutputPath = path.resolve(
     __dirname,
@@ -76,17 +100,25 @@ export const generateAndVerifyPdfDiff = ({
     const pdf = await pdfGenerateFunction();
     fs.writeFileSync(`${testOutputPath}/${fileName}`, pdf);
 
-    const actualImage = await convertPdfPageToImageFile({
+    let actualImage = await convertPdfPageToImageFile({
       fileName,
       pageNumber,
     });
 
-    const expectedImage = PNG.sync.read(
+    let expectedImage = PNG.sync.read(
       fs.readFileSync(
         `./shared/test-pdf-expected-images/${fileName}.${pageNumber}.png`,
       ),
     );
 
+    const shouldCropImage = croppedWidth || croppedHeight;
+    if (shouldCropImage) {
+      const width = croppedWidth || actualImage.width;
+      const height = croppedHeight || actualImage.height;
+      actualImage = cropImage({ height, image: actualImage, width });
+      expectedImage = cropImage({ height, image: expectedImage, width });
+    }
+
     const { imageDiff, percentDifference } = getImageDiff({
       actualImage,
       expectedImage,

shared/src/business/utilities/documentGenerators/order.test.ts

@@ -220,6 +220,74 @@ describe('orders and notices', () => {
               .documentTitle,
         },
       }),
-    testDescription: 'generates an Notice with added docket entries',
+    testDescription: 'generates a Notice with added docket entries',
+  });
+
+  describe('non-first page docket headers', () => {
+    const orderContentWithMultiplePages =
+      SYSTEM_GENERATED_DOCUMENT_TYPES.orderForAmendedPetitionAndFilingFee.content.repeat(
+        3,
+      );
+    // A full-image comparison is not granular enough to detect the difference we are trying
+    // to test, so we focus the comparison on the part of the image that matters.
+    const croppedWidth = 200;
+    const croppedHeight = 50;
+
+    generateAndVerifyPdfDiff({
+      croppedHeight,
+      croppedWidth,
+      fileName: 'Order_With_Added_Docket_Numbers_Second_Page.pdf',
+      pageNumber: 2,
+      pdfGenerateFunction: () =>
+        order({
+          applicationContext,
+          data: {
+            addedDocketNumbers: [
+              '101-20',
+              '102-20',
+              '103-20',
+              '104-20',
+              '105-20',
+              '106-20',
+            ],
+            caseCaptionExtension: 'Petitioner(s)',
+            caseTitle: 'Test Petitioner',
+            docketNumberWithSuffix: '123-45S',
+            nameOfClerk: '',
+            orderContent: orderContentWithMultiplePages,
+            orderTitle:
+              SYSTEM_GENERATED_DOCUMENT_TYPES
+                .orderForAmendedPetitionAndFilingFee.documentTitle,
+            titleOfClerk: '',
+          },
+        }),
+      testDescription:
+        'generates the second page of an order that has header docker number and et al. at top',
+    });
+
+    generateAndVerifyPdfDiff({
+      croppedHeight,
+      croppedWidth,
+      fileName: 'Order_Without_Added_Docket_Numbers_Second_Page.pdf',
+      pageNumber: 2,
+      pdfGenerateFunction: () =>
+        order({
+          applicationContext,
+          data: {
+            addedDocketNumbers: ['123-45S'],
+            caseCaptionExtension: 'Petitioner(s)',
+            caseTitle: 'Test Petitioner',
+            docketNumberWithSuffix: '123-45S',
+            nameOfClerk: '',
+            orderContent: orderContentWithMultiplePages,
+            orderTitle:
+              SYSTEM_GENERATED_DOCUMENT_TYPES
+                .orderForAmendedPetitionAndFilingFee.documentTitle,
+            titleOfClerk: '',
+          },
+        }),
+      testDescription:
+        'generates the second page of an order that has header docker number without et al. at top',
+    });
   });
 });

shared/src/business/utilities/documentGenerators/order.ts

@@ -53,6 +53,7 @@ export const order = async ({
 
   const headerHtml = ReactDOM.renderToString(
     React.createElement(PageMetaHeaderDocket, {
+      addedDocketNumbers,
       docketNumber: docketNumberWithSuffix,
       useCenturySchoolbookFont: true,
     }),

shared/src/business/utilities/pdfGenerator/components/PageMetaHeaderDocket.tsx

@@ -1,30 +1,38 @@
 import React from 'react';
 
 export const PageMetaHeaderDocket = ({
+  addedDocketNumbers = [],
   docketNumber,
-  // do not set this to true unless the content of the PDF also is rendering the century schoolbook font; there is a puppeteer documented here https://github.com/puppeteer/puppeteer/issues/422#issuecomment-759424240
+  // do not set this to true unless the content of the PDF also is rendering the century schoolbook font; there is a puppeteer issue documented here https://github.com/puppeteer/puppeteer/issues/422#issuecomment-759424240
   useCenturySchoolbookFont = false,
+}: {
+  docketNumber?: string;
+  addedDocketNumbers?: string[];
+  useCenturySchoolbookFont?: boolean;
 }) => {
+  const etAlText = addedDocketNumbers.length > 1 ? ', et al.' : '';
+  const docketNumberPageHeader = `Docket No.: ${docketNumber}${etAlText}`;
+
+  const fontFamily = useCenturySchoolbookFont
+    ? "'Century Schoolbook Std'"
+    : "'nimbus_roman', serif";
+
   return (
     <div style={{ position: 'relative', top: '-20px' }}>
       <div
         style={{
           float: 'left',
-          fontFamily: useCenturySchoolbookFont
-            ? "'Century Schoolbook Std'"
-            : "'nimbus_roman', serif",
+          fontFamily,
           fontSize: '12px',
           transform: 'scale(0.75)',
         }}
       >
-        Docket No.: {docketNumber}
+        {docketNumberPageHeader}
       </div>
       <div
         style={{
           float: 'right',
-          fontFamily: useCenturySchoolbookFont
-            ? "'Century Schoolbook Std'"
-            : "'nimbus_roman', serif",
+          fontFamily,
           fontSize: '12px',
           transform: 'scale(0.75)',
         }}