test(e2e): convert cypress to typescript (PostHog#13513)

cypress/e2e/actions.js → cypress/e2e/actions.ts

@@ -1,4 +1,4 @@
-const createAction = (actionName) => {
+const createAction = (actionName: string): void => {
     cy.get('[data-attr=create-action]').click()
     cy.get('.LemonButton').should('contain', 'From event or pageview')
     cy.get('[data-attr=new-action-pageview]').click()
@@ -13,7 +13,7 @@ const createAction = (actionName) => {
     cy.contains('Action saved').should('exist')
 }
 
-function navigateToActionsTab() {
+function navigateToActionsTab(): void {
     cy.clickNavMenu('datamanagement')
     cy.get('[data-attr=data-management-actions-tab]').click()
 }

cypress/e2e/dashboard.js → cypress/e2e/dashboard.ts

@@ -1,6 +1,6 @@
-import { randomString } from 'cypress/support/random'
 import { urls } from 'scenes/urls'
-import { insight, savedInsights, dashboards, dashboard, duplicateDashboardFromMenu } from 'cypress/productAnalytics'
+import { randomString } from '../support/random'
+import { insight, savedInsights, dashboards, dashboard, duplicateDashboardFromMenu } from '../productAnalytics'
 
 describe('Dashboard', () => {
     beforeEach(() => {

cypress/e2e/events.js → cypress/e2e/events.ts

@@ -1,6 +1,6 @@
 import { dayjs } from 'lib/dayjs'
 
-const interceptPropertyDefinitions = () => {
+const interceptPropertyDefinitions = (): void => {
     cy.intercept('api/projects/@current/property_definitions/?limit=5000', {
         fixture: 'api/event/property_definitions',
     })
@@ -22,14 +22,14 @@ const interceptPropertyDefinitions = () => {
     })
 }
 
-const selectNewTimestampPropertyFilter = () => {
+const selectNewTimestampPropertyFilter = (): void => {
     cy.get('[data-attr=new-prop-filter-EventsTable]').click()
     cy.get('[data-attr=taxonomic-filter-searchfield]').type('$time')
     cy.get('.taxonomic-list-row').should('have.length', 1)
     cy.get('[data-attr=prop-filter-event_properties-0]').click({ force: true })
 }
 
-const selectOperator = (operator, openPopUp) => {
+const selectOperator = (operator: string, openPopUp: boolean): void => {
     if (openPopUp) {
         cy.get('[data-attr="property-filter-0"] .property-filter .property-filter-button-label').click()
     }
@@ -42,7 +42,7 @@ const selectOperator = (operator, openPopUp) => {
     cy.get('.operator-value-option').contains(operator).click()
 }
 
-const changeSecondPropertyFilterToDateAfter = () => {
+const changeSecondPropertyFilterToDateAfter = (): void => {
     selectOperator('> after', true)
 }
 

cypress/productAnalytics/index.js → cypress/productAnalytics/index.ts

@@ -1,43 +1,43 @@
 import { urls } from 'scenes/urls'
 
 export const savedInsights = {
-    checkInsightIsInListView: (insightName) => {
+    checkInsightIsInListView: (insightName: string): void => {
         cy.visit(urls.savedInsights())
         cy.contains('.saved-insights table tr', insightName).should('exist')
     },
-    checkInsightIsNotInListView: (insightName) => {
+    checkInsightIsNotInListView: (insightName: string): void => {
         cy.visit(urls.savedInsights())
         cy.contains('.saved-insights table tr', insightName).should('not.exist')
     },
-    createNewInsightOfType: (insightType) => {
+    createNewInsightOfType: (insightType: string): void => {
         cy.visit('/saved_insights/') // Should work with trailing slash just like without it
         cy.get('[data-attr=saved-insights-new-insight-dropdown]').click()
         cy.get(`[data-attr-insight-type="${insightType || 'TRENDS'}"`).click()
     },
 }
 
 export const insight = {
-    applyFilter: () => {
+    applyFilter: (): void => {
         cy.get('[data-attr=insight-filters-add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })
         cy.get('[data-attr=prop-val]').click()
         cy.get('[data-attr=prop-val-0]').click({ force: true })
     },
-    editName: (insightName) => {
+    editName: (insightName: string): void => {
         if (insightName) {
             cy.get('[data-attr="insight-name"] [data-attr="edit-prop-name"]').click()
             cy.get('[data-attr="insight-name"] input').type(insightName)
             cy.get('[data-attr="insight-name"] [title="Save"]').click()
         }
     },
-    save: () => {
+    save: (): void => {
         cy.get('[data-attr="insight-save-button"]').click()
         // wait for save to complete and URL to change and include short id
         cy.url().should('not.include', '/new')
     },
-    addInsightToDashboard: (dashboardName) => {
+    addInsightToDashboard: (dashboardName: string): void => {
         cy.intercept('PATCH', /api\/projects\/\d+\/insights\/\d+\/.*/).as('patchInsight')
 
         cy.get('[data-attr="save-to-dashboard-button"]').click()
@@ -53,7 +53,7 @@ export const insight = {
 }
 
 export const dashboards = {
-    createDashboardFromDefaultTemplate: (dashboardName) => {
+    createDashboardFromDefaultTemplate: (dashboardName: string): void => {
         cy.get('[data-attr="new-dashboard"]').click()
         cy.get('[data-attr=dashboard-name-input]').clear().type(dashboardName)
         cy.get('[data-attr=copy-from-template]').click()
@@ -63,12 +63,12 @@ export const dashboards = {
 
         cy.contains(dashboardName).should('exist')
     },
-    createAndGoToEmptyDashboard: (dashboardName) => {
+    createAndGoToEmptyDashboard: (dashboardName: string): void => {
         cy.get('[data-attr="new-dashboard"]').click()
         cy.get('[data-attr=dashboard-name-input]').clear().type(dashboardName)
         cy.get('button[data-attr="dashboard-submit-and-go"]').click()
     },
-    visitDashboard: (dashboardName) => {
+    visitDashboard: (dashboardName: string): void => {
         cy.get('[placeholder="Search for dashboards"]').type(dashboardName)
 
         cy.contains('[data-attr="dashboards-table"] tr', dashboardName).within(() => {
@@ -78,7 +78,7 @@ export const dashboards = {
 }
 
 export const dashboard = {
-    addInsightToEmptyDashboard: (insightName) => {
+    addInsightToEmptyDashboard: (insightName: string): void => {
         cy.intercept('POST', /api\/projects\/\d+\/insights\//).as('postInsight')
 
         cy.get('[data-attr=dashboard-add-graph-header]').contains('Add insight').click()
@@ -96,14 +96,14 @@ export const dashboard = {
     },
 }
 
-export function createInsight(insightName) {
+export function createInsight(insightName: string): void {
     savedInsights.createNewInsightOfType('TRENDS')
     insight.applyFilter()
     insight.editName(insightName)
     insight.save()
 }
 
-export function duplicateDashboardFromMenu(duplicateTiles) {
+export function duplicateDashboardFromMenu(duplicateTiles = false): void {
     cy.contains('.LemonButton', 'Duplicate').click()
     if (duplicateTiles) {
         cy.contains('.LemonCheckbox', "Duplicate this dashboard's tiles").click()

cypress/support/accessibility.js → cypress/support/accessibility.ts

@@ -1,4 +1,6 @@
-export const reportA11y = (options, tag, skipFailures = true) => {
+import { Options } from 'cypress-axe'
+
+export const reportA11y = (options: Options, tag: string, skipFailures = true): void => {
     if (typeof tag !== undefined) {
         tag += '-'
     }

cypress/support/commands.js → cypress/support/commands.ts

@@ -1,12 +1,3 @@
-const patternHandler = {}
-
-Cypress.Commands.add('interceptLazy', (pattern, handler) => {
-    patternHandler[pattern] = handler
-    return cy.intercept(pattern, (req) => {
-        req.reply(patternHandler[pattern]())
-    })
-})
-
 Cypress.Commands.add('login', () => {
     // This function isn't used for every test anymore
     cy.get('[data-attr=login-email]').type('[email protected]').should('have.value', '[email protected]').blur()
@@ -19,14 +10,6 @@ Cypress.Commands.add('login', () => {
     cy.location('pathname').should('not.eq', '/login') // Wait until login request fully completes
 })
 
-Cypress.Commands.add('overrideInterceptLazy', (pattern, handler) => {
-    patternHandler[pattern] = handler
-})
-
-Cypress.Commands.add('map', { prevSubject: true }, (subject, method) => {
-    return method(subject)
-})
-
 Cypress.Commands.add('clickNavMenu', (name) => {
     cy.get(`[data-attr="menu-item-${name}"]`).click()
 })

cypress/support/e2e.js → cypress/support/e2e.ts

@@ -1,7 +1,7 @@
 import 'givens/setup'
 import './commands'
 import 'cypress-axe'
-import { decideResponse } from 'cypress/fixtures/api/decide'
+import { decideResponse } from '../fixtures/api/decide'
 
 try {
     // eslint-disable-next-line @typescript-eslint/no-var-requires

cypress/support/index.ts

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Custom command to login to PostHog
+             */
+            login(): Chainable<Element>
+
+            /**
+             * Custom command to click a navigation menu item
+             * @example cy.clickNavMenu('dashboards')
+             */
+            clickNavMenu(name: string): Chainable<Element>
+        }
+    }
+}
+
+export {}

cypress/support/random.ts

@@ -0,0 +1,4 @@
+export function randomString(prefix = ''): string {
+    const uuid = (): number => Cypress._.random(0, 1e6)
+    return `${prefix}${uuid()}`
+}

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "baseUrl": "../frontend",
+        "paths": {
+            "lib/*": ["src/lib/*"],
+            "scenes/*": ["src/scenes/*"]
+        },
+        "target": "es5",
+        "lib": ["es5", "dom"],
+        "types": ["cypress", "node"]
+    }
+}