-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
UI tests for Gatsbygram #4790
Merged
KyleAMathews
merged 9 commits into
gatsbyjs:master
from
tsriram:gatsbygram-cypress-test
Apr 14, 2018
Merged
UI tests for Gatsbygram #4790
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
382ef28
add cypress as a dev dependency
tsriram e4e4381
:tada: initial cypress tests for site title & some data
tsriram c0076d4
more tests for home page
tsriram 3c14719
tests for about page
tsriram 3090f27
more tests for home page
tsriram 9df98d8
remove dummy files created by cypress
tsriram 7e44943
update all gatsby dependencies to latest tag
tsriram cdb0098
Run cypress tests on CI
tsriram 6748a67
remove cypress record temporarily
tsriram File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| public | ||
| .cache | ||
| node_modules | ||
| cypress/videos/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "baseUrl": "http://localhost:8000", | ||
| "fixturesFolder": "data", | ||
| "projectId": "c9d3r3" | ||
| } |
28 changes: 28 additions & 0 deletions
28
examples/gatsbygram/cypress/integration/about_page_spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| describe(`About Page`, () => { | ||
| it(`successfully loads`, () => { | ||
| cy.visit(`/about`) | ||
| }) | ||
|
|
||
| it(`contains the title with an SVG icon and text "Gatsbygram"`, () => { | ||
| cy.getTestElement(`site-title`).get(`svg`) | ||
| cy.getTestElement(`site-title`).contains(`Gatsbygram`) | ||
| }) | ||
|
|
||
| it(`clicking on site title takes to home page`, () => { | ||
| cy.getTestElement(`site-title`).click() | ||
| cy.url().should(`eq`, `${Cypress.config(`baseUrl`)}/`) | ||
|
|
||
| // go back to about page for further testing | ||
| cy.visit(`/about`) | ||
| }) | ||
|
|
||
| it(`contains a link to about page in nav bar and it works`, () => { | ||
| cy.getTestElement(`about-link`).contains(`About`) | ||
| cy.getTestElement(`about-link`).click() | ||
| cy.url().should(`eq`, `${Cypress.config(`baseUrl`)}/about/`) | ||
| }) | ||
|
|
||
| it(`displays title of the page`, () => { | ||
| cy.getTestElement(`about-title`).contains(`About Gatsbygram`) | ||
| }) | ||
| }) |
106 changes: 106 additions & 0 deletions
106
examples/gatsbygram/cypress/integration/home_page_spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
|
|
||
| describe(`The Home Page`, () => { | ||
| it(`successfully loads`, () => { | ||
| cy.visit(`/`) | ||
| }) | ||
|
|
||
| it(`contains the title with an SVG icon and text "Gatsbygram"`, () => { | ||
| cy.getTestElement(`site-title`).get(`svg`) | ||
| cy.getTestElement(`site-title`).contains(`Gatsbygram`) | ||
| }) | ||
|
|
||
| it(`contains a link to about page in nav bar and it works`, () => { | ||
| cy.getTestElement(`about-link`).contains(`About`) | ||
| cy.getTestElement(`about-link`).click() | ||
| cy.url().should(`eq`, `${Cypress.config(`baseUrl`)}/about/`) | ||
| // go back to home page | ||
| cy.visit(`/`) | ||
| }) | ||
|
|
||
| it(`renders user avatar and name`, () => { | ||
| cy.getTestElement(`user-avatar`).get(`img`) | ||
| cy.getTestElement(`username`).contains(`kyle__mathews`) | ||
| }) | ||
|
|
||
| it(`shows user's posts and followers count`, () => { | ||
| cy.getTestElement(`user-meta`).contains(`100 posts`) | ||
| cy.getTestElement(`user-meta`).contains(`192k followers`) | ||
| }) | ||
|
|
||
| it(`shows number of likes when hovered on a post`, () => { | ||
| cy.fixture(`posts`).then((postsData) => { | ||
| const post = postsData[0] | ||
| cy.getTestElement(`post`).first().trigger(`mouseover`) | ||
| cy.getTestElement(`likes`).contains(post.likes) | ||
| cy.getTestElement(`post`).first().trigger(`mouseout`) | ||
| }) | ||
| }) | ||
|
|
||
| it(`opens and closes a post`, () => { | ||
| cy.fixture(`posts`).then((postsData) => { | ||
| const post = postsData[0] | ||
| cy.getTestElement(`post`).first().click() | ||
| cy.url().should('contain', post.id) | ||
| cy.getTestElement(`post-detail-avatar`).should(`have.attr`, `src`, post.avatar) | ||
| cy.getTestElement(`post-detail-username`).contains(post.username) | ||
| cy.getTestElement(`post-detail-likes`).contains(post.likes) | ||
| cy.getTestElement(`post-detail-text`).contains(post.username) | ||
| cy.getTestElement(`post-detail-text`).contains(post.text) | ||
| cy.getTestElement(`modal-close`).click() | ||
| cy.url().should(`eq`, `${Cypress.config(`baseUrl`)}/`) | ||
| }) | ||
| }) | ||
|
|
||
| it(`goes to next / previous post on clicking arrow icons`, () => { | ||
| cy.fixture(`posts`).then((postsData) => { | ||
| const post1 = postsData[0] | ||
| const post2 = postsData[1] | ||
| // open fist post | ||
| cy.getTestElement(`post`).first().click() | ||
| cy.url().should('contain', post1.id) | ||
| // click right arrow icon to go to 2nd post | ||
| cy.getTestElement(`next-post`).click() | ||
| cy.url().should('contain', post2.id) | ||
| // press left arrow to go back to 1st post | ||
| cy.getTestElement(`previous-post`).click() | ||
| cy.url().should('contain', post1.id) | ||
| // close the post | ||
| cy.getTestElement(`modal-close`).click() | ||
| }) | ||
| }) | ||
|
|
||
| it(`goes to next / previous post with keyboard shortcut`, () => { | ||
| cy.fixture(`posts`).then((postsData) => { | ||
| const post1 = postsData[0] | ||
| const post2 = postsData[1] | ||
| // open fist post | ||
| cy.getTestElement(`post`).first().click() | ||
| cy.url().should('contain', post1.id) | ||
| // press right arrow to go to 2nd post | ||
| cy.get(`body`).type(`{rightarrow}`) | ||
| cy.url().should('contain', post2.id) | ||
| // press left arrow to go back to 1st post | ||
| cy.get(`body`).type(`{leftarrow}`) | ||
| cy.url().should('contain', post1.id) | ||
| // close the post | ||
| cy.getTestElement(`modal-close`).click() | ||
| }) | ||
| }) | ||
|
|
||
| it(`loads more posts when Load More button is clicked & on scroll`, () => { | ||
| // initially loads 12 posts | ||
| cy.getTestElement(`post`).should('have.length', 12) | ||
|
|
||
| // loads 12 more posts when Load More button is clicked | ||
| cy.getTestElement(`load-more`).click() | ||
| cy.getTestElement(`post`).should('have.length', 24) | ||
|
|
||
| // loads 12 more posts when scrolled to bottom | ||
| // cy.getTestElement(`home-container`).scrollTo(`0%`, `99%`) | ||
| cy.window().scrollTo(`bottom`) | ||
| cy.getTestElement(`post`).should('have.length', 36) | ||
|
|
||
| // let's go back to top | ||
| cy.window().scrollTo(`top`) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // *********************************************** | ||
| // This example commands.js shows you how to | ||
| // create various custom commands and overwrite | ||
| // existing commands. | ||
| // | ||
| // For more comprehensive examples of custom | ||
| // commands please read more here: | ||
| // https://on.cypress.io/custom-commands | ||
| // *********************************************** | ||
| // | ||
| // | ||
| // -- This is a parent command -- | ||
| // Cypress.Commands.add("login", (email, password) => { ... }) | ||
| // | ||
| // | ||
| // -- This is a child command -- | ||
| // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) | ||
| // | ||
| // | ||
| // -- This is a dual command -- | ||
| // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) | ||
| // | ||
| // | ||
| // -- This is will overwrite an existing command -- | ||
| // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) | ||
|
|
||
| // copied from here - https://github.com/cypress-io/cypress/issues/1212#issuecomment-360395261 | ||
| Cypress.Commands.add("getTestElement", (selector) => { | ||
| return cy.get(`[data-testid="${selector}"]`) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // *********************************************************** | ||
| // This example support/index.js is processed and | ||
| // loaded automatically before your test files. | ||
| // | ||
| // This is a great place to put global configuration and | ||
| // behavior that modifies Cypress. | ||
| // | ||
| // You can change the location of this file or turn off | ||
| // automatically serving support files with the | ||
| // 'supportFile' configuration option. | ||
| // | ||
| // You can read more here: | ||
| // https://on.cypress.io/configuration | ||
| // *********************************************************** | ||
|
|
||
| // Import commands.js using ES2015 syntax: | ||
| import './commands' | ||
|
|
||
| // Alternatively you can use CommonJS syntax: | ||
| // require('./commands') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@tsriram Can you add the env var here (maybe you tried that already)? Travis might not pick it up until this branch is merged.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@m-allanson Ah, didn't know that ENV variables are not accessible before merging. Nope, I didn't try adding the variable here. Adding it here will make it public right? I'm not sure if it's okay. From Cypress docs:
Wonder if it's okay for us to make it public? If yes, we can just pass the key from the npm script itself.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh hrmm, it seems I was wrong about that, Travis will use the yaml file from the current branch: https://docs.travis-ci.com/user/customizing-the-build/#Building-Specific-Branches
Yeah adding it here will make it public, but you can use the Travis CLI to encrypt env vars. See an example here.
Although pay attention to their note:
Otherwise you may spend a lot of time (like I did 😅) wondering why your env var isn't working. It may be easier to merge this branch as-is, and then create smaller PRs straight from this repo to tinker with the
travis.ymlconfig.Alternatively @KyleAMathews could add the env var via the Travis site (as you mentioned originally) which would certainly be quicker :), but I think it's nicer to keep the Travis config under version control where possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably not 😄 Looks like the environment variables defined in repository settings are not "automatically" available to forks: https://docs.travis-ci.com/user/environment-variables/#Defining-Variables-in-Repository-Settings. I think even if @KyleAMathews adds the env variable, it's not going to work. So, as you said it's probably better to merge this and have a branch from this repo itself to get this working.