Merge pull request #10 from alekswebnet/5-add-tests

5 add tests

Author: alekswebnet

package-lock.json

@@ -31,12 +31,18 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
     "@types/node": "^18.7.1",
+    "@vitest/browser": "^0.34.3",
+    "jsdom": "^22.1.0",
     "perfect-debounce": "^1.0.0",
     "typescript": "^4.6.4",
-    "vite": "^3.2.7"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3",
+    "webdriverio": "^8.16.4"
   }
 }

package.json

@@ -14,16 +14,15 @@ const DEFAULTS = {
   textLayer: ''
 }
 
-const template = document.createElement('template')
-template.innerHTML = `
-  <iframe frameborder="0" width="100%"></iframe>
-  <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
-`
-
 export class PdfjsViewerElement extends HTMLElement {
   constructor() {
     super()
     const shadowRoot = this.attachShadow({mode: 'open'})
+    const template = document.createElement('template')
+    template.innerHTML = `
+      <iframe frameborder="0" width="100%"></iframe>
+      <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
+    `
     shadowRoot.appendChild(template.content.cloneNode(true))
   }
 
@@ -64,14 +63,15 @@ export class PdfjsViewerElement extends HTMLElement {
   }
 
   private renderViewer(src: string) {
-    if (!src) return
+    if (!src || !this.iframe) return
     this.shadowRoot!.replaceChild(this.iframe.cloneNode(), this.iframe)
     this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
-    this.iframe.contentWindow.location.href = src
+    this.iframe.src = src
   }
 
   private setEventListeners() {
     document.addEventListener('webviewerloaded', () => {
+      console.log(this.iframe.contentWindow.PDFViewerApplication)
       if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow.PDFViewerApplicationOptions?.set('defaultUrl', '')
       this.iframe.contentWindow.PDFViewerApplicationOptions?.set('disablePreferences', true);
       this.iframe.contentWindow.PDFViewerApplicationOptions?.set('pdfBugEnabled', true);
@@ -91,6 +91,7 @@ declare global {
 }
 
 export interface PdfjsViewerElementIframeWindow extends Window {
+  PDFViewerApplication: any,
   PDFViewerApplicationOptions: {
     set: (name: string, value: string | boolean) => void
   }

src/pdfjs-viewer-element.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { getViewerContainer, renderViewer } from './test-utils'
+import '../src/pdfjs-viewer-element'
+
+describe('Basic render process', async () => {
+  it('should render the PDF file', async () => {
+    await renderViewer(`
+      <pdfjs-viewer-element 
+        src="/sample-pdf-10MB.pdf" 
+        viewer-path="/pdfjs-3.9.179-dist"
+      ></pdfjs-viewer-element>`
+    )
+    expect(getViewerContainer()?.querySelector('#numPages')?.textContent).contain('37')
+    expect(getViewerContainer()?.querySelector('#viewer .page')).exist
+  })
+
+  it('should not render PDF with wrong url', async () => {
+    await renderViewer(`
+      <pdfjs-viewer-element 
+        src="/fake-file.pdf" 
+        viewer-path="/pdfjs-3.9.179-dist"
+      ></pdfjs-viewer-element>`
+    )
+    expect(getViewerContainer()?.querySelector('#viewer .page')).not.exist
+  })
+
+  it('should not render the viewer with wrong viewer-path attribute', async () => {
+    await renderViewer(`
+      <pdfjs-viewer-element 
+      src="/sample-pdf-10MB.pdf" 
+      viewer-path="/fake-dist"
+      ></pdfjs-viewer-element>`
+    )
+    expect(getViewerContainer()).not.exist
+  })
+})

tests/basic.test.ts

@@ -0,0 +1,20 @@
+import { elementReady } from "../src/elementReady"
+
+export const getIframe = (): HTMLIFrameElement | null | undefined => {
+  return document.body.querySelector('pdfjs-viewer-element')?.shadowRoot?.querySelector('iframe') as HTMLIFrameElement
+}
+
+export const getViewerContainer = (): HTMLElement | null | undefined => {
+  return getIframe()?.contentDocument?.querySelector('#outerContainer')
+}
+
+export const renderViewer = async (template: string) => {
+  document.body.innerHTML = template
+  await elementReady('iframe', document.querySelector('pdfjs-viewer-element')!.shadowRoot!)
+
+  await new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve()
+    }, 3000)
+  })
+}

tests/test-utils.ts

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "dom"],
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./types",

tsconfig.json

@@ -12,14 +12,13 @@ export declare class PdfjsViewerElement extends HTMLElement {
 }
 declare global {
     interface Window {
-        PdfjsViewerElement: typeof PdfjsViewerElement;
+        'PdfjsViewerElement': typeof PdfjsViewerElement;
     }
 }
 export interface PdfjsViewerElementIframeWindow extends Window {
     PDFViewerApplicationOptions: {
         set: (name: string, value: string | boolean) => void;
     };
-    PDFViewerApplication: any;
 }
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
     contentWindow: PdfjsViewerElementIframeWindow;

types/pdfjs-viewer-element.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
@@ -9,5 +10,12 @@ export default defineConfig({
       entry: 'src/pdfjs-viewer-element.ts',
       formats: ['es']
     }
-  }
+  },
+  test: {
+    browser: {
+      enabled: true,
+      name: 'chrome',
+      headless: true
+    },
+  },
 })