Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): add action to explorer item to show the test/suite line in the source code tab #5948

Merged
merged 11 commits into from
Jun 27, 2024

Conversation

userquin
Copy link
Member

@userquin userquin commented Jun 20, 2024

Description

Closes #5931

This PR includes:

  • new action in the explorer item to go to the test/suite line in the source code tab: will navigate to the tab if the ViewEditor is not the code tab or the active file is not the selected
  • enable includeTaskLocation if running in browser mode (not headless) or ui mode: will preserve user option - @sheremet-va review config.ts module 🙏
  • docs: update config/index.md to include previous entry
  • when the user disables includeTaskLocation, the explorer item will show a tooltip similar for coverage without html reporter (check image below): we can just disable the button...
  • refactor codemirror logic: moved codemirrror shallow ref from the ViewEditor to a global shallow ref inside codemirror composable, removed exposed codemirror from the ViewEditor and updated all usages with the global one
  • added navigateTo to navigator.ts composable to allow change the view mode: navigator sfc and explorer item using it, without view mode and with it respectively
  • added disabled run test/suite for future usage: we'll need to change the logic to allow run individual tests/suites.

You can see this PR in action in this video.

imagen
Disabled includeTaskLocation

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • Ideally, include a test that fails without this PR but passes with it.
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

  • Run the tests with pnpm test:ci.

Documentation

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

@userquin userquin marked this pull request as ready for review June 20, 2024 23:20
@userquin
Copy link
Member Author

userquin commented Jun 20, 2024

When running test/core with Vitest UI I get this error that should be fixed (or maybe not):

imagen

docs/config/index.md Outdated Show resolved Hide resolved
@userquin
Copy link
Member Author

userquin commented Jun 26, 2024

Added code tab and source files to the gz file when running pnpm vitest --reporter=html: last commit also enables includeTaskLocation when using html reporter.

NOTE: codemirror in readOnly mode when running vitest with --reporter=html and so we can copy/paste enabling focusing and scrolling from explorer item sfc

packages/ui/client/components/views/ViewEditor.vue Outdated Show resolved Hide resolved
packages/ui/node/reporter.ts Outdated Show resolved Hide resolved
sheremet-va
sheremet-va previously approved these changes Jun 26, 2024
@userquin
Copy link
Member Author

Dont merge yet, I'll change the explorer ítem ui again (missing tooltip when html reporter).

@wll8
Copy link

wll8 commented Jun 27, 2024

@userquin Is codemirrorRef guaranteed to be initialized after 256 milliseconds?

// we need to await, CodeMirrow will take some time to initialize
await new Promise(r => setTimeout(r, 256))

packages/ui/client/composables/codemirror.ts

@userquin
Copy link
Member Author

It is about waiting for route change and 100ms in the onMounted, maybe I can try using another approach to load it.

@userquin
Copy link
Member Author

imagen

@userquin
Copy link
Member Author

userquin commented Jun 27, 2024

@userquin Is codemirrorRef guaranteed to be initialized after 256 milliseconds?

// we need to await, CodeMirrow will take some time to initialize
await new Promise(r => setTimeout(r, 256))

packages/ui/client/composables/codemirror.ts

Now the logic will focus the line based on the new line router param, forcing the new watcher to trigger in ViewEditor once the new code loaded

@userquin userquin merged commit 7ec298e into main Jun 27, 2024
16 checks passed
@userquin userquin deleted the userquin/feat-add-show-test-suite-links branch June 27, 2024 12:47
v-if="!isReport"
v-tooltip.bottom="'Run current test'"
data-testid="btn-run-test"
title="Run current test"
icon="i-carbon:play-filled-alt"
text-green5
:disabled="type !== 'file'"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added disabled run test/suite for future usage: we'll need to change the logic to allow run individual tests/suites.

Sorry if I am late, but could you please clarify why the ability to run individual test was disabled?

Is is something that is coming in the future? Is there a feature request for that or should I open one?

Thanks!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was never supported. It is possible to support - feel free to create an issue or a PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The html reporter allows viewing the current use case code
5 participants