@zextras/carbonio-ui-preview 0.2.0 → 0.2.1

package/lib-esm/preview/PdfPreview.test.js

@@ -42,9 +42,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { loadPDF, setup } from '../utils/test-utils';
 import { ZOOM_STEPS } from './constants';
 import { PdfPreview } from './PdfPreview';
+import { loadPDF, setup, triggerObserver } from 'test-utils';
 var pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 var zoomInIcon = 'icon: Plus';
 var zoomOutIcon = 'icon: Minus';
@@ -270,10 +270,10 @@ describe('Pdf Preview', function () {
                     _a.sent();
                     expect(actions[0].onClick).toHaveBeenCalled();
                     expect(onClose).toHaveBeenCalledTimes(1);
-                    // click on action 2 skips the handler of the action since it is disabled and do not calls onClose
+                    // click on action 2 skips the handler of the action since it is disabled and does not call onClose
                     return [4 /*yield*/, user.click(action2Item)];
                 case 4:
-                    // click on action 2 skips the handler of the action since it is disabled and do not calls onClose
+                    // click on action 2 skips the handler of the action since it is disabled and does not call onClose
                     _a.sent();
                     expect(actions[1].onClick).not.toHaveBeenCalled();
                     expect(onClose).toHaveBeenCalledTimes(1);
@@ -296,14 +296,14 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('Zoom starts at lowest step', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, user, canvas;
+        var onClose, canvas;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
-                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                    setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }).user;
+                    });
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
                     _a.sent();
@@ -438,19 +438,19 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('Fit to width zoom set width of pdf to width of the window', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     mockPdfWidth = 1000;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
@@ -459,7 +459,7 @@ describe('Pdf Preview', function () {
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(mockPdfWidth));
                     expect(screen.getByTestId(zoomResetWidthIcon)).toBeVisible();
@@ -469,19 +469,19 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('Reset zoom set width to lowest step', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     mockPdfWidth = 1000;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
@@ -490,14 +490,14 @@ describe('Pdf Preview', function () {
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(mockPdfWidth));
                     expect(screen.getByTestId(zoomResetWidthIcon)).toBeVisible();
                     expect(screen.queryByTestId(zoomFitToWidthIcon)).not.toBeInTheDocument();
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomResetWidthIcon))];
                 case 3:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
@@ -507,26 +507,26 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('When client width is lower than lowest zoom step and zoom is set to fit to width, decrease zoom is disabled and increase is enabled', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     mockPdfWidth = ZOOM_STEPS[0] - 1;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
                     expect(screen.getByTestId(zoomOutIcon).parentElement).toHaveAttribute('disabled', '');
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
@@ -536,26 +536,26 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('When client width is greater than greatest zoom step and zoom is set to fit to width, decrease zoom is enabled and increase is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     mockPdfWidth = ZOOM_STEPS[ZOOM_STEPS.length - 1] + 1;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
                     expect(screen.getByTestId(zoomInIcon).parentElement).toHaveAttribute('disabled', '');
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
@@ -565,32 +565,32 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('After fit to width, decrease zoom set zoom to nearest lower zoom step', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, stepToReach, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, stepToReach, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     stepToReach = 1;
                     mockPdfWidth = ZOOM_STEPS[stepToReach + 1] - 1;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
                     expect(screen.getByTestId(zoomOutIcon).parentElement).not.toHaveAttribute('disabled', '');
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomOutIcon))];
                 case 3:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[stepToReach]));
                     return [2 /*return*/];
@@ -598,32 +598,32 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('After fit to width, increase zoom set zoom to nearest greater zoom step', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, stepToReach, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, stepToReach, mockPdfWidth, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     stepToReach = 2;
                     mockPdfWidth = ZOOM_STEPS[stepToReach - 1] + 1;
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
                     jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
                     expect(screen.getByTestId(zoomInIcon).parentElement).not.toHaveAttribute('disabled', '');
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomInIcon))];
                 case 3:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[stepToReach]));
                     return [2 /*return*/];
@@ -631,19 +631,19 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('When fit to width is active, resize of the window update width of the pdf', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container, getPreviewClientWidthMock;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, mockPdfWidth, user, getPreviewClientWidthMock;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
                     mockPdfWidth = [1001, 1501, 2001];
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
@@ -651,7 +651,7 @@ describe('Pdf Preview', function () {
                     getPreviewClientWidthMock.mockReturnValueOnce(mockPdfWidth[0]);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(mockPdfWidth[0]));
                     getPreviewClientWidthMock.mockReturnValueOnce(mockPdfWidth[1]);
@@ -666,26 +666,25 @@ describe('Pdf Preview', function () {
         });
     }); });
     test('Click on disabled decrease/increase zoom actions does not change step and does not close preview', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onClose, ref, mockPdfWidth, _a, user, container;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var onClose, ref, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     onClose = jest.fn();
                     ref = React.createRef();
-                    mockPdfWidth = [1001, 1501, 2001];
-                    _a = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                    user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
-                    }), user = _a.user, container = _a.container;
+                    }).user;
                     return [4 /*yield*/, screen.findByText(/loading pdf/i)];
                 case 1:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toBeVisible();
                     // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
                     expect(screen.getByTestId(zoomOutIcon).parentElement).toHaveAttribute('disabled', '');
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomOutIcon))];
                 case 2:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
                     expect(onClose).not.toHaveBeenCalled();
@@ -694,14 +693,14 @@ describe('Pdf Preview', function () {
                         .mockReturnValue(ZOOM_STEPS[ZOOM_STEPS.length - 1]);
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
                 case 3:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[ZOOM_STEPS.length - 1]));
                     // eslint-disable-next-line testing-library/no-node-access,jest-dom/prefer-enabled-disabled
                     expect(screen.getByTestId(zoomInIcon).parentElement).toHaveAttribute('disabled', '');
                     return [4 /*yield*/, user.click(screen.getByTestId(zoomInIcon))];
                 case 4:
-                    _b.sent();
+                    _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
                     expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[ZOOM_STEPS.length - 1]));
                     expect(onClose).not.toHaveBeenCalled();
@@ -709,5 +708,266 @@ describe('Pdf Preview', function () {
             }
         });
     }); });
+    describe('Page selector', function () {
+        test('shows page controller', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        });
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        expect(screen.getByRole('textbox', { name: /current page/i })).toBeVisible();
+                        // mock pdf has 4 pages
+                        expect(screen.getByText('4')).toBeVisible();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('blur is a confirmation event on page input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '2')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.tab()];
+                    case 4:
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        expect(pageInput).toHaveDisplayValue('2');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('enter key is a confirmation event on page input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '2')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '{Enter}')];
+                    case 4:
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        expect(pageInput).toHaveDisplayValue('2');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('when input is confirmed, input loses focus and the document is scrolled to typed page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, scrollIntoViewFn, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        scrollIntoViewFn = jest.fn();
+                        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '2')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText(/page/i))];
+                    case 4:
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        expect(pageInput).toHaveDisplayValue('2');
+                        expect(scrollIntoViewFn).toHaveBeenCalledTimes(1);
+                        expect(scrollIntoViewFn.mock.instances[0]).toHaveAttribute('data-page-number', '2');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('when input is confirmed with an invalid value, input loses focus and the input value is reset to previous valid page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, scrollIntoViewFn, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        scrollIntoViewFn = jest.fn();
+                        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, 'invalid')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText(/page/i))];
+                    case 4:
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        expect(pageInput).toHaveDisplayValue('1');
+                        expect(scrollIntoViewFn).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('on scroll, if focus is not on input, value is updated with current page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, pageInput, page2Element;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        });
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        page2Element = document.querySelector('[data-page-number="2"]');
+                        expect(page2Element).not.toBeNull();
+                        return [4 /*yield*/, triggerObserver(page2Element)];
+                    case 2:
+                        _a.sent();
+                        expect(pageInput).toHaveDisplayValue('2');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('on scroll, if focus is on input, value is updated with current page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, user, pageInput, page2Element;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '4')];
+                    case 3:
+                        _a.sent();
+                        expect(pageInput).toHaveFocus();
+                        page2Element = document.querySelector('[data-page-number="2"]');
+                        expect(page2Element).not.toBeNull();
+                        return [4 /*yield*/, triggerObserver(page2Element)];
+                    case 4:
+                        _a.sent();
+                        expect(pageInput).toHaveDisplayValue('2');
+                        expect(pageInput).toHaveFocus();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('esc key makes user exit from the preview, even when focus is on input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, ref, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        ref = React.createRef();
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, ref: ref }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    case 1:
+                        _a.sent();
+                        // eslint-disable-next-line testing-library/no-node-access
+                        expect(document.querySelector('canvas')).toBeVisible();
+                        expect(screen.getByText(/page/i)).toBeVisible();
+                        pageInput = screen.getByRole('textbox', { name: /current page/i });
+                        expect(pageInput).toHaveDisplayValue('1');
+                        return [4 /*yield*/, user.clear(pageInput)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(pageInput, '4')];
+                    case 3:
+                        _a.sent();
+                        expect(pageInput).toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 4:
+                        _a.sent();
+                        expect(onClose).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });
 //# sourceMappingURL=PdfPreview.test.js.map