Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add type linting + compilation checks to packages #30776

Open
wants to merge 27 commits into
base: develop
Choose a base branch
from

Conversation

jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Dec 17, 2024

Additional details

We aren't running typescript linting or compilation checks in many of our packages, so this is meant to remedy some of that. There were a lot of failures.

NOTE: This does not include running tsc on the runner package since there were a lot more errors, but it is running tslint. See here: https://github.com/cypress-io/cypress/pull/30776/files#diff-3f56f0ca38e3b8dff3d2436a8f56f2cfb94120eeaa9af84182dce52d8a87d751R10

Steps to test

How has the user experience changed?

PR Tasks

@jennifer-shehane jennifer-shehane self-assigned this Dec 17, 2024
Copy link

cypress bot commented Dec 17, 2024

cypress    Run #59937

Run Properties:  status check failed Failed #59937  •  git commit 9a63c6c25a: update types/react resolution
Project cypress
Branch Review runner-check-ts
Run status status check failed Failed #59937
Run duration 26m 38s
Commit git commit 9a63c6c25a: update types/react resolution
Committer Jennifer Shehane
View all properties for this run ↗︎

Test results
Tests that failed  Failures 1
Tests that were flaky  Flaky 6
Tests that did not run due to a developer annotating a test with .skip  Pending 1099
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 26476
View all changes introduced in this branch ↗︎
UI Coverage  45.83%
  Untested elements 190  
  Tested elements 165  
Accessibility  92.56%
  Failed rules  3 critical   8 serious   2 moderate   2 minor
  Failed elements 887  

Tests for review

Failed  cypress/e2e/runner/ct-framework-errors.cy.ts • 1 failed test • app-e2e

View Output

Test Artifacts
Vue > error conditions Test Replay Screenshots
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Screenshots
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Test Replay Screenshots
Flakiness  commands/waiting.cy.js • 2 flaky tests • 5x-driver-chrome

View Output

Test Artifacts
... > errors > throws when route is never resolved Test Replay
... > errors > throws when waiting for 2nd response to route Test Replay
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Test Replay Screenshots
Flakiness  issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output

Test Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed Test Replay Screenshots

@jennifer-shehane jennifer-shehane changed the title chore: add type linting + compilation checks to runner package chore: add type linting + compilation checks to packages Dec 17, 2024
defaultMessages.specPage.banners.componentTesting.title = ctBannerTitle.replace('{0}', 'React')
}

cy.wrap(Object.entries(defaultMessages.specPage.banners[camelCase(bannerTestId)])).each((entry) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this assertion because after my updates, the rendering of the banner content was broken, but I only detected this through Percy. We should have a test that asserts on the content for the future.

Copy link
Contributor

@cacieprins cacieprins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Most comments are about noting why the floating promises rule is disabled when it is, some potentially unnecessary async/await patterns, and unwrapping .thens in async functions. Nothing show-stopping!

})

// initialize spec filter in store
// tslint:disable:no-floating-promises
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a comment about why the floating promise rule is disabled?

@@ -1749,6 +1749,7 @@ describe('network stubbing', { retries: 15 }, function () {
}).as('create')

cy.then(() => {
// tslint:disable:no-floating-promises
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can the fetch() be returned? That way the cy.then will wait for the promise to be resolved ... unless that introduces flake?

@@ -50,6 +50,7 @@ describe('Proxy Logging', () => {
// TODO(webkit): fix+unskip for webkit release
browser: '!webkit',
}, (done) => {
// tslint:disable:no-floating-promises
fetch('/some-url')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would cy.wrap cause issues with the test?

@@ -212,6 +212,7 @@ describe('cy.origin Cypress API', { browser: '!webkit' }, () => {
})

cy.origin('http://www.foobar.com:3500', () => {
// tslint:disable:no-floating-promises
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cy.then(Cypress.session.clearCurrentSessionData) maybe?

@@ -309,6 +309,7 @@ describe('src/cross-origin/patches', { browser: '!webkit', defaultCommandTimeout
let url = new URL('/test-request', 'http://app.foobar.com:3500').toString()

return new Promise<void>((resolve, reject) => {
// tslint:disable:no-floating-promises
fetch(url, {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fetch itself returns a promise, creating a promise here isn't really necessary, just return fetch()

// only send up page loading events when we're
// not stable!
stabilityChanged(Cypress, state, config, bool)
await stabilityChanged(Cypress, state, config, bool)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changing to async/await can add an unnecessary promise layer - will just return stabilityChanged(..etc) work?

@@ -22,14 +22,14 @@ export class CDPBrowserSocket extends Emitter implements SocketShape {

this._namespace = namespace

const send = (payload: string) => {
const send = async (payload: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be a little easier to read:

const send = async (payload: string) => {
  const parsed = JSON.parse(payload)
  const [event, callbackEvent, args] = await decode(parsed)
  super.emit(event, ...args)
  await this.emit(callbackEvent)
}

@@ -65,7 +66,7 @@ export class CDPBrowserSocket extends Emitter implements SocketShape {
this.once(uuid, callback)
}

encode([event, uuid, args], this._namespace).then((encoded: any) => {
await encode([event, uuid, args], this._namespace).then((encoded: any) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above - since this fn is changing to async/await, it's a good time to unwrap the .then

@@ -1,7 +1,7 @@
{
"compilerOptions": {
/* Basic Options */
"target": "es2015",
"target": "es2017",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

es2022 doesn't work here?

@@ -24,4 +24,5 @@ async function build () {
await fs.remove(iconsetPath)
}

// tslint:disable:no-floating-promises
build()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could do something like this for better error handling here (and to get rid of the tslint:disable)

Suggested change
build()
build().then(() => {
console.log('icons successfully built')
}).catch((error) => {
console.log('icons failed to build', error)
})

@@ -11,6 +11,7 @@ const files = [
fs.readFileSync('./assets/icons/icon_256x256.png'),
]

// tslint:disable:no-floating-promises
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing here. Could add some error handling.

@jennifer-shehane
Copy link
Member Author

@ryanthemanuel @cacieprins I would prefer to address any optimizations to async/things commented out in a followup PR since the last time I tried to touch the passing PR it took a whole week before I could get it in again - especially with the amount of conflicts I continue to deal with with the amount of code this touches.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants