From b657fb4210f1c4acad49a778df394e1e1d3739f7 Mon Sep 17 00:00:00 2001 From: pivi Date: Mon, 16 Oct 2023 16:15:41 +0200 Subject: [PATCH] Test Clipboard --- .../Clipboard.cy.tsx-clipboard-error-flow.png | Bin 0 -> 9150 bytes ...tsx-clipboard-raw-content-success-flow.png | Bin 0 -> 8169 bytes ...lipboard.cy.tsx-clipboard-success-flow.png | Bin 0 -> 9150 bytes ...y.tsx-clipboard-with-displayed-content.png | Bin 0 -> 9150 bytes ...cy.tsx-clipboard-with-only-raw-content.png | Bin 0 -> 8169 bytes .../component/integration/Clipboard.cy.tsx | 193 ++++++++++++++++++ .../Clipboard/Clipboard.stories.tsx | 9 + src/components/Clipboard/Clipboard.test.tsx | 20 -- src/components/Clipboard/Clipboard.tsx | 25 ++- 9 files changed, 221 insertions(+), 26 deletions(-) create mode 100755 cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-error-flow.png create mode 100755 cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-raw-content-success-flow.png create mode 100755 cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-success-flow.png create mode 100755 cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-displayed-content.png create mode 100755 cypress-visual-screenshots/baseline/Clipboard.cy.tsx-clipboard-with-only-raw-content.png create mode 100644 cypress/component/integration/Clipboard.cy.tsx delete mode 100644 src/components/Clipboard/Clipboard.test.tsx 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 0000000000000000000000000000000000000000..35a60cc3e6037b40ccd335e9f01a9951995a5ec5 GIT binary patch literal 9150 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 bF9_$czZoap^Y+ofVtaacAFun{`S1P%7d!3P literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..7a41b19b8c401697db0beacf9b972ef79820f2dd GIT binary patch literal 8169 zcmeI0`B#%y8pq>Up)I1FCT1HXXB2h4grB;Pn5bPi#A_OH67uKW@kR=tX91B7b zSwcck+Yv#QN@NK{Qp5qWkZ7?W2nk>ok&s9Ngpd&CzG*x256n4p&Yb-8p7(w4z3+X# z&-eK}H@R^b*)8rgA0?wYhBp4KYaEf& z|L4%!h$jaw4c7PhB@KoXC4($Oa(wIfb(?@L<5KUxPwLr1#EKWE8U%10wa`l4WotkT zMx@6nTHoZ4Bz9S%sMl9OL&r8m#l||?Jq&5!MH@!|K6QA$cLmK{Pwb8ep@^z9q! z$V~6+Kp3;3Rzk)mrBRxx60(SlEX+q)Vlrfalx1tUX2sN`O^v{vzu0`X5p0i5qQI5eJr zaZj$v#ppi^!DJ?Hz5Mp>YO|}n3bgywKpmHDUr8;@b#B|~Ym;<%$FcI;U=jP^Vl^M_ zg3(V{A;F$UE>G2kHphngm|Z=X?`>EBAB)EJ4-33Zn9vtcF z3Z`V}-`EQBx1d#HSJ%e8ds!XY_RWQp4G|UNiDiB+PxeyW;yArvmyM}26R{($dyFc& zdWN+8 zOzQYGxV1I6Cir0^PC%n3b;GM`s3e1Ss4?2lnIXQFH$oI;k`ZUWa7z$UA>ptfbjDb= zg{m^+?IBxELDuY#Bj5BNLutiD>R(o_#ZLbE5BO>`Fw;*ZE((-B?hoJ|u?oL!zBTpJ zbd93#rn|5#DA03Xfwv)5ID6kcTFgf)dFA^qsa}f=ZtX-RKe{x$WV>I9I9;TRaBi13 z>X(!x0W_`BFk1z8k3Zv+HBYZJCKK#hRosxVouuVr8nc!bq3vt60un7MAGO17YOq1j zebbsC@YIM4eYdjBy%#$Dsr&ahoUHBba~DxbOH&y5njEdFltuk$-Hs0+DaRx#C zei|};1aE%&H9<KuOzFJr{&9 z4~fT6cIY4*VOgszHe$ilA*C=~*%urVUff4<$Fb_dTBO+)&b<~(Qg;>`m>dr>hU?5; zg_``S2>;IwA>#X#c#e{^tjntnrSDLt_MlZw4Vg}KoPb|lMJq=unaG4RZdfBI9=V23 z>_9q%)bpkyG;P!j6+4ubm8p255z2??_P$%wusZ^2)Edt1T|xNS7rr>`Xj?J^)FS=z z+&iGVLsezgWkrWh;a|RY7i6w1+oiX@^vKR^=mD-G`D8s)#fcq$yvwf0K9CP|B-<5u zxCY(#XN%cIDkeHE(Q}_xqJP_g$&k4GE>5P9ULmeIOw7augxPCq*$r{;|O8 zz%o0kz_UcOq#$a6*5s8-U|ui30!I?ZgCw_tnl%xuq@wd#{-r%;%Rdy5awffCfM+!Xno6Y)y|%Q3@-} zZ8H!ADUVGGk|0vMtc5>J_E*V3invz{i-Robc#bXq%0|aiKRAUoiy>d>wQ8g*$)JxF zGEreI@qO8=Ky@;w!j&BFWv#$N|Go?L+^J>cR`S$9GY<=I~qD43n>MGK)G~p9M| zd$hzUtORJ~xYl#_xHI$pQ~gWwQP6j@8iyOXeq^guhPJ4Sd2S4{)hzyW} zw=nYtnIL4!Up=z3rzU=}W&q$&2q_17F=Baf5CB0^0_tCr!W zhnoP{P^Tcz0kQC$T~*?VTo*o|p|N5UTY*VyPdDv;c(RT|dL1cRhR#$lSVJmEs2yM* z7s@q!s3idtQSDt#(!E)dE?h2S_0tupYJkkK;v6;?s}p#cN3mhX!gx zi~0k-JzZj6H^;$IMBs7uGL_!k@O(guEkZ_@Leyj}ot-s<2I_Z4S!ivP_#(n&9 z(D=6m%-qs=YqQsQF}(ybm_#s%U@8X~%)|sx2mgm6Ac(| FzW{1bJdpqZ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..35a60cc3e6037b40ccd335e9f01a9951995a5ec5 GIT binary patch literal 9150 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 bF9_$czZoap^Y+ofVtaacAFun{`S1P%7d!3P literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..35a60cc3e6037b40ccd335e9f01a9951995a5ec5 GIT binary patch literal 9150 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 bF9_$czZoap^Y+ofVtaacAFun{`S1P%7d!3P literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..7a41b19b8c401697db0beacf9b972ef79820f2dd GIT binary patch literal 8169 zcmeI0`B#%y8pq>Up)I1FCT1HXXB2h4grB;Pn5bPi#A_OH67uKW@kR=tX91B7b zSwcck+Yv#QN@NK{Qp5qWkZ7?W2nk>ok&s9Ngpd&CzG*x256n4p&Yb-8p7(w4z3+X# z&-eK}H@R^b*)8rgA0?wYhBp4KYaEf& z|L4%!h$jaw4c7PhB@KoXC4($Oa(wIfb(?@L<5KUxPwLr1#EKWE8U%10wa`l4WotkT zMx@6nTHoZ4Bz9S%sMl9OL&r8m#l||?Jq&5!MH@!|K6QA$cLmK{Pwb8ep@^z9q! z$V~6+Kp3;3Rzk)mrBRxx60(SlEX+q)Vlrfalx1tUX2sN`O^v{vzu0`X5p0i5qQI5eJr zaZj$v#ppi^!DJ?Hz5Mp>YO|}n3bgywKpmHDUr8;@b#B|~Ym;<%$FcI;U=jP^Vl^M_ zg3(V{A;F$UE>G2kHphngm|Z=X?`>EBAB)EJ4-33Zn9vtcF z3Z`V}-`EQBx1d#HSJ%e8ds!XY_RWQp4G|UNiDiB+PxeyW;yArvmyM}26R{($dyFc& zdWN+8 zOzQYGxV1I6Cir0^PC%n3b;GM`s3e1Ss4?2lnIXQFH$oI;k`ZUWa7z$UA>ptfbjDb= zg{m^+?IBxELDuY#Bj5BNLutiD>R(o_#ZLbE5BO>`Fw;*ZE((-B?hoJ|u?oL!zBTpJ zbd93#rn|5#DA03Xfwv)5ID6kcTFgf)dFA^qsa}f=ZtX-RKe{x$WV>I9I9;TRaBi13 z>X(!x0W_`BFk1z8k3Zv+HBYZJCKK#hRosxVouuVr8nc!bq3vt60un7MAGO17YOq1j zebbsC@YIM4eYdjBy%#$Dsr&ahoUHBba~DxbOH&y5njEdFltuk$-Hs0+DaRx#C zei|};1aE%&H9<KuOzFJr{&9 z4~fT6cIY4*VOgszHe$ilA*C=~*%urVUff4<$Fb_dTBO+)&b<~(Qg;>`m>dr>hU?5; zg_``S2>;IwA>#X#c#e{^tjntnrSDLt_MlZw4Vg}KoPb|lMJq=unaG4RZdfBI9=V23 z>_9q%)bpkyG;P!j6+4ubm8p255z2??_P$%wusZ^2)Edt1T|xNS7rr>`Xj?J^)FS=z z+&iGVLsezgWkrWh;a|RY7i6w1+oiX@^vKR^=mD-G`D8s)#fcq$yvwf0K9CP|B-<5u zxCY(#XN%cIDkeHE(Q}_xqJP_g$&k4GE>5P9ULmeIOw7augxPCq*$r{;|O8 zz%o0kz_UcOq#$a6*5s8-U|ui30!I?ZgCw_tnl%xuq@wd#{-r%;%Rdy5awffCfM+!Xno6Y)y|%Q3@-} zZ8H!ADUVGGk|0vMtc5>J_E*V3invz{i-Robc#bXq%0|aiKRAUoiy>d>wQ8g*$)JxF zGEreI@qO8=Ky@;w!j&BFWv#$N|Go?L+^J>cR`S$9GY<=I~qD43n>MGK)G~p9M| zd$hzUtORJ~xYl#_xHI$pQ~gWwQP6j@8iyOXeq^guhPJ4Sd2S4{)hzyW} zw=nYtnIL4!Up=z3rzU=}W&q$&2q_17F=Baf5CB0^0_tCr!W zhnoP{P^Tcz0kQC$T~*?VTo*o|p|N5UTY*VyPdDv;c(RT|dL1cRhR#$lSVJmEs2yM* z7s@q!s3idtQSDt#(!E)dE?h2S_0tupYJkkK;v6;?s}p#cN3mhX!gx zi~0k-JzZj6H^;$IMBs7uGL_!k@O(guEkZ_@Leyj}ot-s<2I_Z4S!ivP_#(n&9 z(D=6m%-qs=YqQsQF}(ybm_#s%U@8X~%)|sx2mgm6Ac(| FzW{1bJdpqZ literal 0 HcmV?d00001 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} );