Skip to content

Commit

Permalink
feat(#92): add cypress test framework (#551)
Browse files Browse the repository at this point in the history
* chore(#92): add steps to create local and Gitpod development environments

* chore(#92): add cypress to package.json and add test/cypress directory

* chore(#92): added scripts to package.json

* chore(#92): wip

* chore(#92): yarn lock update

* chore(#92): Add cypress scripts to package.json and added dev environment setup info in CONTRIBUTING.md.

* chore(#92): improved dev environment setup info

* chore(#92): added cyprus dependency and scripts

* chore(#92): fixed error in druxt-site dependency

* chore(#92): added login command

* chore(#92): removed extraneous .gitkeep file

* chore(#92): update contributing guide

* chore(#92): updated cypress docs position

* chore(#92): fix contributing guide issues

* chore(#92): add cypress to gitpod dockerfile

* chore: update jest config

* chore(#92): update test scripts

* chore: temporarily disable login command

* chore(#92): test against dev

* chore: removed cypress examples

* chore(#92): add test open script

* chore(#92): update cypress test and config

* chore: remove example fixture

* chore(#92): update circleci config

* chore(#92): update cypress docs

Co-authored-by: Stuart Clark <[email protected]>
  • Loading branch information
captaindav and Decipher authored Aug 25, 2022
1 parent 22a4015 commit ae9d019
Show file tree
Hide file tree
Showing 11 changed files with 1,221 additions and 54 deletions.
63 changes: 55 additions & 8 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ jobs:
paths:
- .

test:
lint:
<<: *defaults
steps:
- attach_workspace:
Expand All @@ -60,8 +60,18 @@ jobs:
command: yarn lint:renovate

- run:
name: Run tests
command: yarn test --reporters=jest-junit --runInBand
name: Bundlewatch
command: yarn bundlewatch

test_unit:
<<: *defaults
steps:
- attach_workspace:
at: ~/repo

- run:
name: Run unit tests
command: yarn test:unit --reporters=jest-junit --runInBand
environment:
JEST_JUNIT_OUTPUT_DIR: ./reports/junit/
NODE_OPTIONS: --max_old_space_size=8192
Expand All @@ -70,16 +80,46 @@ jobs:
name: Upload coverage report
command: yarn dlx codecov

- run:
name: Bundlewatch
command: yarn bundlewatch

- store_test_results:
path: ./reports/junit/

- store_artifacts:
path: ./reports/junit

test_e2e:
machine:
image: ubuntu-2004:2022.07.1
working_directory: ~/repo
environment:
DDEV_NONINTERACTIVE: "true"
steps:
- attach_workspace:
at: ~/repo

- run:
name: Install ddev
command: |
curl -LO https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh && bash install_ddev.sh
- run:
name: Start server running
command: |
cd docs/drupal && ddev start -y
- run:
name: Install Drupal
command: |
cd docs/drupal && ddev drupal-install
- 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

# TODO - Fix CI deploy
# deploy:
# <<: *defaults
Expand All @@ -101,9 +141,16 @@ workflows:
test_deploy:
jobs:
- build
- test:
- lint:
requires:
- build
- test_unit:
requires:
- build
- test_e2e:
requires:
- build

# - deploy:
# requires:
# - build
Expand Down
3 changes: 3 additions & 0 deletions .gitpod/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ SHELL ["/bin/bash", "-c"]

RUN sudo apt-get -qq update

# Install cypress dependencies
RUN sudo DEBIAN_FRONTEND=noninteractive apt-get install -y libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

# Install ddev
RUN brew update && brew install drud/ddev/ddev

Expand Down
55 changes: 51 additions & 4 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,39 @@ Druxt is an open source project, built, supported and maintained by the communit

* * *

## Development Environment Setup

The Druxt development environment can be run both in the Cloud, using GitPod.io, or locally:

* * *

### Gitpod

1. Go to the [druxt/druxt.js](https://github.com/druxt/druxt.js) and fork the repository. e.g., `https://github.com/USER/druxt.js`
2. Open the forked repository in GitPod by appending `https://gitpod.io#` to your GitHub repository. e.g., `https://gitpod.io#github.com/USER/druxt.js`
3. Wait patiently for the environment to setup...
4. Run DruxtSite example: `yarn example:druxt-site`

GitPod will automatically run the following tasks:
- Install all core dependencies: `yarn install`
- Build the Druxt modules: `yarn build`
- Geneate the documentation: `yarn build:docs`
- Start a Drupal backend: `cd docs/drupal && ddev start -y`
- Display a welcome message: `cat .gitpod/WELCOME.md`

* * *

### Local Development

1. Go to the [druxt/druxt.js](https://github.com/druxt/druxt.js) and fork the repository. e.g., `https://github.com/USER/druxt.js`
2. Clone the forked repository to your local development environment. e.g., `git clone https://github.com/USER/druxt.js`
3. Install dependencies: `yarn`
4. Build packages: `yarn build`
5. Start a Drupal backend (requires DDev): `cd docs/drupal && ddev start -y && ddev drupal-install`
6. Run DruxtSite example: `yarn example:druxt-site`

* * *

## Bug reports, feature requests

One of the easiest ways to contribute to Druxt is to open issues, giving as much detail as possible to make it easier other contributors and maintainers: http://github.com/druxt/druxt.js/issues/new/choose
Expand All @@ -23,9 +56,10 @@ If you are able to resolve an issue, or have improvements you would like to prop

1. If this a new issue, make sure to open a bug report or feature request.
2. Fork the repository.
3. Make a `feature/#` branch from the `develop` branch.
4. Make and commit your changes.
5. Create a Pull request: https://github.com/druxt/druxt.js/compare
3. Setup a development environment (see [steps above](#development-environment-setup)).
4. Make a `feature/#` branch from the `develop` branch.
5. Make and commit your changes.
6. Create a Pull request: https://github.com/druxt/druxt.js/compare

* * *

Expand Down Expand Up @@ -70,9 +104,10 @@ The Druxt repository is setup with tools and automated processes to help with de
- [Changesets](#changesets) - Changelog and versioning
- [Codecov](#codecov) - Automated code coverage
- [Conventional commits](#conventional-commits) - Standardised commit messages
- [Cypress](#cypress) - Automated end-to-end testing
- [Docgen](#docgen) - Documentation generator
- [Gitpod](#gitpod) - Cloud based IDE
- [Jest](#jest) - Automated testing
- [Jest](#jest) - Automated unit testing
- [Linting](#linting) - Coding styles and standards
- [Siroc](#siroc) - Zero-config build tools

Expand Down Expand Up @@ -118,6 +153,18 @@ A **husky** git hook is used to ensure the standard is enforced, and will explai

* * *

### Cypress

Automated end-to-end testing is implemented using Cypress:

```sh
yarn test:e2e
```

- For more details, refer to the [Cypress documentation](https://docs.cypress.io/guides).

* * *

### Docgen

Druxt uses a custom Docgen module to generate API documentation from the package source code, using a combination of **JSDoc** and the **Vue Docgen API**.
Expand Down
17 changes: 14 additions & 3 deletions examples/druxt-site/package.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,30 @@
{
"name": "druxt-site",
"scripts": {
"cypress:open": "npx cypress open --project test",
"cypress:run": "npx cypress run --project test",
"dev": "nuxt dev",
"generate": "nuxt generate",
"serve": "yarn generate && yarn start",
"start": "nuxt start",
"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'",
"test:cypress:run": "yarn cypress:run",
"test:cypress:run:mobile": "yarn cypress:run --config viewportWidth=375,viewportHeight=667",
"test:cypress:open": "yarn cypress:open",
"test:cypress:open:mobile": "yarn cypress:open --config viewportWidth=375,viewportHeight=667"
},
"dependencies": {
"druxt-auth": "^0.1.0",
"druxt-site": "link:../../../packages/druxt-site",
"druxt-site": "link:../../packages/druxt-site",
"nuxt": "latest"
},
"devDependencies": {
"@nuxt/postcss8": "latest",
"@nuxtjs/storybook": "latest",
"postcss": "latest"
"cypress": "^10.3.0",
"postcss": "latest",
"start-server-and-test": "^1.14.0"
}
}
10 changes: 10 additions & 0 deletions examples/druxt-site/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
},
},
});
28 changes: 28 additions & 0 deletions examples/druxt-site/test/cypress/e2e/umami-homepage.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
it('Umami: Homepage', () => {
// Given I visit the homepage.
cy.visit('/')

// Language Switcher block.
const languageBlock = '[data-fetch-key^="DruxtBlockLanguageBlock"]'

// I see an English link in the LanguageBlock.
cy.get(languageBlock)
.find('li')
.should('have.length', 2)
.first()
.should('have.text', 'English')

// And I see a Spanish link in the LanguageBlock.
cy.get(languageBlock)
.find('li')
.last()
.should('have.text', 'Spanish')

// Account menu should have a login link.
const accountMenu = '[data-fetch-key^="DruxtMenu:account"]'
cy.get(accountMenu)
.find('li')
.should('have.length', 1)
.first()
.should('have.text', 'Log in')
})
Empty file.
65 changes: 65 additions & 0 deletions examples/druxt-site/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 examples/druxt-site/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 ae9d019

Please sign in to comment.