Disable the copy button when Clipboard API fails #103

masakudamatsu · Apr 25, 2020 · aec3d96 · aec3d96
1 parent 211d08f
commit aec3d96
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/GetCSS.js b/src/components/GetCSS.js
@@ -89,6 +89,7 @@ p:not(:first-child) {
         </CodeSnippet>
         <Button
           data-testid="copy-button"
+          disabled={error}
           onClick={copyToClipboard}
           aria-describedby="whatHappened howToResolve extraText"
         >

diff --git a/src/components/GetCSS.test.js b/src/components/GetCSS.test.js
@@ -289,7 +289,7 @@ test('Clicking the copy button calls document.execCommand if Clipboard API fails
   document.queryCommandSupported = originalQueryCommandSupported;
 });
 
-test('Clicking the copy button reveals the alert message when neither Clipboard API nor document.execCommand works', () => {
+test('Clicking the copy button reveals the alert message and siables the button when neither Clipboard API nor document.execCommand works', () => {
   // Simulate Clipboard API failure
   const originalNavigator = {...navigator};
   const navigatorSpy = jest.spyOn(global, 'navigator', 'get');
@@ -316,10 +316,13 @@ test('Clicking the copy button reveals the alert message when neither Clipboard
   expect(getByTestId('whatHappened')).not.toBeVisible();
   expect(getByTestId('howToResolve')).not.toBeVisible();
   expect(getByTestId('extraText')).not.toBeVisible();
+  expect(getByTestId('copy-button')).not.toBeDisabled();
+
   user.click(getByTestId('copy-button'));
   expect(getByTestId('whatHappened')).toBeVisible();
   expect(getByTestId('howToResolve')).toBeVisible();
   expect(getByTestId('extraText')).toBeVisible();
+  expect(getByTestId('copy-button')).toBeDisabled();
 
   navigatorSpy.mockRestore();
   document.queryCommandSupported = originalQueryCommandSupported;