From 1223ded312e89faec74a00cfb860554ab21b60a0 Mon Sep 17 00:00:00 2001 From: Zachary Williams Date: Wed, 16 Mar 2022 11:25:40 -0500 Subject: [PATCH] refactor: convert browser status to gql subscription (#20591) --- .../src/actions/DataEmitterActions.ts | 4 +++ .../src/sources/BrowserDataSource.ts | 7 +++-- packages/graphql/schemas/schema.graphql | 3 +++ .../objectTypes/gql-Subscription.ts | 8 ++++++ .../cypress/e2e/choose-a-browser.cy.ts | 26 ++++++++++--------- .../launchpad/src/setup/OpenBrowserList.vue | 13 ++++++++-- 6 files changed, 45 insertions(+), 16 deletions(-) diff --git a/packages/data-context/src/actions/DataEmitterActions.ts b/packages/data-context/src/actions/DataEmitterActions.ts index d3f7652840..5fdad58970 100644 --- a/packages/data-context/src/actions/DataEmitterActions.ts +++ b/packages/data-context/src/actions/DataEmitterActions.ts @@ -21,6 +21,10 @@ abstract class DataEmitterEvents { this._emit('devChange') } + browserStatusChange () { + this._emit('browserStatusChange') + } + private _emit (evt: Evt, ...args: Parameters) { this.pub.emit(evt, ...args) } diff --git a/packages/data-context/src/sources/BrowserDataSource.ts b/packages/data-context/src/sources/BrowserDataSource.ts index 7b0e24c19c..5e48e9ccc5 100644 --- a/packages/data-context/src/sources/BrowserDataSource.ts +++ b/packages/data-context/src/sources/BrowserDataSource.ts @@ -84,7 +84,10 @@ export class BrowserDataSource { } setBrowserStatus (browserStatus: BrowserStatus) { - this.ctx.coreData.app.browserStatus = browserStatus - this.ctx.emitter.toLaunchpad() + this.ctx.update((d) => { + d.app.browserStatus = browserStatus + }) + + this.ctx.emitter.browserStatusChange() } } diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql index d5c2cf053f..4f6706eca4 100644 --- a/packages/graphql/schemas/schema.graphql +++ b/packages/graphql/schemas/schema.graphql @@ -1249,6 +1249,9 @@ type Subscription { """Triggered when the auth state changes""" authChange: Query + """Status of the currently opened browser""" + browserStatusChange: CurrentProject + """Issued for internal development changes""" devChange: DevState } diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts index 1159a98dd5..bfd1731661 100644 --- a/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts +++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts @@ -1,4 +1,5 @@ import { subscriptionType } from 'nexus' +import { CurrentProject } from '.' import { DevState } from './gql-DevState' import { Query } from './gql-Query' @@ -17,5 +18,12 @@ export const Subscription = subscriptionType({ subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('devChange'), resolve: (source, args, ctx) => ctx.coreData.dev, }) + + t.field('browserStatusChange', { + type: CurrentProject, + description: 'Status of the currently opened browser', + subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('browserStatusChange'), + resolve: (source, args, ctx) => ctx.lifecycleManager, + }) }, }) diff --git a/packages/launchpad/cypress/e2e/choose-a-browser.cy.ts b/packages/launchpad/cypress/e2e/choose-a-browser.cy.ts index 4445d6ce2f..294b035c0f 100644 --- a/packages/launchpad/cypress/e2e/choose-a-browser.cy.ts +++ b/packages/launchpad/cypress/e2e/choose-a-browser.cy.ts @@ -135,6 +135,12 @@ describe('Choose a Browser Page', () => { }) cy.contains('button', 'Running Chrome') + + cy.withCtx((ctx) => { + ctx.browser.setBrowserStatus('closed') + }) + + cy.contains('button', 'Start E2E Testing in Chrome') }) it('performs mutation to change selected browser when browser item is clicked', () => { @@ -179,16 +185,14 @@ describe('Choose a Browser Page', () => { }) it('performs mutation to close browser', () => { - cy.intercept('query-OpenBrowser', (req) => { - req.on('before:response', (res) => { - res.body.data.currentProject.browserStatus = 'open' - }) - }) - cy.openProject('launchpad', ['--e2e']) cy.visitLaunchpad() + cy.withCtx((ctx) => { + ctx.browser.setBrowserStatus('open') + }) + cy.contains('button', 'Running Chrome') cy.intercept('mutation-OpenBrowser_CloseBrowser').as('closeBrowser') @@ -197,16 +201,14 @@ describe('Choose a Browser Page', () => { }) it('performs mutation to focus open browser when focus button is pressed', () => { - cy.intercept('query-OpenBrowser', (req) => { - req.on('before:response', (res) => { - res.body.data.currentProject.browserStatus = 'open' - }) - }) - cy.openProject('launchpad', ['--e2e']) cy.visitLaunchpad() + cy.withCtx((ctx) => { + ctx.browser.setBrowserStatus('open') + }) + cy.get('h1').should('contain', 'Choose a Browser') cy.contains('button', 'Running Chrome').as('launchButton') diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue index 07c94b7058..3f53830222 100644 --- a/packages/launchpad/src/setup/OpenBrowserList.vue +++ b/packages/launchpad/src/setup/OpenBrowserList.vue @@ -153,7 +153,7 @@ import { useI18n } from '@cy/i18n' import Button from '@packages/frontend-shared/src/components/Button.vue' import { computed } from 'vue' -import { useMutation, gql } from '@urql/vue' +import { useMutation, gql, useSubscription } from '@urql/vue' import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos' import TestingTypeComponentIcon from '~icons/cy/testing-type-component_x16' import TestingTypeE2EIcon from '~icons/cy/testing-type-e2e_x16' @@ -166,7 +166,7 @@ import UnsupportedBrowserTooltip from '@packages/frontend-shared/src/gql-compone import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers' import type { OpenBrowserListFragment } from '../generated/graphql' -import { OpenBrowserList_SetBrowserDocument } from '../generated/graphql' +import { OpenBrowserList_SetBrowserDocument, OpenBrowserList_BrowserStatusChangeDocument } from '../generated/graphql' gql` mutation OpenBrowserList_SetBrowser($id: ID!) { @@ -203,8 +203,17 @@ fragment OpenBrowserList on CurrentProject { currentTestingType browserStatus } + +subscription OpenBrowserList_browserStatusChange { + browserStatusChange { + id + browserStatus + } +} ` +useSubscription({ query: OpenBrowserList_BrowserStatusChangeDocument }) + const props = defineProps<{ gql: OpenBrowserListFragment }>()