Test Clipboard

cypress/component/integration/Clipboard.cy.tsx

@@ -0,0 +1,206 @@
+import '../../../src/global.css';
+import React from 'react';
+import { Clipboard } from '../../../src/components';
+import { compareSnapshot } from '../../compareSnapshot';
+
+describe('Component | Integration | Clipboard', function () {
+  describe('Clipboard', () => {
+    describe('clipboard with only raw-content', () => {
+      it('should render', () => {
+        cy.mount(<Clipboard rawContent={'raw content'} />);
+
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains('raw content');
+      });
+
+      it('should match snapshot', () => {
+        cy.mount(<Clipboard rawContent={'raw content'} />);
+        compareSnapshot(cy, 'clipboard-with-only-raw-content');
+      });
+    });
+  });
+
+  describe('Clipboard', () => {
+    describe('clipboard with diplayed content', () => {
+      it('should render', () => {
+        cy.mount(
+          <Clipboard
+            rawContent={'raw content'}
+            displayedContent={'formatted content'}
+          />,
+        );
+
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains(
+          'formatted content',
+        );
+      });
+
+      it('should match snapshot', () => {
+        cy.mount(
+          <Clipboard
+            rawContent={'raw content'}
+            displayedContent={'formatted content'}
+          />,
+        );
+        compareSnapshot(cy, 'clipboard-with-displayed-content');
+      });
+    });
+  });
+
+  describe('Clipboard', () => {
+    describe('clipboard success flow', () => {
+      it('should render', () => {
+        cy.mount(
+          <Clipboard
+            rawContent={'raw content'}
+            success="Copied!"
+            displayedContent={'formatted content'}
+          />,
+        );
+
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains(
+          'formatted content',
+        );
+      });
+
+      it('should fire the copy clipboard function', () => {
+        cy.mount(
+          <Clipboard
+            rawContent={'raw content'}
+            success="Copied!"
+            displayedContent={'formatted content'}
+          />,
+        );
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains(
+          'formatted content',
+        );
+        cy.on('window:confirm', () => true);
+
+        cy.window().then((win) => {
+          cy.stub(win, 'prompt')
+            .returns(win.prompt)
+            .as('copyToClipboardPrompt');
+        });
+
+        cy.get('[data-testid="clipboard-field"]').click();
+        cy.get('@copyToClipboardPrompt').should('be.called');
+
+        cy.get('@copyToClipboardPrompt')
+          .should((prompt) => {
+            expect(prompt.args[0][1]).to.equal('raw content');
+          })
+          .then(() => {
+            cy.get('[data-testid="clipboard-input-message"]')
+              .should('exist')
+              .contains('Copied!');
+          });
+
+        cy.get('[data-testid="clipboard-input-message"]').should('not.exist');
+      });
+
+      it('should match snapshot', () => {
+        cy.mount(
+          <Clipboard
+            rawContent={'raw content'}
+            success="Copied!"
+            displayedContent={'formatted content'}
+          />,
+        );
+        compareSnapshot(cy, 'clipboard-success-flow');
+      });
+    });
+  });
+
+  describe('Clipboard', () => {
+    describe('clipboard raw content success flow', () => {
+      it('should render', () => {
+        cy.mount(<Clipboard rawContent={'raw content'} success="Copied!" />);
+
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains('raw content');
+      });
+
+      it('should fire the copy clipboard function', () => {
+        cy.mount(<Clipboard rawContent={'raw content'} success="Copied!" />);
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]').contains('raw content');
+        cy.on('window:confirm', () => true);
+
+        cy.window().then((win) => {
+          cy.stub(win, 'prompt')
+            .returns(win.prompt)
+            .as('copyToClipboardPrompt');
+        });
+
+        cy.get('[data-testid="clipboard-field"]').click();
+        cy.get('@copyToClipboardPrompt').should('be.called');
+
+        cy.get('@copyToClipboardPrompt')
+          .should((prompt) => {
+            expect(prompt.args[0][1]).to.equal('raw content');
+          })
+          .then(() => {
+            cy.get('[data-testid="clipboard-input-message"]')
+              .should('exist')
+              .contains('Copied!');
+          });
+
+        cy.get('[data-testid="clipboard-input-message"]').should('not.exist');
+      });
+
+      it('should match snapshot', () => {
+        cy.mount(<Clipboard rawContent={'raw content'} success="Copied!" />);
+        compareSnapshot(cy, 'clipboard-raw-content-success-flow');
+      });
+    });
+  });
+
+  describe('Clipboard', () => {
+    describe('clipboard error flow', () => {
+      it('should render', () => {
+        cy.mount(<Clipboard rawContent={''} error="Oupps!" />);
+
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]')
+          .contains('foo')
+          .should('not.exist');
+      });
+
+      it('should not fire the copy clipboard function', () => {
+        cy.mount(<Clipboard rawContent={''} error="Oupps!" />);
+        cy.get('[data-testid="clipboard-field"]').should('exist');
+        cy.get('[data-testid="clipboard-content"]')
+          .contains('foo')
+          .should('not.exist');
+        cy.on('window:confirm', () => true);
+
+        cy.window().then((win) => {
+          cy.stub(win, 'prompt')
+            .returns(win.prompt)
+            .as('copyToClipboardPrompt');
+        });
+
+        cy.get('[data-testid="clipboard-copy-icon"]').click();
+        cy.get('@copyToClipboardPrompt')
+          .should('not.be.called')
+          .then(() => {
+            cy.get('[data-testid="clipboard-input-message"]')
+              .should('exist')
+              .contains('Oupps!');
+          });
+
+        cy.get('[data-testid="clipboard-input-message"]').should('not.exist');
+      });
+
+      // We are not testing snapshots here because we know it will fail due to the absence of raw content
+
+      // it('should match snapshot', () => {
+      //   cy.mount(<Clipboard rawContent={''} error="Oupps!" />);
+      //   compareSnapshot(cy 'clipboard-error-flow');
+      // });
+    });
+  });
+});

src/components/Clipboard/Clipboard.stories.tsx

@@ -12,3 +12,12 @@ export const _Clipboard = {
     />
   ),
 };
+
+export const _Rawcontent = {
+  render: () => (
+    <Clipboard
+      rawContent="this is the content"
+      displayedContent="formatted content"
+    />
+  ),
+};

src/components/Clipboard/Clipboard.tsx

@@ -37,6 +37,11 @@ export function Clipboard(props: ClipboardProps) {
 
     if (!displayedContent || !rawContent) {
       setError(true);
+
+      setTimeout(() => {
+        setError(false);
+      }, 3000);
+
       return;
     }
 
@@ -58,20 +63,28 @@ export function Clipboard(props: ClipboardProps) {
         onClick={handleCopyToClipboard}
         {...rest}
       >
-        <p className="text-f-primary pr-2 w-full truncate">
+        <p
+          className="text-f-primary pr-2 w-full truncate"
+          data-testid="clipboard-content"
+        >
           {displayedContent}
         </p>
         {success ? (
           <FiCheckCircle className="w-6 h-6 text-s-success" />
         ) : (
-          <FiCopy className="w-6 h-6 text-f-primary" />
+          <FiCopy
+            data-testid="clipboard-copy-icon"
+            className="w-6 h-6 text-f-primary"
+          />
         )}
       </div>
       {error || success ? (
-        <InputMessage
-          error={error ? errorMessage : ''}
-          success={success ? successMessage : ''}
-        />
+        <div data-testid="clipboard-input-message">
+          <InputMessage
+            error={error ? errorMessage : ''}
+            success={success ? successMessage : ''}
+          />
+        </div>
       ) : null}
     </>
   );