fix: clean up inconsistencies in UI between sentence case and title case #23681
Conversation
|
Thanks for taking the time to open a PR!
|
|
Hi @marktnoonan Could you help to trigger CI build on this PR, thanks. |
gitstart
changed the title
gitstart
changed the title
|
Hi @gitstart - big PR, please give us some time. If you can resolve conflicts, I can trigger CI for you. |
|
I am chatting to the product/design team internally to get some action on this. Thanks for waiting. |
| }) | ||
|
|
||
| it(`has an input that's hidden by default`, () => { | ||
| cy.get('code').as('Record Key Input') | ||
| cy.get('code').as('Record key input') |
There was a problem hiding this comment.
| cy.get('code').as('Record key input') | |
| cy.get('code') |
This alias wasn't being used, let's just remove it 😄
There was a problem hiding this comment.
First of all, THANK YOU FOR THIS CONTRIBUTION! It was low-hanging fruit that would have taken us a very long time to get around given our other priorities, so thank you 😸 😸 😸 😸 😸
I've read through the Cypress Style Guide, which unfortunately is not public at this time (but is planned to be in the future). With regards to this PR, the main takeaway is the following terms should always be capitalized since we treat them as proper nouns. There is one exception, marked with an *.
- Cypress Dashboard
- Cypress Studio
- Cypress Learn
- Component Testing*
- End-to-End Testing*
- Launchpad
- Spec Explorer
- Project Runs
- Test Runner
- Command Log
*When referring to the Cypress feature, Component Testing and End-to-End Testing will be in title case since they are proper nouns. However, when referring to anything that is not the Cypress feature, i.e. component or end-to-end testing
in general (noun) or the act of component or end-to-end testing (verb) we'll use sentence case.
You've already done the lion's share of the work, so I'll comb through the changes and add suggestions where appropriate. Thanks again @gitstart!
packages/app/cypress/e2e/runs.cy.ts
Outdated
| @@ -587,7 +587,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => { | |||
| cy.findByText(defaultMessages.runs.connect.buttonProject).should('exist') | |||
| }) | |||
|
|
|||
| it('displays how to record prompt when connected and no runs in Component Testing', () => { | |||
| it('displays how to record prompt when connected and no runs in Component testing', () => { | |||
There was a problem hiding this comment.
| it('displays how to record prompt when connected and no runs in Component testing', () => { | |
| it('displays how to record prompt when connected and no runs in Component Testing', () => { |
packages/app/cypress/e2e/runs.cy.ts
Outdated
| @@ -602,7 +602,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => { | |||
| cy.contains('cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible') | |||
| }) | |||
|
|
|||
| it('displays a copy button and copies correct command in Component Testing', () => { | |||
| it('displays a copy button and copies correct command in Component testing', () => { | |||
There was a problem hiding this comment.
| it('displays a copy button and copies correct command in Component testing', () => { | |
| it('displays a copy button and copies correct command in Component Testing', () => { |
| @@ -155,7 +155,7 @@ describe('component testing dependency warnings', () => { | |||
| cy.get('a').contains('Projects').click() | |||
| cy.get('[data-cy-testingtype="component"]').click() | |||
| cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist') | |||
| .should('contain.text', 'Warning: Component Testing Mismatched Dependencies') | |||
| .should('contain.text', 'Warning: Component testing Mismatched Dependencies') | |||
There was a problem hiding this comment.
This text comes from the error type COMPONENT_TESTING_MISMATCHED_DEPENDENCIES. It looks like the casing is automatically applied for the error types. We'd have to track down where that logic is happening in order to change this. Lmk if you'd like to do so; otherwise we can leave as is for now
| .should('contain.text', 'Warning: Component testing Mismatched Dependencies') | |
| .should('contain.text', 'Warning: Component Testing Mismatched Dependencies') |
| @@ -174,7 +174,7 @@ describe('component testing dependency warnings', () => { | |||
| cy.get('a').contains('Projects').click() | |||
| cy.get('[data-cy-testingtype="component"]').click() | |||
| cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist') | |||
| .should('contain.text', 'Warning: Component Testing Mismatched Dependencies') | |||
| .should('contain.text', 'Warning: Component testing Mismatched Dependencies') | |||
There was a problem hiding this comment.
| .should('contain.text', 'Warning: Component testing Mismatched Dependencies') | |
| .should('contain.text', 'Warning: Component Testing Mismatched Dependencies') |
| @@ -370,7 +370,7 @@ describe('Launchpad: Setup Project', () => { | |||
|
|
|||
| verifyWelcomePage({ e2eIsConfigured: true, ctIsConfigured: false }) | |||
|
|
|||
| cy.contains('button', 'Component Testing') | |||
| cy.contains('button', 'Component testing') | |||
There was a problem hiding this comment.
| cy.contains('button', 'Component testing') | |
| cy.contains('button', 'Component Testing') |
|
|
||
| cy.contains('button', 'E2E Testing') | ||
| cy.contains('button', 'E2E testing') |
There was a problem hiding this comment.
| cy.contains('button', 'E2E testing') | |
| cy.contains('button', 'E2E Testing') |
| @@ -335,13 +335,13 @@ describe('Launchpad: Setup Project', () => { | |||
|
|
|||
| verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: false }) | |||
|
|
|||
| cy.tabUntil((el) => el.text().includes('E2E Testing')) | |||
| cy.tabUntil((el) => el.text().includes('E2E testing')) | |||
There was a problem hiding this comment.
| cy.tabUntil((el) => el.text().includes('E2E testing')) | |
| cy.tabUntil((el) => el.text().includes('E2E Testing')) |
|
|
||
| cy.contains('button', 'E2E Testing') | ||
| cy.contains('button', 'E2E testing') |
There was a problem hiding this comment.
| cy.contains('button', 'E2E testing') | |
| cy.contains('button', 'E2E Testing') |
| @@ -299,13 +299,13 @@ describe('Launchpad: Setup Project', () => { | |||
|
|
|||
| verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: false }) | |||
|
|
|||
| cy.tabUntil((el) => el.text().includes('E2E Testing')) | |||
| cy.tabUntil((el) => el.text().includes('E2E testing')) | |||
There was a problem hiding this comment.
The following suggestions correspond to E2E Testing and Component Testing on this screen, which should remain capitalized as they are proper nouns here
| cy.tabUntil((el) => el.text().includes('E2E testing')) | |
| cy.tabUntil((el) => el.text().includes('E2E Testing')) |
| @@ -494,7 +494,7 @@ describe('Launchpad: Setup Project', () => { | |||
|
|
|||
| verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: false }) | |||
|
|
|||
| cy.contains('button', 'Component Testing') | |||
| cy.contains('button', 'Component testing') | |||
There was a problem hiding this comment.
| cy.contains('button', 'Component testing') | |
| cy.contains('button', 'Component Testing') |
| @@ -541,7 +541,7 @@ describe('Launchpad: Setup Project', () => { | |||
|
|
|||
| verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: false }) | |||
|
|
|||
| cy.contains('button', 'Component Testing') | |||
| cy.contains('button', 'Component testing') | |||
There was a problem hiding this comment.
| cy.contains('button', 'Component testing') | |
| cy.contains('button', 'Component Testing') |
| @@ -4,7 +4,7 @@ function startSetupFor (project: ProjectFixtureDir) { | |||
| cy.scaffoldProject(project) | |||
| cy.openProject(project) | |||
| cy.visitLaunchpad() | |||
| cy.contains('Component Testing').click() | |||
| cy.contains('Component testing').click() | |||
There was a problem hiding this comment.
| cy.contains('Component testing').click() | |
| cy.contains('Component Testing').click() |
| cy.contains('E2E Testing').click() | ||
| cy.contains('[data-cy-testingtype="e2e"]', 'Not configured') | ||
| cy.contains('[data-cy-testingtype="component"]', 'Not configured') | ||
| cy.contains('E2E testing').click() |
There was a problem hiding this comment.
| cy.contains('E2E testing').click() | |
| cy.contains('E2E Testing').click() |
| cy.contains('Component Testing').click() | ||
| cy.contains('[data-cy-testingtype="e2e"]', 'Not configured') | ||
| cy.contains('[data-cy-testingtype="component"]', 'Not configured') | ||
| cy.contains('Component testing').click() |
There was a problem hiding this comment.
| cy.contains('Component testing').click() | |
| cy.contains('Component Testing').click() |
| @@ -286,16 +286,16 @@ | |||
| "bodyError": "An error occurred while attempting to log in:", | |||
| "bodyBrowserError": "The browser could not be opened.", | |||
| "bodyBrowserErrorDetails": "Cypress was unable to open your installed browser. To continue logging in, please paste this URL into your web browser:", | |||
| "cloud": "Cypress Dashboard Service", | |||
| "cloud": "Cypress dashboard service", | |||
There was a problem hiding this comment.
| "cloud": "Cypress dashboard service", | |
| "cloud": "Cypress Dashboard service", |
| "link": "https://docs.cypress.io/guides/references/configuration" | ||
| }, | ||
| "dashboardGuide": { | ||
| "text": "Cypress Dashboard Guide", | ||
| "text": "Cypress dashboard guide", |
There was a problem hiding this comment.
| "text": "Cypress dashboard guide", | |
| "text": "Cypress Dashboard guide", |
| "errorNotLoggedIn": "You are not connected to the Cypress dashboard", | ||
| "errorNotLoggedInButton": "Log in to the Cypress dashboard" |
There was a problem hiding this comment.
| "errorNotLoggedIn": "You are not connected to the Cypress dashboard", | |
| "errorNotLoggedInButton": "Log in to the Cypress dashboard" | |
| "errorNotLoggedIn": "You are not connected to the Cypress Dashboard", | |
| "errorNotLoggedInButton": "Log in to the Cypress Dashboard" |
| "warning": "We couldn't add the projectId to your cypress.config.js file automatically.", | ||
| "mainMessage": "Manually add the {projectId} to the root of the config object in your {configFile} file.", | ||
| "waitingButton": "Waiting for you to add the projectId..." | ||
| } | ||
| }, | ||
| "errors": { | ||
| "baseError": { | ||
| "title": "Cypress Dashboard Error" | ||
| "title": "Cypress dashboard error" |
There was a problem hiding this comment.
| "title": "Cypress dashboard error" | |
| "title": "Cypress Dashboard error" |
| }, | ||
| "internalServerError": { | ||
| "title": "Cannot connect to the Cypress Dashboard", | ||
| "title": "Cannot connect to the Cypress dashboard", |
There was a problem hiding this comment.
| "title": "Cannot connect to the Cypress dashboard", | |
| "title": "Cannot connect to the Cypress Dashboard", |
| "button": "Try again" | ||
| } | ||
| } | ||
| }, | ||
| "testingType": { | ||
| "modalTitle": "Choose a testing type", | ||
| "e2e": { | ||
| "name": "E2E Testing", | ||
| "name": "E2E testing", |
There was a problem hiding this comment.
| "name": "E2E testing", | |
| "name": "E2E Testing", |
| "description": "Build and test the entire experience of your application from end-to-end to ensure each flow matches your expectations." | ||
| }, | ||
| "component": { | ||
| "name": "Component Testing", | ||
| "name": "Component testing", |
There was a problem hiding this comment.
| "name": "Component testing", | |
| "name": "Component Testing", |
|
@gitstart just finished reviewing and adding suggestions, thank you again for the PR! During the process I noticed that this PR introduces many improvements, but we still have a few fixes to make in en-US.json, namely:
Do you think you can squeeze in those changes? |
|
Thanks for the review @rachelruderman. |
|
This PR was pushed through Gitstart, with contributions from @oxenprogrammer, @raph941, @phunguyenmurcul. |
User facing changelog
Clean up inconsistencies in UI between sentence case and title case.
Additional details
It has always been the intention of the Cypress Team to use
Sentence caseas opposed toTitle Case.User facing changelog
Title Casehave been converted toSentence case.Steps to test
Sentence caserather thanTitle Case.How has the user experience changed?
Before
https://www.loom.com/share/3d0d81f345254783b1f1d7c4ccf285b8
After
https://www.loom.com/share/ff1b3d98a04a4df2884c2c1c647df8a6
PR Tasks
cypress-documentation?type definitions?