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

Restructure API namespace for Cy13 #5053

Closed
wants to merge 20 commits into from

Conversation

BlueWinds
Copy link
Contributor

@BlueWinds BlueWinds commented Feb 7, 2023

Matching code PR: cypress-io/cypress#25738

This PR reorganizes the API docs.

  • It moves all commands - query, action and otherwise - under a single namespace and into the same folder, making them easy to locate alphabetically in the sidebar.
  • I've also added a new table-of-contents page, which groups commands by category - assertions, queries, non-queries, in logical groups with a description of each command, to help users find what they're looking for when they don't know a command name.
  • On each page, I've moved the contents of the "Rules" heading up, to be part of the "Syntax" heading - this puts all the rules of execution (arguments, requirements, assertions, and yielded value) in the same place. Everything you need to know to successfully use a command is up top, rather than split half at the top and half at the bottom of each page.
    • I've updated the "requires being chained off of..." section of each command to make it clearer - many commands ignore the subject they're given, but very few must be chained off cy.
    • For the "Assertions" section of each command, I've clarified what is asserted before a command executes and what is asserted after it executes, for commands which do both.
    • Some commands were missing ways in which they could time out; I've added all that I'm aware of.
    • I've standardized the wording of the "Yields" section, improving how it explains the query/non-query divide. For commands which "yield the dom elements they've found", I de-standardized the language, so the "Yields" sections clearly says what elements the command is locating.

* .readFile() is now a query

* Add section on new .readFile() superpowers

* Fix page slug for readFile

* Prettier run
@vercel
Copy link

vercel bot commented Feb 7, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
cypress-documentation ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 1, 2023 at 3:37PM (UTC)

Co-authored-by: Zach Bloomquist <git@chary.us>
- `cy.exec()` will only run assertions you have chained once, and will not
[retry](/guides/core-concepts/retry-ability).
- `cy.exec()` asserts that the command exits successfully. If the command exits
with a non-zero exit code, `cy.exec()` will fail the test.
Copy link
Member

Choose a reason for hiding this comment

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

if this is the case, why does it yield stderr? Users can assert of use that value?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Many commands write to stderr even when successful. curl is one example.

https://askubuntu.com/questions/944788/how-does-curl-print-to-terminal-while-piping

When you are using curl to open an URL, you'll get two output:

The status of the curl itself.
The contents of that URL.

Curl should use a way to show these two separately otherwise processing of the real output (URL's content) would be hard and I'll end up with unnecessary contents (curl's status).

So it uses stderr for its status and stdout for the content.

You wouldn't usually curl with cy.exec, but it's a common pattern in linux commands.

@@ -213,8 +213,7 @@ cy.readFile(filename, null).then((obj) => {

### Assertions [<Icon name="question-circle"/>](/guides/core-concepts/introduction-to-cypress#Assertions)

- `cy.writeFile()` will only run assertions you have chained once, and will not
[retry](/guides/core-concepts/retry-ability).
- `cy.writeFile()` has no implicit assertions.
Copy link
Member

Choose a reason for hiding this comment

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

above doesn't it say it verify the file contents were successfully written to disk?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

writeFile yields null, and makes no implicit assertions about the subject it yields.

In my mind, and implicit assertion isn't "any way a command could fail" - it's "things Cypress already checks about the subject". You never need to write ".should('exist')" about subjects, because Cypress implicitly asserts that they exist. In this case the subject is null, and there are no implicit assertions that you could make explicit about it.

Copy link
Member

@emilyrohrbough emilyrohrbough left a comment

Choose a reason for hiding this comment

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

Left some comments.

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>
@BlueWinds
Copy link
Contributor Author

Pushed up a reorganization of the /api namespace, including adding a new table of contents.

I still have more feedback to address, but wanted to push up this much for people to look at.

Copy link
Member

@emilyrohrbough emilyrohrbough left a comment

Choose a reason for hiding this comment

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

A few things:
1- can we update this PR title to reflect these changes.
2- I initially only looked at the doc preview since this PR has 111 file changes. with the restructuring of commands layout, I couldn't/still can't determine which commands are assertions or query commands when clicking through the list of commands. I didn't really realize the table of contents was trying to tell this story. Can we add a badge on the command pages to quickly highlight this?

@@ -246,7 +246,7 @@ by [Cypress Ambassador](https://www.cypress.io/ambassadors/) Josh Justice.
## Log Cypress events

Cypress emits multiple events you can listen to as shown below.
[Read more about logging events in the browser here](/api/events/catalog-of-events#Logging-All-Events).
[Read more about logging events in the browser here](/api/cypress-api/catalog-of-events#Logging-All-Events).
Copy link
Member

Choose a reason for hiding this comment

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

The on-link slug needs updated to account for this url change. https://github.com/cypress-io/cypress-services/blob/develop/packages/on/data/links.yml#L518

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That on-link is pointing to a different sort of event, where developers meet up to discuss things. https://www.cypress.io/events/

The slug here looks to be correct to me?

@@ -411,7 +411,7 @@ to either:
- Prevent Cypress from failing the test

This is documented in detail on the
[Catalog Of Events](/api/events/catalog-of-events) page and the recipe
[Catalog Of Events](/api/cypress-api/catalog-of-events) page and the recipe
Copy link
Member

Choose a reason for hiding this comment

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

Should this majority of these changes be a separate PR so these changes can go out now vs waiting for the v13 release?

It also would have been nice if this was its own PR to make this review a bit smaller.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think that it makes sense to roll it out all at once with Cy 13, so that we don't have to create multiple versions of the same changes (eg, create an "assertions" section of the new table of contents, then remove it in another PR on another branch). Reorganizing things piecemeal can result in a disjointed user experience; I'd rather have all the changes living in one branch so we can look at the organization holistically.

@@ -1,5 +1,6 @@
---
title: Catalog of Events
sidebar_position: 10
Copy link
Member

Choose a reason for hiding this comment

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

I would expect events to be its own document / api navigation section. I would not expect to find these under the API section.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I spent some time playing around with the layout of this section, and did a little bit of reorganization.

image

This based on the fact that I really like the way this looks in the table of contents:

image

I think it flows very naturally like this.

docs/api/commands/writefile.mdx Outdated Show resolved Hide resolved
docs/api/commands/writefile.mdx Outdated Show resolved Hide resolved
@@ -57,11 +57,28 @@ Pass in an options object to change the default behavior of `.uncheck()`.
| `timeout` | [`defaultCommandTimeout`](/guides/references/configuration#Timeouts) | Time to wait for `.uncheck()` to resolve before [timing out](#Timeouts) |
| `waitForAnimations` | [`waitForAnimations`](/guides/references/configuration#Actionability) | Whether to wait for elements to [finish animating](/guides/core-concepts/interacting-with-elements#Animations) before executing the command. |

### Requirements [<Icon name="question-circle"/>](/guides/core-concepts/introduction-to-cypress#Chains-of-Commands)
Copy link
Member

Choose a reason for hiding this comment

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

I don't mind how this reads, but I do not believe the section Syntax is the correct heading for these concepts since this is more than the syntax at this time.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point. I played around with it a bit and came up with this:

image

How does this look, moving the most basic syntax up top, under the summary of the command, and making "Usage" the top-level header, and having the correct / incorrect just directly under it without a subheader of their own.

Copy link
Contributor Author

@BlueWinds BlueWinds Mar 9, 2023

Choose a reason for hiding this comment

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

I haven't applied them to every command yet because it'd involve manually moving around each file for a direction I'm not 100% sure on yet.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Applied it to the first three commands: .and(), .as(), and .blur(), so people can see it 'live'. If we like the direction I'll go through and apply it to all commands.

### Yields [<Icon name="question-circle"/>](/guides/core-concepts/introduction-to-cypress#Subject-Management)

- `cy.window()` is a query command, and is
Copy link
Member

Choose a reason for hiding this comment

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

I'd expect this to be the second bullet after we say what it yields

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So the reason I put the "is a query command" first is that some commands have long yields sections. Eg:

image


I was aiming to always have it in the same place (eg, first or second), and in the cases where we need to spend time explaining what's yielded in more detail, having it second ended up making it feel buried under the other text.

image


I'd be fine breaking the consistency here, having it sometimes below what's actually yielded (you're right it is better in the short case) and sometimes above (I do think it needs to come first in the 'long case'). Thoughts?

docs/api/commands/wait.mdx Outdated Show resolved Hide resolved
Comment on lines 76 to 78
to go out.
- When given an alias algument, `cy.wait()` can time out waiting for the
response to return.
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
to go out.
- When given an alias algument, `cy.wait()` can time out waiting for the
response to return.
to go out or the
response to return.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I broke this out into two sentences because you can specify different request and response timeouts - it seemed like two different timeout options = two different ways it can time out.


### Assertions [<Icon name="question-circle"/>](/guides/core-concepts/introduction-to-cypress#Assertions)

- Before executing, `.uncheck()` will wait for the element to reach an
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
- Before executing, `.uncheck()` will wait for the element to reach an
- Before executing, `.uncheck()` will wait for the subject to reach an

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why would we use a more generic term here? We know it's an element(s), rather than any generic "subject" (this is also detailed above as one of the 'requirements' of the command).

@BlueWinds BlueWinds changed the title .should() and .and() are now queries. Restructure API namespace for Cy13 Mar 9, 2023
@BlueWinds
Copy link
Contributor Author

A few things:
1- can we update this PR title to reflect these changes.

Done.

2- I initially only looked at the doc preview since this PR has 111 file changes. with the restructuring of commands layout, I couldn't/still can't determine which commands are assertions or query commands when clicking through the list of commands. I didn't really realize the table of contents was trying to tell this story. Can we add a badge on the command pages to quickly highlight this?

A badge is possible, I'm just not sure the benefit. When visiting a command page, do you need to tell at a glance if a command is a query or not? I put it in the ### Yields section of each command because that's where I felt it was relevant, when chaining commands together.

Base automatically changed from release-13.0.0 to v13.0.0 June 20, 2023 19:43
@AtofStryker
Copy link
Contributor

closing as this work is unplanned for the v13 release

@AtofStryker AtofStryker closed this Jul 5, 2023
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.

None yet

6 participants