Skip to content

Commit 5d8f875

Browse files
marktnoonanemilyrohrboughZachJW34lmiller1990
authored
feat(unify): show spec runner header in run mode (#20189)
Co-authored-by: Emily Rohrbough <[email protected]> Co-authored-by: Zachary Williams <[email protected]> Co-authored-by: Lachlan Miller <[email protected]>
1 parent d4fa37e commit 5d8f875

File tree

13 files changed

+252
-26
lines changed

13 files changed

+252
-26
lines changed

‎packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,17 @@ describe('Cypress In Cypress', { viewportWidth: 1200 }, () => {
2121
cy.findByTestId('playground-activator').should('be.visible')
2222
cy.findByTestId('select-browser').click()
2323

24-
cy.contains('Firefox').should('be.visible')
25-
cy.findByTestId('viewport').click()
24+
cy.contains('Firefox').click()
25+
26+
cy.contains('Chrome 1')
27+
.focus()
28+
.type('{esc}')
2629

2730
snapshotAUTPanel('browsers open')
31+
2832
cy.contains('Firefox').should('be.hidden')
33+
34+
cy.findByTestId('viewport').click()
2935
cy.contains('The viewport determines the width and height of your application. By default the viewport will be 1000px by 660px for End-to-end Testing unless specified by a cy.viewport command.')
3036
.should('be.visible')
3137

‎packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
2+
it('e2e run mode spec runner header is correct', () => {
3+
cy.scaffoldProject('cypress-in-cypress')
4+
cy.findBrowsers()
5+
cy.openProject('cypress-in-cypress')
6+
cy.startAppServer()
7+
cy.visitApp()
8+
9+
simulateRunModeInUI()
10+
11+
cy.contains('dom-content.spec').click()
12+
cy.location().should((location) => {
13+
expect(location.hash).to.contain('dom-content.spec')
14+
})
15+
16+
cy.findByTestId('aut-url').should('be.visible')
17+
cy.findByTestId('playground-activator').should('not.exist')
18+
19+
// confirm expected content is rendered
20+
cy.contains('1000x660').should('be.visible')
21+
cy.contains('84%').should('be.visible')
22+
cy.contains('Chrome 1').should('be.visible')
23+
cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
24+
25+
cy.percySnapshot()
26+
27+
// confirm no interactions are implemented
28+
cy.findByTestId('viewport').click()
29+
cy.contains('The viewport determines').should('not.exist')
30+
cy.contains('Chrome 1').click()
31+
cy.contains('Firefox').should('not.exist')
32+
})
33+
34+
it('component testing run mode spec runner header is correct', () => {
35+
cy.scaffoldProject('cypress-in-cypress')
36+
cy.findBrowsers()
37+
cy.openProject('cypress-in-cypress')
38+
cy.startAppServer('component')
39+
cy.visitApp()
40+
simulateRunModeInUI()
41+
cy.contains('TestComponent.spec').click()
42+
cy.location().should((location) => {
43+
expect(location.hash).to.contain('TestComponent.spec')
44+
})
45+
46+
cy.findByTestId('aut-url').should('not.exist')
47+
cy.findByTestId('playground-activator').should('not.exist')
48+
49+
// confirm expected content is rendered
50+
cy.contains('500x500').should('be.visible')
51+
cy.contains('Chrome 1').should('be.visible')
52+
53+
cy.percySnapshot()
54+
55+
// confirm no interactions are implemented
56+
cy.findByTestId('viewport').click()
57+
cy.contains('The viewport determines').should('not.exist')
58+
cy.contains('Chrome 1').click()
59+
cy.contains('Firefox').should('not.exist')
60+
})
61+
})
62+
63+
function simulateRunModeInUI () {
64+
// this simulates run mode enough for this test
65+
cy.window().then((win) => {
66+
win.__CYPRESS_MODE__ = 'run'
67+
cy.get('body').then(($el) => {
68+
$el.find('[data-cy="sidebar"]')?.remove()
69+
})
70+
})
71+
}

‎packages/app/src/composables/usePreferences.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { useRunnerUiStore } from '../store'
33
import { useMutation, gql } from '@urql/vue'
44
import { Preferences_SetPreferencesDocument } from '@packages/app/src/generated/graphql'
55

6-
const runnerUiStore = useRunnerUiStore()
7-
86
gql`
97
mutation Preferences_SetPreferences ($value: String!) {
108
setPreferences (value: $value) {
@@ -14,6 +12,7 @@ mutation Preferences_SetPreferences ($value: String!) {
1412
}`
1513

1614
export function usePreferences () {
15+
const runnerUiStore = useRunnerUiStore()
1716
const setPreferences = useMutation(Preferences_SetPreferencesDocument)
1817

1918
function update<K extends keyof RunnerUiState> (preference: K, value: RunnerUiState[K]) {

‎packages/app/src/runner/ResizablePanels.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<{
8989
9090
const emit = defineEmits<{
9191
(e: 'resizeEnd', value: DraggablePanel): void,
92-
(e: 'panelWidthUpdated', value: {panel:string, width: number}): void,
92+
(e: 'panelWidthUpdated', value: {panel: DraggablePanel, width: number}): void,
9393
}>()
9494
9595
const panel1HandleX = ref(props.initialPanel1Width)

‎packages/app/src/runner/SpecRunnerHeader.cy.tsx‎ renamed to ‎packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import SpecRunnerHeader from './SpecRunnerHeader.vue'
1+
import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
22
import { useAutStore } from '../store'
33
import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
44
import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
@@ -7,13 +7,14 @@ function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
77
const eventManager = createEventManager()
88
const autIframe = createTestAutIframe()
99

10-
return (<SpecRunnerHeader
10+
return (<SpecRunnerHeaderOpenMode
1111
gql={gqlVal}
12+
width={800}
1213
eventManager={eventManager}
1314
getAutIframe={() => autIframe}/>)
1415
}
1516

16-
describe('SpecRunnerHeader', { viewportHeight: 500 }, () => {
17+
describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
1718
it('renders', () => {
1819
const autStore = useAutStore()
1920

‎packages/app/src/runner/SpecRunnerHeader.vue‎ renamed to ‎packages/app/src/runner/SpecRunnerHeaderOpenMode.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
class="min-h-64px text-14px"
55
:style="{ width: `${props.width}px` }"
66
>
7-
<div class="flex flex-wrap justify-end flex-grow p-16px gap-12px">
7+
<div class="flex flex-wrap flex-grow p-16px gap-12px justify-end">
88
<!--
99
TODO: Studio. Out of scope for GA.
1010
<Button
@@ -20,15 +20,15 @@
2020
<div
2121
v-if="props.gql.currentTestingType === 'e2e'"
2222
data-cy="aut-url"
23-
class="flex flex-grow overflow-hidden align-middle border border-gray-100 rounded border-1px h-32px"
23+
class="border rounded flex flex-grow border-gray-100 border-1px h-32px overflow-hidden align-middle"
2424
:class="{
2525
'bg-gray-50': autStore.isLoadingUrl
2626
}"
2727
>
2828
<Button
2929
data-cy="playground-activator"
3030
:disabled="isDisabled"
31-
class="border-gray-100 rounded-none border-r-1px mr-12px"
31+
class="rounded-none border-gray-100 border-r-1px mr-12px"
3232
variant="text"
3333
@click="togglePlayground"
3434
>
@@ -65,7 +65,7 @@
6565
</template>
6666

6767
<template #default>
68-
<div class="overflow-auto max-h-50vh">
68+
<div class="max-h-50vh overflow-auto">
6969
<VerticalBrowserListItems
7070
:gql="props.gql"
7171
:spec-path="activeSpecPath"
@@ -82,13 +82,13 @@
8282
<span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
8383
<span
8484
v-if="displayScale"
85-
class="text-gray-500 -ml-6px"
85+
class="-ml-6px text-gray-500"
8686
>
8787
({{ displayScale }})
8888
</span>
8989
</template>
9090
<template #default>
91-
<div class="overflow-auto text-gray-600 max-h-50vw p-16px leading-24px w-400px">
91+
<div class="max-h-50vw p-16px text-gray-600 leading-24px w-400px overflow-auto">
9292
<!-- TODO: This copy is a placeholder based on the old message for this, we should confirm the exact copy and then move to i18n -->
9393
<p class="mb-16px">
9494
The
@@ -103,7 +103,7 @@
103103
</p>
104104

105105
<ShikiHighlight
106-
class="border-gray-200 rounded border-1 mb-16px"
106+
class="rounded border-gray-200 border-1 mb-16px"
107107
lang="javascript"
108108
:code="code"
109109
/>
@@ -190,7 +190,7 @@ const props = defineProps<{
190190
gql: SpecRunnerHeaderFragment
191191
eventManager: EventManager
192192
getAutIframe: () => AutIframe
193-
width?: number
193+
width: number
194194
}>()
195195
196196
const autIframe = props.getAutIframe()

‎packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
2+
import { useAutStore } from '../store'
3+
import { createEventManager } from '../../cypress/component/support/ctSupport'
4+
5+
const browser = {
6+
displayName: 'Chrome',
7+
majorVersion: 1,
8+
}
9+
10+
describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
11+
it('renders correctly for e2e', () => {
12+
cy.window().then((win) => {
13+
win.__CYPRESS_BROWSER__ = browser
14+
win.__CYPRESS_TESTING_TYPE__ = 'e2e'
15+
const autStore = useAutStore()
16+
const eventManager = createEventManager()
17+
18+
autStore.updateUrl('http://localhost:4000')
19+
20+
cy.mount(<SpecRunnerHeaderRunMode eventManager={eventManager} width={800}/>)
21+
22+
cy.get('[data-cy="aut-url"]').should('be.visible')
23+
cy.get('[data-cy="playground-activator"]').should('not.exist')
24+
// confirm expected content is rendered
25+
cy.contains('1000x660').should('be.visible')
26+
cy.contains('Chrome 1').should('be.visible')
27+
cy.contains('http://localhost:4000').should('be.visible')
28+
29+
// confirm no interactions are implemented
30+
cy.get('[data-cy="viewport"]').click()
31+
cy.contains('The viewport determines').should('not.exist')
32+
cy.contains('Chrome 1').click()
33+
cy.contains('Firefox').should('not.exist')
34+
35+
cy.percySnapshot()
36+
})
37+
})
38+
39+
it('renders correctly for component testing', () => {
40+
cy.window().then((win) => {
41+
win.__CYPRESS_BROWSER__ = browser
42+
win.__CYPRESS_TESTING_TYPE__ = 'component'
43+
const autStore = useAutStore()
44+
const eventManager = createEventManager()
45+
46+
autStore.updateUrl('http://localhost:4000')
47+
48+
cy.mount(<SpecRunnerHeaderRunMode eventManager={eventManager} width={800} />)
49+
50+
cy.get('[data-cy="aut-url"]').should('not.exist')
51+
cy.get('[data-cy="playground-activator"]').should('not.exist')
52+
// confirm expected content is rendered
53+
cy.contains('500x500').should('be.visible')
54+
cy.contains('Chrome 1').should('be.visible')
55+
56+
// confirm no interactions are implemented
57+
cy.get('[data-cy="viewport"]').click()
58+
cy.contains('The viewport determines').should('not.exist')
59+
cy.contains('Chrome 1').click()
60+
cy.contains('Firefox').should('not.exist')
61+
62+
cy.percySnapshot()
63+
})
64+
})
65+
})

‎packages/app/src/runner/SpecRunnerHeaderRunMode.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div
3+
id="spec-runner-header"
4+
class="min-h-64px px-16px text-14px"
5+
:style="{ width: `${props.width}px` }"
6+
>
7+
<!-- this is similar to the Open Mode header but it's not interactive, so can be a lot smaller-->
8+
<div class="flex flex-grow flex-wrap py-16px gap-12px justify-end">
9+
<div
10+
v-if="testingType === 'e2e'"
11+
data-cy="aut-url"
12+
class="border rounded flex flex-grow border-1px border-gray-100 h-32px align-middle overflow-hidden"
13+
:class="{
14+
'bg-gray-50': autStore.isLoadingUrl
15+
}"
16+
>
17+
<div class="mx-12px max-w-100% grid text-gray-600 items-center truncate">
18+
{{ autStore.url }}
19+
</div>
20+
</div>
21+
<div
22+
v-else
23+
class="flex-grow"
24+
>
25+
<!-- spacer -->
26+
</div>
27+
<SpecRunnerDropdown
28+
data-cy="select-browser"
29+
>
30+
<template #heading>
31+
<img
32+
v-if="selectedBrowser.displayName"
33+
class="min-w-16px w-16px"
34+
:src="allBrowsersIcons[selectedBrowser.displayName]"
35+
> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
36+
</template>
37+
</SpecRunnerDropdown>
38+
<SpecRunnerDropdown
39+
variant="panel"
40+
data-cy="viewport"
41+
>
42+
<template #heading>
43+
<i-cy-ruler_x16 class="icon-dark-gray-500 icon-light-gray-400" />
44+
<span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
45+
<span
46+
v-if="displayScale"
47+
class="-mr-6px text-gray-500"
48+
>({{ displayScale }})</span>
49+
</template>
50+
</SpecRunnerDropdown>
51+
</div>
52+
</div>
53+
</template>
54+
55+
<script lang="ts" setup>
56+
import { computed } from 'vue'
57+
import { useAutStore } from '../store'
58+
import type { EventManager } from './event-manager'
59+
import { togglePlayground as _togglePlayground } from './utils'
60+
import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
61+
import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
62+
63+
const props = defineProps<{
64+
eventManager: EventManager
65+
width: number
66+
}>()
67+
68+
const displayScale = computed(() => {
69+
return autStore.scale < 1 ? `${Math.round(autStore.scale * 100) }%` : 0
70+
})
71+
72+
const autStore = useAutStore()
73+
74+
const selectedBrowser = window.__CYPRESS_BROWSER__
75+
const testingType = window.__CYPRESS_TESTING_TYPE__
76+
77+
</script>

‎packages/app/src/runner/SpecRunnerOpenMode.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
v-if="props.gql.currentProject"
2121
v-show="runnerUiStore.isSpecsListOpen"
2222
id="inline-spec-list"
23-
class="h-full border-gray-900 bg-gray-1000 border-r-1 force-dark"
23+
class="h-full bg-gray-1000 border-gray-900 border-r-1 force-dark"
2424
:class="{'pointer-events-none': isDragging}"
2525
>
2626
<InlineSpecList
@@ -48,7 +48,7 @@
4848
</template>
4949
<template #panel3="{width}">
5050
<HideDuringScreenshotOrRunMode class="bg-white">
51-
<SpecRunnerHeader
51+
<SpecRunnerHeaderOpenMode
5252
v-if="props.gql.currentProject"
5353
:gql="props.gql.currentProject"
5454
:event-manager="eventManager"
@@ -96,7 +96,7 @@ import { getAutIframeModel, getEventManager } from '.'
9696
import { useAutStore, useRunnerUiStore } from '../store'
9797
import type { FileDetails } from '@packages/types'
9898
import SnapshotControls from './SnapshotControls.vue'
99-
import SpecRunnerHeader from './SpecRunnerHeader.vue'
99+
import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
100100
import HideDuringScreenshot from './screenshot/HideDuringScreenshot.vue'
101101
import RemoveClassesDuringScreenshotting from './screenshot/RemoveClassesDuringScreenshotting.vue'
102102
import RemovePositioningDuringScreenshot from './screenshot/RemovePositioningDuringScreenshot.vue'

0 commit comments

Comments
 (0)