Merge pull request #71 from github/allow_disabling

Allow disabling element

src/clipboard-copy-element.ts

@@ -8,6 +8,10 @@ async function copy(button: HTMLElement) {
     button.dispatchEvent(new CustomEvent('clipboard-copy', {bubbles: true}))
   }
 
+  if (button.getAttribute('aria-disabled') === 'true') {
+    return
+  }
+
   if (text) {
     await copyText(text)
     trigger()

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,6 +57,9 @@ describe('clipboard-copy element', function () {
           copiedText = text
           return Promise.resolve()
         },
+        readText() {
+          return Promise.resolve(copiedText)
+        },
       })
 
       whenCopied = new Promise(resolve => {
@@ -149,6 +153,31 @@ 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')
+
+      let fired = false
+      document.addEventListener(
+        'clipboard-copy',
+        () => {
+          fired = true
+        },
+        {once: true},
+      )
+
+      button.click()
+
+      await new Promise(setTimeout)
+      assert.equal(fired, false)
+      assert.equal(null, await navigator.clipboard.readText())
+    })
   })
 
   describe('shadow DOM context', function () {

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,