chore: add type linting + compilation checks to runner package

package.json

@@ -273,6 +273,7 @@
     "**/sharp": "0.29.3",
     "**/socket.io-parser": "4.0.5",
     "**/ua-parser-js": "0.7.33",
+    "@types/react": "17.0.83",
     "browserify-sign": "4.2.2",
     "devtools-protocol": "0.0.1346313",
     "sharp": "0.29.3",

packages/driver/src/cy/commands/navigation.ts

@@ -457,14 +457,14 @@ export default (Commands, Cypress, cy, state, config) => {
 
   Cypress.on('test:before:run', reset)
 
-  Cypress.on('stability:changed', (bool, event) => {
+  Cypress.on('stability:changed', async (bool, event) => {
     // only send up page loading events when we're
     // not stable!
-    stabilityChanged(Cypress, state, config, bool)
+    await stabilityChanged(Cypress, state, config, bool)
   })
 
-  Cypress.on('navigation:changed', (source, arg) => {
-    navigationChanged(Cypress, cy, state, source, arg)
+  Cypress.on('navigation:changed', async (source, arg) => {
+    await navigationChanged(Cypress, cy, state, source, arg)
   })
 
   Cypress.on('form:submitted', (e) => {

packages/driver/src/cy/net-stubbing/events/before-request.ts

@@ -34,7 +34,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
   req.responseTimeout = Cypress.config('responseTimeout')
   const reqClone = _.cloneDeep(req)
 
-  const subscribe = (eventName, handler) => {
+  const subscribe = async (eventName, handler) => {
     const subscription: Subscription = {
       id: _.uniqueId('Subscription'),
       routeId,
@@ -49,7 +49,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
 
     debug('created request subscription %o', { eventName, request, subscription, handler })
 
-    emitNetEvent('subscribe', { requestId, subscription } as NetEvent.ToServer.Subscribe)
+    await emitNetEvent('subscribe', { requestId, subscription } as NetEvent.ToServer.Subscribe)
   }
 
   const getCanonicalInterception = (): Interception => {
@@ -165,7 +165,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
       queryObj = createQueryObject()
       queryProxy = createQueryProxy(queryObj)
     },
-    on (eventName, handler) {
+    async on (eventName, handler) {
       if (!validEvents.includes(eventName)) {
         $errUtils.throwErrByPath('net_stubbing.request_handling.unknown_event', {
           args: {
@@ -179,11 +179,11 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
         $errUtils.throwErrByPath('net_stubbing.request_handling.event_needs_handler')
       }
 
-      subscribe(eventName, handler)
+      await subscribe(eventName, handler)
 
       return userReq
     },
-    continue (responseHandler?) {
+    async continue (responseHandler?) {
       if (resolved) {
         return $errUtils.throwErrByPath('net_stubbing.request_handling.completion_called_after_resolved', { args: { cmd: 'continue' } })
       }
@@ -203,7 +203,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
       }
 
       // allow `req` to be sent outgoing, then pass the response body to `responseHandler`
-      subscribe('response:callback', responseHandler)
+      await subscribe('response:callback', responseHandler)
 
       return finish(true)
     },

packages/driver/src/cy/net-stubbing/events/index.ts

@@ -55,8 +55,8 @@ export function registerEvents (Cypress: Cypress.Cypress, cy: Cypress.cy) {
     })
   }
 
-  function sendStaticResponse (requestId: string, staticResponse: StaticResponse) {
-    emitNetEvent('send:static:response', {
+  async function sendStaticResponse (requestId: string, staticResponse: StaticResponse) {
+    await emitNetEvent('send:static:response', {
       requestId,
       staticResponse: getBackendStaticResponse(staticResponse),
     })
@@ -93,7 +93,7 @@ export function registerEvents (Cypress: Cypress.Cypress, cy: Cypress.cy) {
       if (!route) {
         if (frame.subscription.await) {
           // route not found, just resolve so the request can continue
-          emitResolved(frame.data)
+          await emitResolved(frame.data)
         }
 
         return

packages/driver/src/cy/stability.ts

@@ -20,11 +20,11 @@ export const create = (Cypress: ICypress, state: StateFunc) => ({
     }
 
     Cypress.action('cy:before:stability:release')
-    .then(() => {
+    .then(async () => {
       const whenStable = state('whenStable')
 
       if (whenStable) {
-        whenStable()
+        await whenStable()
       }
     })
   },

packages/driver/src/cy/video-recorder.ts

@@ -1,4 +1,4 @@
-export const initVideoRecorder = (Cypress) => {
+export const initVideoRecorder = async (Cypress) => {
   // Only start recording with getUserMedia API if we're in firefox and video-enabled and run mode.
   // TODO: this logic should be cleaned up or gotten from some video-specific config value
   if (
@@ -8,7 +8,7 @@ export const initVideoRecorder = (Cypress) => {
       // navigator.mediaDevices will be undefined if the browser does not support display capture
       && window.navigator.mediaDevices
   ) {
-    window.navigator.mediaDevices.getUserMedia({
+    await window.navigator.mediaDevices.getUserMedia({
       audio: false,
       video: {
         // mediaSource "browser" is supported by a firefox user preference

packages/driver/src/cypress/cy.ts

@@ -218,6 +218,8 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     this.config = config
     this.Cypress = Cypress
     this.Cookies = Cookies
+    // TODO: this should be awaited
+    /* tslint:disable:no-floating-promises */
     initVideoRecorder(Cypress)
 
     this.testConfigOverride = new TestConfigOverride()

packages/frontend-shared/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}

packages/reporter/package.json

@@ -18,6 +18,7 @@
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@packages/driver": "0.0.0-development",
+    "@packages/frontend-shared": "0.0.0-development",
     "@packages/types": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
     "@reach/dialog": "0.10.5",

packages/reporter/src/agents/agents.tsx

@@ -4,8 +4,8 @@ import { observer } from 'mobx-react'
 import React from 'react'
 import Collapsible from '../collapsible/collapsible'
 
-import AgentModel from './agent-model'
-import { Alias } from '../instruments/instrument-model'
+import type AgentModel from './agent-model'
+import type { Alias } from '../instruments/instrument-model'
 
 export interface AgentProps {
   model: AgentModel

packages/reporter/src/attempts/attempt-model.ts

@@ -5,12 +5,12 @@ import Agent, { AgentProps } from '../agents/agent-model'
 import Command, { CommandProps } from '../commands/command-model'
 import Err from '../errors/err-model'
 import Route, { RouteProps } from '../routes/route-model'
-import Test, { UpdatableTestProps, TestProps } from '../test/test-model'
-import type { TestState } from '@packages/types'
+import type Test from '../test/test-model'
+import type { UpdatableTestProps, TestProps } from '../test/test-model'
+import type { TestState, FileDetails } from '@packages/types'
 import Hook, { HookName } from '../hooks/hook-model'
-import { FileDetails } from '@packages/types'
-import { LogProps } from '../runnables/runnables-store'
-import Log from '../instruments/instrument-model'
+import type { LogProps } from '../runnables/runnables-store'
+import type Log from '../instruments/instrument-model'
 import Session, { SessionProps } from '../sessions/sessions-model'
 
 export default class Attempt {

packages/reporter/src/attempts/attempts.tsx

@@ -2,14 +2,14 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
 
-import { TestState } from '@packages/types'
+import type { TestState } from '@packages/types'
 import Agents from '../agents/agents'
 import Collapsible from '../collapsible/collapsible'
 import Hooks from '../hooks/hooks'
 import Routes from '../routes/routes'
 import TestError from '../errors/test-error'
-import TestModel from '../test/test-model'
-import AttemptModel from './attempt-model'
+import type TestModel from '../test/test-model'
+import type AttemptModel from './attempt-model'
 import Sessions from '../sessions/sessions'
 
 import CollapseIcon from '@packages/frontend-shared/src/assets/icons/collapse_x16.svg'

packages/reporter/src/commands/command-model.ts

@@ -4,7 +4,7 @@ import { action, computed, observable, makeObservable } from 'mobx'
 import Err, { ErrProps } from '../errors/err-model'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
 import type { TimeoutID } from '../lib/types'
-import { SessionProps } from '../sessions/sessions-model'
+import type { SessionProps } from '../sessions/sessions-model'
 
 const LONG_RUNNING_THRESHOLD = 1000
 

packages/reporter/src/commands/command.tsx

@@ -11,12 +11,13 @@ import events, { Events } from '../lib/events'
 import FlashOnClick from '../lib/flash-on-click'
 import StateIcon from '../lib/state-icon'
 import Tag from '../lib/tag'
-import { TimeoutID } from '../lib/types'
+import type { TimeoutID } from '../lib/types'
 import runnablesStore, { RunnablesStore } from '../runnables/runnables-store'
-import { Alias, AliasObject } from '../instruments/instrument-model'
+import type { Alias, AliasObject } from '../instruments/instrument-model'
 import { determineTagType } from '../sessions/utils'
 
-import CommandModel, { RenderProps } from './command-model'
+import type CommandModel from './command-model'
+import type { RenderProps } from './command-model'
 import TestError from '../errors/test-error'
 
 import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'

packages/reporter/src/errors/error-code-frame.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { observer } from 'mobx-react'
 import Prism from 'prismjs'
 
-import { CodeFrame } from './err-model'
+import type { CodeFrame } from './err-model'
 import FileNameOpener from '../lib/file-name-opener'
 
 interface Props {

packages/reporter/src/errors/error-stack.tsx

@@ -3,7 +3,8 @@ import { observer } from 'mobx-react'
 import React, { ReactElement } from 'react'
 
 import FileNameOpener from '../lib/file-name-opener'
-import Err, { ParsedStackFileLine, ParsedStackMessageLine } from './err-model'
+import type Err from './err-model'
+import type { ParsedStackFileLine, ParsedStackMessageLine } from './err-model'
 
 const cypressLineRegex = /(cypress:\/\/|cypress_runner\.js)/
 

packages/reporter/src/errors/test-error.tsx

@@ -11,7 +11,7 @@ import ErrorStack from '../errors/error-stack'
 import events from '../lib/events'
 import FlashOnClick from '../lib/flash-on-click'
 import { onEnterOrSpace } from '../lib/util'
-import Err from './err-model'
+import type Err from './err-model'
 import { formattedMessage } from '../commands/command'
 
 import WarningIcon from '@packages/frontend-shared/src/assets/icons/warning_x8.svg'

packages/reporter/src/header/controls.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 import Tooltip from '@cypress/react-tooltip'
 
 import defaultEvents, { Events } from '../lib/events'
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 
 import ChevronDownIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x16.svg'
 import ChevronUpIcon from '@packages/frontend-shared/src/assets/icons/chevron-up-small_x16.svg'

packages/reporter/src/header/header.tsx

@@ -6,14 +6,14 @@ import Tooltip from '@cypress/react-tooltip'
 import MenuExpandRightIcon from '@packages/frontend-shared/src/assets/icons/menu-expand-right_x16.svg'
 
 import defaultEvents, { Events } from '../lib/events'
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 import { action } from 'mobx'
 
 import Controls from './controls'
 import Stats from './stats'
-import { StatsStore } from './stats-store'
+import type { StatsStore } from './stats-store'
 import { DebugDismiss } from './DebugDismiss'
-import { RunnablesStore } from '../runnables/runnables-store'
+import type { RunnablesStore } from '../runnables/runnables-store'
 
 export interface ReporterHeaderProps {
   appState: AppState

packages/reporter/src/header/stats-store.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import { action, computed, observable, makeObservable } from 'mobx'
 import { TestState } from '../test/test-model'
-import { IntervalID } from '../lib/types'
+import type { IntervalID } from '../lib/types'
 
 import type { StatsStoreStartInfo } from '@packages/types'
 

packages/reporter/src/header/stats.tsx

@@ -2,7 +2,7 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { StatsStore } from './stats-store'
+import type { StatsStore } from './stats-store'
 
 import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'

packages/reporter/src/hooks/hook-model.ts

@@ -1,11 +1,10 @@
 import _ from 'lodash'
 import { observable, computed, makeObservable } from 'mobx'
 
-import { FileDetails } from '@packages/types'
-
-import { Alias } from '../instruments/instrument-model'
-import Err from '../errors/err-model'
-import CommandModel from '../commands/command-model'
+import type{ FileDetails } from '@packages/types'
+import type { Alias } from '../instruments/instrument-model'
+import type Err from '../errors/err-model'
+import type CommandModel from '../commands/command-model'
 
 export type HookName = 'before all' | 'before each' | 'after all' | 'after each' | 'test body' | 'studio commands'
 

packages/reporter/src/hooks/hooks.tsx

@@ -2,12 +2,13 @@ import cs from 'classnames'
 import _ from 'lodash'
 import { observer } from 'mobx-react'
 import React from 'react'
-import { FileDetails } from '@packages/types'
+import type { FileDetails } from '@packages/types'
 
 import appState, { AppState } from '../lib/app-state'
 import Command from '../commands/command'
 import Collapsible from '../collapsible/collapsible'
-import HookModel, { HookName } from './hook-model'
+import type HookModel from './hook-model'
+import type { HookName } from './hook-model'
 
 import ArrowRightIcon from '@packages/frontend-shared/src/assets/icons/arrow-right_x16.svg'
 import OpenIcon from '@packages/frontend-shared/src/assets/icons/technology-code-editor_x16.svg'

packages/reporter/src/instruments/instrument-model.ts

@@ -1,5 +1,5 @@
 import { observable, makeObservable } from 'mobx'
-import { Instrument, TestState } from '@packages/types'
+import type { Instrument, TestState } from '@packages/types'
 
 export interface AliasObject {
   name: string

packages/reporter/src/lib/events.ts

@@ -4,8 +4,8 @@ import appState, { AppState } from './app-state'
 import runnablesStore, { RunnablesStore, LogProps, RootRunnable } from '../runnables/runnables-store'
 import statsStore, { StatsStore } from '../header/stats-store'
 import scroller, { Scroller } from './scroller'
-import { UpdatableTestProps, UpdateTestCallback, TestProps } from '../test/test-model'
-import Err from '../errors/err-model'
+import type { UpdatableTestProps, UpdateTestCallback, TestProps } from '../test/test-model'
+import type Err from '../errors/err-model'
 
 import type { ReporterStartInfo, ReporterRunState } from '@packages/types'
 

packages/reporter/src/lib/file-name-opener.tsx

@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react'
 import React from 'react'
-import { FileDetails } from '@packages/types'
-// @ts-ignore
+import type { FileDetails } from '@packages/types'
 import Tooltip from '@cypress/react-tooltip'
 
 import TextIcon from '@packages/frontend-shared/src/assets/icons/document-text_x16.svg'

packages/reporter/src/lib/state-icon.tsx

@@ -2,7 +2,7 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { TestState } from '@packages/types'
+import type { TestState } from '@packages/types'
 import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
 import PendingIcon from '@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'

packages/reporter/src/main.tsx

@@ -7,7 +7,7 @@ import { render } from 'react-dom'
 // @ts-ignore
 import EQ from 'css-element-queries/src/ElementQueries'
 
-import { RunnablesErrorModel } from './runnables/runnable-error'
+import type { RunnablesErrorModel } from './runnables/runnable-error'
 import appState, { AppState } from './lib/app-state'
 import events, { Runner, Events } from './lib/events'
 import runnablesStore, { RunnablesStore } from './runnables/runnables-store'

packages/reporter/src/preferences/testing-preferences.tsx

@@ -2,7 +2,7 @@ import { action } from 'mobx'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 import defaultEvents, { Events } from '../lib/events'
 import Switch from '../lib/switch'
 

packages/reporter/src/routes/routes.tsx

@@ -7,7 +7,7 @@ import Tooltip from '@cypress/react-tooltip'
 
 import Collapsible from '../collapsible/collapsible'
 import Tag from '../lib/tag'
-import RouteModel from './route-model'
+import type RouteModel from './route-model'
 
 export interface RouteProps {
   model: RouteModel

packages/reporter/src/runnables/runnable-and-suite.tsx

@@ -10,8 +10,8 @@ import events, { Events } from '../lib/events'
 import Test from '../test/test'
 import Collapsible from '../collapsible/collapsible'
 
-import SuiteModel from './suite-model'
-import TestModel from '../test/test-model'
+import type SuiteModel from './suite-model'
+import type TestModel from '../test/test-model'
 
 import { LaunchStudioIcon } from '../components/LaunchStudioIcon'