mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-02-12 18:19:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix minor UI issues noticed in design review (#20251)

Browse Source 
Co-authored-by: Brian Mann <brian.mann86@gmail.com>
Co-authored-by: Barthélémy Ledoux <bart@cypress.io>
This commit is contained in:
Zachary Williams
2022-02-25 13:18:55 -06:00
committed by GitHub
parent e575a2c985
commit 49786fb9bc
13 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -33,6 +33,7 @@
"cypress:run:debug": "node ./scripts/debug.js cypress:run",
"cypress:verify": "cypress verify --dev",
"dev": "gulp dev",
"dev:vite": "CYPRESS_INTERNAL_VITE_DEV=1 yarn dev",
"dev:clean": "gulp dev:clean",
"gulp:debug": "node --inspect-brk ./node_modules/.bin/gulp",
"dev-debug": "node ./scripts/debug.js dev",

19
packages/app/cypress/e2e/index.cy.ts
View File

@@ -123,6 +123,8 @@ describe('App: Index', () => {
})).to.have.lengthOf(options.expectedScaffoldPaths.length)
}, { expectedScaffoldPaths })
cy.percySnapshot()
// Dismisses dialog with close button press
cy.get('@CloseDialogButton').click()
cy.findByRole('dialog').should('not.exist')
@@ -166,6 +168,8 @@ describe('App: Index', () => {
cy.get('[data-cy="card"]').contains(defaultMessages.createSpec.e2e.importEmptySpec.header).click()
})
cy.percySnapshot('Default')
cy.findAllByLabelText(defaultMessages.createSpec.e2e.importEmptySpec.inputPlaceholder)
.as('enterSpecInput')
@@ -179,6 +183,8 @@ describe('App: Index', () => {
cy.contains(defaultMessages.createSpec.e2e.importEmptySpec.invalidSpecWarning)
cy.contains('button', defaultMessages.createSpec.createSpec).should('be.disabled')
cy.percySnapshot('Invalid spec error')
//Shows extension warning
cy.get('@enterSpecInput').clear().type(getPathForPlatform('cypress/e2e/MyTest.spec.j'))
cy.intercept('mutation-EmptyGenerator_MatchSpecFile', (req) => {
@@ -191,6 +197,7 @@ describe('App: Index', () => {
cy.get('@enterSpecInput').type('x')
cy.contains(defaultMessages.createSpec.e2e.importEmptySpec.specExtensionWarning)
cy.percySnapshot('Non-recommended spec pattern warning')
cy.contains('span', '{filename}.cy.jx')
// Create spec
@@ -200,6 +207,8 @@ describe('App: Index', () => {
cy.get('[data-cy="file-row"]').contains(getPathForPlatform('cypress/e2e/MyTest.cy.js')).click()
cy.percySnapshot('Generator success')
// TODO: code rendering is flaky in CI
// cy.get('code').should('contain', 'describe(\'MyTest.cy.js\'')
@@ -395,13 +404,16 @@ describe('App: Index', () => {
it('shows input for file extension filter', () => {
cy.get('@CreateFromStoryDialog').within(() => {
cy.findByTestId('file-match-indicator').should('contain', '1 Match')
cy.percySnapshot('Create from story generator')
cy.findByRole('button', { name: '*.stories.*' }).click()
cy.percySnapshot('File list search dropdown')
cy.findByPlaceholderText(defaultMessages.components.fileSearch.byExtensionInput)
.as('ExtensionInput')
.clear()
.type('foobar')
cy.findByTestId('file-match-indicator').should('contain', 'No Matches')
cy.percySnapshot('No Results')
cy.findByTestId('no-results-clear').click()
@@ -431,6 +443,7 @@ describe('App: Index', () => {
.type('Button.stories.jsx')
cy.findByTestId('file-match-indicator').should('contain', '1 of 1 Matches')
cy.percySnapshot()
})
})
@@ -447,6 +460,8 @@ describe('App: Index', () => {
cy.get('@NewSpecFile').click()
})
cy.percySnapshot()
cy.findByRole('dialog', {
name: defaultMessages.createSpec.successPage.header,
}).as('SuccessDialog').within(() => {
@@ -812,6 +827,7 @@ describe('App: Index', () => {
const componentGlob = '*.{jsx,tsx}'
cy.findByTestId('file-match-button').contains(componentGlob)
cy.percySnapshot('Component Generator')
checkCodeGenCandidates(['App.cy.jsx', 'App.jsx', 'index.jsx', 'Button.jsx', 'Button.stories.jsx'])
cy.intercept('query-ComponentGeneratorStepOne').as('code-gen-candidates')
@@ -826,6 +842,7 @@ describe('App: Index', () => {
cy.contains('Button.jsx').click()
cy.findByTestId('file-row').contains(getPathForPlatform('src/stories/Button.cy.js')).click()
cy.percySnapshot('Component Generator Success')
cy.withCtx(async (ctx, o) => {
const spec = (
@@ -843,12 +860,14 @@ describe('App: Index', () => {
const storyGlob = '*.stories.*'
cy.findByTestId('file-match-button').contains(storyGlob)
cy.percySnapshot('Story Generator')
checkCodeGenCandidates(['Button.stories.jsx'])
cy.contains('Button.stories.jsx').click()
cy.findByTestId('file-row').contains(getPathForPlatform('src/stories/Button.stories.cy.js')).click()
cy.contains('composeStories')
cy.contains('ExampleWithLongName')
cy.percySnapshot('Story Generator Success')
cy.withCtx(async (ctx, o) => {
const spec = (await ctx.project.findSpecs(ctx.currentProject ?? '', 'component', ['**/*.cy.jsx'], [], []))

2
packages/app/src/components/SpecPatternModal.vue
View File

@@ -17,7 +17,7 @@
/>
</div>
<StandardModalFooter
class="flex h-72px gap-16px items-center"
class="flex gap-16px items-center"
>
<OpenConfigFileInIDE>
<Button size="lg">

11
packages/app/src/specs/SpecsListHeader.cy.tsx
View File

@@ -59,6 +59,8 @@ describe('<SpecsListHeader />', { keystrokeDelay: 0 }, () => {
.click()
.get('@show-spec-pattern-modal')
.should('have.been.called')
cy.percySnapshot()
})
it('shows the count correctly when not searching', () => {
@@ -74,10 +76,17 @@ describe('<SpecsListHeader />', { keystrokeDelay: 0 }, () => {
.should('be.visible')
.and('have.attr', 'aria-live', 'polite')
cy.percySnapshot('No Matches')
mountWithSpecCount(1)
cy.contains('1 Match').should('be.visible')
cy.percySnapshot('Singular Match')
mountWithSpecCount(100)
cy.contains('100 Matches').should('be.visible')
cy.percySnapshot('Plural Match')
})
it('shows the count correctly while searching', () => {
@@ -103,5 +112,7 @@ describe('<SpecsListHeader />', { keystrokeDelay: 0 }, () => {
mountWithCounts(5, 22)
cy.contains('5 of 22 Matches').should('be.visible')
cy.percySnapshot()
})
})

8
packages/app/src/specs/SpecsListHeader.vue
View File

@@ -12,12 +12,12 @@
>
<template #suffix>
<button
class="rounded-r-md outline-none h-40px mr-[-0.75rem] transition-all group"
class="rounded-r-md outline-none h-38px mr-[-0.75rem] group"
aria-live="polite"
@click="emit('showSpecPatternModal')"
>
<span
class="border-transparent rounded-r flex h-full border-t-1 border-b-1 border-r-1 mr-1px px-16px items-center matches-button group-hocus:bg-indigo-50 group-hocus:border-indigo-300 group-hocus:text-indigo-500"
class="bg-white border-transparent rounded-r flex h-full border-t-1 border-b-1 border-r-1 mr-1px px-16px transition-all items-center matches-button group-hocus:bg-indigo-50 group-hocus:text-indigo-500"
>
<span v-if="props.modelValue">
{{ t('components.fileSearch.matchesIndicator', { count: specCount, denominator: specCount, numerator: resultCount}) }}
@@ -80,8 +80,8 @@ const onInput = (e: Event) => {
<style scoped>
.matches-button:before {
@apply h-full bg-gray-100 transform transition ease-in w-1px
scale-y-50 duration-150 group-hocus:bg-indigo-300 group-hocus:scale-y-100;
@apply h-full bg-gray-100 transform transition w-1px
scale-y-50 duration-150 group-hocus:bg-transparent;
display: block;
position: absolute;
left: 0;

13
packages/app/src/specs/generators/EmptyGenerator.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col justify-between flex-grow">
<div class="flex flex-col flex-grow justify-between">
<template v-if="!result">
<div class="p-24px w-720px">
<Input
@@ -23,14 +23,14 @@
>
<div
v-if="hasError"
class="flex items-center font-medium rounded bg-error-100 mt-16px p-14px ring-2 ring-error-100 text-error-600 gap-8px"
class="rounded flex font-medium bg-error-100 mt-16px p-14px ring-2 ring-error-100 text-error-600 gap-8px items-center"
>
<i-cy-errored-outline_x16 class="icon-dark-error-600" />
<span>{{ invalidSpecWarning }}<em class="font-medium">specPattern</em>:</span>
</div>
<div
v-else-if="showExtensionWarning && props.type === 'e2e'"
class="flex items-center font-medium rounded bg-warning-100 mt-16px p-16px text-warning-600 gap-8px"
class="rounded flex font-medium bg-warning-100 mt-16px p-16px text-warning-600 gap-8px items-center"
>
<i-cy-errored-outline_x16 class="icon-dark-warning-600" />
{{ t('createSpec.e2e.importEmptySpec.specExtensionWarning') }}<span class="rounded bg-warning-200 py-2px px-8px text-warning-700">{{ recommendedFileName }}</span>
@@ -48,7 +48,7 @@
class="flex gap-16px"
>
<Button
class="w-110px"
size="lg"
:disabled="!isValidSpecFile"
@click="createSpec"
>
@@ -56,6 +56,7 @@
</Button>
<Button
size="lg"
variant="outline"
@click="emits('restart')"
>
@@ -69,7 +70,7 @@
:file="result.file"
/>
<StandardModalFooter
class="flex items-center h-72px gap-16px"
class="flex gap-16px items-center"
>
<router-link
class="outline-none"
@@ -77,6 +78,7 @@
"
>
<Button
size="lg"
:prefix-icon="TestResultsIcon"
prefix-icon-class="w-16px h-16px icon-dark-white"
@click="emits('close')"
@@ -85,6 +87,7 @@
</Button>
</router-link>
<Button
size="lg"
:prefix-icon="PlusButtonIcon"
prefix-icon-class="w-16px h-16px icon-dark-gray-500"
variant="outline"

4
packages/app/src/specs/generators/component/ComponentGeneratorStepOne.vue
View File

@@ -38,7 +38,7 @@
<div>
<StandardModalFooter
v-if="result"
class="flex h-72px gap-16px items-center"
class="flex gap-16px items-center"
>
<router-link
class="outline-none"
@@ -46,6 +46,7 @@
"
>
<Button
size="lg"
:prefix-icon="TestResultsIcon"
prefix-icon-class="w-16px h-16px icon-dark-white"
@click="emits('close')"
@@ -54,6 +55,7 @@
</Button>
</router-link>
<Button
size="lg"
:prefix-icon="PlusButtonIcon"
prefix-icon-class="w-16px h-16px icon-dark-gray-500"
variant="outline"

2
packages/app/src/specs/generators/story/StoryGeneratorStepOne.vue
View File

@@ -50,6 +50,7 @@
"
>
<Button
size="lg"
:prefix-icon="TestResultsIcon"
prefix-icon-class="w-16px h-16px icon-dark-white"
@click="emits('close')"
@@ -58,6 +59,7 @@
</Button>
</router-link>
<Button
size="lg"
:prefix-icon="PlusButtonIcon"
prefix-icon-class="w-16px h-16px icon-dark-gray-500"
variant="outline"

4
packages/frontend-shared/src/components/ShikiHighlight.vue
View File

@@ -26,7 +26,7 @@ shikiWrapperClasses computed property.
'shiki-wrapper',
// All styles contain these utility classes
'overflow-scroll hover:border-indigo-200 relative text-14px leading-24px font-light',
'overflow-scroll hover:border-indigo-200 relative text-14px leading-24px font-normal',
/**
* 1. Single line is forced onto one line without any borders. It loses
@@ -56,7 +56,7 @@ shikiWrapperClasses computed property.
/>
<pre
v-else
class="border rounded font-light border-gray-100 py-8px text-14px leading-24px overflow-scroll"
class="border rounded font-normal border-gray-100 py-8px text-14px leading-24px overflow-scroll"
:class="[props.class, lineNumbers ? 'pl-56px' : 'pl-8px' ]"
>{{ trimmedCode }}</pre>
<CopyButton

2
packages/frontend-shared/src/components/StandardModalFooter.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="rounded-b bg-gray-50 border-t-1px border-gray-100 py-16px px-24px">
<div class="rounded-b bg-gray-50 border-t-1px border-gray-100 h-72px py-16px px-24px">
<slot />
</div>
</template>

4
packages/frontend-shared/src/components/StandardModalHeader.vue
View File

@@ -20,10 +20,10 @@
</div>
<button
:aria-label="t(`actions.close`)"
class="border-transparent rounded-full border-1 p-5px hocus-default hover:border-indigo-300"
class="border-transparent rounded-full outline-none border-1 group"
@click="$emit('close')"
>
<i-cy-delete_x12 class="h-12px m-4px w-12px icon-dark-gray-400" />
<i-cy-delete_x12 class="h-12px w-12px icon-dark-gray-400 group-hocus:icon-dark-indigo-400 children:transition-all" />
</button>
</div>
</template>

2
packages/frontend-shared/src/components/TerminalPrompt.vue
View File

@@ -1,5 +1,5 @@
<template>
<code class="border rounded flex font-light border-gray-100 px-16px text-gray-700 leading-40px relative items-center whitespace-nowrap overflow-hidden">
<code class="border rounded flex font-normal border-gray-100 px-16px text-gray-700 leading-40px relative items-center whitespace-nowrap overflow-hidden">
<i-cy-terminal_x16 class="flex-shrink-0 h-16px mr-8px w-16px icon-dark-gray-500 icon-light-gray-100" />
<span class="mr-8px text-purple-500">
{{ projectFolderName }}<template v-if="projectFolderName">:~</template>$

16
packages/reporter/src/runnables/runnables.scss
View File

@@ -97,7 +97,7 @@
padding-left: 0;
.runnable-wrapper {
border-left: 5px solid transparent;
border-left: 4px solid transparent;
padding: 0 0 0 4px;
.collapsible-header {
@@ -163,28 +163,28 @@
&.runnable-failed > div > .runnable-wrapper,
&.runnable-failed > div > .runnable-instruments {
border-left: 5px solid $fail;
border-left: 4px solid $fail;
}
&.runnable-pending > div > .runnable-wrapper,
&.runnable-pending > div > .runnable-instruments {
border-left: 5px solid $pending;
border-left: 4px solid $pending;
padding-bottom: 0;
}
&.runnable-passed > div > .runnable-wrapper,
&.runnable-passed > div > .runnable-instruments {
border-left: 5px solid $pass;
border-left: 4px solid $pass;
}
.runnable-retried > div > .runnable-wrapper,
.runnable-retried > div > .runnable-instruments {
border-left: 5px solid $retried;
border-left: 4px solid $retried;
}
&.runnable-studio.runnable-passed > div > .runnable-wrapper,
&.runnable-studio.runnable-passed > div > .runnable-instruments {
border-left: 5px solid $indigo-700;
border-left: 4px solid $indigo-700;
}
&.runnable-skipped > .runnable-wrapper {
@@ -195,7 +195,7 @@
&.runnable-skipped > div > .runnable-wrapper,
&.runnable-skipped > div > .runnable-instruments {
border-left: 5px solid $gray-500;
border-left: 4px solid $gray-500;
}
&.suite > div > .runnable-wrapper {
@@ -255,7 +255,7 @@
}
.runnable-instruments {
border-left: 5px solid transparent;
border-left: 4px solid transparent;
padding-bottom: 5px;
}