Skip to content

fix: make the file name in <BaseError> wrap anywhere. #22271

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

Merged
merged 3 commits into from
Jun 15, 2022

Conversation

sainthkh
Copy link
Contributor

User facing changelog

File name in error message wrap anywhere.

Additional details

  • Why was this change necessary? => File name in <BaseError> didn't wrap correctly. It is not a severe bug, but it's a bit annoying.
  • What is affected by this change? => N/A

Any implementation details to explain?

Steps to test

The best way to see this failure is to use the renders the header and message slots with codeframe test at BaseError.cy.tsx. Make the relative path very long like veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong/cypress/e2e/file.cy.js.

How has the user experience changed?

Before:

image

After:

image

PR Tasks

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

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jun 13, 2022

Thanks for taking the time to open a PR!

@sainthkh sainthkh marked this pull request as ready for review June 13, 2022 07:36
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.

Thanks @sainthkh, a few small tweaks then LGTM

@@ -12,7 +12,7 @@
@click="onClick"
>
<i-cy-document-text_x16 class="h-16px m-12px mr-8px w-16px icon-dark-indigo-500 icon-light-indigo-100" />
<code>{{ fileText }}</code>
<code class="fileText">{{ fileText }}</code>
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's replace this with class="break-all". It gives us the same behavior and is a native tailwind class so we don't have to have a style tag.

file: {
id: `FileParts:/absolute/full/path/cypress/e2e/file.cy.js`,
__typename: 'FileParts',
relative: 'veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylong/cypress/e2e/file.cy.js',
Copy link
Contributor

Choose a reason for hiding this comment

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

For brevity:

const longFileName = `${'very'.repeat(20)}long/cypress/e2e/file.cy.js`
...
relative: longFileName
...
cy.findByText(`${longFileName}:12:25`).should('have.class', 'break-all')

@ZachJW34 ZachJW34 requested a review from tbiethman June 14, 2022 14:11
@ZachJW34
Copy link
Contributor

ZachJW34 commented Jun 14, 2022

@sainthkh CI looks like it is doubling up the tests, similar to the problem you fixed a while back #21305

We should apply the same logic to the new 10.0 tests so that external contributor PRs are less flaky. I'm going to create an issue for this.

@ZachJW34
Copy link
Contributor

@sainthkh created #22308 to address CI for external contributors

@ZachJW34 ZachJW34 merged commit ad7668e into cypress-io:develop Jun 15, 2022
BeijiYang pushed a commit to BeijiYang/cypress that referenced this pull request Jun 23, 2022
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.

UI: Cypress error overflows container
3 participants