feat: migrate codebox component

.storybook/preview.tsx

@@ -23,6 +23,7 @@ const preview: Preview = {
         basePath: '',
       },
     },
+    backgrounds: { disable: true },
   },
 };
 

components/Article/Codebox/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Article/Codebox Default smoke-test 1`] = `
+<pre class="Codebox_pre___vcVQ language-js">
+  <div class="Codebox_top__1r10k">
+    <div class="Codebox_langBox__zXBm7">
+      <button type="button"
+              class="Codebox_lang__X6WDB Codebox_selected__gFZLU"
+      >
+        js
+      </button>
+    </div>
+    <button type="button"
+            class="Codebox_copy__ZEctM"
+    >
+      copy
+    </button>
+  </div>
+  <div class="Codebox_content__jhl_a">
+    <span class="token keyword">
+      const
+    </span>
+    a
+    <span class="token operator">
+      =
+    </span>
+    <span class="token number">
+      1
+    </span>
+    <span class="token punctuation">
+      ;
+    </span>
+  </div>
+</pre>
+`;
+
+exports[`Article/Codebox MultiLang smoke-test 1`] = `
+<pre class="Codebox_pre___vcVQ language-js|language-mjs">
+  <div class="Codebox_top__1r10k">
+    <div class="Codebox_langBox__zXBm7">
+      <button type="button"
+              class="Codebox_lang__X6WDB Codebox_selected__gFZLU"
+      >
+        cjs
+      </button>
+      <button type="button"
+              class="Codebox_lang__X6WDB"
+      >
+        mjs
+      </button>
+    </div>
+    <button type="button"
+            class="Codebox_copy__ZEctM"
+    >
+      copy
+    </button>
+  </div>
+  <div class="Codebox_content__jhl_a">
+    <span class="token keyword">
+      const
+    </span>
+    http
+    <span class="token operator">
+      =
+    </span>
+    <span class="token function">
+      require
+    </span>
+    <span class="token punctuation">
+      (
+    </span>
+    <span class="token string">
+      'http'
+    </span>
+    <span class="token punctuation">
+      )
+    </span>
+    <span class="token punctuation">
+      ;
+    </span>
+  </div>
+</pre>
+`;

components/Article/Codebox/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Codebox component (multiple langs) switch between languages 1`] = `
+<div>
+  <pre
+    class="pre language-js|language-mjs"
+  >
+    <div
+      class="top"
+    >
+      <div
+        class="langBox"
+      >
+        <button
+          class="lang selected"
+          type="button"
+        >
+          cjs
+        </button>
+        <button
+          class="lang"
+          type="button"
+        >
+          mjs
+        </button>
+      </div>
+      <button
+        class="copy"
+        type="button"
+      >
+        components.codeBox.copy
+      </button>
+    </div>
+    <div
+      class="content"
+    >
+      <span
+        class="token keyword"
+      >
+        const
+      </span>
+       http 
+      <span
+        class="token operator"
+      >
+        =
+      </span>
+
+      <span
+        class="token function"
+      >
+        require
+      </span>
+      <span
+        class="token punctuation"
+      >
+        (
+      </span>
+      <span
+        class="token string"
+      >
+        'http'
+      </span>
+      <span
+        class="token punctuation"
+      >
+        )
+      </span>
+      <span
+        class="token punctuation"
+      >
+        ;
+      </span>
+
+
+    </div>
+  </pre>
+</div>
+`;
+
+exports[`Codebox component (multiple langs) switch between languages 2`] = `
+<div>
+  <pre
+    class="pre language-js|language-mjs"
+  >
+    <div
+      class="top"
+    >
+      <div
+        class="langBox"
+      >
+        <button
+          class="lang"
+          type="button"
+        >
+          cjs
+        </button>
+        <button
+          class="lang selected"
+          type="button"
+        >
+          mjs
+        </button>
+      </div>
+      <button
+        class="copy"
+        type="button"
+      >
+        components.codeBox.copy
+      </button>
+    </div>
+    <div
+      class="content"
+    >
+      <span
+        class="token keyword"
+      >
+        import
+      </span>
+       http 
+      <span
+        class="token keyword"
+      >
+        from
+      </span>
+
+      <span
+        class="token string"
+      >
+        'http'
+      </span>
+      <span
+        class="token punctuation"
+      >
+        ;
+      </span>
+    </div>
+  </pre>
+</div>
+`;

components/Article/Codebox/__tests__/index.test.tsx

@@ -0,0 +1,77 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import Codebox, { replaceLabelLanguages, replaceLanguages } from '../index';
+
+jest.mock('isomorphic-dompurify', () => {
+  return {
+    sanitize: jest.fn().mockImplementation(source => source),
+  };
+});
+
+describe('Replacer tests', (): void => {
+  it('replaceLabelLanguages', (): void => {
+    expect(replaceLabelLanguages('language-console')).toBe('language-bash');
+  });
+
+  it('replaceLanguages', (): void => {
+    expect(replaceLanguages('language-mjs')).toBe('language-js');
+    expect(replaceLanguages('language-cjs')).toBe('language-js');
+    expect(replaceLanguages('language-javascript')).toBe('language-js');
+    expect(replaceLanguages('language-console')).toBe('language-bash');
+    expect(replaceLanguages('language-shell')).toBe('language-bash');
+  });
+});
+
+describe('Codebox component (one lang)', (): void => {
+  const code = 'const a = 1;';
+
+  it('should copy content', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <Codebox>
+          <pre className="language-js">{code}</pre>
+        </Codebox>
+      </IntlProvider>
+    );
+
+    const navigatorClipboardWriteTextSpy = jest.spyOn(
+      navigator.clipboard,
+      'writeText'
+    );
+
+    const buttonElement = screen.getByText('components.codeBox.copy');
+    await user.click(buttonElement);
+
+    expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
+    expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith(code);
+  });
+});
+
+describe('Codebox component (multiple langs)', (): void => {
+  const code = `const http = require('http');
+--------------
+import http from 'http';`;
+
+  it('switch between languages', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <Codebox>
+          <pre className="language-cjs|language-mjs">{code}</pre>
+        </Codebox>
+      </IntlProvider>
+    );
+
+    expect(container).toMatchSnapshot();
+
+    const buttonElement = await screen.findByText('mjs');
+    await user.click(buttonElement);
+
+    expect(container).toMatchSnapshot();
+  });
+});