From 90fe5027cd1b040a3c5ee9c881f92c437f90f2af Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Thu, 14 Jul 2022 19:56:59 +0200 Subject: [PATCH 1/4] fix: format special characters correctly (#22537) * Update packages/reporter/cypress/e2e/unit/formatted_message.cy.ts Co-authored-by: Rachel * Update packages/reporter/cypress/e2e/unit/formatted_message.cy.ts Co-authored-by: Rachel * Remove extra spaces Co-authored-by: gitstart Co-authored-by: Matt Henkes Co-authored-by: Rachel Co-authored-by: Tyler Biethman Co-authored-by: Benjamin Mayanja --- .../cypress/e2e/unit/formatted_message.cy.ts | 30 +++++++++++++++++++ packages/reporter/src/commands/command.tsx | 16 +++++++++- packages/reporter/src/errors/test-error.tsx | 5 +--- 3 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 packages/reporter/cypress/e2e/unit/formatted_message.cy.ts diff --git a/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts new file mode 100644 index 000000000000..63fb13e1c1ab --- /dev/null +++ b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts @@ -0,0 +1,30 @@ +import { formattedMessage } from '../../../src/commands/command' + +describe('formattedMessage', () => { + it('returns empty string when message is falsy', () => { + const result = formattedMessage('') + + expect(result).to.equal('') + }) + + it('maintains special characters when using "to match"', () => { + const specialMessage = 'expected **__*abcdef*__** to match /__.*abcdef.*__/' + const result = formattedMessage(specialMessage) + + expect(result).to.equal('expected abcdef to match /__.*abcdef.*__/') + }) + + it('maintains special characters when using "to contain"', () => { + const specialMessage = 'expected ***abcdef*** to equal ***abcdef***' + const result = formattedMessage(specialMessage) + + expect(result).to.equal('expected abcdef to equal ***abcdef***') + }) + + it('does NOT maintain special characters when "to equal" or "to match" are not in assertion', () => { + const specialMessage = 'expected ***abcdef*** to contain ***abcdef***' + const result = formattedMessage(specialMessage) + + expect(result).to.equal('expected abcdef to contain abcdef') + }) +}) diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx index 84a4f1c07c3d..4e2f19395ee7 100644 --- a/packages/reporter/src/commands/command.tsx +++ b/packages/reporter/src/commands/command.tsx @@ -25,7 +25,21 @@ const md = new Markdown() const displayName = (model: CommandModel) => model.displayName || model.name const nameClassName = (name: string) => name.replace(/(\s+)/g, '-') -const formattedMessage = (message: string) => message ? md.renderInline(message) : '' + +export const formattedMessage = (message: string) => { + if (!message) return '' + + const searchText = ['to match', 'to equal'] + const regex = new RegExp(searchText.join('|')) + const split = message.split(regex) + const matchingText = searchText.find((text) => message.includes(text)) + const textToConvert = [split[0].trim(), ...(matchingText ? [matchingText] : [])].join(' ') + const converted = md.renderInline(textToConvert) + const assertion = (split[1] && [`${split[1].trim()}`]) || [] + + return [converted, ...assertion].join(' ') +} + const invisibleMessage = (model: CommandModel) => { return model.numElements > 1 ? 'One or more matched elements are not visible.' : diff --git a/packages/reporter/src/errors/test-error.tsx b/packages/reporter/src/errors/test-error.tsx index a4b0d1a80908..58adae81a397 100644 --- a/packages/reporter/src/errors/test-error.tsx +++ b/packages/reporter/src/errors/test-error.tsx @@ -12,6 +12,7 @@ import FlashOnClick from '../lib/flash-on-click' import { onEnterOrSpace } from '../lib/util' import Attempt from '../attempts/attempt-model' import Command from '../commands/command-model' +import { formattedMessage } from '../commands/command' import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x8.svg' import TerminalIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg' @@ -54,10 +55,6 @@ const TestError = observer((props: TestErrorProps) => { onPrint() } - const formattedMessage = (message?: string) => { - return message ? md.renderInline(message) : '' - } - const { err } = props.model const { codeFrame } = err From e1b80e4c328d10df491e5ac9c28d720e8fa78da6 Mon Sep 17 00:00:00 2001 From: Kukhyeon Heo Date: Fri, 15 Jul 2022 07:41:41 +0900 Subject: [PATCH 2/4] fix: show docs menu in column style when viewport is small. (#22411) * fix: show docs menu in column style when viewport is small. * use tailwind css * organize test in context block Co-authored-by: Rachel Co-authored-by: Rachel --- .../gql-components/HeaderBarContent.cy.tsx | 38 +++++++++++++++++++ .../src/gql-components/topnav/TopNav.vue | 3 +- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx index 5583c3e53627..60ac66dad2cf 100644 --- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx +++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx @@ -162,6 +162,44 @@ describe('', { viewportWidth: 1000, viewportHeight: 750 }, ( }) }) + context('responsive design', () => { + beforeEach(() => { + cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, { + onResult: (result) => { + result.currentProject = null + }, + render: (gqlVal) => ( +
+ +
+ ), + }) + }) + + // https://github.com/cypress-io/cypress/issues/21842 + it('shows docs menu correctly on small viewports', () => { + // Simulate the small viewport. + cy.viewport(767, 800) + + // show docs menu + cy.contains('button', text.docsMenu.docsHeading).click() + + // docs menu flex direction is column when viewport width is small + cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'column') + }) + + it('shows docs menu correctly on wider viewports', () => { + // Change the viewport size to wide. + cy.viewport(768, 800) + + // show docs menu + cy.contains('button', text.docsMenu.docsHeading).click() + + // docs menu flex direction is row when viewport width is big enough. + cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'row') + }) + }) + it('does not show hint when on latest version of Cypress', () => { mountFragmentWithData({ versions: { diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue index fcd4eb48bef5..f1e59710428d 100644 --- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue +++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue @@ -143,7 +143,8 @@
Date: Fri, 15 Jul 2022 00:37:55 +0000 Subject: [PATCH 3/4] fix: Styling of specs list at small breakpoints (#22635) Co-authored-by: Emily Rohrbough --- packages/app/src/specs/SpecsListHeader.vue | 2 +- packages/app/src/specs/SpecsListRowItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/specs/SpecsListHeader.vue b/packages/app/src/specs/SpecsListHeader.vue index bd791c939eb4..5567cf841da1 100644 --- a/packages/app/src/specs/SpecsListHeader.vue +++ b/packages/app/src/specs/SpecsListHeader.vue @@ -48,7 +48,7 @@ data-cy="new-spec-button" :prefix-icon="IconAdd" prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white" - class="min-w-127px" + class="min-w-134px" size="lg" @click="emit('showCreateSpecModal')" > diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue index c1a090d2f523..e85b7769b74b 100644 --- a/packages/app/src/specs/SpecsListRowItem.vue +++ b/packages/app/src/specs/SpecsListRowItem.vue @@ -27,7 +27,7 @@
-