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

fix: Add hover states for test titles in reporter #21635

Merged
merged 5 commits into from
May 26, 2022

Conversation

BlueWinds
Copy link
Contributor

User facing changelog

Hovering over test names now highlights the row to indicate clickability. Unifies styles for hovering over test name / hook name / command name.

Additional details

Adds first component tests (primarily percy snapshots) to packages/reporter.

Steps to test

  1. After checking out branch, use yarn dev to recompile reporter css, otherwise you won't see the updates.
  2. cypress open any project.
  3. Select any configured testing type, launch any browser, run any spec.
  4. Mouse over the command list - notice rows highlight under the mouse.

How has the user experience changed?

Old behavior:

Old Behavior

New behavior:

New Behavior

PR Tasks

  • Have tests been added/updated?
  • [n/a] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • [n/a] Has a PR for user-facing changes been opened in cypress-documentation?
  • [n/a] Have API changes been updated in the type definitions?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented May 25, 2022

Thanks for taking the time to open a PR!

@BlueWinds BlueWinds marked this pull request as ready for review May 25, 2022 19:30
@BlueWinds BlueWinds requested a review from a team as a code owner May 25, 2022 19:30
@BlueWinds BlueWinds requested review from jennifer-shehane, marktnoonan and a team and removed request for a team and jennifer-shehane May 25, 2022 19:30
@cypress
Copy link

cypress bot commented May 25, 2022



Test summary

9750 0 117 0Flakiness 1


Run details

Project cypress
Status Passed
Commit 5b0917f
Started May 26, 2022 3:49 PM
Ended May 26, 2022 4:09 PM
Duration 19:57 💡
OS Linux Debian - 10.11
Browser Multiple

View run in Cypress Dashboard ➡️


Flakiness

cypress/e2e/cypress/proxy-logging.cy.ts Flakiness
1 Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@tbiethman tbiethman self-requested a review May 25, 2022 19:45
@tbiethman
Copy link
Contributor

Changes look great, but we need create a new reporter-component-tests job in circle.yml to run the new tests in CI.

Copy link
Contributor

@ZachJW34 ZachJW34 left a comment

Choose a reason for hiding this comment

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

The gifs are synchronized! Looks great, one small comment


import '../../src/main.scss'

Cypress.Commands.add('mount', mount)
Copy link
Contributor

Choose a reason for hiding this comment

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

You mentioned in slack there was an issue with

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

I added this and included cypress/support/component.ts in the tsconfig and everything compiled fine, plus it removed some of the ts warnings.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The issue with that was because I wasn't using our webpack configs (and therefor everything was broken, that just being one example). I'll add the type addition back in.

circle.yml Outdated
@@ -2324,6 +2340,11 @@ linux-workflow: &linux-workflow
percy: true
requires:
- build
- run-reporter-component-tests-chrome:
context: [test-runner:launchpad-tests, test-runner:percy]
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not super familiar with this setup, but I think you could:

  1. Use the test-runner:cypress-record-key context here rather than test-runner:launchpad-tests
  2. Update run-new-ui-tests to parameterize the CYPRESS_RECORD_KEY variable it uses (currently hardcoded to $TEST_LAUNCHPAD_RECORD_KEY, you want $MAIN_RECORD_KEY with the cypress-record-key context)

That might get you passed the current errors and keep the existing reporter-integration-tests build recording as-is.

@BlueWinds BlueWinds merged commit 3dc1fed into develop May 26, 2022
@BlueWinds BlueWinds deleted the UNIFY-1737-runner-hover-highlights branch May 26, 2022 16:08
tgriesser added a commit that referenced this pull request May 26, 2022
…ess into tgriesser/fix/UNIFY-1408

* 'tgriesser/fix/UNIFY-1408' of github.com:cypress-io/cypress:
  chore(deps): update dependency eventsource to v2 [security] (#21639)
  fix: Add hover states for test titles in reporter (#21635)
  docs(CONTRIBUTING): Fix link to "good first issue" for newcomers (#21614)
tgriesser added a commit that referenced this pull request May 27, 2022
…pack

* develop:
  fix: UNIFY-1408, warnings should be nested appropriately & clearable (#21630)
  chore: fix unit-tests-release job (#21652)
  chore(deps): update dependency eventsource to v2 [security] (#21639)
  fix: Add hover states for test titles in reporter (#21635)
  docs(CONTRIBUTING): Fix link to "good first issue" for newcomers (#21614)
  chore: compare `cy.screenshot` images in percy (#21598)
  fix: switching from ct to e2e (non-configured) does not go through setup (#21607)
  fix: issue with compilation failures in component testing (#21599)
  test: fix flaky launchpad test (#21637)
  docs: remove gitter link in contributing guide. (#21592)
  fix: order projects by most recently opened (#21589)
  fix: prevent crash on runs visit when offline (#21618)
  fix: pass family parameter to connect method (#21545)
  chore: clean up `debug` statements in preparation for 10.0 release, add `debug` docs (#21621)
  chore: add regression test for ts detection (#21578)
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.

4 participants