test(vrt): add story for virtualized scrolling bug regression

- adds the pre-fix state as history

Author: mgadewoll

packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png

@@ -6,15 +6,19 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj, ReactRenderer } from '@storybook/react';
 import type { PlayFunctionContext } from '@storybook/csf';
+import { css } from '@emotion/react';
 
 import { within } from '../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { mathWithUnits } from '../../global_styling';
 
 import { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 import { expect, userEvent } from '@storybook/test';
+import { EuiButton } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
 const meta: Meta<EuiCodeBlockProps> = {
   title: 'Editors & Syntax/EuiCodeBlock',
@@ -148,3 +152,97 @@ export const HighContrast: Story = {
 ],`,
   },
 };
+
+/* This Story verifies that updated data in a virtualized code block is
+rendered correctly and not cut-off after scrolling */
+export const VirtualizedCodeBlockScrolling: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+    codeSnippet: {
+      skip: true,
+    },
+  },
+  // use dark mode to better visualize container boundaries
+  globals: { colorMode: 'dark' },
+  render: function Render() {
+    const [response, setResponse] = useState('{}');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSubmit = async () => {
+      setIsLoading(true);
+
+      try {
+        const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+        const data = await res.json();
+
+        setResponse(JSON.stringify(data, null, 2));
+      } catch (error) {
+        console.error(error);
+      } finally {
+        // delay to keep VRT images more stable
+        setTimeout(() => {
+          setIsLoading(false);
+        });
+      }
+    };
+
+    useEffect(() => {
+      handleSubmit();
+    }, []);
+
+    useEffect(() => {
+      // scroll the code block after response updates to test if virtualization
+      // calculates the scroll height and position correctly
+      const pre = document.querySelector('.euiCodeBlock__pre');
+      if (pre) {
+        pre.scrollBy({
+          top: 75,
+        });
+
+        // trigger a second load after scroll to simulate potential issues
+        setTimeout(() => {
+          handleSubmit();
+        }, 10);
+      }
+    }, [response]);
+
+    return (
+      <EuiFlexGroup
+        direction="row"
+        gutterSize="m"
+        css={({ euiTheme }) => css`
+          block-size: calc(
+            100vh - ${mathWithUnits(euiTheme.size.base, (x) => x * 2)}
+          );
+        `}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            type="submit"
+            iconType="sortRight"
+            isLoading={isLoading}
+            onClick={handleSubmit}
+          >
+            Submit
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={2}>
+          <EuiCodeBlock
+            language="json"
+            fontSize="s"
+            paddingSize="m"
+            isCopyable={true}
+            lineNumbers
+            isVirtualized
+            overflowHeight="100%"
+          >
+            {response}
+          </EuiCodeBlock>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  },
+};