Add tests back

wojtekmaj · Jun 6, 2023 · aca8fa4 · aca8fa4
1 parent ebf3d54
commit aca8fa4
Showing 1 changed file with 63 additions and 11 deletions.
diff --git a/src/Page/TextLayer.spec.tsx b/src/Page/TextLayer.spec.tsx
@@ -55,9 +55,6 @@ describe('TextLayer', () => {
   let desiredTextItems: TextContent['items'];
   let desiredTextItems2: TextContent['items'];
 
-  let markedRenderedTextLayer: HTMLDivElement;
-  let unmarkedRenderedTextLayer: HTMLDivElement;
-
   beforeAll(async () => {
     const pdf = await pdfjs.getDocument({ data: pdfFile.arrayBuffer }).promise;
 
@@ -68,9 +65,6 @@ describe('TextLayer', () => {
     page2 = await pdf.getPage(2);
     const textContent2 = await page2.getTextContent();
     desiredTextItems2 = textContent2.items;
-
-    markedRenderedTextLayer = await getRenderedTextLayer(page, true);
-    unmarkedRenderedTextLayer = await getRenderedTextLayer(page, false);
   });
 
   describe('loading', () => {
@@ -155,9 +149,12 @@ describe('TextLayer', () => {
       await onRenderTextLayerSuccessPromise;
 
       const wrapper = container.firstElementChild as HTMLDivElement;
-      const textItems = wrapper.children;
+      const wrapperChildren = Array.from(wrapper.children);
+      const textItems = wrapperChildren.flatMap((child) =>
+        child.classList.contains('markedContent') ? Array.from(child.children) : child,
+      );
 
-      expect(textItems).toHaveLength(markedRenderedTextLayer.children.length + 1);
+      expect(textItems).toHaveLength(desiredTextItems.length + 1);
     });
 
     it('renders text content properly given customTextRenderer', async () => {
@@ -177,9 +174,61 @@ describe('TextLayer', () => {
       await onRenderTextLayerSuccessPromise;
 
       const wrapper = container.firstElementChild as HTMLDivElement;
-      const textItems = wrapper.children;
+      const wrapperChildren = Array.from(wrapper.children);
+      const textItems = wrapperChildren.flatMap((child) =>
+        child.classList.contains('markedContent') ? Array.from(child.children) : child,
+      );
 
-      expect(textItems).toHaveLength(unmarkedRenderedTextLayer.children.length + 1);
+      expect(textItems).toHaveLength(desiredTextItems.length + 1);
+    });
+
+    it('maps textContent items to actual TextLayer children properly', async () => {
+      const { func: onRenderTextLayerSuccess, promise: onRenderTextLayerSuccessPromise } =
+        makeAsyncCallback();
+
+      const { container, rerender } = renderWithContext(<TextLayer />, {
+        onRenderTextLayerSuccess,
+        page,
+      });
+
+      expect.assertions(1);
+
+      await onRenderTextLayerSuccessPromise;
+
+      const wrapper = container.firstElementChild as HTMLDivElement;
+      const wrapperChildren = Array.from(wrapper.children);
+      const textItems = wrapperChildren.flatMap((child) =>
+        child.classList.contains('markedContent') ? Array.from(child.children) : child,
+      );
+
+      const { func: onRenderTextLayerSuccess2, promise: onRenderTextLayerSuccessPromise2 } =
+        makeAsyncCallback();
+
+      const customTextRenderer = (item: { str: string }) => item.str;
+
+      rerender(<TextLayer />, {
+        customTextRenderer,
+        onRenderTextLayerSuccess: onRenderTextLayerSuccess2,
+        page,
+      });
+
+      await onRenderTextLayerSuccessPromise2;
+
+      const wrapper2 = container.firstElementChild as HTMLDivElement;
+      const wrapperChildren2 = Array.from(wrapper2.children);
+      const textItems2 = wrapperChildren2;
+
+      // Compare tag name and text content only as the styles change depending on the presence of markedContent
+      function getTagNameAndTextContent(element: Element) {
+        return {
+          tagName: element.tagName,
+          textContent: element.textContent,
+        };
+      }
+
+      expect(textItems.map(getTagNameAndTextContent)).toEqual(
+        textItems2.map(getTagNameAndTextContent),
+      );
     });
 
     it('calls customTextRenderer with necessary arguments', async () => {
@@ -199,7 +248,10 @@ describe('TextLayer', () => {
       await onRenderTextLayerSuccessPromise;
 
       const wrapper = container.firstElementChild as HTMLDivElement;
-      const textItems = wrapper.children;
+      const wrapperChildren = Array.from(wrapper.children);
+      const textItems = wrapperChildren.flatMap((child) =>
+        child.classList.contains('markedContent') ? Array.from(child.children) : child,
+      );
 
       expect(textItems).toHaveLength(desiredTextItems.length + 1);