chore: add type linting + compilation checks to packages

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/app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "check-ts": "vue-tsc --noEmit",
+    "check-ts": "vue-tsc --noEmit && yarn -s tslint",
     "clean": "rimraf dist && echo 'cleaned'",
     "clean-deps": "rimraf node_modules",
     "cypress:launch": "yarn cypress:run-cypress-in-cypress gulp open --project .",
@@ -17,6 +17,7 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
     "start": "echo \"run 'yarn dev' or 'yarn watch' from the root\" && exit 1",
     "test": "echo 'ok'",
+    "tslint": "tslint --config ../ts/tslint.json --project .",
     "watch": "echo \"run 'yarn dev' or 'yarn watch' from the root\" && exit 1"
   },
   "dependencies": {},

packages/app/src/composables/useCloudSpecData.ts

@@ -105,8 +105,8 @@ export function useCloudSpecData (
   */
   watch(
     [debouncedDisplayedSpecIds, isOffline, isProjectDisconnected, mostRecentUpdate],
-    () => {
-      fetchDisplayedCloudData()
+    async () => {
+      await fetchDisplayedCloudData()
     },
     { flush: 'post' },
   )

packages/app/src/composables/usePreferences.ts

@@ -15,11 +15,11 @@ export function usePreferences () {
   const runnerUiStore = useRunnerUiStore()
   const setPreferences = useMutation(Preferences_SetPreferencesDocument)
 
-  function update<K extends keyof RunnerUiState> (preference: K, value: RunnerUiState[K]) {
+  async function update<K extends keyof RunnerUiState> (preference: K, value: RunnerUiState[K]) {
     if (runnerUiStore[preference] !== value) {
       // only set the value and trigger the mutation if the value has actually changed
       runnerUiStore.setPreference(preference, value)
-      setPreferences.executeMutation({ value: JSON.stringify({ [preference]: value }) })
+      await setPreferences.executeMutation({ value: JSON.stringify({ [preference]: value }) })
     }
   }
 

packages/app/src/composables/useRecordEvent.ts

@@ -20,8 +20,8 @@ type EventParams = {
 export function useRecordEvent () {
   const recordEventMutation = useMutation(UseRecordEvent_RecordEventDocument)
 
-  function record (params: EventParams) {
-    recordEventMutation.executeMutation({
+  async function record (params: EventParams) {
+    await recordEventMutation.executeMutation({
       ...params,
       messageId: nanoid(),
       includeMachineId: params.includeMachineId ?? false,

packages/app/src/composables/useSpecFilter.ts

@@ -23,18 +23,19 @@ export function useSpecFilter (savedFilter?: string) {
 
   const debouncedSpecFilterModel = useDebounce(specFilterModel, 200)
 
-  function setSpecFilter (specFilter: string) {
+  async function setSpecFilter (specFilter: string) {
     if (specStore.specFilter !== specFilter) {
       specStore.setSpecFilter(specFilter)
-      saveSpecFilter.executeMutation({ value: JSON.stringify({ specFilter }) })
+      await saveSpecFilter.executeMutation({ value: JSON.stringify({ specFilter }) })
     }
   }
 
-  watch(() => debouncedSpecFilterModel?.value, (newVal) => {
-    setSpecFilter(newVal ?? '')
+  watch(() => debouncedSpecFilterModel?.value, async (newVal) => {
+    await setSpecFilter(newVal ?? '')
   })
 
   // initialize spec filter in store
+  // tslint:disable:no-floating-promises
   setSpecFilter(specFilterModel.value)
 
   return {

packages/app/src/composables/useTestingType.cy.tsx

@@ -48,7 +48,7 @@ describe('useTestingType', () => {
   })
 
   it('supplies expected query data', () => {
-    mountComposable(useTestingType).then((value) => {
+    mountComposable(useTestingType).then(async (value) => {
       const result = value as unknown as ReturnType<typeof useTestingType>
 
       expect(result.activeTestingType.value).to.eql('e2e')
@@ -69,12 +69,12 @@ describe('useTestingType', () => {
       })
 
       it('should toggle viewed mode', () => {
-        mountComposable(useTestingType).then((value) => {
+        mountComposable(useTestingType).then(async (value) => {
           const result = value as unknown as ReturnType<typeof useTestingType>
 
           expect(result.viewedTestingType.value).to.eql('e2e')
 
-          result.viewTestingType('component')
+          await result.viewTestingType('component')
 
           expect(result.viewedTestingType.value).to.eql('component')
         })
@@ -92,24 +92,24 @@ describe('useTestingType', () => {
       })
 
       it('should toggle active mode if not active mode', () => {
-        mountComposable(useTestingType).then((value) => {
+        mountComposable(useTestingType).then(async (value) => {
           const result = value as unknown as ReturnType<typeof useTestingType>
 
           expect(result.viewedTestingType.value).to.eql('e2e')
 
-          result.viewTestingType('component')
+          await result.viewTestingType('component')
         })
 
         cy.get('@activateTestingType').should('have.been.calledOnce')
       })
 
       it('should toggle viewed mode if active mode', () => {
-        mountComposable(useTestingType).then((value) => {
+        mountComposable(useTestingType).then(async (value) => {
           const result = value as unknown as ReturnType<typeof useTestingType>
 
           expect(result.viewedTestingType.value).to.eql('e2e')
 
-          result.viewTestingType('e2e')
+          await result.viewTestingType('e2e')
         })
 
         cy.get('@activateTestingType').should('not.have.been.called')

packages/app/src/main.ts

@@ -40,7 +40,7 @@ app.use(Toast, {
   closeOnClick: false,
 })
 
-makeUrqlClient({ target: 'app', namespace: config.namespace, socketIoRoute: config.socketIoRoute }).then((client) => {
+await makeUrqlClient({ target: 'app', namespace: config.namespace, socketIoRoute: config.socketIoRoute }).then((client) => {
   app.use(urql, client)
   app.use(createRouter())
   app.use(createI18n())

packages/app/src/runner/event-manager.ts

@@ -875,9 +875,9 @@ export class EventManager {
   }
 
   _studioCopyToClipboard (cb) {
-    this.ws.emit('studio:get:commands:text', this.studioStore.logs, (commandsText) => {
-      this.studioStore.copyToClipboard(commandsText)
-      .then(cb)
+    this.ws.emit('studio:get:commands:text', this.studioStore.logs, async (commandsText) => {
+      await this.studioStore.copyToClipboard(commandsText)
+      cb()
     })
   }
 

packages/app/src/runner/events/capture-protocol.ts

@@ -25,7 +25,7 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
     })
   })
 
-  Cypress.on('log:added', (attributes) => {
+  Cypress.on('log:added', async (attributes) => {
     // TODO: UNIFY-1318 - Race condition in unified runner - we should not need this null check
     if (!Cypress.runner) {
       return
@@ -38,10 +38,10 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
       timestamp: performance.now() + performance.timeOrigin,
     })
 
-    Cypress.backend('protocol:command:log:added', protocolProps)
+    await Cypress.backend('protocol:command:log:added', protocolProps)
   })
 
-  Cypress.on('log:changed', (attributes) => {
+  Cypress.on('log:changed', async (attributes) => {
     // TODO: UNIFY-1318 - Race condition in unified runner - we should not need this null check
     if (!Cypress.runner) {
       return
@@ -54,18 +54,18 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
       timestamp: performance.now() + performance.timeOrigin,
     })
 
-    Cypress.backend('protocol:command:log:changed', protocolProps)
+    await Cypress.backend('protocol:command:log:changed', protocolProps)
   })
 
-  const viewportChangedHandler = (viewport) => {
+  const viewportChangedHandler = async (viewport) => {
     const timestamp = performance.timeOrigin + performance.now()
 
     attachCypressProtocolInfo({
       type: 'viewport:changed',
       timestamp,
     })
 
-    Cypress.backend('protocol:viewport:changed', {
+    await Cypress.backend('protocol:viewport:changed', {
       viewport: {
         width: viewport.viewportWidth,
         height: viewport.viewportHeight,
@@ -92,26 +92,26 @@ export const addCaptureProtocolListeners = (Cypress: Cypress.Cypress) => {
     })
   })
 
-  Cypress.on('url:changed', (url) => {
+  Cypress.on('url:changed', async (url) => {
     const timestamp = performance.timeOrigin + performance.now()
 
     attachCypressProtocolInfo({
       type: 'url:changed',
       timestamp,
     })
 
-    Cypress.backend('protocol:url:changed', { url, timestamp })
+    await Cypress.backend('protocol:url:changed', { url, timestamp })
   })
 
-  Cypress.on('page:loading', (loading) => {
+  Cypress.on('page:loading', async (loading) => {
     const timestamp = performance.timeOrigin + performance.now()
 
     attachCypressProtocolInfo({
       type: 'page:loading',
       timestamp,
     })
 
-    Cypress.backend('protocol:page:loading', { loading, timestamp })
+    await Cypress.backend('protocol:page:loading', { loading, timestamp })
   })
 
   Cypress.on('test:before:after:run:async', async (attributes, _test, options) => {

packages/app/src/runner/index.ts

@@ -292,7 +292,7 @@ function setSpecForDriver (spec: SpecFile) {
  * a Spec IFrame to load the spec's source code, and
  * initialize Cypress on the AUT.
  */
-function runSpecE2E (config, spec: SpecFile) {
+async function runSpecE2E (config, spec: SpecFile) {
   const $runnerRoot = getRunnerElement()
 
   // clear AUT, if there is one.
@@ -315,7 +315,7 @@ function runSpecE2E (config, spec: SpecFile) {
     el.remove()
   })
 
-  autIframe.visitBlankPage()
+  await autIframe.visitBlankPage()
 
   // create Spec IFrame
   const specSrc = getSpecUrl({

packages/app/src/runner/unifiedRunner.ts

@@ -25,8 +25,8 @@ export function useUnifiedRunner () {
     initialized.value = true
   })
 
-  onBeforeUnmount(() => {
-    UnifiedRunnerAPI.teardown()
+  onBeforeUnmount(async () => {
+    await UnifiedRunnerAPI.teardown()
     initialized.value = false
   })
 

packages/app/src/runner/useEventManager.ts

@@ -13,23 +13,23 @@ export function useEventManager () {
   const studioStore = useStudioStore()
   const router = useRouter()
 
-  function runSpec (isRerun: boolean = false) {
+  async function runSpec (isRerun: boolean = false) {
     if (!specStore.activeSpec) {
       throw Error(`Cannot run spec when specStore.active spec is null or undefined!`)
     }
 
     autStore.setScriptError(null)
-    UnifiedRunnerAPI.executeSpec(specStore.activeSpec, isRerun)
+    await UnifiedRunnerAPI.executeSpec(specStore.activeSpec, isRerun)
   }
 
   function initializeRunnerLifecycleEvents () {
     // these events do not use GraphQL
-    eventManager.on('restart', () => {
+    eventManager.on('restart', async () => {
       // If we get the event to restart but have already navigated away from the runner, don't execute the spec
       if (specStore.activeSpec) {
         const isRerun = true
 
-        runSpec(isRerun)
+        await runSpec(isRerun)
       }
     })
 
@@ -49,8 +49,8 @@ export function useEventManager () {
       getAutIframeModel().reattachStudio()
     })
 
-    eventManager.on('visit:blank', ({ testIsolation }) => {
-      getAutIframeModel().visitBlankPage(testIsolation)
+    eventManager.on('visit:blank', async ({ testIsolation }) => {
+      await getAutIframeModel().visitBlankPage(testIsolation)
     })
 
     eventManager.on('run:end', () => {
@@ -61,20 +61,20 @@ export function useEventManager () {
 
     eventManager.on('expect:origin', addCrossOriginIframe)
 
-    eventManager.on('testFilter:cloudDebug:dismiss', () => {
+    eventManager.on('testFilter:cloudDebug:dismiss', async () => {
       const currentRoute = router.currentRoute.value
 
       const { mode, ...query } = currentRoute.query
 
       // Delete runId from query which will remove the test filter and trigger a rerun
-      router.replace({ ...currentRoute, query })
+      await router.replace({ ...currentRoute, query })
     })
   }
 
   const startSpecWatcher = () => {
-    return watch(() => specStore.activeSpec, () => {
+    return watch(() => specStore.activeSpec, async () => {
       if (specStore.activeSpec) {
-        runSpec()
+        await runSpec()
       }
     }, { immediate: true, flush: 'post' })
   }

packages/app/src/runner/useRunnerStyle.ts

@@ -114,11 +114,11 @@ export const useRunnerStyle = () => {
 export function useResizablePanels () {
   const preferences = usePreferences()
 
-  const handleResizeEnd = (panel: DraggablePanel) => {
+  const handleResizeEnd = async (panel: DraggablePanel) => {
     if (panel === 'panel1') {
-      preferences.update('specListWidth', specListWidth.value)
+      await preferences.update('specListWidth', specListWidth.value)
     } else {
-      preferences.update('reporterWidth', reporterWidth.value)
+      await preferences.update('reporterWidth', reporterWidth.value)
     }
   }
 

packages/app/src/runs/useProjectRuns.ts

@@ -90,6 +90,7 @@ export const useProjectRuns = (online: Ref<boolean>): RunsComposable => {
   function startPolling () {
     timeout = window.setTimeout(function fetchNewerRuns () {
       if (variables.value && online.value) {
+        // tslint:disable:no-floating-promises
         refetcher.executeMutation(variables.value)
         .then(() => {
           startPolling()
@@ -100,10 +101,10 @@ export const useProjectRuns = (online: Ref<boolean>): RunsComposable => {
     }, POLL_FOR_LATEST)
   }
 
-  onMounted(() => {
+  onMounted(async () => {
     // Always fetch when the component mounts, and we're not already fetching
     if (online.value && !refetcher.fetching) {
-      refetcher.executeMutation(variables.value)
+      await refetcher.executeMutation(variables.value)
     }
 
     startPolling()