-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Jump-to-source falls back to parent user event if marker frame cannot be found (#10561) ### [Loom overview](https://www.loom.com/share/6d697c9136274fb8892325d39283fdac) Looking at [go/r/bb82f5c3-af5c-4e20-9f1c-5efa4ee6bd29](https://app.replay.io/recording/appreplayio--bb82f5c3-af5c-4e20-9f1c-5efa4ee6bd29), I observed that the `getCypressMarkerFrame` lookup fails to find a "marker frame" because there are only two sources in the call stack– the Replay plugin itself and Cypress. That method expects to find user code in between for some reason, so this breaks the jump-to-source behavior. In this case, the source is: ```js cy.contains('Product added to cart!').should('be.visible'); ``` That gets rendered in the UI as this:  Clicking on the failed _assert_ (or trying to "jump to source") would ideally jump to the `should('be.visible')` but it fails because of the "marker frame" issue I mentioned above. The idea occurred to me that in this case, jumping to the parent command (`contains('Product added to cart!')`) is probably better than nothing. (In this case, they're even on the same line, but that won't always be true.) * Add data-private attributes (#10562) * Remove [data-private] CSS style (#10563) * Reset selected test event when test changes (#10565) * Improve visual style for React/Reduxt not-loaded error messages (#10566) * Log point panel should never show 1/0 (#10568) * Fix video toggle for horizontal DEV layout (#10569) * Support multi-line print statements (#10570) Support multi-line print statements to improve readability and text editing experience. * Stop mousedown event propagation in the Focuser (#10575) * Adjusting contrast (#10572) * Always use hoverTime for the screenshot when the user is hovering (#10578) * Fix detection of async parent pauses outside of the focus window (#10573) * Revert "Improve message shown when async stack can't be loaded (#10557)" This reverts commit 585e560. * Fix detection of async parent pauses outside of the focus window * Remove LogRocket from Devtools (#10577) * Improve heuristics for finding the user frame that dispatched a Redux… (#10576) * Improve heuristics for finding the user frame that dispatched a Redux action The original logic was iterating backwards across the point stack frames looking for an applyMiddleware frame, and going backwards one more frame from there. This is problematic because I'm seeing variance in whether or not applyMiddleware actually shows up in stack frames. For some reason it shows up in Metabase recording stack traces, but not in our own E2E tests (and we're both using RTK). That meant that the existing logic could keep right on walking backwards long past the frame it "should" have found. What I've settled on is using the logic we had that tries to identify "is this function in a Redux middleware" based on source outlines (looking for the triply-nested function signature of a middleware definition), and stopping at the first frame that appears to be not a middleware and not applyMiddleware. This seems to be producing pretty reasonable results. * Update to a recent `breakpoints-01` recording * Force re-running the J2C routine * Add a util for verifying J2C behavior * Add a test for Redux J2C behavior * Ignore wrong lint error * Update RDT-02 test to match current example recording * Log point panel saves pending edits when removing condition (#10579) * Add option to notify user when processing is complete (#10582) * Guard against undefined value (#10581) * Source viewer font-size fixes (#10580) Print statement panel dynamic sizing bug fixes: - Fixed minor font-size and line-height inconsistencies for print statement panel - Handle edge case with empty last line (aka Shift+Enter)  Also updated the `useSourceListCssVariables` hook to reevaluate CSS variables (width of line numbers and hit counts) when the font size preference changes. * Better view element icon (#10583) * Enable asserts (#10584) * Handle lack of `point.frame` (#10586) * Remove unused `jumpToClickEventFunctionLocation` (#10585) * Improve video cursor display, especially for Cypress tests (#10587) * Extract utils to check for user click/keyboard test steps * Simplify UserActionEventRow J2C checks * Use mouse event times for hover display for click steps * Narrow time that we show a mouse click indicator * Only show mouse clicks within the current focus window * Revert focus window filtering for mouse cursors * Update the Cypress steps test to check for hover cursor position (#10588) * Update cypress/bankaccounts.spec example * Add test for Cypress cursor positioning * Use dashed/camel-cased data names --------- Co-authored-by: Brian Vaughn <[email protected]> Co-authored-by: Holger Benl <[email protected]> Co-authored-by: Jon Bell <[email protected]> Co-authored-by: Domi <[email protected]> Co-authored-by: Mateusz Burzyński <[email protected]>
- Loading branch information
6 people
authored
Jun 28, 2024
1 parent
db9b68c
commit 73f72b9
Showing
80 changed files
with
1,323 additions
and
1,067 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { openDevToolsTab, startTest } from "../helpers"; | ||
| import { warpToMessage } from "../helpers/console-panel"; | ||
| import { | ||
| getAsyncParentCount, | ||
| isAsyncParentUnavailable, | ||
| waitForAllFramesToLoad, | ||
| } from "../helpers/pause-information-panel"; | ||
| import { setFocusRange } from "../helpers/timeline"; | ||
| import test, { expect } from "../testFixture"; | ||
|
|
||
| test.use({ exampleKey: "doc_async_stack.html" }); | ||
|
|
||
| test(`async-stack: should detect async stacks outside the focus window`, async ({ | ||
| pageWithMeta: { page, recordingId, testScope }, | ||
| exampleKey, | ||
| }) => { | ||
| await startTest(page, recordingId, testScope); | ||
| await openDevToolsTab(page); | ||
|
|
||
| await warpToMessage(page, "Starting", 7); | ||
| await waitForAllFramesToLoad(page); | ||
| expect(await getAsyncParentCount(page)).toBe(0); | ||
| expect(await isAsyncParentUnavailable(page)).toBe(false); | ||
|
|
||
| await warpToMessage(page, "ExampleFinished", 9); | ||
| await waitForAllFramesToLoad(page); | ||
| expect(await getAsyncParentCount(page)).toBe(1); | ||
| expect(await isAsyncParentUnavailable(page)).toBe(false); | ||
|
|
||
| await setFocusRange(page, { startTimeString: "00:01" }); | ||
| await waitForAllFramesToLoad(page); | ||
| expect(await getAsyncParentCount(page)).toBe(1); | ||
| expect(await isAsyncParentUnavailable(page)).toBe(true); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
packages/e2e-tests/tests/jump-to-code-02_redux-j2c.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { Locator, Page, expect } from "@playwright/test"; | ||
|
|
||
| import { openDevToolsTab, startTest } from "../helpers"; | ||
| import { getEventJumpButton } from "../helpers/info-event-panel"; | ||
| import { getReduxActions, openReduxDevtoolsPanel } from "../helpers/redux-devtools-panel"; | ||
| import { closeSource, verifyJumpToCodeResults } from "../helpers/source-panel"; | ||
| import { getByTestName, waitFor } from "../helpers/utils"; | ||
| import test from "../testFixture"; | ||
|
|
||
| // trunk-ignore(gitleaks/generic-api-key) | ||
| test.use({ exampleKey: "breakpoints-01" }); | ||
|
|
||
| async function checkForJumpButton(actionListItem: Locator, shouldBeEnabled: boolean) { | ||
| const jumpButton = getEventJumpButton(actionListItem); | ||
| expect(await jumpButton.isVisible()).toBe(true); | ||
| await jumpButton.hover(); | ||
|
|
||
| await waitFor(async () => { | ||
| const buttonText = await getByTestName(jumpButton, "JumpToCodeButtonLabel").innerText(); | ||
| const expectedText = shouldBeEnabled ? "Jump to code" : "No results"; | ||
| expect(buttonText).toBe(expectedText); | ||
| }); | ||
|
|
||
| return jumpButton; | ||
| } | ||
|
|
||
| async function clickReduxActionJumpButton(page: Page, actionListItem: Locator) { | ||
| await actionListItem.scrollIntoViewIfNeeded(); | ||
| await actionListItem.hover(); | ||
| const jumpButton = await checkForJumpButton(actionListItem, true); | ||
| await jumpButton.click(); | ||
| } | ||
|
|
||
| async function jumpToReduxDispatch(page: Page, actionType: string, index = 0) { | ||
| const reduxListItemsLocator = getReduxActions(page); | ||
| const reduxSearchInput = page.locator("#redux-searchbox"); | ||
|
|
||
| await reduxSearchInput.fill(actionType); | ||
| const actionListItem = reduxListItemsLocator.filter({ hasText: actionType }).nth(index); | ||
| await clickReduxActionJumpButton(page, actionListItem); | ||
| } | ||
|
|
||
| test(`jump-to-code-02: Redux J2C functionality`, async ({ | ||
| pageWithMeta: { page, recordingId, testScope }, | ||
| exampleKey, | ||
| }) => { | ||
| await startTest(page, recordingId, testScope); | ||
| await openDevToolsTab(page); | ||
|
|
||
| await openReduxDevtoolsPanel(page); | ||
|
|
||
| const reduxListItemsLocator = getReduxActions(page); | ||
|
|
||
| await waitFor(async () => { | ||
| const numListItems = await reduxListItemsLocator.count(); | ||
| expect(numListItems).toBeGreaterThan(0); | ||
| }); | ||
|
|
||
| // Inside of a thunk | ||
| await jumpToReduxDispatch(page, "app/setRecordingId"); | ||
| await verifyJumpToCodeResults(page, "session.ts", 170, { current: 1, total: 1 }); | ||
| await closeSource(page, "session.ts"); | ||
|
|
||
| // Inside of the same thunk, after several awaits | ||
| await jumpToReduxDispatch(page, "app/setRecordingTarget"); | ||
| await verifyJumpToCodeResults(page, "session.ts", 363, { current: 1, total: 1 }); | ||
| await closeSource(page, "session.ts"); | ||
|
|
||
| // Inside of one of the bootstrapping functions that receives the store | ||
| // should be "debugger/src/client/index.ts" | ||
| await jumpToReduxDispatch(page, "sources/allSourcesReceived"); | ||
| await verifyJumpToCodeResults(page, "index.ts", 13, { current: 1, total: 1 }); | ||
| await closeSource(page, "index.ts"); | ||
|
|
||
| // Inside of an RTK listener middleware effect | ||
| jumpToReduxDispatch(page, "tabs/tabsRestored"); | ||
| await verifyJumpToCodeResults(page, "newSources.ts", 43, { current: 1, total: 1 }); | ||
| await closeSource(page, "newSources.ts"); | ||
|
|
||
| // Inside of a `useEffect` | ||
| jumpToReduxDispatch(page, "set_selected_primary_panel"); | ||
| await verifyJumpToCodeResults(page, "SidePanel.tsx", 57, { current: 1, total: 1 }); | ||
| await closeSource(page, "SidePanel.tsx"); | ||
|
|
||
| // Inside of a `connect()`ed class component, with `this.props.setExpandedState()`. | ||
| // Note that this appears to be one or two execution ticks off, so the line hit won't | ||
| // line up perfectly, but it should still _display_ as "1/4" | ||
| jumpToReduxDispatch(page, "SET_EXPANDED_STATE"); | ||
| await verifyJumpToCodeResults(page, "SourcesTree.tsx", 196, { current: 1, total: 4 }); | ||
| await closeSource(page, "SourcesTree.tsx"); | ||
|
|
||
| // Inside of an adapter that passes dispatch-wrapped actions to <QuickOpenModal> | ||
| // This is also one tick off, but should still _display_ as "1/3" | ||
| jumpToReduxDispatch(page, "quickOpen/setQuickOpenQuery"); | ||
| await verifyJumpToCodeResults(page, "QuickOpenModal.tsx", 551, { current: 1, total: 3 }); | ||
| await closeSource(page, "QuickOpenModal.tsx"); | ||
| }); |
Oops, something went wrong.