pdf.js/test/unit/ui_utils_spec.js
Tim van der Meij 10574a0f8a
Remove obsolete done callbacks from the unit tests
The done callbacks are an outdated mechanism to signal Jasmine that a
unit test is done, mostly in cases where a unit test needed to wait for
an asynchronous operation to complete before doing its assertions.
Nowadays a much better mechanism is in place for that, namely simply
passing an asynchronous function to Jasmine, so we don't need callbacks
anymore (which require more code and may be more difficult to reason
about).

In these particular cases though the done callbacks never had any real
use since nothing asynchronous happens in these places. Synchronous
functions don't need to use done callbacks since Jasmine simply knows
it's done when the function reaches its normal end, so we can safely get
rid of these callbacks. The telltale sign is if the done callback is
used unconditionally at the end of the function.

This is all done in an effort to over time get rid of all callbacks in
the unit test code.
2021-04-10 20:29:39 +02:00

875 lines
25 KiB
JavaScript

/* Copyright 2017 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
backtrackBeforeAllVisibleElements,
binarySearchFirstItem,
EventBus,
getPageSizeInches,
getVisibleElements,
isPortraitOrientation,
isValidRotation,
moveToEndOfArray,
waitOnEventOrTimeout,
WaitOnType,
} from "../../web/ui_utils.js";
import { isNodeJS } from "../../src/shared/is_node.js";
describe("ui_utils", function () {
describe("binary search", function () {
function isTrue(boolean) {
return boolean;
}
function isGreater3(number) {
return number > 3;
}
it("empty array", function () {
expect(binarySearchFirstItem([], isTrue)).toEqual(0);
});
it("single boolean entry", function () {
expect(binarySearchFirstItem([false], isTrue)).toEqual(1);
expect(binarySearchFirstItem([true], isTrue)).toEqual(0);
});
it("three boolean entries", function () {
expect(binarySearchFirstItem([true, true, true], isTrue)).toEqual(0);
expect(binarySearchFirstItem([false, true, true], isTrue)).toEqual(1);
expect(binarySearchFirstItem([false, false, true], isTrue)).toEqual(2);
expect(binarySearchFirstItem([false, false, false], isTrue)).toEqual(3);
});
it("three numeric entries", function () {
expect(binarySearchFirstItem([0, 1, 2], isGreater3)).toEqual(3);
expect(binarySearchFirstItem([2, 3, 4], isGreater3)).toEqual(2);
expect(binarySearchFirstItem([4, 5, 6], isGreater3)).toEqual(0);
});
});
describe("EventBus", function () {
it("dispatch event", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function (evt) {
expect(evt).toEqual(undefined);
count++;
});
eventBus.dispatch("test");
expect(count).toEqual(1);
});
it("dispatch event with arguments", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function (evt) {
expect(evt).toEqual({ abc: 123 });
count++;
});
eventBus.dispatch("test", {
abc: 123,
});
expect(count).toEqual(1);
});
it("dispatch different event", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function () {
count++;
});
eventBus.dispatch("nottest");
expect(count).toEqual(0);
});
it("dispatch event multiple times", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.dispatch("test");
eventBus.on("test", function () {
count++;
});
eventBus.dispatch("test");
eventBus.dispatch("test");
expect(count).toEqual(2);
});
it("dispatch event to multiple handlers", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function () {
count++;
});
eventBus.on("test", function () {
count++;
});
eventBus.dispatch("test");
expect(count).toEqual(2);
});
it("dispatch to detached", function () {
const eventBus = new EventBus();
let count = 0;
const listener = function () {
count++;
};
eventBus.on("test", listener);
eventBus.dispatch("test");
eventBus.off("test", listener);
eventBus.dispatch("test");
expect(count).toEqual(1);
});
it("dispatch to wrong detached", function () {
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function () {
count++;
});
eventBus.dispatch("test");
eventBus.off("test", function () {
count++;
});
eventBus.dispatch("test");
expect(count).toEqual(2);
});
it("dispatch to detached during handling", function () {
const eventBus = new EventBus();
let count = 0;
const listener1 = function () {
eventBus.off("test", listener2);
count++;
};
const listener2 = function () {
eventBus.off("test", listener1);
count++;
};
eventBus.on("test", listener1);
eventBus.on("test", listener2);
eventBus.dispatch("test");
eventBus.dispatch("test");
expect(count).toEqual(2);
});
it("dispatch event to handlers with/without 'once' option", function () {
const eventBus = new EventBus();
let multipleCount = 0,
onceCount = 0;
eventBus.on("test", function () {
multipleCount++;
});
eventBus.on(
"test",
function () {
onceCount++;
},
{ once: true }
);
eventBus.dispatch("test");
eventBus.dispatch("test");
eventBus.dispatch("test");
expect(multipleCount).toEqual(3);
expect(onceCount).toEqual(1);
});
it("should not re-dispatch to DOM", function (done) {
if (isNodeJS) {
pending("Document in not supported in Node.js.");
}
const eventBus = new EventBus();
let count = 0;
eventBus.on("test", function (evt) {
expect(evt).toEqual(undefined);
count++;
});
function domEventListener() {
done.fail("shall not dispatch DOM event.");
}
document.addEventListener("test", domEventListener);
eventBus.dispatch("test");
Promise.resolve().then(() => {
expect(count).toEqual(1);
document.removeEventListener("test", domEventListener);
done();
});
});
});
describe("isValidRotation", function () {
it("should reject non-integer angles", function () {
expect(isValidRotation()).toEqual(false);
expect(isValidRotation(null)).toEqual(false);
expect(isValidRotation(NaN)).toEqual(false);
expect(isValidRotation([90])).toEqual(false);
expect(isValidRotation("90")).toEqual(false);
expect(isValidRotation(90.5)).toEqual(false);
});
it("should reject non-multiple of 90 degree angles", function () {
expect(isValidRotation(45)).toEqual(false);
expect(isValidRotation(-123)).toEqual(false);
});
it("should accept valid angles", function () {
expect(isValidRotation(0)).toEqual(true);
expect(isValidRotation(90)).toEqual(true);
expect(isValidRotation(-270)).toEqual(true);
expect(isValidRotation(540)).toEqual(true);
});
});
describe("isPortraitOrientation", function () {
it("should be portrait orientation", function () {
expect(
isPortraitOrientation({
width: 200,
height: 400,
})
).toEqual(true);
expect(
isPortraitOrientation({
width: 500,
height: 500,
})
).toEqual(true);
});
it("should be landscape orientation", function () {
expect(
isPortraitOrientation({
width: 600,
height: 300,
})
).toEqual(false);
});
});
describe("waitOnEventOrTimeout", function () {
let eventBus;
beforeAll(function () {
eventBus = new EventBus();
});
afterAll(function () {
eventBus = null;
});
it("should reject invalid parameters", function (done) {
const invalidTarget = waitOnEventOrTimeout({
target: "window",
name: "DOMContentLoaded",
}).then(
function () {
throw new Error("Should reject invalid parameters.");
},
function (reason) {
expect(reason instanceof Error).toEqual(true);
}
);
const invalidName = waitOnEventOrTimeout({
target: eventBus,
name: "",
}).then(
function () {
throw new Error("Should reject invalid parameters.");
},
function (reason) {
expect(reason instanceof Error).toEqual(true);
}
);
const invalidDelay = waitOnEventOrTimeout({
target: eventBus,
name: "pagerendered",
delay: -1000,
}).then(
function () {
throw new Error("Should reject invalid parameters.");
},
function (reason) {
expect(reason instanceof Error).toEqual(true);
}
);
Promise.all([invalidTarget, invalidName, invalidDelay]).then(
done,
done.fail
);
});
it("should resolve on event, using the DOM", function (done) {
if (isNodeJS) {
pending("Document in not supported in Node.js.");
}
const button = document.createElement("button");
const buttonClicked = waitOnEventOrTimeout({
target: button,
name: "click",
delay: 10000,
});
// Immediately dispatch the expected event.
button.click();
buttonClicked.then(function (type) {
expect(type).toEqual(WaitOnType.EVENT);
done();
}, done.fail);
});
it("should resolve on timeout, using the DOM", function (done) {
if (isNodeJS) {
pending("Document in not supported in Node.js.");
}
const button = document.createElement("button");
const buttonClicked = waitOnEventOrTimeout({
target: button,
name: "click",
delay: 10,
});
// Do *not* dispatch the event, and wait for the timeout.
buttonClicked.then(function (type) {
expect(type).toEqual(WaitOnType.TIMEOUT);
done();
}, done.fail);
});
it("should resolve on event, using the EventBus", function (done) {
const pageRendered = waitOnEventOrTimeout({
target: eventBus,
name: "pagerendered",
delay: 10000,
});
// Immediately dispatch the expected event.
eventBus.dispatch("pagerendered");
pageRendered.then(function (type) {
expect(type).toEqual(WaitOnType.EVENT);
done();
}, done.fail);
});
it("should resolve on timeout, using the EventBus", function (done) {
const pageRendered = waitOnEventOrTimeout({
target: eventBus,
name: "pagerendered",
delay: 10,
});
// Do *not* dispatch the event, and wait for the timeout.
pageRendered.then(function (type) {
expect(type).toEqual(WaitOnType.TIMEOUT);
done();
}, done.fail);
});
});
describe("getPageSizeInches", function () {
it("gets page size (in inches)", function () {
const page = {
view: [0, 0, 595.28, 841.89],
userUnit: 1.0,
rotate: 0,
};
const { width, height } = getPageSizeInches(page);
expect(+width.toPrecision(3)).toEqual(8.27);
expect(+height.toPrecision(4)).toEqual(11.69);
});
it("gets page size (in inches), for non-default /Rotate entry", function () {
const pdfPage1 = { view: [0, 0, 612, 792], userUnit: 1, rotate: 0 };
const { width: width1, height: height1 } = getPageSizeInches(pdfPage1);
expect(width1).toEqual(8.5);
expect(height1).toEqual(11);
const pdfPage2 = { view: [0, 0, 612, 792], userUnit: 1, rotate: 90 };
const { width: width2, height: height2 } = getPageSizeInches(pdfPage2);
expect(width2).toEqual(11);
expect(height2).toEqual(8.5);
});
});
describe("getVisibleElements", function () {
// These values are based on margin/border values in the CSS, but there
// isn't any real need for them to be; they just need to take *some* value.
const BORDER_WIDTH = 9;
const SPACING = 2 * BORDER_WIDTH - 7;
// This is a helper function for assembling an array of view stubs from an
// array of arrays of [width, height] pairs, which represents wrapped lines
// of pages. It uses the above constants to add realistic spacing between
// the pages and the lines.
//
// If you're reading a test that calls makePages, you should think of the
// inputs to makePages as boxes with no borders, being laid out in a
// container that has no margins, so that the top of the tallest page in
// the first row will be at y = 0, and the left of the first page in
// the first row will be at x = 0. The spacing between pages in a row, and
// the spacing between rows, is SPACING. If you wanted to construct an
// actual HTML document with the same layout, you should give each page
// element a margin-right and margin-bottom of SPACING, and add no other
// margins, borders, or padding.
//
// If you're reading makePages itself, you'll see a somewhat more
// complicated picture because this suite of tests is exercising
// getVisibleElements' ability to account for the borders that real page
// elements have. makePages tests this by subtracting a BORDER_WIDTH from
// offsetLeft/Top and adding it to clientLeft/Top. So the element stubs that
// getVisibleElements sees may, for example, actually have an offsetTop of
// -9. If everything is working correctly, this detail won't leak out into
// the tests themselves, and so the tests shouldn't use the value of
// BORDER_WIDTH at all.
function makePages(lines) {
const result = [];
let lineTop = 0,
id = 0;
for (const line of lines) {
const lineHeight = line.reduce(function (maxHeight, pair) {
return Math.max(maxHeight, pair[1]);
}, 0);
let offsetLeft = -BORDER_WIDTH;
for (const [clientWidth, clientHeight] of line) {
const offsetTop =
lineTop + (lineHeight - clientHeight) / 2 - BORDER_WIDTH;
const div = {
offsetLeft,
offsetTop,
clientWidth,
clientHeight,
clientLeft: BORDER_WIDTH,
clientTop: BORDER_WIDTH,
};
result.push({ id, div });
++id;
offsetLeft += clientWidth + SPACING;
}
lineTop += lineHeight + SPACING;
}
return result;
}
// This is a reimplementation of getVisibleElements without the
// optimizations.
function slowGetVisibleElements(scroll, pages) {
const views = [];
const { scrollLeft, scrollTop } = scroll;
const scrollRight = scrollLeft + scroll.clientWidth;
const scrollBottom = scrollTop + scroll.clientHeight;
for (const view of pages) {
const { div } = view;
const viewLeft = div.offsetLeft + div.clientLeft;
const viewRight = viewLeft + div.clientWidth;
const viewTop = div.offsetTop + div.clientTop;
const viewBottom = viewTop + div.clientHeight;
if (
viewLeft < scrollRight &&
viewRight > scrollLeft &&
viewTop < scrollBottom &&
viewBottom > scrollTop
) {
const hiddenHeight =
Math.max(0, scrollTop - viewTop) +
Math.max(0, viewBottom - scrollBottom);
const hiddenWidth =
Math.max(0, scrollLeft - viewLeft) +
Math.max(0, viewRight - scrollRight);
const fractionHeight =
(div.clientHeight - hiddenHeight) / div.clientHeight;
const fractionWidth =
(div.clientWidth - hiddenWidth) / div.clientWidth;
const percent = (fractionHeight * fractionWidth * 100) | 0;
views.push({
id: view.id,
x: viewLeft,
y: viewTop,
view,
percent,
widthPercent: (fractionWidth * 100) | 0,
});
}
}
return { first: views[0], last: views[views.length - 1], views };
}
// This function takes a fixed layout of pages and compares the system under
// test to the slower implementation above, for a range of scroll viewport
// sizes and positions.
function scrollOverDocument(pages, horizontal = false, rtl = false) {
const size = pages.reduce(function (max, { div }) {
return Math.max(
max,
horizontal
? Math.abs(div.offsetLeft + div.clientLeft + div.clientWidth)
: div.offsetTop + div.clientTop + div.clientHeight
);
}, 0);
// The numbers (7 and 5) are mostly arbitrary, not magic: increase them to
// make scrollOverDocument tests faster, decrease them to make the tests
// more scrupulous, and keep them coprime to reduce the chance of missing
// weird edge case bugs.
for (let i = -size; i < size; i += 7) {
// The screen height (or width) here (j - i) doubles on each inner loop
// iteration; again, this is just to test an interesting range of cases
// without slowing the tests down to check every possible case.
for (let j = i + 5; j < size; j += j - i) {
const scrollEl = horizontal
? {
scrollTop: 0,
scrollLeft: i,
clientHeight: 10000,
clientWidth: j - i,
}
: {
scrollTop: i,
scrollLeft: 0,
clientHeight: j - i,
clientWidth: 10000,
};
expect(
getVisibleElements({
scrollEl,
views: pages,
sortByVisibility: false,
horizontal,
rtl,
})
).toEqual(slowGetVisibleElements(scrollEl, pages));
}
}
}
it("with pages of varying height", function () {
const pages = makePages([
[
[50, 20],
[20, 50],
],
[
[30, 12],
[12, 30],
],
[
[20, 50],
[50, 20],
],
[
[50, 20],
[20, 50],
],
]);
scrollOverDocument(pages);
});
it("widescreen challenge", function () {
const pages = makePages([
[
[10, 50],
[10, 60],
[10, 70],
[10, 80],
[10, 90],
],
[
[10, 90],
[10, 80],
[10, 70],
[10, 60],
[10, 50],
],
[
[10, 50],
[10, 60],
[10, 70],
[10, 80],
[10, 90],
],
]);
scrollOverDocument(pages);
});
it("works with horizontal scrolling", function () {
const pages = makePages([
[
[10, 50],
[20, 20],
[30, 10],
],
]);
scrollOverDocument(pages, /* horizontal = */ true);
});
it("works with horizontal scrolling with RTL-documents", function () {
const pages = makePages([
[
[-10, 50],
[-20, 20],
[-30, 10],
],
]);
scrollOverDocument(pages, /* horizontal = */ true, /* rtl = */ true);
});
it("handles `sortByVisibility` correctly", function () {
const scrollEl = {
scrollTop: 75,
scrollLeft: 0,
clientHeight: 750,
clientWidth: 1500,
};
const views = makePages([[[100, 150]], [[100, 150]], [[100, 150]]]);
const visible = getVisibleElements({ scrollEl, views });
const visibleSorted = getVisibleElements({
scrollEl,
views,
sortByVisibility: true,
});
const viewsOrder = [],
viewsSortedOrder = [];
for (const view of visible.views) {
viewsOrder.push(view.id);
}
for (const view of visibleSorted.views) {
viewsSortedOrder.push(view.id);
}
expect(viewsOrder).toEqual([0, 1, 2]);
expect(viewsSortedOrder).toEqual([1, 2, 0]);
});
it("handles views being empty", function () {
const scrollEl = {
scrollTop: 10,
scrollLeft: 0,
clientHeight: 750,
clientWidth: 1500,
};
const views = [];
expect(getVisibleElements({ scrollEl, views })).toEqual({
first: undefined,
last: undefined,
views: [],
});
});
it("handles all views being hidden (without errors)", function () {
const scrollEl = {
scrollTop: 100000,
scrollLeft: 0,
clientHeight: 750,
clientWidth: 1500,
};
const views = makePages([[[100, 150]], [[100, 150]], [[100, 150]]]);
expect(getVisibleElements({ scrollEl, views })).toEqual({
first: undefined,
last: undefined,
views: [],
});
});
// This sub-suite is for a notionally internal helper function for
// getVisibleElements.
describe("backtrackBeforeAllVisibleElements", function () {
// Layout elements common to all tests
const tallPage = [10, 50];
const shortPage = [10, 10];
// A scroll position that ensures that only the tall pages in the second
// row are visible
const top1 =
20 +
SPACING + // height of the first row
40; // a value between 30 (so the short pages on the second row are
// hidden) and 50 (so the tall pages are visible)
// A scroll position that ensures that all of the pages in the second row
// are visible, but the tall ones are a tiny bit cut off
const top2 =
20 +
SPACING + // height of the first row
10; // a value greater than 0 but less than 30
// These tests refer to cases enumerated in the comments of
// backtrackBeforeAllVisibleElements.
it("handles case 1", function () {
const pages = makePages([
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
[tallPage, shortPage, tallPage, shortPage],
[
[10, 50],
[10, 50],
[10, 50],
[10, 50],
],
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
[[10, 20]],
]);
// binary search would land on the second row, first page
const bsResult = 4;
expect(
backtrackBeforeAllVisibleElements(bsResult, pages, top1)
).toEqual(4);
});
it("handles case 2", function () {
const pages = makePages([
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
[tallPage, shortPage, tallPage, tallPage],
[
[10, 50],
[10, 50],
[10, 50],
[10, 50],
],
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
]);
// binary search would land on the second row, third page
const bsResult = 6;
expect(
backtrackBeforeAllVisibleElements(bsResult, pages, top1)
).toEqual(4);
});
it("handles case 3", function () {
const pages = makePages([
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
[tallPage, shortPage, tallPage, shortPage],
[
[10, 50],
[10, 50],
[10, 50],
[10, 50],
],
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
]);
// binary search would land on the third row, first page
const bsResult = 8;
expect(
backtrackBeforeAllVisibleElements(bsResult, pages, top1)
).toEqual(4);
});
it("handles case 4", function () {
const pages = makePages([
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
[tallPage, shortPage, tallPage, shortPage],
[
[10, 50],
[10, 50],
[10, 50],
[10, 50],
],
[
[10, 20],
[10, 20],
[10, 20],
[10, 20],
],
]);
// binary search would land on the second row, first page
const bsResult = 4;
expect(
backtrackBeforeAllVisibleElements(bsResult, pages, top2)
).toEqual(4);
});
});
});
describe("moveToEndOfArray", function () {
it("works on empty arrays", function () {
const data = [];
moveToEndOfArray(data, function () {});
expect(data).toEqual([]);
});
it("works when moving everything", function () {
const data = [1, 2, 3, 4, 5];
moveToEndOfArray(data, function () {
return true;
});
expect(data).toEqual([1, 2, 3, 4, 5]);
});
it("works when moving some things", function () {
const data = [1, 2, 3, 4, 5];
moveToEndOfArray(data, function (x) {
return x % 2 === 0;
});
expect(data).toEqual([1, 3, 5, 2, 4]);
});
it("works when moving one thing", function () {
const data = [1, 2, 3, 4, 5];
moveToEndOfArray(data, function (x) {
return x === 1;
});
expect(data).toEqual([2, 3, 4, 5, 1]);
});
it("works when moving nothing", function () {
const data = [1, 2, 3, 4, 5];
moveToEndOfArray(data, function (x) {
return x === 0;
});
expect(data).toEqual([1, 2, 3, 4, 5]);
});
});
});