copy-text-button: use Clipboard API

Co-authored-by: Himanshu Mishra <himanshu@orkohunter.net>
Signed-off-by: Vincenzo Scamporlino <me@vinzscam.dev>

plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.test.tsx

@@ -20,9 +20,10 @@ import { PlainApiDefinitionWidget } from './PlainApiDefinitionWidget';
 
 describe('<PlainApiDefinitionWidget />', () => {
   it('renders plain text', async () => {
-    const { getByText } = await renderInTestApp(
+    const { getByTestId } = await renderInTestApp(
       <PlainApiDefinitionWidget definition="Hello World" language="yaml" />,
     );
-    expect(getByText(/Hello World/i)).toBeInTheDocument();
+
+    expect(getByTestId('code-snippet')).toMatchSnapshot();
   });
 });

plugins/api-docs/src/components/PlainApiDefinitionWidget/__snapshots__/PlainApiDefinitionWidget.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PlainApiDefinitionWidget /> renders plain text 1`] = `
+<div
+  data-testid="code-snippet"
+  style="position: relative;"
+>
+  <pre
+    style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(248, 248, 255);"
+  >
+    <code
+      class="language-yaml"
+      style="white-space: pre;"
+    >
+      <span>
+        <span
+          style="color: rgb(33, 145, 97);"
+        >
+          Hello
+        </span>
+        <span>
+           
+        </span>
+        <span
+          style="color: rgb(33, 145, 97);"
+        >
+          World
+        </span>
+      </span>
+    </code>
+  </pre>
+  <div
+    style="position: absolute; top: 0px; right: 0px;"
+  >
+    <button
+      class="MuiButtonBase-root MuiIconButton-root"
+      tabindex="0"
+      title="Text copied to clipboard"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root"
+          data-testid="copy-button"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+          />
+        </svg>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
+`;