@zextras/carbonio-ui-preview 0.2.0 → 0.2.2

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';
@@ -61,10 +61,10 @@ describe('Pdf Preview', function () {
                     setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
                     });
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
-                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
                     expect(screen.getByTestId('pdf-preview-container')).toBeInTheDocument();
                     pageElement = document.querySelector('[data-page-number="1"]');
                     expect(pageElement).toBeDefined();
@@ -81,7 +81,7 @@ describe('Pdf Preview', function () {
             setup(React.createElement(PdfPreview, { show: false, src: pdfFile.dataURI, onClose: onClose }), {
                 setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
             });
-            expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+            expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
             expect(screen.queryByTestId('pdf-preview-container')).not.toBeInTheDocument();
             return [2 /*return*/];
         });
@@ -95,13 +95,13 @@ describe('Pdf Preview', function () {
                     setup(React.createElement(PdfPreview, { show: true, src: "invalid-pdf.pdf", onClose: onClose }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
                     });
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
-                    return [4 /*yield*/, screen.findByText(/Failed to load PDF file/i)];
+                    return [4 /*yield*/, screen.findByText(/Failed to load document preview./i)];
                 case 2:
                     _a.sent();
-                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
                     expect(screen.getByTestId('pdf-preview-container')).toBeInTheDocument();
                     return [2 /*return*/];
             }
@@ -148,10 +148,10 @@ describe('Pdf Preview', function () {
                     setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, filename: "file name", extension: "pdf", size: "18KB" }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
                     });
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
-                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
                     expect(screen.getByText(/file name/i)).toBeVisible();
                     expect(screen.getByText(/pdf.*18KB/i)).toBeVisible();
                     return [2 /*return*/];
@@ -167,10 +167,10 @@ describe('Pdf Preview', function () {
                     user = 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)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
-                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
                     return [4 /*yield*/, user.keyboard('{Escape}')];
                 case 2:
                     _a.sent();
@@ -195,10 +195,10 @@ describe('Pdf Preview', function () {
                     user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, closeAction: closeAction }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
                     }).user;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
-                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.queryByText(/Loading document preview…/i)).not.toBeInTheDocument();
                     closeActionElement = screen.getByTestId('icon: Activity');
                     expect(closeActionElement).toBeVisible();
                     return [4 /*yield*/, user.hover(closeActionElement)];
@@ -246,7 +246,7 @@ describe('Pdf Preview', function () {
                     user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, actions: actions, filename: "pdf name", closeAction: closeAction }), {
                         setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
                     }).user;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, waitFor(function () {
@@ -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,15 +296,15 @@ 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)];
+                    });
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
                     canvas = document.querySelector('canvas');
@@ -323,7 +323,7 @@ describe('Pdf Preview', function () {
                     user = 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)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
                     canvas = document.querySelector('canvas');
@@ -356,7 +356,7 @@ describe('Pdf Preview', function () {
                     user = 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)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
@@ -409,7 +409,7 @@ describe('Pdf Preview', function () {
                     user = 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)];
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/i)];
                 case 1:
                     _a.sent();
                     // eslint-disable-next-line testing-library/no-node-access
@@ -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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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;
-                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/Loading document preview…/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,533 @@ describe('Pdf Preview', function () {
             }
         });
     }); });
+    describe('Page selector', function () {
+        test('shows page controller', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        });
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, user, pageInput;
+            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 }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, user, pageInput;
+            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 }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, scrollIntoViewFn, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        scrollIntoViewFn = jest.fn();
+                        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, scrollIntoViewFn, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        scrollIntoViewFn = jest.fn();
+                        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, pageInput, page2Element;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        });
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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, user, pageInput, page2Element;
+            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 }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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('must press esc key 2 times to make user exit from the preview, when focus is on input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, user, pageInput;
+            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 }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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).not.toHaveBeenCalled();
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 5:
+                        _a.sent();
+                        expect(onClose).toHaveBeenCalledTimes(1);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('keyboard shortcuts', function () {
+        describe('Home and End', function () {
+            test('click End go to last page and Home return to the first page', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onClose, user, pageInput;
+                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 }), {
+                                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                            }).user;
+                            return [4 /*yield*/, screen.findByText(/Loading document preview…/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.keyboard('{End}')];
+                        case 2:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('4');
+                            return [4 /*yield*/, user.keyboard('{Home}')];
+                        case 3:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('1');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            test('click End go to last page and Home return to the first page, but they do not work if the page input is focussed ', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onClose, user, pageInput;
+                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 }), {
+                                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                            }).user;
+                            return [4 /*yield*/, screen.findByText(/Loading document preview…/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.click(pageInput)];
+                        case 2:
+                            _a.sent();
+                            expect(pageInput).toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{End}')];
+                        case 3:
+                            _a.sent();
+                            expect(pageInput).not.toHaveDisplayValue('4');
+                            expect(pageInput).toHaveDisplayValue('1');
+                            // remove focus
+                            return [4 /*yield*/, user.keyboard('{Escape}')];
+                        case 4:
+                            // remove focus
+                            _a.sent();
+                            expect(pageInput).not.toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{End}')];
+                        case 5:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('4');
+                            // focus input again
+                            return [4 /*yield*/, user.click(pageInput)];
+                        case 6:
+                            // focus input again
+                            _a.sent();
+                            expect(pageInput).toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{Home}')];
+                        case 7:
+                            _a.sent();
+                            expect(pageInput).not.toHaveDisplayValue('1');
+                            expect(pageInput).toHaveDisplayValue('4');
+                            // remove focus
+                            return [4 /*yield*/, user.keyboard('{Escape}')];
+                        case 8:
+                            // remove focus
+                            _a.sent();
+                            expect(pageInput).not.toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{Home}')];
+                        case 9:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('1');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('PageUp and PageDown', function () {
+            test('click PageDown go to the next page and PageUp go to the previous page', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onClose, user, pageInput;
+                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 }), {
+                                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                            }).user;
+                            return [4 /*yield*/, screen.findByText(/Loading document preview…/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.keyboard('{PageDown}')];
+                        case 2:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('2');
+                            return [4 /*yield*/, user.keyboard('{PageDown}')];
+                        case 3:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('3');
+                            return [4 /*yield*/, user.keyboard('{PageDown}')];
+                        case 4:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('4');
+                            return [4 /*yield*/, user.keyboard('{PageDown}')];
+                        case 5:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('4');
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 6:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('3');
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 7:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('2');
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 8:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('1');
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 9:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('1');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            test('click PageDown go to the next page and PageUp go to the previous page, but they do not work if the page input is focussed ', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onClose, user, pageInput;
+                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 }), {
+                                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                            }).user;
+                            return [4 /*yield*/, screen.findByText(/Loading document preview…/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.click(pageInput)];
+                        case 2:
+                            _a.sent();
+                            expect(pageInput).toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{PageDown}')];
+                        case 3:
+                            _a.sent();
+                            expect(pageInput).not.toHaveDisplayValue('2');
+                            expect(pageInput).toHaveDisplayValue('1');
+                            // remove focus
+                            return [4 /*yield*/, user.keyboard('{Escape}')];
+                        case 4:
+                            // remove focus
+                            _a.sent();
+                            expect(pageInput).not.toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{PageDown}')];
+                        case 5:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('2');
+                            // focus input again
+                            return [4 /*yield*/, user.click(pageInput)];
+                        case 6:
+                            // focus input again
+                            _a.sent();
+                            expect(pageInput).toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 7:
+                            _a.sent();
+                            expect(pageInput).not.toHaveDisplayValue('1');
+                            expect(pageInput).toHaveDisplayValue('2');
+                            // remove focus
+                            return [4 /*yield*/, user.keyboard('{Escape}')];
+                        case 8:
+                            // remove focus
+                            _a.sent();
+                            expect(pageInput).not.toHaveFocus();
+                            return [4 /*yield*/, user.keyboard('{PageUp}')];
+                        case 9:
+                            _a.sent();
+                            expect(pageInput).toHaveDisplayValue('1');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        test('ArrowUp and ArrowDown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onClose, scrollByFn, user, pageInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onClose = jest.fn();
+                        scrollByFn = jest.fn();
+                        window.HTMLElement.prototype.scrollBy = scrollByFn;
+                        user = setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose }), {
+                            setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                        }).user;
+                        return [4 /*yield*/, screen.findByText(/Loading document preview…/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.click(pageInput)];
+                    case 2:
+                        _a.sent();
+                        expect(pageInput).toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}')];
+                    case 3:
+                        _a.sent();
+                        expect(scrollByFn).not.toHaveBeenCalled();
+                        // remove focus
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 4:
+                        // remove focus
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowDown}')];
+                    case 5:
+                        _a.sent();
+                        expect(scrollByFn).toHaveBeenCalledTimes(1);
+                        expect(scrollByFn).toHaveBeenCalledWith(0, 40);
+                        return [4 /*yield*/, user.click(pageInput)];
+                    case 6:
+                        _a.sent();
+                        expect(pageInput).toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowUp}')];
+                    case 7:
+                        _a.sent();
+                        expect(scrollByFn).toHaveBeenCalledTimes(1);
+                        // remove focus
+                        return [4 /*yield*/, user.keyboard('{Escape}')];
+                    case 8:
+                        // remove focus
+                        _a.sent();
+                        expect(pageInput).not.toHaveFocus();
+                        return [4 /*yield*/, user.keyboard('{ArrowUp}')];
+                    case 9:
+                        _a.sent();
+                        expect(scrollByFn).toHaveBeenCalledTimes(2);
+                        expect(scrollByFn).toHaveBeenCalledWith(0, -40);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });
 //# sourceMappingURL=PdfPreview.test.js.map