@zextras/carbonio-ui-preview 0.1.3 → 0.2.0

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

@@ -0,0 +1,713 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+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';
+var pdfFile = loadPDF('./__mocks__/_pdf.pdf');
+var zoomInIcon = 'icon: Plus';
+var zoomOutIcon = 'icon: Minus';
+var zoomFitToWidthIcon = 'icon: MaximizeOutline';
+var zoomResetWidthIcon = 'icon: MinimizeOutline';
+jest.useRealTimers();
+describe('Pdf Preview', function () {
+    test('Render a pdf document', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, pageElement;
+        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 pdf/i)];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.getByTestId('pdf-preview-container')).toBeInTheDocument();
+                    pageElement = document.querySelector('[data-page-number="1"]');
+                    expect(pageElement).toBeDefined();
+                    expect(pageElement).not.toBeNull();
+                    expect(pageElement).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('If show is false does not render the pdf', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose;
+        return __generator(this, function (_a) {
+            onClose = jest.fn();
+            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.queryByTestId('pdf-preview-container')).not.toBeInTheDocument();
+            return [2 /*return*/];
+        });
+    }); });
+    test('If pdf is not valid render an error message', 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: "invalid-pdf.pdf", onClose: onClose }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    });
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByText(/Failed to load PDF file/i)];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.getByTestId('pdf-preview-container')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('If fallback is requested, does not render the pdf but the fallback instead', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose;
+        return __generator(this, function (_a) {
+            onClose = jest.fn();
+            setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, useFallback: true, openSrc: "open-src" }), {
+                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+            });
+            expect(screen.getByText(/This item cannot be displayed/i)).toBeVisible();
+            expect(screen.getByText(/The file size exceeds the limit allowed and cannot be displayed/i)).toBeVisible();
+            expect(screen.getByText(/Please, download it or open it in a separate tab/i)).toBeVisible();
+            expect(screen.getByRole('button', { name: /download/i })).toBeVisible();
+            expect(screen.getByRole('button', { name: /open/i })).toBeVisible();
+            return [2 /*return*/];
+        });
+    }); });
+    test('Render a custom fallback', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, CustomContent;
+        return __generator(this, function (_a) {
+            onClose = jest.fn();
+            CustomContent = React.createElement("div", null, "Custom content");
+            setup(React.createElement(PdfPreview, { show: true, src: pdfFile.dataURI, onClose: onClose, useFallback: true, customContent: CustomContent, openSrc: "open-src" }), {
+                setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+            });
+            expect(screen.queryByText(/This item cannot be displayed/i)).not.toBeInTheDocument();
+            expect(screen.queryByText(/The file size exceeds the limit allowed and cannot be displayed/i)).not.toBeInTheDocument();
+            expect(screen.queryByText(/Please, download it or open it in a separate tab/i)).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', { name: /download/i })).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', { name: /open/i })).not.toBeInTheDocument();
+            expect(screen.getByText(/custom content/i)).toBeVisible();
+            return [2 /*return*/];
+        });
+    }); });
+    test('Additional data are visible', 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, filename: "file name", extension: "pdf", size: "18KB" }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    });
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    expect(screen.getByText(/file name/i)).toBeVisible();
+                    expect(screen.getByText(/pdf.*18KB/i)).toBeVisible();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Escape key close the preview', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user;
+        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 pdf/i)];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 2:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Close action calls onClose if no click action is provided', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, closeAction, user, closeActionElement;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn(function (e) {
+                        e.preventDefault();
+                    });
+                    closeAction = {
+                        id: 'closeAction',
+                        icon: 'Activity',
+                        tooltipLabel: 'Custom close action'
+                    };
+                    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)];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText(/loading pdf/i)).not.toBeInTheDocument();
+                    closeActionElement = screen.getByTestId('icon: Activity');
+                    expect(closeActionElement).toBeVisible();
+                    return [4 /*yield*/, user.hover(closeActionElement)];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByText(/custom close action/i)];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(closeActionElement)];
+                case 4:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Click on actions calls onClose if event is not stopped by the action itself, instead if is disabled it is not propagated anyway ', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, actions, closeAction, user, action1Item, action2Item, closeActionItem;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    actions = [
+                        {
+                            id: 'action1',
+                            icon: 'Activity',
+                            onClick: jest.fn()
+                        },
+                        {
+                            id: 'action2',
+                            icon: 'People',
+                            onClick: jest.fn(function (ev) {
+                                ev.preventDefault();
+                            }),
+                            disabled: true
+                        }
+                    ];
+                    closeAction = {
+                        id: 'closeAction',
+                        icon: 'Close',
+                        onClick: jest.fn(function (ev) {
+                            ev.preventDefault();
+                        })
+                    };
+                    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)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, waitFor(function () {
+                            // eslint-disable-next-line testing-library/no-node-access
+                            return expect(document.querySelector('[data-page-number="1"]')).toBeInTheDocument();
+                        })];
+                case 2:
+                    _a.sent();
+                    action1Item = screen.getByTestId('icon: Activity');
+                    action2Item = screen.getByTestId('icon: People');
+                    closeActionItem = screen.getByTestId('icon: Close');
+                    expect(action1Item).toBeVisible();
+                    expect(action2Item).toBeVisible();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(action2Item.parentElement).toHaveAttribute('disabled');
+                    expect(closeActionItem).toBeVisible();
+                    // click on action 1 is propagated and calls onClose
+                    return [4 /*yield*/, user.click(action1Item)];
+                case 3:
+                    // click on action 1 is propagated and calls onClose
+                    _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
+                    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
+                    _a.sent();
+                    expect(actions[1].onClick).not.toHaveBeenCalled();
+                    expect(onClose).toHaveBeenCalledTimes(1);
+                    // click on close action is stopped by the action, event is not propagated and onClose is not called
+                    return [4 /*yield*/, user.click(closeActionItem)];
+                case 5:
+                    // click on close action is stopped by the action, event is not propagated and onClose is not called
+                    _a.sent();
+                    // FIXME
+                    // expect(closeAction.onClick).toHaveBeenCalled();
+                    expect(onClose).toHaveBeenCalledTimes(3);
+                    // click on filename is equivalent to a click on the overlay, so onClose is called
+                    return [4 /*yield*/, user.click(screen.getByText(/pdf name/i))];
+                case 6:
+                    // click on filename is equivalent to a click on the overlay, so onClose is called
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(4);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Zoom starts at lowest step', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, 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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _a.sent();
+                    canvas = document.querySelector('canvas');
+                    expect(canvas).toBeVisible();
+                    expect(canvas).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Decrease zoom is disabled when zoom is at lowest point', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, 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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }).user;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _a.sent();
+                    canvas = document.querySelector('canvas');
+                    expect(canvas).toBeVisible();
+                    expect(canvas).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
+                    expect(screen.getByTestId(zoomOutIcon)).toBeVisible();
+                    // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
+                    expect(screen.getByTestId(zoomOutIcon).parentElement).toHaveAttribute('disabled', '');
+                    expect(screen.getByTestId(zoomInIcon)).toBeVisible();
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomInIcon))];
+                case 2:
+                    _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*/, userEvent.click(screen.getByTestId(zoomOutIcon))];
+                case 3:
+                    _a.sent();
+                    // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
+                    expect(screen.getByTestId(zoomOutIcon).parentElement).toHaveAttribute('disabled', '');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Increase and decrease zoom change zoom by 1 step per time', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, step, step;
+        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 pdf/i)];
+                case 1:
+                    _a.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toBeVisible();
+                    expect(screen.getByTestId(zoomOutIcon)).toBeVisible();
+                    expect(screen.getByTestId(zoomInIcon)).toBeVisible();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
+                    step = 0;
+                    _a.label = 2;
+                case 2:
+                    if (!(step < ZOOM_STEPS.length - 1)) return [3 /*break*/, 5];
+                    // eslint-disable-next-line no-await-in-loop
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomInIcon))];
+                case 3:
+                    // eslint-disable-next-line no-await-in-loop
+                    _a.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[step + 1]));
+                    _a.label = 4;
+                case 4:
+                    step += 1;
+                    return [3 /*break*/, 2];
+                case 5:
+                    step = ZOOM_STEPS.length - 1;
+                    _a.label = 6;
+                case 6:
+                    if (!(step > 0)) return [3 /*break*/, 9];
+                    // eslint-disable-next-line no-await-in-loop
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomOutIcon))];
+                case 7:
+                    // eslint-disable-next-line no-await-in-loop
+                    _a.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[step - 1]));
+                    _a.label = 8;
+                case 8:
+                    step -= 1;
+                    return [3 /*break*/, 6];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Increase zoom is disabled when zoom is at greatest point', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, step;
+        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 pdf/i)];
+                case 1:
+                    _a.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toBeVisible();
+                    expect(screen.getByTestId(zoomInIcon)).toBeVisible();
+                    // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
+                    expect(screen.getByTestId(zoomInIcon).parentElement).not.toHaveAttribute('disabled', '');
+                    step = 0;
+                    _a.label = 2;
+                case 2:
+                    if (!(step < ZOOM_STEPS.length - 1)) return [3 /*break*/, 5];
+                    // eslint-disable-next-line no-await-in-loop
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomInIcon))];
+                case 3:
+                    // eslint-disable-next-line no-await-in-loop
+                    _a.sent();
+                    _a.label = 4;
+                case 4:
+                    step += 1;
+                    return [3 /*break*/, 2];
+                case 5:
+                    // eslint-disable-next-line jest-dom/prefer-enabled-disabled,testing-library/no-node-access
+                    expect(screen.getByTestId(zoomInIcon).parentElement).toHaveAttribute('disabled', '');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                case 0:
+                    onClose = jest.fn();
+                    ref = React.createRef();
+                    mockPdfWidth = 1000;
+                    _a = 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)];
+                case 1:
+                    _b.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toBeVisible();
+                    expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
+                    expect(screen.queryByTestId(zoomResetWidthIcon)).not.toBeInTheDocument();
+                    expect(ref.current).not.toBeNull();
+                    jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
+                case 2:
+                    _b.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 [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                case 0:
+                    onClose = jest.fn();
+                    ref = React.createRef();
+                    mockPdfWidth = 1000;
+                    _a = 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)];
+                case 1:
+                    _b.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toBeVisible();
+                    expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
+                    expect(screen.queryByTestId(zoomResetWidthIcon)).not.toBeInTheDocument();
+                    expect(ref.current).not.toBeNull();
+                    jest.spyOn(ref.current, 'clientWidth', 'get').mockReturnValue(mockPdfWidth);
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
+                case 2:
+                    _b.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();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
+                    expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
+                    expect(screen.queryByTestId(zoomResetWidthIcon)).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.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();
+                    // 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
+                    expect(screen.getByTestId(zoomInIcon).parentElement).not.toHaveAttribute('disabled', '');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.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();
+                    // 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
+                    expect(screen.getByTestId(zoomOutIcon).parentElement).not.toHaveAttribute('disabled', '');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.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();
+                    // 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();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[stepToReach]));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.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();
+                    // 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();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[stepToReach]));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toBeVisible();
+                    expect(screen.getByTestId(zoomFitToWidthIcon)).toBeVisible();
+                    getPreviewClientWidthMock = jest.spyOn(ref.current, 'clientWidth', 'get');
+                    getPreviewClientWidthMock.mockReturnValueOnce(mockPdfWidth[0]);
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
+                case 2:
+                    _b.sent();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(mockPdfWidth[0]));
+                    getPreviewClientWidthMock.mockReturnValueOnce(mockPdfWidth[1]);
+                    // resize window to trigger listener
+                    act(function () {
+                        window.resizeTo(mockPdfWidth[1], mockPdfWidth[1]);
+                    });
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(mockPdfWidth[1]));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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) {
+                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 }), {
+                        setupOptions: { advanceTimers: function () { return Promise.resolve(); } }
+                    }), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, screen.findByText(/loading pdf/i)];
+                case 1:
+                    _b.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();
+                    // eslint-disable-next-line testing-library/no-node-access
+                    expect(document.querySelector('canvas')).toHaveAttribute('width', "".concat(ZOOM_STEPS[0]));
+                    expect(onClose).not.toHaveBeenCalled();
+                    jest
+                        .spyOn(ref.current, 'clientWidth', 'get')
+                        .mockReturnValue(ZOOM_STEPS[ZOOM_STEPS.length - 1]);
+                    return [4 /*yield*/, user.click(screen.getByTestId(zoomFitToWidthIcon))];
+                case 3:
+                    _b.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();
+                    // 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();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=PdfPreview.test.js.map