PrivateBin/js/test/CopyToClipboard.js

'use strict';
const common = require('../common');

describe('CopyToClipboard', function () {
    this.timeout(30000);

    describe('Copy document to clipboard', function () {
        jsc.property('Copy with button click',
            common.jscFormats(),
            'nestring',
            async function (format, text) {
                var clean = globalThis.cleanup();
                common.enableClipboard();

                document.body.innerHTML = (
                    '<div id="placeholder" class="hidden">+++ no document text ' +
                    '+++</div><div id="prettymessage" class="hidden">' +
                    '<button type="button" id="prettyMessageCopyBtn"><svg id="copyIcon"></svg>' +
                    '<svg id="copySuccessIcon"></svg></button><pre ' +
                    'id="prettyprint" class="prettyprint linenums:1"></pre>' +
                    '</div><div id="plaintext" class="hidden"></div>'
                );

                PrivateBin.PasteViewer.init();
                PrivateBin.PasteViewer.setFormat(format);
                PrivateBin.PasteViewer.setText(text);
                PrivateBin.PasteViewer.run();

                PrivateBin.CopyToClipboard.init();

                document.getElementById('prettyMessageCopyBtn').click();

                const savedToClipboardText = await navigator.clipboard.readText();

                clean();

                return text === savedToClipboardText;
            }
        );

        /**
         * Unfortunately in JSVerify impossible to check if copy with shortcut when user selected some text on the page
         * (the copy document to clipboard should not work in this case) due to lacking window.getSelection() in jsdom.
         */
        jsc.property('Copy with keyboard shortcut',
            common.jscFormats(),
            'nestring',
            async function (format, text) {
                var clean = globalThis.cleanup();
                common.enableClipboard();

                document.body.innerHTML = (
                    '<div id="placeholder">+++ no document text ' +
                    '+++</div><div id="prettymessage" class="hidden">' +
                    '<button type="button" id="prettyMessageCopyBtn"><svg id="copyIcon"></svg>' +
                    '<svg id="copySuccessIcon"></svg></button><pre ' +
                    'id="prettyprint" class="prettyprint linenums:1"></pre>' +
                    '</div><div id="plaintext" class="hidden"></div>'
                );

                PrivateBin.PasteViewer.init();
                PrivateBin.PasteViewer.setFormat(format);
                PrivateBin.PasteViewer.setText(text);
                PrivateBin.PasteViewer.run();

                PrivateBin.CopyToClipboard.init();

                document.body.dispatchEvent(getClipboardEvent());

                const copiedTextWithoutSelectedText = await navigator.clipboard.readText();

                clean();

                return copiedTextWithoutSelectedText === text;
            }
        );

        /**
         * ClipboardEvent is not supported in jsdom yet, so this creates a mock event to trigger the copy event listener.
         *
         * See https://github.com/jsdom/jsdom/issues/1568
         *
         * @returns {ClipboardEvent}
         */
        function getClipboardEvent() {
            /** {@type ClipboardEvent} */
            const clipboardEvent = new Event('copy', {
                bubbles: true,
                cancelable: true,
                composed: true
            });
            clipboardEvent['clipboardData'] = {
                getData: function () {
                    return '';
                }
            }
            return clipboardEvent;
        }
    });


    jsc.property('Copy link to clipboard',
        'nestring',
        async function (text) {
            var clean = globalThis.cleanup();
            common.enableClipboard();

            document.body.innerHTML = '<button id="copyLink"></button>';

            PrivateBin.CopyToClipboard.init();
            PrivateBin.CopyToClipboard.setUrl(text);

            document.getElementById('copyLink').click();

            const copiedText = await navigator.clipboard.readText();

            clean();

            return text === copiedText;
        }
    );


    describe('Keyboard shortcut hint', function () {
        jsc.property('Show hint',
            'nestring',
            function (text) {
                var clean = globalThis.cleanup();

                document.body.innerHTML = '<small id="copyShortcutHintText"></small>';

                PrivateBin.CopyToClipboard.init();
                PrivateBin.CopyToClipboard.showKeyboardShortcutHint();

                const keyboardShortcutHint = document.getElementById('copyShortcutHintText').textContent;

                clean();

                return keyboardShortcutHint.length > 0;
            }
        );

        jsc.property('Hide hint',
            'nestring',
            function (text) {
                var clean = globalThis.cleanup();

                document.body.innerHTML = '<small id="copyShortcutHintText">' + text + '</small>';

                PrivateBin.CopyToClipboard.init();
                PrivateBin.CopyToClipboard.hideKeyboardShortcutHint();

                const keyboardShortcutHint = document.getElementById('copyShortcutHintText').textContent;

                clean();

                return keyboardShortcutHint.length === 0;
            }
        );
    });
});