tests

Author: Jesse Haigh

src/components/ContentNode.vue

@@ -274,6 +274,7 @@ function renderNode(createElement, references) {
         fileType: node.fileType,
         content: node.code,
         showLineNumbers: node.showLineNumbers,
+        copyToClipboard: node.copyToClipboard ?? false,
       };
       return createElement(CodeListing, { props });
     }

src/components/ContentNode/CodeListing.vue

@@ -23,11 +23,12 @@
     </Filename>
     <div class="container-general" ref="scrollContainer">
       <button
+        v-if="copyToClipboard"
         v-show="showCopyButton"
         class="copy-button"
         ref="copyButton"
         :class="{ copied: isCopied, visible: buttonPositioned }"
-        @click="copyToClipboard"
+        @click="copyCodeToClipboard"
         @update="handleScroll"
         aria-label="Copy code to clipboard"
       >
@@ -112,6 +113,10 @@ export default {
       type: Array,
       required: true,
     },
+    copyToClipboard: {
+      type: Boolean,
+      required: true,
+    },
     startLineNumber: {
       type: Number,
       default: () => 1,
@@ -188,7 +193,7 @@ export default {
         this.showCopyButton = true;
       }, 500);
     }, 100),
-    copyToClipboard() {
+    copyCodeToClipboard() {
       const lines = this.content;
       const text = lines.join('\n');
       navigator.clipboard.writeText(text)

tests/unit/components/ContentNode.spec.js

@@ -101,6 +101,7 @@ describe('ContentNode', () => {
       syntax: 'swift',
       fileType: 'swift',
       code: ['foobar'],
+      copyToClipboard: false,
     };
 
     it('renders a `CodeListing`', () => {
@@ -111,6 +112,7 @@ describe('ContentNode', () => {
       expect(codeListing.props('syntax')).toBe(listing.syntax);
       expect(codeListing.props('fileType')).toBe(listing.fileType);
       expect(codeListing.props('content')).toEqual(listing.code);
+      expect(codeListing.props('copyToClipboard')).toEqual(listing.copyToClipboard);
       expect(codeListing.isEmpty()).toBe(true);
     });
 
@@ -138,6 +140,29 @@ describe('ContentNode', () => {
     });
   });
 
+  describe('with type="codeListing" and copy set', () => {
+    const listing = {
+      type: 'codeListing',
+      syntax: 'swift',
+      fileType: 'swift',
+      code: ['foobar'],
+      copyToClipboard: true,
+    };
+
+    // renders a copy button
+    it('renders a copy button', () => {
+      const wrapper = mountWithItem(listing);
+
+      const codeListing = wrapper.find('.content').find(CodeListing);
+      expect(codeListing.exists()).toBe(true);
+      expect(codeListing.props('syntax')).toBe(listing.syntax);
+      expect(codeListing.props('fileType')).toBe(listing.fileType);
+      expect(codeListing.props('content')).toEqual(listing.code);
+      expect(codeListing.props('copyToClipboard')).toEqual(listing.copyToClipboard);
+      expect(codeListing.isEmpty()).toBe(true);
+    });
+  });
+
   describe('with type="endpointExample"', () => {
     it('renders an `EndpointExample`', () => {
       const request = {

tests/unit/components/ContentNode/CodeListing.spec.js

@@ -139,6 +139,32 @@ describe('CodeListing', () => {
     expect(wrapper.html().includes('.syntax')).toBe(false);
   });
 
+  it('does not show copy button when its disabled', async () => {
+    const wrapper = shallowMount(CodeListing, {
+      propsData: {
+        syntax: 'swift',
+        content: ['let foo = "bar"'],
+        copyToClipboard: false,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.find('.copy-button').exists()).toBe(false);
+  });
+
+  it('shows copy button when its enabled', async () => {
+    const wrapper = shallowMount(CodeListing, {
+      propsData: {
+        syntax: 'swift',
+        content: ['let foo = "bar"'],
+        copyToClipboard: true,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.find('.copy-button').exists()).toBe(true);
+  });
+
   it('renders code with empty spaces', async () => {
     const wrapper = shallowMount(CodeListing, {
       propsData: {