Test pdf components (#170)

* Got the first UT to work

* Added UTs for the new pdf components

* More test cases

Author: mttwc

src/scripts/clipperUI/components/previewViewer/pdfPageViewport.tsx

@@ -11,20 +11,25 @@ export interface PdfPageViewportProp {
 }
 
 class PdfPageViewportClass extends ComponentBase<{}, PdfPageViewportProp> {
-	private getContainerDimensionsStyle(): string {
+	private getContainerStyle(): string {
 		return "max-width: " + this.props.viewportDimensions.width + "px;";
 	}
 
-	private getPlaceholderDimensionsStyle(): string {
+	private getImageStyle(): string {
+		let styleString = "max-width: " + this.props.viewportDimensions.width + "px;";
+		return styleString + "max-height: " + this.props.viewportDimensions.height + "px;";
+	}
+
+	private getPlaceholderStyle(): string {
 		return "padding-bottom: " + ((this.props.viewportDimensions.height / this.props.viewportDimensions.width) * 100) + "%;";
 	}
 
 	public render() {
 		return (
-			<div data-pageindex={this.props.index} style={this.getContainerDimensionsStyle()}>
+			<div data-pageindex={this.props.index} style={this.getContainerStyle()}>
 				{this.props.imgUrl ?
-					<img class={Constants.Classes.pdfPreviewImage} src={this.props.imgUrl}></img> :
-					<div style={this.getPlaceholderDimensionsStyle()}></div>}
+					<img class={Constants.Classes.pdfPreviewImage} src={this.props.imgUrl} style={this.getImageStyle()}></img> :
+					<div style={this.getPlaceholderStyle()}></div>}
 			</div>
 		);
 	}

src/scripts/clipperUI/components/previewViewer/pdfPreviewPage.tsx

@@ -21,7 +21,7 @@ class PdfPreviewPageClass extends ComponentBase<{}, PdfPreviewPageProp> {
 					<PdfPageViewport viewportDimensions={this.props.viewportDimensions} imgUrl={this.props.imgUrl} index={this.props.index} />
 				</div>
 				<div className={Constants.Classes.overlay + (this.props.showPageNumber ? "" : (" " + Constants.Classes.overlayHidden))}>
-					<span class="overlay-number">{this.props.index + 1}</span>
+					<span class={Constants.Classes.overlayNumber}>{this.props.index + 1}</span>
 				</div>
 			</div>
 		);

src/scripts/constants.ts

@@ -28,6 +28,7 @@ export module Constants {
 		export var attachmentOverlay = "attachment-overlay";
 		export var overlay = "overlay";
 		export var overlayHidden = "overlay-hidden";
+		export var overlayNumber = "overlay-number";
 		export var pdfPreviewImage = "pdf-preview-image";
 		export var pdfPreviewImageCanvas = "pdf-preview-image-canvas";
 		export var unselected = "unselected";

src/tests/clipperUI/components/previewViewer/pdfDataUrls.ts

@@ -3,5 +3,10 @@ let string1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAW
 let string2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAD4CAYAAAC+LPu/AAACaklEQVR4Xu3VsQqDMABFUf3/n3VQlIjYudBauGM52bNcTl7mfd/v8zwn573Auq7TvG2bOB9kLMsizrcXI87DlogjTvtqyCGHnFaAnNbN5pBDTitATutmc8ghpxUgp3WzOeSQ0wqQ07rZHHLIaQXIad1sDjnktALktG42hxxyWgFyWjebQw45rQA5rZvNIYecVoCc1s3mkENOK0BO62ZzyCGnFSCndbM55JDTCpDTutkccshpBchp3WwOOeS0AuS0bjaHHHJaAXJaN5tDDjmtADmtm80hh5xWgJzWzeaQQ04rQE7rZnPIIacVIKd1sznkkNMKkNO62RxyyGkFyGndbA455LQC5LRuNocccloBclo3m0MOOa0AOa2bzSGHnFaAnNbN5pBDTitATutmc8ghpxUgp3WzOeSQ0wqQ07rZHHLIaQXIad1sDjnktALktG42hxxyWgFyWjebQw45rQA5rZvNIYecVoCc1s3mkENOK0BO62ZzyCGnFSCndbM55JDTCpDTutkccshpBchp3WwOOeS0AuS0bjaHHHJaAXJaN5tDDjmtADmtm80hh5xWgJzWzeaQQ04rQE7rZnPIIacVIKd1sznkkNMKkNO62RxyyGkFyGndbA455LQC5LRuNocccloBclo3m0MOOa0AOa2bzSGHnFaAnNbN5pBDTitATutmc8ghpxUgp3WzOeSQ0wqQ07rZHHLIaQXIad1sDjnktALktG42hxxyWgFyWjebQw45rQA5rZvNIYecVoCc1s3mkENOK0BO62ZzyCGnFSCndbM55JDTCpDTutmcX3LGGPd1XS3vH986jmN6AdP4U8daodwiAAAAAElFTkSuQmCC";
 
 let pdfDataUrls: string[] = [string0, string1, string2];
+let pdfDataUrlDimensions = [
+	{ width: "14px", height: "9px" },
+	{ width: "11px", height: "8px" },
+	{ width: "71px", height: "248px" }
+];
 
-export {pdfDataUrls};
+export {pdfDataUrls, pdfDataUrlDimensions};

src/tests/clipperUI/components/previewViewer/pdfPageViewport_tests.tsx

@@ -0,0 +1,66 @@
+import {PdfPageViewport} from "../../../../scripts/clipperUI/components/previewViewer/pdfPageViewport";
+
+import {HelperFunctions} from "../../../helperFunctions";
+
+import {pdfDataUrls, pdfDataUrlDimensions} from "./pdfDataUrls";
+
+QUnit.module("pdfPageViewport", {});
+
+test("Given both the imgUrl and dimensions, the imgUrl is rendered in the component in a container div under those dimensions", () => {
+	let expectedWidth = pdfDataUrlDimensions[0].width;
+	let expectedHeight = pdfDataUrlDimensions[0].height;
+
+	let pdfPageViewport = HelperFunctions.mountToFixture(
+		<PdfPageViewport viewportDimensions={{ width: parseInt(expectedWidth, 10), height: parseInt(expectedHeight, 10) }}
+			imgUrl={pdfDataUrls[0]} index={0} />);
+
+	let container = HelperFunctions.getFixture().firstChild as HTMLElement;
+	let containerComputedStyle = window.getComputedStyle(container);
+	strictEqual(containerComputedStyle.maxWidth, expectedWidth, "The container's max width should be the specified viewport width");
+
+	let images = container.getElementsByTagName("img");
+	strictEqual(images.length, 1, "There should be one image present in the container");
+
+	let imageComputedStyle = window.getComputedStyle(images[0]);
+	strictEqual(imageComputedStyle.maxWidth, expectedWidth, "The image's max width should be the specified viewport width");
+	strictEqual(imageComputedStyle.maxHeight, expectedHeight, "The image's max height should be the specified viewport height");
+});
+
+test("When not given the imgUrl, the component should render a blank viewport with the specified dimensions", () => {
+	let expectedWidth = pdfDataUrlDimensions[0].width;
+	let expectedHeight = pdfDataUrlDimensions[0].height;
+
+	let pdfPageViewport = HelperFunctions.mountToFixture(
+		<PdfPageViewport viewportDimensions={{ width: parseInt(expectedWidth, 10), height: parseInt(expectedHeight, 10) }}
+			index={0} />);
+
+	let container = HelperFunctions.getFixture().firstChild as HTMLElement;
+	let containerComputedStyle = window.getComputedStyle(container);
+	strictEqual(containerComputedStyle.width, expectedWidth, "The container's width should be the specified viewport width");
+	strictEqual(containerComputedStyle.height, expectedHeight, "The container's height should be the specified viewport width");
+
+	let images = container.getElementsByTagName("img");
+	strictEqual(images.length, 0, "There should be no images rendered");
+});
+
+test("Given the index, the component should render the container with the index stored in the attribute 'data-pageindex'", () => {
+	let expectedIndex = 11;
+
+	let pdfPageViewport = HelperFunctions.mountToFixture(
+		<PdfPageViewport viewportDimensions={{ width: 20, height: 15 }}
+			imgUrl={pdfDataUrls[0]} index={expectedIndex} />);
+
+	let container = HelperFunctions.getFixture().firstChild as HTMLElement;
+	strictEqual((container.dataset as any).pageindex, "" + expectedIndex, "The index should be stored in the data-pageindex attribute");
+});
+
+test("Given the index, but not an imgUrl, the component should still render the container with the index stored in the attribute 'data-pageindex'", () => {
+	let expectedIndex = 999;
+
+	let pdfPageViewport = HelperFunctions.mountToFixture(
+		<PdfPageViewport viewportDimensions={{ width: 20, height: 15 }}
+			index={expectedIndex} />);
+
+	let container = HelperFunctions.getFixture().firstChild as HTMLElement;
+	strictEqual((container.dataset as any).pageindex, "" + expectedIndex, "The index should be stored in the data-pageindex attribute");
+});

src/tests/clipperUI/components/previewViewer/pdfPreviewPage_tests.tsx

@@ -0,0 +1,90 @@
+import {Constants} from "../../../../scripts/constants";
+
+import {PdfPreviewPage, PdfPreviewPageProp} from "../../../../scripts/clipperUI/components/previewViewer/pdfPreviewPage";
+
+import {HelperFunctions} from "../../../helperFunctions";
+
+import {pdfDataUrls, pdfDataUrlDimensions} from "./pdfDataUrls";
+
+QUnit.module("pdfPreviewPage", {});
+
+test("Given that the page is selected, the image container's opacity should be set to 1", () => {
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={0} showPageNumber={false} isSelected={true} />);
+
+	let container = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.pdfPreviewImageCanvas)[0];
+	ok(!container.classList.contains(Constants.Classes.unselected), "The unselected class should not be applied to the container");
+	strictEqual(HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.unselected).length, 0,
+		"The unselected class should not be applied anywhere");
+});
+
+test("Given that the page is not selected, the image container's opacity should be set to 0.3", () => {
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={0} showPageNumber={false} isSelected={false} />);
+
+	let container = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.pdfPreviewImageCanvas)[0];
+	ok(container.classList.contains(Constants.Classes.unselected), "The unselected class should be applied to the container");
+	strictEqual(HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.unselected).length, 1,
+		"The unselected class should only be applied once in the component");
+});
+
+// Note: Because we fade out the page numbers using a css class, we check for opacity to determine if the number is in view
+
+test("Given that showPageNumber is true, the page number should be shown", () => {
+	let index = 19;
+	let expectedPageNumber = "" + (index + 1);
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={index} showPageNumber={true} isSelected={true} />);
+
+	let overlay = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.overlay)[0] as HTMLElement;
+	strictEqual(overlay.innerText, expectedPageNumber, "The page number shown should be the index + 1");
+	ok(!overlay.classList.contains(Constants.Classes.overlayHidden), "The overlay should not be hidden");
+});
+
+test("Given that showPageNumber is true, but the page is not selected, the page number should still be shown", () => {
+	let index = 19;
+	let expectedPageNumber = "" + (index + 1);
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={index} showPageNumber={true} isSelected={false} />);
+
+	let overlay = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.overlay)[0] as HTMLElement;
+	strictEqual(overlay.innerText, expectedPageNumber, "The page number shown should be the index + 1");
+	ok(!overlay.classList.contains(Constants.Classes.overlayHidden), "The overlay should not be hidden");
+});
+
+test("Given that showPageNumber is true, but the imgUrl is undefined, the page number should still be shown", () => {
+	let index = 19;
+	let expectedPageNumber = "" + (index + 1);
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			index={index} showPageNumber={true} isSelected={true} />);
+
+	let overlay = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.overlay)[0] as HTMLElement;
+	strictEqual(overlay.innerText, expectedPageNumber, "The page number shown should be the index + 1");
+	ok(!overlay.classList.contains(Constants.Classes.overlayHidden), "The overlay should not be hidden");
+});
+
+test("Given that showPageNumber is true and the index is 0, the page number should be shown", () => {
+	let index = 0;
+	let expectedPageNumber = "" + (index + 1);
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={index} showPageNumber={true} isSelected={true} />);
+
+	let overlay = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.overlay)[0] as HTMLElement;
+	strictEqual(overlay.innerText, expectedPageNumber, "The page number shown should be the index + 1");
+	ok(!overlay.classList.contains(Constants.Classes.overlayHidden), "The overlay should not be hidden");
+});
+
+test("Given that showPageNumber is false, the page number should not be shown", () => {
+	let pdfPreviewPage = HelperFunctions.mountToFixture(
+		<PdfPreviewPage viewportDimensions={{ width: 50, height: 50 }}
+			imgUrl={pdfDataUrls[0]} index={10} showPageNumber={false} isSelected={true} />);
+
+	let overlay = HelperFunctions.getFixture().getElementsByClassName(Constants.Classes.overlay)[0] as HTMLElement;
+	ok(overlay.classList.contains(Constants.Classes.overlayHidden), "The overlay should be hidden");
+});

src/tests/tests.html

@@ -25,7 +25,9 @@
 
 	<script type="text/javascript" src="clipperUI/components/previewViewer/augmentationPreview_tests.js"></script>
 	<script type="text/javascript" src="clipperUI/components/previewViewer/fullPagePreview_tests.js"></script>
+	<script type="text/javascript" src="clipperUI/components/previewViewer/pdfPageViewport_tests.js"></script>
 	<script type="text/javascript" src="clipperUI/components/previewViewer/pdfPreview_tests.js"></script>
+	<script type="text/javascript" src="clipperUI/components/previewViewer/pdfPreviewPage_tests.js"></script>
 	<script type="text/javascript" src="clipperUI/components/previewViewer/previewViewerAugmentationHeader_tests.js"></script>
 	<script type="text/javascript" src="clipperUI/components/previewViewer/previewViewerPdfHeader_tests.js"></script>
 	<script type="text/javascript" src="clipperUI/components/previewViewer/previewViewerRegionHeader_tests.js"></script>