From a17355909d48d65cee1de4439c647c7642bc6545 Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Wed, 27 Sep 2023 10:45:55 -0700 Subject: [PATCH 1/4] Allow disabling element --- src/clipboard-copy-element.ts | 5 +++++ test/test.js | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/src/clipboard-copy-element.ts b/src/clipboard-copy-element.ts index e889a7d..45467d6 100644 --- a/src/clipboard-copy-element.ts +++ b/src/clipboard-copy-element.ts @@ -8,6 +8,11 @@ async function copy(button: HTMLElement) { button.dispatchEvent(new CustomEvent('clipboard-copy', {bubbles: true})) } + if (button.getAttribute('aria-disabled') === 'true') { + button.dispatchEvent(new CustomEvent('clipboard-copy-nothing', {bubbles: true})) + return + } + if (text) { await copyText(text) trigger() diff --git a/test/test.js b/test/test.js index 7689e2a..abcdec2 100644 --- a/test/test.js +++ b/test/test.js @@ -62,6 +62,10 @@ describe('clipboard-copy element', function () { document.addEventListener('clipboard-copy', () => resolve(copiedText), { once: true, }) + + document.addEventListener('clipboard-copy-nothing', () => resolve(null), { + once: true, + }) }) }) @@ -149,6 +153,20 @@ describe('clipboard-copy element', function () { const text = await whenCopied assert.equal(text, 'I am a link') }) + + it('does not copy when disabled', async function () { + const target = document.createElement('div') + target.innerHTML = 'Hello world!' + target.id = 'copy-target' + document.body.append(target) + + const button = document.querySelector('clipboard-copy') + button.setAttribute('aria-disabled', 'true') + button.click() + + const text = await whenCopied + assert.equal(null, text) + }) }) describe('shadow DOM context', function () { From 3412dc61d2b9599a89b5e76fcdebc2e0a2ed2dc2 Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 28 Sep 2023 10:00:43 -0700 Subject: [PATCH 2/4] Update src/clipboard-copy-element.ts Co-authored-by: Keith Cirkel --- src/clipboard-copy-element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/clipboard-copy-element.ts b/src/clipboard-copy-element.ts index 45467d6..028d2ff 100644 --- a/src/clipboard-copy-element.ts +++ b/src/clipboard-copy-element.ts @@ -9,7 +9,6 @@ async function copy(button: HTMLElement) { } if (button.getAttribute('aria-disabled') === 'true') { - button.dispatchEvent(new CustomEvent('clipboard-copy-nothing', {bubbles: true})) return } From afddae7fbdcaff37f125d76680abb470e4d1fd4d Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 28 Sep 2023 10:00:48 -0700 Subject: [PATCH 3/4] Update test/test.js Co-authored-by: Keith Cirkel --- test/test.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/test/test.js b/test/test.js index abcdec2..3c83444 100644 --- a/test/test.js +++ b/test/test.js @@ -162,9 +162,13 @@ describe('clipboard-copy element', function () { const button = document.querySelector('clipboard-copy') button.setAttribute('aria-disabled', 'true') + let fired = false; + document.addEventListener('clipboard-copy', () => { fired = true }, { once: true }) + button.click() - - const text = await whenCopied + + await new Promise(setTimeout) + assert.equal(fired, false); assert.equal(null, text) }) }) From 80570f38fc8d9804eecf810d47c15d33a4cefede Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 28 Sep 2023 10:34:37 -0700 Subject: [PATCH 4/4] Fix test; start browser with clipboar-read perm --- test/test.js | 27 +++++++++++++++++---------- web-test-runner.config.js | 7 +++++-- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/test/test.js b/test/test.js index 3c83444..fa876c1 100644 --- a/test/test.js +++ b/test/test.js @@ -42,6 +42,7 @@ describe('clipboard-copy element', function () { describe('target element', function () { const nativeClipboard = navigator.clipboard let whenCopied + beforeEach(function () { const container = document.createElement('div') container.innerHTML = ` @@ -56,16 +57,15 @@ describe('clipboard-copy element', function () { copiedText = text return Promise.resolve() }, + readText() { + return Promise.resolve(copiedText) + }, }) whenCopied = new Promise(resolve => { document.addEventListener('clipboard-copy', () => resolve(copiedText), { once: true, }) - - document.addEventListener('clipboard-copy-nothing', () => resolve(null), { - once: true, - }) }) }) @@ -162,14 +162,21 @@ describe('clipboard-copy element', function () { const button = document.querySelector('clipboard-copy') button.setAttribute('aria-disabled', 'true') - let fired = false; - document.addEventListener('clipboard-copy', () => { fired = true }, { once: true }) - + + let fired = false + document.addEventListener( + 'clipboard-copy', + () => { + fired = true + }, + {once: true}, + ) + button.click() - + await new Promise(setTimeout) - assert.equal(fired, false); - assert.equal(null, text) + assert.equal(fired, false) + assert.equal(null, await navigator.clipboard.readText()) }) }) diff --git a/web-test-runner.config.js b/web-test-runner.config.js index 6839139..a9fef86 100644 --- a/web-test-runner.config.js +++ b/web-test-runner.config.js @@ -1,15 +1,18 @@ import {esbuildPlugin} from '@web/dev-server-esbuild' import {playwrightLauncher} from '@web/test-runner-playwright' -const browser = product => +const getBrowser = product => playwrightLauncher({ product, + createBrowserContext: ({browser}) => { + return browser.newContext({permissions: ['clipboard-read']}) + }, }) export default { files: ['test/*'], nodeResolve: true, plugins: [esbuildPlugin({ts: true, target: 'es2020'})], - browsers: [browser('chromium')], + browsers: [getBrowser('chromium')], testFramework: { config: { timeout: 1000,