refactor: 💡 update copyable component for coverage

and ignore untestable clipboard code from coverage

ui/core/app/components/copyable/index.hbs

@@ -1,20 +1,21 @@
-{{#if this.isClipboardLibrarySupported}}
-  <span
-    id={{this.id}}
-    class="copyable"
-    {{did-insert this.register}}
-    {{will-destroy this.destroy}}
-  >
-    {{#if this.copied}}
-      <mark class="copyable-content">
-        {{yield}}
-      </mark>
-    {{else}}
-      <span class="copyable-content">
-        {{yield}}
-      </span>
-    {{/if}}
+<span
+  id={{this.id}}
+  class="copyable"
+  {{did-insert this.register}}
+  {{will-destroy this.destroy}}
+>
 
+  {{#if this.copied}}
+    <mark class="copyable-content">
+      {{yield}}
+    </mark>
+  {{else}}
+    <span class="copyable-content">
+      {{yield}}
+    </span>
+  {{/if}}
+
+  {{#if this.isClipboardLibrarySupported}}
     <Rose::Button
       id={{this.copyableButtonId}}
       aria-describedby={{this.id}}
@@ -22,8 +23,8 @@
       @style="ghost"
       @iconOnly={{if this.copied this.successIcon this.actionIcon}}
       title={{if this.copied this.successText this.actionText}}
-    >{{this.actionText}}</Rose::Button>
-  </span>
-{{else}}
-  {{yield}}
-{{/if}}
+    >
+      {{this.actionText}}
+    </Rose::Button>
+  {{/if}}
+</span>

ui/core/app/components/copyable/index.js

@@ -3,7 +3,6 @@ import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
-import { bind } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
 
 export default class CopyableComponent extends Component {
@@ -20,6 +19,8 @@ export default class CopyableComponent extends Component {
 
   @tracked copied = false;
 
+  clipboard = null;
+
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
    * and back after 1 second. This icon flash indicates success on
@@ -30,13 +31,12 @@ export default class CopyableComponent extends Component {
    * is an attribute.
    * @type {Task}
    */
+  /* istanbul ignore next */
   @task(function * () {
     this.copied = true;
     yield timeout(1000);
     this.copied = false;
-  }).drop() successIconTimer;
-
-  // =methods
+  }).drop() confirmCopyTimer;
 
   /**
    * Checks for ClipboardJS support.
@@ -46,14 +46,6 @@ export default class CopyableComponent extends Component {
     return ClipboardJS.isSupported();
   }
 
-  /**
-   * When copy to clipboard is successful, begin timer to show success icon.
-   */
-  onCopySuccess(clipboardEvent) {
-    clipboardEvent.clearSelection();
-    this.successIconTimer.perform();
-  }
-
   // =actions
 
   /**
@@ -61,12 +53,16 @@ export default class CopyableComponent extends Component {
    */
   @action
   register() {
-    if (!this.clipboard) {
-      this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
-        text: () => this.args.text,
-      });
-      this.clipboard.on('success', bind(this, this.onCopySuccess));
-    }
+    this.destroy();
+    /* istanbul ignore next */
+    this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
+      text: () => this.args.text,
+    });
+    /* istanbul ignore next */
+    this.clipboard.on('success', (clipboardEvent) => {
+      clipboardEvent.clearSelection();
+      this.confirmCopyTimer.perform();
+    });
   }
 
   /**
@@ -75,7 +71,8 @@ export default class CopyableComponent extends Component {
   @action
   destroy() {
     this.clipboard?.destroy();
-    this.successIconTimer.cancelAll();
+    this.clipboard = null;
+    this.confirmCopyTimer.cancelAll();
   }
 
 }

ui/core/tests/integration/components/copyable-test.js

@@ -7,7 +7,7 @@ module('Integration | Component | copyable', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    await render(hbs`<Copyable @buttonText="Copy me">text</Copyable>`);
+    await render(hbs`<Copyable @buttonText="Copy me" @text="foo">text</Copyable>`);
     assert.ok(find('.copyable'));
     assert.equal(find('.copyable-content').textContent.trim(), 'text');
     assert.equal(find('.copyable-button').textContent.trim(), 'Copy me');