From 6b5bc29b203e73970ffa23462c16c067c13e7a07 Mon Sep 17 00:00:00 2001
From: Weronika Olejniczak <weronika.olejniczak@elastic.co>
Date: Wed, 27 Nov 2024 17:24:23 +0100
Subject: [PATCH] chore(code_block): improve the unit test suite

- add back snapshot tests for initial render and virtualization
- simplify some assertions
- add unit tests for the: transparentBackground, overflowHeight,
paddingSize and fontSize
---
 .../__snapshots__/code_block.test.tsx.snap    |  86 +++++++++++++
 .../src/components/code/code_block.test.tsx   | 120 ++++++++++++++++--
 2 files changed, 195 insertions(+), 11 deletions(-)
 create mode 100644 packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap

diff --git a/packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap
new file mode 100644
index 00000000000..a4256be341a
--- /dev/null
+++ b/packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCodeBlock Virtualization renders a virtualized code block 1`] = `
+<div
+  class="euiCodeBlock testClass1 testClass2 emotion-euiCodeBlock-s-hasControls-euiTestCss"
+  style="block-size: 50%;"
+>
+  <div
+    data-eui="EuiAutoSizer"
+  >
+    <pre
+      class="euiCodeBlock__pre emotion-euiCodeBlock__pre-pre-padding-controlsOffset"
+      style="position: relative; block-size: 600px; inline-size: 600px; overflow: auto; will-change: transform; direction: ltr;"
+      tabindex="0"
+    >
+      <code
+        aria-label="aria-label"
+        class="euiCodeBlock__code emotion-euiCodeBlock__code-isVirtualized"
+        data-code-language="text"
+        data-test-subj="test subject string"
+        style="block-size: 36px; inline-size: 100%;"
+      >
+        <span
+          class="euiCodeBlock__line emotion-euiCodeBlock__line"
+          style="position: absolute; inset-inline-start: 0; inset-block-start: 0; block-size: 18px; inline-size: 100%;"
+        >
+          var some = 'code';
+
+        </span>
+        <span
+          class="euiCodeBlock__line emotion-euiCodeBlock__line"
+          style="position: absolute; inset-inline-start: 0; inset-block-start: 18px; block-size: 18px; inline-size: 100%;"
+        >
+          console.log(some);
+        </span>
+      </code>
+    </pre>
+  </div>
+  <div
+    class="euiCodeBlock__controls emotion-euiCodeBlock__controls-l"
+  >
+    <button
+      aria-label="Expand"
+      class="euiButtonIcon euiCodeBlock__fullScreenButton emotion-euiButtonIcon-xs-empty-text"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="fullScreen"
+      />
+    </button>
+  </div>
+</div>
+`;
+
+exports[`EuiCodeBlock renders a code block 1`] = `
+<div
+  class="euiCodeBlock testClass1 testClass2 emotion-euiCodeBlock-s-euiTestCss"
+>
+  <pre
+    class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
+    tabindex="-1"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code emotion-euiCodeBlock__code"
+      data-code-language="text"
+      data-test-subj="test subject string"
+    >
+      <span
+        class="euiCodeBlock__line emotion-euiCodeBlock__line"
+      >
+        var some = 'code';
+
+      </span>
+      <span
+        class="euiCodeBlock__line emotion-euiCodeBlock__line"
+      >
+        console.log(some);
+      </span>
+    </code>
+  </pre>
+</div>
+`;
diff --git a/packages/eui/src/components/code/code_block.test.tsx b/packages/eui/src/components/code/code_block.test.tsx
index 84b70009e6c..1328b360d2a 100644
--- a/packages/eui/src/components/code/code_block.test.tsx
+++ b/packages/eui/src/components/code/code_block.test.tsx
@@ -11,6 +11,7 @@ import { fireEvent } from '@testing-library/react';
 
 import { requiredProps } from '../../test/required_props';
 import { render } from '../../test/rtl';
+import { useEuiTheme } from '../../services';
 
 import { EuiCodeBlock } from './code_block';
 
@@ -24,6 +25,7 @@ describe('EuiCodeBlock', () => {
     );
 
     expect(container).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('updates DOM when the input changes', () => {
@@ -49,7 +51,7 @@ describe('EuiCodeBlock', () => {
   });
 
   describe('Props', () => {
-    it('renders "Copy" on the copy button', () => {
+    it('renders "Copy" on the copy button when no `copyAriaLabel` is passed', () => {
       const { getByTestSubject } = render(
         <EuiCodeBlock isCopyable>{code}</EuiCodeBlock>
       );
@@ -73,6 +75,96 @@ describe('EuiCodeBlock', () => {
         customLabel
       );
     });
+
+    it('renders a transparent background when `transparentBackground` is `true`', () => {
+      const { container } = render(
+        <EuiCodeBlock transparentBackground>{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock')).toHaveStyle({
+        background: 'transparent',
+      });
+    });
+
+    it('renders no padding when `paddingSize` is `none`', () => {
+      const { container } = render(
+        <EuiCodeBlock paddingSize="none">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock__pre')).toHaveStyle({
+        padding: '0',
+      });
+    });
+
+    it('renders a small padding when `paddingSize` is `s`', () => {
+      const { container } = render(
+        <EuiCodeBlock paddingSize="s">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock__pre')).toHaveStyle({
+        padding: '8px',
+      });
+    });
+
+    it('renders a medium padding when `paddingSize` is `m`', () => {
+      const { container } = render(
+        <EuiCodeBlock paddingSize="m">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock__pre')).toHaveStyle({
+        padding: '16px',
+      });
+    });
+
+    it.skip('renders a large padding when `paddingSize` is `l`', () => {
+      const CodeBlock = () => {
+        const euiTheme = useEuiTheme();
+
+        console.log(euiTheme);
+
+        return <EuiCodeBlock paddingSize="l">{code}</EuiCodeBlock>;
+      };
+
+      const { container } = render(<CodeBlock />);
+
+      console.log(
+        getComputedStyle(container.querySelector('.euiCodeBlock__pre')!)
+      );
+
+      expect(container.querySelector('.euiCodeBlock__pre')).toHaveStyle({
+        padding: '24px',
+      });
+    });
+
+    it('renders a small font size when `fontSize` is `s`', () => {
+      const { container } = render(
+        <EuiCodeBlock fontSize="s">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock')).toHaveStyle({
+        fontSize: '0.8571rem',
+      });
+    });
+
+    it('renders a medium font size when `fontSize` is `m`', () => {
+      const { container } = render(
+        <EuiCodeBlock fontSize="m">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock')).toHaveStyle({
+        fontSize: '1.0000rem',
+      });
+    });
+
+    it('renders a large font size when `fontSize` is `l`', () => {
+      const { container } = render(
+        <EuiCodeBlock fontSize="l">{code}</EuiCodeBlock>
+      );
+
+      expect(container.querySelector('.euiCodeBlock')).toHaveStyle({
+        fontSize: '1.1429rem',
+      });
+    });
   });
 
   describe('Fullscreen', () => {
@@ -131,7 +223,10 @@ describe('EuiCodeBlock', () => {
         </EuiCodeBlock>
       );
 
-      expect(container).toBeInTheDocument();
+      expect(
+        container.querySelector('[class*="euiCodeBlock__code-isVirtualized"]')
+      ).toBeInTheDocument();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     it('requires overflowHeight', () => {
@@ -160,7 +255,7 @@ describe('EuiCodeBlock', () => {
       );
 
       expect(
-        container.querySelectorAll('.euiCodeBlock__lineNumberWrapper').length
+        container.querySelectorAll('.euiCodeBlock__lineNumber').length
       ).toBeGreaterThan(0);
     });
 
@@ -171,15 +266,14 @@ describe('EuiCodeBlock', () => {
         </EuiCodeBlock>
       );
 
-      expect(
-        container.querySelectorAll('.euiCodeBlock__lineNumberWrapper > span')[0]
-      ).toHaveAttribute('data-line-number', '10');
-      expect(
-        container.querySelectorAll('.euiCodeBlock__lineNumberWrapper > span')[1]
-      ).toHaveAttribute('data-line-number', '11');
+      const lineNumbers = container.querySelectorAll(
+        '.euiCodeBlock__lineNumber'
+      );
+
+      expect(lineNumbers[0]).toHaveAttribute('data-line-number', '10');
+      expect(lineNumbers[1]).toHaveAttribute('data-line-number', '11');
     });
 
-    // TODO: Update the assertion
     it('renders highlighted line numbers', () => {
       const { container } = render(
         <EuiCodeBlock lineNumbers={{ highlight: '1' }} {...requiredProps}>
@@ -187,7 +281,11 @@ describe('EuiCodeBlock', () => {
         </EuiCodeBlock>
       );
 
-      expect(container).toBeInTheDocument();
+      const highlightedLine = container.querySelector(
+        '[class*="euiCodeBlock__lineText-isHighlighted"]'
+      );
+
+      expect(highlightedLine).toBeInTheDocument();
     });
 
     it('renders annotated line numbers', () => {