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} );