diff --git a/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-error-flow.png b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-error-flow.png
new file mode 100755
index 00000000..35a60cc3
Binary files /dev/null and b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-error-flow.png differ
diff --git a/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-raw-content-success-flow.png b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-raw-content-success-flow.png
new file mode 100755
index 00000000..7a41b19b
Binary files /dev/null and b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-raw-content-success-flow.png differ
diff --git a/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-success-flow.png b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-success-flow.png
new file mode 100755
index 00000000..35a60cc3
Binary files /dev/null and b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-success-flow.png differ
diff --git a/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-displayed-content.png b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-displayed-content.png
new file mode 100755
index 00000000..35a60cc3
Binary files /dev/null and b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-displayed-content.png differ
diff --git a/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-only-raw-content.png b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-only-raw-content.png
new file mode 100755
index 00000000..7a41b19b
Binary files /dev/null and b/cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-only-raw-content.png differ
diff --git a/cypress/component/integration/Clipboard.cy.tsx b/cypress/component/integration/Clipboard.cy.tsx
new file mode 100644
index 00000000..107350c3
--- /dev/null
+++ b/cypress/component/integration/Clipboard.cy.tsx
@@ -0,0 +1,193 @@
+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();
+
+ cy.get('[data-testid="clipboard-field"]').should('exist');
+ cy.get('[data-testid="clipboard-content"]').contains('raw content');
+ });
+
+ it('should match snapshot', () => {
+ cy.mount();
+ compareSnapshot(cy, 'clipboard-with-only-raw-content');
+ });
+ });
+
+ describe('clipboard with diplayed content', () => {
+ it('should render', () => {
+ cy.mount(
+ ,
+ );
+
+ cy.get('[data-testid="clipboard-field"]').should('exist');
+ cy.get('[data-testid="clipboard-content"]').contains(
+ 'formatted content',
+ );
+ });
+
+ it('should match snapshot', () => {
+ cy.mount(
+ ,
+ );
+ compareSnapshot(cy, 'clipboard-with-displayed-content');
+ });
+ });
+
+ describe('clipboard success flow', () => {
+ it('should render', () => {
+ cy.mount(
+ ,
+ );
+
+ 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(
+ ,
+ );
+ 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(
+ ,
+ );
+ compareSnapshot(cy, 'clipboard-success-flow');
+ });
+ });
+
+ describe('clipboard raw content success flow', () => {
+ it('should render', () => {
+ cy.mount();
+
+ 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();
+ 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();
+ compareSnapshot(cy, 'clipboard-raw-content-success-flow');
+ });
+ });
+
+ describe('clipboard error flow', () => {
+ it('should render', () => {
+ cy.mount();
+
+ 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();
+ 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
+ });
+ });
+});
diff --git a/src/components/Clipboard/Clipboard.stories.tsx b/src/components/Clipboard/Clipboard.stories.tsx
index 8215dcee..398ae2eb 100644
--- a/src/components/Clipboard/Clipboard.stories.tsx
+++ b/src/components/Clipboard/Clipboard.stories.tsx
@@ -12,3 +12,12 @@ export const _Clipboard = {
/>
),
};
+
+export const _Rawcontent = {
+ render: () => (
+
+ ),
+};
diff --git a/src/components/Clipboard/Clipboard.test.tsx b/src/components/Clipboard/Clipboard.test.tsx
deleted file mode 100644
index 56a09c5a..00000000
--- a/src/components/Clipboard/Clipboard.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import { Clipboard } from './Clipboard';
-
-describe('Components | Clipboard', () => {
- test('it should render', () => {
- render(
- ,
- );
-
- let input = screen.getByTestId('clipboard-field');
-
- expect(input).toBeInTheDocument();
- });
-});
diff --git a/src/components/Clipboard/Clipboard.tsx b/src/components/Clipboard/Clipboard.tsx
index 1c39e8b1..ae02a92e 100644
--- a/src/components/Clipboard/Clipboard.tsx
+++ b/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}
>
-
+
{displayedContent}
{success ? (
) : (
-
+
)}
{error || success ? (
-
+
+
+
) : null}
>
);