Placeholder NUX for testsuites

[jonbell-lot23]

Summary

We're going to build something more engaging soon, but in the meantime we should at least link to our docs. I've added a new file called TestRunsNUX for us to build on more later.

(Note for later: I had trouble centering this content horizontally and vertically because the div stretches across the width of the page despite only being 1/3. We'll talk about that later)

Old:

New:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 3, 2023 8:36pm

[replay-io]

E2E Tests

Status	Complete ↗︎
Commit	a63988a
Results	❌ 4 Failed authenticated/test-suites/library-tests-list expect(received).toBe(expected) // Object.is equality Expected: 13 Received: 0 inspector-elements-01: Basic DOM tree node display locator.waitFor: Timeout 15000ms exceeded. =========================== logs =========================== waiting for locator('[data-test-id="Elements-NotAvailable"]') to be visible ============================================================ inspector-elements-05_search-chromium: element picker and iframe behavior expect(received).toBe(expected) // Object.is equality Expected: 1 Received: 0 inspector-elements-05_search: element picker and iframe behavior expect(received).toBe(expected) // Object.is equality Expected: 1 Received: 0 ⚠️ 1 Flaky react_devtools-03: process and display multiple React versions in page ✅ 88 Passed authenticated/test-suites/library-test-runs breakpoints-01: Test basic breakpoint functionality breakpoints-02: Test unhandled divergence while evaluating at a breakpoint breakpoints-03: Test stepping forward through breakpoints when rewound before the first one breakpoints-04: catch, finally, generators, and async/await breakpoints-05: Test interaction of breakpoints with debugger statements breakpoints-06: Test log point in a sourcemapped file breakpoints-07: rewind and seek using command bar and console messages breakpoints-08: should be temporarily disabled console_async: support console evaluations in async frames console_dock_node: Should show the correct docking behavior for recordings without video console_dock: Should show the correct docking behavior for recordings with video console_errors: Test that errors and warnings from various sources are shown in the console console_eval: support console evaluations console_warp-01: should support warping to console messages console_warp-02: support pausing, warping, stepping and evaluating console messages console-expressions-01: should cache input eager eval and terminal expressions per instance cypress-01: Basic Test Suites panel functionality cypress-02: Test Step timeline behavior cypress-03: Test Step interactions cypress-04: Test Step buttons and menu item cypress-05: Test DOM node preview on user action step hover fe-1875 :: verify that steps go to the right point in time file-search-01: should search files focus_mode-01: should filter messages as regions based on the active focus mode highlighter: element highlighter works everywhere inspector-computed-01: Basic computed styles can be viewed inspector-elements-01: Basic DOM tree node display (Replay 1, Replay 2) inspector-elements-02_node-picker: element picker and iframe behavior (Replay 1, Replay 2) inspector-elements-03: Nested node picker and selection behavior inspector-elements-04: Keyboard shortcuts should select the right DOM nodes inspector-rules-01: Basic CSS rules should be viewed inspector-rules-02: Sourcemapped rules should be viewed inspector-rules-03: Shorthand CSS rules should be viewed jump-to-code-01: Test basic jumping functionality logpoints-01: log-points appear in the correct order and allow time warping logpoints-02: conditional log-points logpoints-03_chromium: should display event properties in the console logpoints-03: should display event properties in the console logpoints-04: should display exceptions in the console logpoints-05: should auto-complete based on log point location logpoints-06: should be temporarily disabled logpoints-07: should use the correct scope in auto-complete logpoints-08: should support jumping directly to a hit point via the capsule input logpoints-09: should support pending edits logpoints-10: too-many-points-to-find UX logpoints-11: too-many-points-to-run-analysis UX network-01: should filter requests by type and text network-02: should show details for the selected request network-03: should sync and display the current time in relation to the network requests node_console-01: Basic node console behavior node_console-02: uncaught exceptions should show up node_control_flow: catch, finally, generators, and async/await node_logpoint-01: Basic node logpoints node_logpoint-02: Node exception logpoints node_object_preview: Showing console objects in node node_spawn: Basic subprocess spawning node_stepping-01: Test stepping in async frames and async call stacks node_worker-01: make sure node workers don't cause crashes object_preview-01: expressions in the console after time warping object_preview-02: should allow objects in scope to be inspected object_preview-03: Test previews when switching between frames and stepping object_preview-04: Test scope mapping and switching between generated/original sources object_preview-05: Should support logging objects as values object_preview-06: HTML elements playwright-01: Basic Test Suites panel functionality playwright-02: Test Step timeline behavior playwright-03: Test Step interactions quick_open_modal-01: Test basic searching functionality react_devtools-01: Basic RDT behavior (Chromium) react_devtools-01: Basic RDT behavior (FF) react_devtools-02: RDT integrations (Chromium) react_devtools-04: Component selection is maintained when seeking to a new point redux_devtools: Test Redux DevTools. repaint: repaints the screen screen when stepping over code that modifies the DOM resizable-panels-01: Left side Toolbar should be collapsible restart debugging session scopes_rerender: Test that scopes are rerendered source-line-highlights: Test source line highlighting sourcemap_stacktrace: Test that stacktraces are sourcemapped stacking: Element highlighter selects the correct element when they overlap stepping-01: Test basic step-over/back functionality stepping-02: Test fixes for some simple stepping bugs stepping-03: Stepping past the beginning or end of a frame should act like a step-out stepping-04: Test stepping in a frame other than the top frame stepping-05_chromium: Test stepping in pretty-printed code stepping-05: Test stepping in pretty-printed code stepping-06: Test stepping in async frames and async call stacks

Snapshot Tests

Status	Complete ↗︎
Commit	a63988a
Results	⚠️ 5 Flaky should properly bucket properties for an overflowing array should remember search results count per source locator.textContent: Timeout 5000ms exceeded. =========================== logs =========================== waiting for locator('[data-test-id="SearchResultsLabel"]') ============================================================ should render and inspect maps should render and inspect regular expressions expect(received).not.toMatch(expected) Expected pattern: not /data-test-name=['"]Loader['"]/ Received string: "<span class=\"Expandable_ToggleButton__A_ESs \" data-test-name=\"ExpandablePreview\" role=\"button\" tabindex=\"0\"><span class=\"Expandable_ArrowExpanded__aFn6S\"><svg class=\"Expandable_ArrowIcon__60FPO \" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M8 5v14l11-7z\"></path></svg></span><span class=\"KeyValueRenderer_KeyValue__U2_FT\" data-test-name=\"KeyValue\"><span class=\"shared_RegExp__vZhr6\">/abc[123]+/i</span></span></span><span class=\" Expandable_Children__Ks8AZ\" data-test-name=\"ExpandableChildren\"><div class=\" Loader_Loader__JFuYi\" data-test-name=\"Loader\">Loading…</div></span>" should render and inspect sets expect(received).not.toMatch(expected) Expected pattern: not /data-test-name=['"]Loader['"]/ Received string: "<span class=\"Expandable_ToggleButton__A_ESs \" data-test-name=\"ExpandablePreview\" role=\"button\" tabindex=\"0\"><span class=\"Expandable_ArrowExpanded__aFn6S\"><svg class=\"Expandable_ArrowIcon__60FPO \" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M8 5v14l11-7z\"></path></svg></span><span class=\"KeyValueRenderer_KeyValue__U2_FT\" data-test-name=\"KeyValue\">Set<span class=\"shared_ArrayLength__PGTCc\">(4)</span><span class=\"shared_ArrayPropertyList__bVSVB\"> [<span class=\"shared_Value__LIkPu\"><span class=\"shared_Number____Nnm\" data-test-name=\"ClientValue\">1</span><span class=\"shared_Separator__w6oGd\">, </span></span><span class=\"shared_Value__LIkPu\"><span class=\"shared_String__pS3ms\" data-test-name=\"ClientValue\">\"two\"</span><span class=\"shared_Separator__w6oGd\">, </span></span><span class=\"shared_Value__LIkPu\"><span class=\"shared_Boolean__of5ek\" data-test-name=\"ClientValue\">true</span><span class=\"shared_Separator__w6oGd\">, </span></span><span class=\"shared_Value__LIkPu\">Set<span class=\"shared_ArrayLength__PGTCc\">(0)</span></span>]</span></span></span><span class=\" Expandable_Children__Ks8AZ\" data-test-name=\"ExpandableChildren\"><div class=\" Loader_Loader__JFuYi\" data-test-name=\"Loader\">Loading…</div></span>" ✅ 95 Passed display an overflow message scroll position should be restored when switching between sources should add this keyword to the list of suggestions should add true/false keywords to the list of suggestions should allow log point badge colors to be toggled should auto-suggestion text based on the current expression should be able to toggle side filter menu open and closed should be filterable should be filterable on complex content should be searchable should be searchable on complex content should copy arrays should copy dates should copy deep arrays should copy deep objects and their nested properties should copy errors should copy functions should copy html elements and text should copy maps should copy objects should copy primitive client values should copy regular expressions should copy sets should disable syntax highlight for long lines should display list of messages should display toggleable stack for errors should display toggleable stack for exceptions should display toggleable stack for traces should display toggleable stack for warnings should escape object expressions in terminal expressions should evaluate terminal expressions at an execution point should evaluate terminal expressions without an execution point should expand and collapse sources should expand and contract line height when log points are added and removed should expand and inspect arrays should expand and inspect objects should find matches in multiple sources should gracefully handle invalid remote analysis should handle too many points to find should handle too many points to run analysis should hide node_modules (and unpkg) if toggled should hide results when search is closed, and remember previous search string if re-opened should include log points in search results should include log points when filtering data should include or exclude external modules as requested should log events in the console should not allow saving log points with invalid conditional should not allow saving log points with invalid content should not allow submitting an invalid terminal expression should not erase break point when logging is toggled should not erase log point content when breaking is toggled should open a source and scroll to the correct line should overflow long log point text (without wrapping) should re-focus the search input when CMD+F is used again should re-focus the terminal input when search input is hidden should refine string tokens to avoid unnecessarily escaping quotation marks should remember filter toggle preferences between reloads should render and inspect a Promise should render and inspect a Proxy should render and inspect arrays should render and inspect functions should render and inspect HTML elements should render and inspect objects should render dates should render errors should render getters and setters correctly should render headers for complex data correctly should render nested, recursive values (as ellipses) without crashing should render primitive data correctly should render search results properly for lines with multiple breakable column positions should render sections correctly should render simple values should reset collapsed state if search changes should run local analysis for log points should run remote analysis for log points should scroll to line and column should show a button to clear terminal expressions should show different background color and edit icon when log point disabled should show error object stacks by default should show preview popup for instance properties should show the context menu on top of other messages and the current time indicator should show/hide object and array previews when toggled should suggest type-ahead options from prototype objects as well should support break points should support conditional log points should support continue to next and previous functionality should support custom badge styles for log points should support fuzzy file search should support jumping to a line in the active source file should support new lines in log points should support seeking to a message execution point should support setting focus range via the context menu should support terminal expressions with line breaks should support text search in the active source file should update the current time when the next/previous log point buttons are clicked

[replay-delta]

1 snapshot changes from primary branch

[jonbell-lot23]

Addresses https://linear.app/replay/issue/DES-929/empty-testsuites-teams-could-use-some-getting-started-help in preparation for https://linear.app/replay/issue/DES-1011/mock-up-a-testsuites-nux-with-inline-instructions

[ryanjduffy]

I'm seeing a flash of the NUX screen before the test runs load in. I think we need to plumb a loading state through. See a couple comments in this replay:

https://app.replay.io/recording/replay-of-devtools-git-2023-11-29-testsuites-nux-1-recordreplayvercelapp--60e36c77-3aad-46d5-902f-cf37bd3bff92?point=3245185537557921007686577444356907&time=1384.000486618005&focusWindow=eyJiZWdpbiI6eyJwb2ludCI6IjAiLCJ0aW1lIjowfSwiZW5kIjp7InBvaW50IjoiMTEwMzM2MzA4MjU5NjEyMzU3NzEwNjY2MDM0OTY1MzgxMTIiLCJ0aW1lIjo0MDI0fX0%253D

[bvaughn]

When this is ready for review, please tag me and other folks on FE.

[jonbell-lot23]

I had some trouble getting this working, so I filed a FE ticket asking for help: https://linear.app/replay/issue/FE-2123/add-a-loading-state-to-our-placeholder-nux