Skip to content

Commit

Permalink
chore(#562): add cypress tests to docs site (#564)
Browse files Browse the repository at this point in the history
* chore(#562): add cypress tests to docs site

* chore(#562): add druxtjs.org test job to ci

* chore(#562): add additional test coverage
  • Loading branch information
Decipher authored Aug 29, 2022
1 parent 569937c commit db80dc6
Show file tree
Hide file tree
Showing 14 changed files with 1,232 additions and 49 deletions.
9 changes: 8 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,19 @@ jobs:
- run:
name: Run end-to-end tests
command: yarn test:e2e

- store_artifacts:
path: ./examples/druxt-site/test/cypress/screenshots
- store_artifacts:
path: ./examples/druxt-site/test/cypress/videos

- run:
name: Run DruxtJS.org end-to-end tests
command: cd docs/nuxt && nvm i && nvm use && npm install --global yarn && yarn && yarn test
- store_artifacts:
path: ./docs/nuxt/test/cypress/screenshots
- store_artifacts:
path: ./docs/nuxt/test/cypress/videos

# TODO - Fix CI deploy
# deploy:
# <<: *defaults
Expand Down
12 changes: 9 additions & 3 deletions docs/nuxt/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,19 @@
"version": "0.1.0",
"private": true,
"scripts": {
"cypress:open": "npx cypress open --project test",
"cypress:run": "npx cypress run --project test",
"dev": "NODE_OPTIONS='--openssl-legacy-provider' nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"storybook": "nuxt storybook"
"storybook": "nuxt storybook",
"test": "start-server-and-test 'yarn dev' http://localhost:3000 'yarn cypress:run'",
"test:open": "start-server-and-test 'yarn dev' http://localhost:3000 'yarn cypress:open'"
},
"dependencies": {
"@nuxt/content": "1.15.1",
"@tailwindcss/typography": "^0.5",
"@tailwindcss/typography": "0.4.1",
"core-js": "3.25.0",
"daisyui": "1.25.4",
"nuxt": "2.15.8",
Expand All @@ -23,6 +27,8 @@
"@nuxtjs/google-analytics": "2.4.0",
"@nuxtjs/pwa": "3.3.5",
"@nuxtjs/storybook": "4.2.0",
"@nuxtjs/tailwindcss": "4.2.1"
"@nuxtjs/tailwindcss": "4.2.1",
"cypress": "^10.6.0",
"start-server-and-test": "^1.14.0"
}
}
18 changes: 9 additions & 9 deletions docs/nuxt/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@
class="block btn btn-secondary mb-3 w-full"
tag="button"
to="/guide"
>
<AppIconGuide class="inline-block h-5 w-5 mr-1" /> Get started
</NuxtLink>
><!--
--><AppIconGuide class="inline-block h-5 w-5 mr-1" />Get started<!--
--></NuxtLink>
<NuxtLink
class="block btn btn-accent mb-3 w-full"
tag="button"
to="/modules"
>
<AppIconModules class="inline-block h-5 w-5 mr-1" /> Druxt modules
</NuxtLink>
><!--
--><AppIconModules class="inline-block h-5 w-5 mr-1" />Druxt modules<!--
--></NuxtLink>
<NuxtLink
class="block btn btn-primary mb-3 w-full"
tag="button"
to="/api"
>
<AppIconApi class="inline-block h-5 w-5 mr-1" /> API documentation
</NuxtLink>
><!--
--><AppIconApi class="inline-block h-5 w-5 mr-1" />API documentation<!--
--></NuxtLink>
</div>
</div>
</div>
Expand Down
10 changes: 10 additions & 0 deletions docs/nuxt/test/cypress.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const { defineConfig } = require("cypress");

module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
13 changes: 13 additions & 0 deletions docs/nuxt/test/cypress/e2e/api-docs.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
it('DruxtJS.org: API documentation', () => {
// Given I visit the homepage.
cy.visit('/')

// Then I click on "API documentation"
cy.get('.hero .btn-primary').click()

// And I should be on "/api"
cy.url().should('include', '/api')

// And I should see the "API Documentation" heading.
cy.get('.text-4xl').should('have.text', 'API Documentation')
})
13 changes: 13 additions & 0 deletions docs/nuxt/test/cypress/e2e/get-started.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
it('DruxtJS.org: Get started', () => {
// Given I visit the homepage.
cy.visit('/')

// Then I click on "Get Started"
cy.get('.hero .btn-secondary').click()

// And I should be on "/guide"
cy.url().should('include', '/guide')

// And I should see the "Guide" heading.
cy.get('.text-4xl').should('have.text', 'Guide')
})
20 changes: 20 additions & 0 deletions docs/nuxt/test/cypress/e2e/homepage.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
it('DruxtJS.org: Homepage', () => {
// Given I visit the homepage.
cy.visit('/')

// I should see the Navbar
cy.get('.navbar').should('exist')

// And I should see the Hero block
// And have a heading of DruxtJS
cy.get('.hero').should('exist')
.find('.text-5xl').should('have.text', 'DruxtJS')

// And I should see the CTAs:
// - Get Started
cy.get('.hero .btn-secondary').should('have.text', 'Get started')
// - Druxt Modules
cy.get('.hero .btn-accent').should('have.text', 'Druxt modules')
// - API Documentation
cy.get('.hero .btn-primary').should('have.text', 'API documentation')
})
13 changes: 13 additions & 0 deletions docs/nuxt/test/cypress/e2e/modules.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
it('DruxtJS.org: Modules', () => {
// Given I visit the homepage.
cy.visit('/')

// Then I click on "Modules"
cy.get('.hero .btn-accent').click()

// And I should be on "/modules"
cy.url().should('include', '/modules')

// And I should see the "Modules" heading.
cy.get('.text-4xl').should('have.text', 'Modules')
})
12 changes: 12 additions & 0 deletions docs/nuxt/test/cypress/e2e/search.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
it('DruxtJS.org: Search', () => {
// Given I visit the homepage.
cy.visit('/')

// Then I open the menu.
cy.get('.navbar > :nth-child(1) > .btn').click()

// And I search for "Entity".
cy.get('.input').type('Entity')

// @TODO - Assert results.
})
Empty file.
65 changes: 65 additions & 0 deletions docs/nuxt/test/cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
// ***********************************************
// 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 will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

// Cypress.Commands.add("login", ({ username = 'admin' }, { password = 'admin' }, { rememberUser = false } = {}) => {

// const signInUrl = "http://localhost:3000"
// const signInPath = "/user/login"
// cy.visit(signInUrl + signInPath)

// const log = Cypress.log({
// name: "login",
// displayName: "LOGIN",
// message: [`🔐 Authenticating | ${username}`],
// // @ts-ignore
// autoEnd: false,
// });

// log.snapshot("before");

// // Fill out login form fields.
// cy.get("#edit-name").type(username);
// cy.get("edit-pass").type(password);

// // Submit login form.
// cy.get("edit-submit").click();

// cy.wait("@loginUser").then((loginUser: any) => {
// log.set({
// consoleProps() {
// return {
// username,
// password,
// // userId: loginUser.response.statusCode !== 401 && loginUser.response.body.user.id,
// };
// },
// });

// log.snapshot("after");
// log.end();
// });
// });

20 changes: 20 additions & 0 deletions docs/nuxt/test/cypress/support/e2e.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/e2e.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')
Loading

0 comments on commit db80dc6

Please sign in to comment.