fix: Open in IDE button for block and hook definitions in Runner UI #30859
Conversation
cacieprins
changed the title
| import { defineConfig } from 'vitest/config' | ||
|
|
||
| export default defineConfig({ | ||
| test: { |
There was a problem hiding this comment.
vitest docs recommend defining a test key in the main vite.config.mjs file. However, attempting to run vitest with that configuration method resulted in runtime exceptions regarding require.resolve. Since unit tests should mock out dependencies, the aliasing of various modules there is fairly unnecessary, so far.
| config, | ||
| ) | ||
|
|
||
| // getSourcePosition is not called directly from getInvocationDetails, but via: |
There was a problem hiding this comment.
This indirect call of the spied upon function does introduce brittleness to this test. It will not pass if the underlying implementation is changed. We should consider refactoring stack analysis, especially for user invocation codepoints, to standard patterns to ease testing flexibility.
| beforeEach(() => { | ||
| // @ts-expect-error | ||
| global.Cypress = { | ||
| config: vi.fn(), |
There was a problem hiding this comment.
The results of this function call are inconsequential to the logic under test, but the lack of a global Cypress definition was throwing runtime exceptions.
| import stack_utils from '../../../src/cypress/stack_utils' | ||
| import stackFrameFixture from './__fixtures__/spec_stackframes.json' | ||
|
|
||
| vi.mock('../../../src/cypress/source_map_utils', () => { |
There was a problem hiding this comment.
This could have been left unmocked, with the return value of getInvocationDetails asserted upon, however source_map_utils imports a .wasm dependency which vitest could not handle (even with vite-plugin-wasm included). It was more expedient to mock out the entire module.
| }, | ||
| { | ||
| "browser": "firefox", | ||
| "build": "dev", |
There was a problem hiding this comment.
injectDocumentDomain stacks in firefox do not differ materially from binary or dev stacks, so that test case is omitted.
cypress
|
||||||||||||||||||||||||||||||||||||||||
| Project |
cypress
|
| Branch Review |
cacie/fix-hook-test-stack-analysis
|
| Run status |
|
| Run duration | 18m 06s |
| Commit |
|
| Committer | Cacie Prins |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
1
|
Pending
|
1090
|
Skipped
|
0
|
Passing
|
26418
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
45.71%
|
|
|---|---|
|
Untested elements
|
191
|
|
Tested elements
|
165
|
Accessibility
92.54%
|
|
|---|---|
|
Failed rules
|
3 critical
8 serious
2 moderate
2 minor
|
|
Failed elements
|
888
|
| @@ -128,6 +128,7 @@ export default (Commands, Cypress, cy, state) => { | |||
| const scrollIntoView = () => { | |||
| return new Promise((resolve, reject) => { | |||
| // scroll our axes | |||
| // @ts-expect-error - scrollTo does not define a 'done()' key on its config object. | |||
There was a problem hiding this comment.
Unsure of why this was newly causing a ts-check failure in this branch.
The config to jquery.scrollTo doesn't accept a done key. We should consider using the onAfter key, as there may be bugs with the existing promise resolution.
…s apparently flaky
Additional details
When a testing context is created or a hook is defined, Cypress captures the stack at that point in order to display an
Open in IDEbutton in open mode.With the changes to
cy.origin()and the injection ofdocument.domain, the stack is much more verbose than previously, and includes codepoints within the cypress before and after codepoints in the test file being executed.This PR updates the stack analysis code so we can properly determine the most recent codepoint from the spec, which is used to populate the
Open in IDEbutton.In order to ensure correctness for this change, this PR also introduces vitest for the
@packages/driverpackage, enabling swift and straightforward unit tests for this package in the future. Testing this via the integration test inpackages/driver/cypress/e2e/cypress/stack_utils.cy.jswas considered, but those tests operate more like integration tests, and preparing mocks for that situation proved more labor intensive than just using vitest.Steps to test
Using the binary, run a test in open mode and click the "Open in IDE" button next to a test or hook block.
How has the user experience changed?
PR Tasks
cypress-documentation?type definitions?