mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-02-21 14:41:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

comment out unfinished documentation

Browse Source
This commit is contained in:
Jennifer Shehane
2017-06-13 14:05:10 -04:00
parent 879019819f
commit 63c6b62ba7
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/source/guides/getting-started/writing-your-first-test.md
View File

@@ -9,15 +9,15 @@ title: Writing Your First Test
- Basic web navigation, DOM selection, and assertions
{% endnote %}
# Visual Learners
<!-- # Visual Learners
Now we're going to dig in and write our first test in Cypress.
_Aside: Is this your first test **ever**? It's OK if so! We're willing to teach if you're willing to learn._
_Aside: Is this your first test **ever**? It's OK if so! We're willing to teach if you're willing to learn._ -->
## Organizing Tests with `describe`, `context`, and `it`
# Organizing Tests with `describe`, `context`, and `it`
Cypress uses the nested, functional style of organizing tests made popular by the RSpec, Jasmine, and Mocha communities. (In fact, Cypress bundles and improves on Mocha to provide this support.) It looks like this:
Cypress uses the nested, functional style of organizing tests made popular by the {% url 'RSpec' http://rspec.info/ %}, {% url 'Jasmine' https://jasmine.github.io/ %}, and {% url 'Mocha' https://mochajs.org/ %} communities. (In fact, Cypress {% url 'bundles and improves on Mocha' bundled-tools#Mocha %} to provide this support.) It looks like this:
```js
describe('The Pricing Page', function() {
@@ -26,20 +26,24 @@ describe('The Pricing Page', function() {
})
context('buttons', function() {
it('have the label "buy this"', function() {
it('has the label "buy this"', function() {
// test code...
})
})
})
```
Notice the clean, hierarchical flow of our tests when written in this way. You can nest as many `describe` and `context` blocks under the top-level `describe` as you wish (`describe` and `context` are aliases for each other, use whichever you prefer.) Tests will be defined inside the `it` blocks, and get run sequentially.
Notice the clean, hierarchical flow of our tests when written in this way. You can nest as many `describe` and `context` blocks under the top-level `describe` as you wish
When we load up this file inside Cypress, we can see the hierarchy clearly:
> `describe` and `context` are aliases for each other, use whichever you prefer!
Cypress has also noticed that these tests are empty, and marked them "pending". Let's implement them now!
Tests will be defined inside `it` blocks, and get run sequentially.
## Interacting with the Page
<!-- When we load up this file inside Cypress, we can see the hierarchy clearly: -->
<!-- Cypress has also noticed that these tests are empty, and marked them "pending". Let's implement them now! -->
<!-- # Interacting with the Page
Implement `cy.visit(kitchen sink url)`, show in cypress
_Aside: Visiting non-development URLs is an anti-pattern: don't do this for real tests, you should ALWAYS be testing against a development build!_
@@ -48,7 +52,7 @@ Implement `cy.get()` incorrectly, look at error in cypress
Fix `cy.get()`, add a `.click()`
Find something to assert on in the final state
## More Organization with `beforeEach` and `afterEach` Hooks
# More Organization with `beforeEach` and `afterEach` Hooks
Implement a 2nd test
Utilize `.beforeEach` to do the `cy.visit()`
Utilize `.beforeEach` to do the `cy.visit()` -->