diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 704d836c9ee4..91bdd8d61940 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -232,49 +232,7 @@ const { openLoginConnectModal } = useUserProjectStatusStore()
const route = useRoute()
const { t } = useI18n()
const testingType = useTestingType()
-
-const isOnline = useOnline()
-const isOffline = ref(false)
-
-watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
-
-const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
-
-const projectConnectionStatus = computed(() => {
- if (!props.gql.cloudViewer) return 'LOGGED_OUT'
-
- if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
-
- if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
-
- if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
- if (props.gql.currentProject?.cloudProject?.hasRequestedAccess) {
- return 'ACCESS_REQUESTED'
- }
-
- return 'UNAUTHORIZED'
- }
-
- return 'CONNECTED'
-})
-
-const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
-
-const hasRequestedAccess = computed(() => {
- return projectConnectionStatus.value === 'ACCESS_REQUESTED'
-})
-
-const isGitAvailable = computed(() => {
- return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
-})
-
-const hasCloudErrors = computed(() => {
- return props.gql.currentProject?.specs.some((s) => s.cloudSpec?.fetchingStatus === 'ERRORED') ?? false
-})
-
-const shouldShowFetchError = ref(false)
-
-watch(hasCloudErrors, (wasErrorFound) => shouldShowFetchError.value = wasErrorFound, { immediate: true })
+const runAllSpecsStore = useRunAllSpecsStore()
gql`
subscription SpecsList_GitInfoUpdated {
@@ -351,6 +309,49 @@ const emit = defineEmits<{
(e: 'showCreateSpecModal'): void
}>()
+const isOnline = useOnline()
+const isOffline = ref(false)
+
+watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
+
+const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
+
+const projectConnectionStatus = computed(() => {
+ if (!props.gql.cloudViewer) return 'LOGGED_OUT'
+
+ if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
+
+ if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
+
+ if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+ if (props.gql.currentProject?.cloudProject?.hasRequestedAccess) {
+ return 'ACCESS_REQUESTED'
+ }
+
+ return 'UNAUTHORIZED'
+ }
+
+ return 'CONNECTED'
+})
+
+const cloudProjectType = computed(() => props.gql.currentProject?.cloudProject?.__typename)
+
+const hasRequestedAccess = computed(() => {
+ return projectConnectionStatus.value === 'ACCESS_REQUESTED'
+})
+
+const isGitAvailable = computed(() => {
+ return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
+})
+
+const hasCloudErrors = computed(() => {
+ return props.gql.currentProject?.specs.some((s) => s.cloudSpec?.fetchingStatus === 'ERRORED') ?? false
+})
+
+const shouldShowFetchError = ref(false)
+
+watch(hasCloudErrors, (wasErrorFound) => shouldShowFetchError.value = wasErrorFound, { immediate: true })
+
const showSpecPatternModal = ref(false)
const isSpecNotFound = ref(!!route.params?.unrunnable)
@@ -442,8 +443,6 @@ const { refetchFailedCloudData } = useCloudSpecData(
props.gql.currentProject?.specs as SpecsListFragment[] || [],
)
-const runAllSpecsStore = useRunAllSpecsStore()
-
watch(collapsible, () => {
runAllSpecsStore.setRunAllSpecsData(collapsible.value.tree)
}, { immediate: true })
diff --git a/packages/app/src/specs/banners/TrackedBanner.vue b/packages/app/src/specs/banners/TrackedBanner.vue
index 62daf6e3ead4..254b29a85d32 100644
--- a/packages/app/src/specs/banners/TrackedBanner.vue
+++ b/packages/app/src/specs/banners/TrackedBanner.vue
@@ -25,7 +25,7 @@ type EventData = {
}
type AlertComponentProps = InstanceType
['$props']
-interface TrackedBannerComponentProps extends AlertComponentProps {
+interface TrackedBannerComponentProps extends /* @vue-ignore */ AlertComponentProps {
bannerId: string
hasBannerBeenShown: boolean
eventData: EventData | undefined
diff --git a/packages/app/src/specs/switcher/TestingTypeSwitcher.vue b/packages/app/src/specs/switcher/TestingTypeSwitcher.vue
index 48bf4be1e029..044f2c4f0330 100644
--- a/packages/app/src/specs/switcher/TestingTypeSwitcher.vue
+++ b/packages/app/src/specs/switcher/TestingTypeSwitcher.vue
@@ -49,6 +49,7 @@ const tabs = computed(() => {
label: shouldUseLongText.value ? t('specPage.e2eSpecsHeader') : t('specPage.e2eSpecsHeaderShort'),
iconAfter: props.isE2eConfigured === false ? StyledQuestionMarkIcon : undefined,
active: props.viewedTestingType === 'e2e',
+ 'aria-controls': 'e2e-specs-panel',
},
{
id: 'component',
@@ -56,6 +57,7 @@ const tabs = computed(() => {
label: shouldUseLongText.value ? t('specPage.componentSpecsHeader') : t('specPage.componentSpecsHeaderShort'),
iconAfter: props.isCtConfigured === false ? StyledQuestionMarkIcon : undefined,
active: props.viewedTestingType === 'component',
+ 'aria-controls': 'component-specs-panel',
},
]
})
diff --git a/packages/app/src/studio/StudioPanel.vue b/packages/app/src/studio/StudioPanel.vue
index f028fbdb538d..b61a76dd4716 100644
--- a/packages/app/src/studio/StudioPanel.vue
+++ b/packages/app/src/studio/StudioPanel.vue
@@ -15,6 +15,7 @@ import { init, loadRemote } from '@module-federation/runtime'
import type { StudioAppDefaultShape, StudioPanelShape } from './studio-app-types'
import LoadingStudioPanel from './LoadingStudioPanel.vue'
import type { EventManager } from '../runner/event-manager'
+import type { JSX } from 'vue/jsx-runtime'
// Mirrors the ReactDOM.Root type since incorporating those types
// messes up vue typing elsewhere
diff --git a/packages/app/src/studio/studio-app-types.ts b/packages/app/src/studio/studio-app-types.ts
index 9f050b260d23..312f9c3d6a02 100644
--- a/packages/app/src/studio/studio-app-types.ts
+++ b/packages/app/src/studio/studio-app-types.ts
@@ -1,3 +1,5 @@
+import type { JSX } from 'vue/jsx-runtime'
+
export interface StudioPanelProps {
canAccessStudioAI: boolean
onStudioPanelClose?: () => void
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
index 77f3a56d62cc..ae6e2a8ebcdd 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
@@ -12,7 +12,7 @@ import type { FragmentDefinitionNode } from 'graphql'
import { print } from 'graphql'
import { SubscriptionHook, testUrqlClient } from './clientTestUrqlClient'
import type { MutationResolverCallback as MutationResolver } from './clientTestUrqlClient'
-import type { Component } from 'vue'
+import type { Component, VNode } from 'vue'
import { computed, watch, defineComponent, h, toRaw } from 'vue'
import { each } from 'lodash'
// tslint:disable-next-line: no-implicit-dependencies - unsure how to handle these tsconfig compiler paths
@@ -228,7 +228,7 @@ type MountFragmentConfig> = {
/**
* Render is passed the result of the "frag" and mounts the component under test
*/
- render: (frag: Exclude, undefined>) => JSX.Element
+ render: (frag: Exclude, undefined>) => VNode
expectError?: boolean
} & CyMountOptions
@@ -239,7 +239,7 @@ type MountFragmentListConfig> = {
count?: number
variableTypes?: Record, string>
variables?: VariablesOf
- render: (frag: Exclude, undefined>[]) => JSX.Element
+ render: (frag: Exclude, undefined>[]) => VNode
onResult?: (result: ResultOf, ctx: ClientTestContext) => ResultOf | void
expectError?: boolean
} & CyMountOptions
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index 863a50d6b265..144ecac74077 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -57,9 +57,9 @@
"@urql/vue": "0.6.2",
"@vitejs/plugin-vue": "5.0.4",
"@vitejs/plugin-vue-jsx": "3.1.0",
- "@vue/compiler-core": "3.2.47",
- "@vue/compiler-dom": "3.2.47",
- "@vue/compiler-sfc": "3.2.47",
+ "@vue/compiler-core": "3.5.13",
+ "@vue/compiler-dom": "3.5.13",
+ "@vue/compiler-sfc": "3.5.13",
"@vue/test-utils": "2.4.6",
"@vueuse/core": "7.7.1",
"autoprefixer": "^10.4.20",
@@ -101,7 +101,7 @@
"unplugin-vue-components": "^0.27.0",
"vite": "^5.4.18",
"vite-svg-loader": "5.1.0",
- "vue": "3.2.47",
+ "vue": "3.5.13",
"vue-eslint-parser": "7.11.0",
"vue-i18n": "9.13.1",
"vue-router": "4",
diff --git a/packages/frontend-shared/src/components/Card.vue b/packages/frontend-shared/src/components/Card.vue
index 5f31c9350626..83b0ef28aaa9 100644
--- a/packages/frontend-shared/src/components/Card.vue
+++ b/packages/frontend-shared/src/components/Card.vue
@@ -29,9 +29,7 @@