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: refactor cy funcs #19080

Merged
merged 24 commits into from
Dec 8, 2021

Conversation

sainthkh
Copy link
Contributor

@sainthkh sainthkh commented Nov 23, 2021

User facing changelog

N/A. It's a refactoring.

Additional details

  • Why was this change necessary? => To use modern syntax to define a class, not _.extend().
  • What is affected by this change? => N/A
  • Any implementation details to explain? => I moved cy functions to class $Cy.

How has the user experience changed?

N/A

PR Tasks

  • [na] Have tests been added/updated?
  • [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • [na] Has a PR for user-facing changes been opened in cypress-documentation?
  • [na] Have API changes been updated in the type definitions?
  • [na] Have new configuration options been added to the cypress.schema.json?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 23, 2021

Thanks for taking the time to open a PR!

@sainthkh sainthkh force-pushed the refactor-cy-funcs branch 3 times, most recently from a9905ac to 7bd9315 Compare November 25, 2021 02:24
@sainthkh sainthkh marked this pull request as ready for review November 26, 2021 00:44
@sainthkh sainthkh requested a review from a team as a code owner November 26, 2021 00:44
@sainthkh sainthkh requested review from jennifer-shehane and removed request for a team November 26, 2021 00:44
@jennifer-shehane jennifer-shehane removed their request for review November 29, 2021 16:37
@@ -14,7 +14,7 @@ import browserInfo from './cypress/browser'
import $scriptUtils from './cypress/script_utils'

import $Commands from './cypress/commands'
import $Cy from './cypress/cy'
import { $Cy } from './cypress/cy'
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
import { $Cy } from './cypress/cy'
import { Cy } from './cypress/cy'

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The name of the internal class is $Cy, not Cy.

Comment on lines -87 to -89
const add = (command) => {
queue.add(command)
}
Copy link
Member

Choose a reason for hiding this comment

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

Did this get dropped on accident?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This can be deleted because we are using inheritance in the new code.

timeout: any
whenStable: any
cleanup: any
fail: any
Copy link
Member

@emilyrohrbough emilyrohrbough Nov 29, 2021

Choose a reason for hiding this comment

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

Shouldn't timeout, cleanup, fail, be of type func?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Precisely, they are $Cy['timeout'], $Cy['cleanup'], $Cy['fail']. But the problem is that it creates a circular reference problem because command_queue is required in cy.ts.

The goal of this PR is migrating functions inside _.extend(cy, {}) to $Cy class. So, I left them out for the later PR.

whenStable: any
cleanup: any
fail: any
isCy: any
Copy link
Member

Choose a reason for hiding this comment

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

Should the types match what is documented?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right. I'll handle this in the part 3 of this PR series.

export class CommandQueue extends Queue<Command> {
state: any
timeout: any
whenStable: any
Copy link
Member

Choose a reason for hiding this comment

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

Isn't this a promise type?

Copy link
Contributor Author

@sainthkh sainthkh Nov 30, 2021

Choose a reason for hiding this comment

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

Yes, it's a function that returns a Promise (code here).

As I said above, it's left out for the part 3.

I decided to do this later because this PR is big enough for now(+1000/-1000) and there are some hard things like state below and other problems hidden by //@ts-nocheck.

const logs = (filter) => {
let logs = _.flatten(_.invokeMap(queue.get(), 'get', 'logs'))
export class CommandQueue extends Queue<Command> {
state: any
Copy link
Member

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The type of state function isn't that easy. To make it useful for our development, we need to create a new definition like:

interface StateFunc {
  (param: 'document') => Document
  (param: 'done') => boolean
 // etc..
}

I left it as any to do this work in the next PR.

// push these onto the beginning of the commands array
memo.unshift(command)
const wrap = function (firstCall) {
fn = cy.commandFns[name]
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
fn = cy.commandFns[name]
fn = this.commandFns[name]

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It should be cy because wrap function is not an arrow function. When we use this, this tries to find the value connected with wrap, not the instance of class $Cy.

// create cy and expose globally
this.cy = $Cy.create(specWindow, this, this.Cookies, this.state, this.config, logFn)
this.cy = new $Cy(specWindow, this, this.Cookies, this.state, this.config)
Copy link
Contributor

Choose a reason for hiding this comment

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

For curious reviewers, logFn isn't used by the constructor (or even the create function at this point) so it's safe to omit.

export default {
create: <T>(queueables: T[] = []) => {
let stopped = false
export class Queue<T> {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we continue to have this be the default export?

Copy link
Contributor Author

@sainthkh sainthkh Nov 30, 2021

Choose a reason for hiding this comment

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

There is no written or public guideline for Cypress project. But default is usually removed, because it's a translation of module.exports = {}.

Can I ask you why we should use default for this?

Copy link
Contributor

Choose a reason for hiding this comment

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

It was previously the default export, so I was just curious why it changed. For files that have a single export that is sufficiently described by the file name, I have preferred a default export over an individual one.

But without an active lint rule or other guidelines to enforce it, this is fine if it's consistent with other files in the package.

@flotwig flotwig self-requested a review December 1, 2021 16:35
Copy link
Contributor

@tbiethman tbiethman left a comment

Choose a reason for hiding this comment

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

I took the changes for a test drive and saw no issues locally 👍

@jennifer-shehane jennifer-shehane merged commit d18878f into cypress-io:develop Dec 8, 2021
tgriesser added a commit that referenced this pull request Dec 15, 2021
* develop:
  chore(deps): update dependency ssri to 6.0.2 [security] (#19351)
  chore: Fix server unit tests running on mac by using actual tmp dir (#19350)
  fix: Add more precise types to Cypress.Commands (#19003)
  fix: Do not screenshot or trigger the failed event when tests are skipped (#19331)
  fix (#19262)
  fix: throw when writing to 'read only' properties of `config` (#18896)
  fix: close chrome when closing electron (#19322)
  fix: disable automatic request retries (#19161)
  chore: refactor cy funcs (#19080)
  chore(deps): update dependency @ffmpeg-installer/ffmpeg to v1.1.0 🌟 (#19300)
tgriesser added a commit that referenced this pull request Dec 16, 2021
…cycle

* 10.0-release:
  build: remove syncRemoteGraphQL from codegen
  chore: fix incorrect type from merge
  build: allow work with local dashboard (#19376)
  chore: Test example recipes against chrome (#19362)
  test(unify): Settings e2e tests (#19324)
  chore(deps): update dependency ssri to 6.0.2 [security] (#19351)
  fix: spec from story generation, add deps for install (#19352)
  chore: Fix server unit tests running on mac by using actual tmp dir (#19350)
  fix: Add more precise types to Cypress.Commands (#19003)
  fix: Do not screenshot or trigger the failed event when tests are skipped (#19331)
  fix (#19262)
  fix: throw when writing to 'read only' properties of `config` (#18896)
  fix: close chrome when closing electron (#19322)
  fix: disable automatic request retries (#19161)
  chore: refactor cy funcs (#19080)
  chore(deps): update dependency @ffmpeg-installer/ffmpeg to v1.1.0 🌟 (#19300)
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.

6 participants