[docs] Add a screenshot test for LMI and remove it from component docs

The component doc for the LMI is very likely never looked up. Instead,
just add a screenshot test.

Bug: 414332459
Change-Id: I3030d69e0f774e5224f77b84d838d128938042db
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7117244
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {
+  assertScreenshot,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../../testing/LocaleHelpers.js';
@@ -15,6 +16,67 @@ import * as LinearMemoryInspectorComponents from './components.js';
 
 const LinearMemoryInspector = LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector;
 
+describeWithLocale('LinearMemoryInspector', () => {
+  it('renders the inspector', async () => {
+    const target = document.createElement('div');
+    target.style.width = 'var(--sys-size-40)';
+    target.style.height = 'var(--sys-size-30)';
+    renderElementIntoDOM(target);
+    const array = [];
+    const string = 'Hello this is a string from the memory buffer!';
+
+    for (let i = 0; i < string.length; ++i) {
+      array.push(string.charCodeAt(i));
+    }
+
+    for (let i = -1000; i < 1000; ++i) {
+      array.push(i);
+    }
+
+    const memory = new Uint8Array(array);
+    const valueTypes = new Set([
+      LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType.FLOAT32,
+      LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType.INT32,
+      LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType.POINTER32
+    ]);
+    const valueTypeModes = new Map();
+
+    LinearMemoryInspectorComponents.LinearMemoryInspector.DEFAULT_VIEW(
+        {
+          memory: new Uint8Array(memory),
+          address: 0,
+          memoryOffset: 0,
+          valueTypes,
+          outerMemoryLength: memory.length,
+          valueTypeModes,
+          endianness: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.Endianness.LITTLE,
+          highlightInfo: undefined,
+          hideValueInspector: false,
+          currentNavigatorMode: LinearMemoryInspectorComponents.LinearMemoryNavigator.Mode.SUBMITTED,
+          currentNavigatorAddressLine: '0',
+          canGoBackInHistory: false,
+          canGoForwardInHistory: false,
+          onRefreshRequest: () => {},
+          onAddressChange: () => {},
+          onNavigatePage: () => {},
+          onNavigateHistory: () => false,
+          onJumpToAddress: () => {},
+          onDeleteMemoryHighlight: () => {},
+          onByteSelected: () => {},
+          onResize: () => {},
+          onValueTypeToggled: () => {},
+          onValueTypeModeChanged: () => {},
+          onEndiannessChanged: () => {},
+          memorySlice: new Uint8Array(memory),
+          viewerStart: 0,
+        },
+        {},
+        target,
+    );
+    await assertScreenshot('linear_memory_inspector/lmi.png');
+  });
+});
+
 describeWithLocale('LinearMemoryInspector', () => {
   let component: LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector;
   let view: ViewFunctionStub<typeof LinearMemoryInspector>;

front_end/ui/components/docs/BUILD.gn

@@ -17,7 +17,6 @@ group("docs") {
     "./expandable_list",
     "./input",
     "./legacy_color_invert",
-    "./linear_memory_inspector",
     "./linkifier",
     "./markdown_image",
     "./markdown_link",