Skip to content

Commit

Permalink
fix(unify): Remove 'Reconfigure' dropdown from Testing Type chooser (#…
Browse files Browse the repository at this point in the history 
…21063)

Co-authored-by: Ryan Manuel <ryanm@cypress.io>
Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
  • Loading branch information
@davidmunechika @ryanthemanuel @ZachJW34
3 people authored Apr 19, 2022
1 parent 3875c10 commit 691234c
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 163 deletions.
35 changes: 0 additions & 35 deletions packages/app/cypress/e2e/sidebar_navigation.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,40 +342,5 @@ describe('Sidebar Navigation', () => {
expect(ctx.actions.project.reconfigureProject).to.have.been.called
})
})

it('shows dropdown to reconfigure project when clicking switch testing type', () => {
cy.scaffoldProject('pristine-with-ct-testing')
cy.openProject('pristine-with-ct-testing')
cy.startAppServer('component')
cy.visitApp()

cy.get('[data-cy="sidebar-header"]').as('switchTestingType').click()
cy.findByRole('dialog', {
name: 'Choose a testing type',
}).should('be.visible')

cy.get('[data-cy-testingtype=component]').within(() => {
cy.contains('Running')
}).click()

cy.findByRole('dialog', {
name: 'Choose a testing type',
}).should('not.exist')

cy.get('@switchTestingType').click()
cy.findByRole('dialog', {
name: 'Choose a testing type',
}).should('be.visible')

cy.get('[data-cy-testingtype="e2e"]').within(() => {
cy.contains('Not Configured')
})

cy.get('[data-cy-testingtype="component"]').within(() => {
cy.get('[data-cy=status-badge-menu]').click()
cy.get('[data-cy="Choose a Browser"]').should('not.exist')
cy.get('[data-cy="Reconfigure"]').should('exist')
})
})
})
})
89 changes: 7 additions & 82 deletions packages/frontend-shared/src/gql-components/StatusBadge.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,10 @@
<template>
<template v-if="status">
<template v-if="props.status">
<div class="border rounded-full font-medium p-5px pr-16px text-size-14px text-jade-500 leading-20px inline-flex items-center relative">
<Menu>
<MenuButton
data-cy="status-badge-menu"
class="flex items-center justify-center focus:outline-transparent"
@click.stop
>
<i-cy-grommet_x16
class="h-16px mr-4px ml-4px w-16px icon-light-jade-400 icon-dark-jade-400"
/>
{{ titleOn }}
<i-cy-chevron-down-small_x8
class="h-8px ml-8px w-8px icon-dark-gray-500"
/>
</MenuButton>
<MenuItems
class="rounded flex flex-col outline-transparent bg-gray-900 text-white
right-0 z-40 absolute overflow-scroll"
:class="props.isRunning ? '-bottom-42px' : '-bottom-80px'"
>
<MenuItem
v-for="item in menuItems"
:key="item.name"
#="{ active }"
>
<button
:data-cy="item.name"
:class="{ 'bg-gray-700': active }"
class="border-b min-w-max border-b-gray-800 text-left py-8px px-16px"
@click.stop="handleMenuClick(item.event)"
>
{{ item.name }}
</button>
</MenuItem>
</MenuItems>
</Menu>
<i-cy-grommet_x16
class="h-16px mr-4px ml-4px w-16px icon-light-jade-400 icon-dark-jade-400"
/>
{{ props.titleOn }}
</div>
</template>
<template v-else>
Expand All @@ -45,18 +14,14 @@
<i-cy-grommet_x16
class="h-16px mx-4px w-16px icon-dark-gray-200 icon-dark-gray-50"
/>
{{ titleOff }}
{{ props.titleOff }}
</span>
</template>
</template>

<script lang="ts" setup>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { useI18n } from '@cy/i18n'
import { gql, useMutation } from '@urql/vue'
import { TestingTypeSelectionAndReconfigureDocument } from '../generated/graphql'
import type { TestingTypeEnum } from '../generated/graphql'
import { computed } from 'vue'
const props = defineProps<{
status: boolean
Expand All @@ -67,44 +32,4 @@ const props = defineProps<{
isApp: boolean
}>()
const { t } = useI18n()
const emit = defineEmits<{
(event: 'chooseABrowser'): void
}>()
gql`
mutation TestingTypeSelectionAndReconfigure($testingType: TestingTypeEnum!, $isApp: Boolean!) {
setTestingTypeAndReconfigureProject(testingType: $testingType, isApp: $isApp) {
currentProject {
id
currentTestingType
isCTConfigured
isE2EConfigured
isLoadingConfigFile
isLoadingNodeEvents
}
}
}
`
const mutation = useMutation(TestingTypeSelectionAndReconfigureDocument)
type EventName = 'chooseABrowser' | 'reconfigure'
const menuItems = computed(() => {
const launchBrowser: { name: string, event: EventName } = { name: t('setupPage.testingCard.chooseABrowser'), event: 'chooseABrowser' }
const reconfigure: { name: string, event: EventName } = { name: t('setupPage.testingCard.reconfigure'), event: 'reconfigure' }
return props.isRunning ? [reconfigure] : [launchBrowser, reconfigure]
})
const handleMenuClick = (eventName: EventName) => {
if (eventName === 'chooseABrowser') {
emit(eventName)
} else if (eventName === 'reconfigure') {
mutation.executeMutation({ testingType: props.testingType, isApp: props.isApp })
}
}
</script>
50 changes: 4 additions & 46 deletions packages/launchpad/cypress/e2e/project-setup.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,69 +551,27 @@ describe('Launchpad: Setup Project', () => {
cy.contains('Project Setup')
})

it('can move forward to choose browser if e2e is configured and is selected from the dropdown list', () => {
it('can move forward to choose browser if e2e is configured', () => {
cy.openProject('pristine-with-e2e-testing')
cy.visitLaunchpad()

verifyWelcomePage({ e2eIsConfigured: true, ctIsConfigured: false })

cy.get('[data-cy-testingtype="e2e"]').within(() => {
cy.get('[data-cy=status-badge-menu]').click()
cy.get('[data-cy="Choose a Browser"]').click()
})
cy.get('[data-cy-testingtype="e2e"]').click()

verifyChooseABrowserPage()
})

it('can reconfigure config from the testing type card selecting E2E', () => {
cy.openProject('pristine-with-e2e-testing')
cy.visitLaunchpad()

verifyWelcomePage({ e2eIsConfigured: true, ctIsConfigured: false })

cy.get('[data-cy-testingtype="component"]').within(() => {
cy.contains('Not Configured')
})

cy.get('[data-cy-testingtype="e2e"]').within(() => {
cy.get('[data-cy=status-badge-menu]').click()
cy.get('[data-cy="Reconfigure"]').click()
})

cy.contains('Project Setup')
})

it('can move forward to choose browser if component is configured and is selected from the dropdown list', () => {
it('can move forward to choose browser if component is configured', () => {
cy.openProject('pristine-with-ct-testing')
cy.visitLaunchpad()

verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: true })

cy.get('[data-cy-testingtype="component"]').within(() => {
cy.get('[data-cy=status-badge-menu]').click()
cy.get('[data-cy="Choose a Browser"]').click()
})
cy.get('[data-cy-testingtype="component"]').click()

verifyChooseABrowserPage()
})

it('can reconfigure config from the testing type card selecting Component', () => {
cy.openProject('pristine-with-ct-testing')
cy.visitLaunchpad()

verifyWelcomePage({ e2eIsConfigured: false, ctIsConfigured: true })

cy.get('[data-cy-testingtype="e2e"]').within(() => {
cy.contains('Not Configured')
})

cy.get('[data-cy-testingtype="component"]').within(() => {
cy.get('[data-cy=status-badge-menu]').click()
cy.get('[data-cy="Reconfigure"]').click()
})

cy.contains('Project Setup')
})
})
})

Expand Down

1 comment on commit 691234c

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 691234c Apr 19, 2022

Choose a reason for hiding this comment

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

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/10.0-release-691234cfdf780a3d9df3cdd43a8a04b6bf36c24e/cypress.tgz

Please sign in to comment.