CypressIO integration

README.md

@@ -67,28 +67,7 @@ the [official Drupal image](https://hub.docker.com/_/drupal/) and it is [hosted
 Docker Hub](https://hub.docker.com/r/juampynr/drupal8ci/). If this image
 does not fit your project's architecture then consider [creating your own image](https://circleci.com/docs/2.0/custom-images/)
 based out of it.
-
-#### Setting up the update path
 
-The Behat job requires a running Drupal 9 site. The repository contains the code, but for running
-tests in a realistic environment you need:
-
-##### 1. A recent copy of the production environment's database
-
-If you have Drush site aliases, then at the CircleCI dashboard go to the project's permissions
-and add an SSH key. Next, add `drush @my.alias sql-cli` to the Behat job at `.circleci/config.yml`.
-
-Alternatively, upload a [sanitized](https://drushcommands.com/drush-8x/sql/sql-sanitize/) database
-dump somewhere. For example [the demo project uses a Dropbox URL](https://github.com/juampynr/drupal8-circleci/blob/master/.circleci/config.yml#L83)
-via an environment variable which is set at the Circle CI web interface like in the following
-screenshot:
-
-![CircleCI database via environment variable](docs/images/circleci-db-env.png)
-
-##### 2. The production environment's files directory
-
-If you have a site alias, then add `drush rsync @my.alias @self` to the Behat job. Alternatively,
-use [Stage File Proxy](https://www.drupal.org/project/stage_file_proxy) module.
 
 ### [Travis CI](https://travis-ci.org)
 
@@ -133,27 +112,6 @@ at the pull request's status message:
 
 ![Coveralls report](docs/images/coveralls-report.png)
 
-#### Setting up the Behat job
-
-The Behat job requires, in order to test the behavior of your project:
-
-##### 1. A recent copy of the production environment's database
-
-If you have Drush site aliases, and your repository is private, then follow these
-instructions to [add an SSH key](https://docs.travis-ci.com/user/private-dependencies/#User-Key).
-Next, set up a drush site alias. Finally, adjust the Behat job to run `drush @my.alias sql-cli`.
-
-Alternatively, upload a [sanitized](https://drushcommands.com/drush-8x/sql/sql-sanitize/) database
-dump somewhere and set up the environment variable so the job can download it. For example
-[the demo project uses a Dropbox URL](https://github.com/juampynr/drupal8-travis-ci/blob/master/.travis/RoboFile.php#L89)
-via an environment variable referenced below:
-
-![Travis CI db env var](docs/images/travisci-db-var.png)
-
-##### 2. The production environment's files directory
-
-If you have a site alias, then add `drush rsync @my.alias @self` to the Behat job. Alternatively,
-use [Stage File Proxy](https://www.drupal.org/project/stage_file_proxy) module.
 
 ### [GitLab CI](https://about.gitlab.com/features/gitlab-ci-cd/)
 
@@ -170,11 +128,6 @@ the following one:
 
 ![GitLab pipeline](docs/images/gitlab-pipeline.png)
 
-#### Database setup
-In order to build a Docker image with your project's database. Run the one-line installer mentioned
-above and then follow the instructions at the resulting [scripts/database](dist/gitlabci/scripts/database)
-directory in your local environment.
-
 
 ### [GitHub Actions](https://github.com/features/actions)
 
@@ -190,7 +143,35 @@ at GitHub and open the Actions tab. You should see a running workflow like the f
 
 ![GitLab pipeline](docs/images/github-actions.png)
 
-#### Database setup
-In order to build a Docker image with your project's database. Run the one-line installer mentioned
-above and then follow the instructions at the resulting [scripts/database](dist/github-actions/scripts/database)
-directory in your local environment.
+
+### Setting up the Behat and Cypress jobs for all platforms
+
+The Behat and Cypress jobs require a running Drupal 9 site. The repository contains the code, but for running
+tests in a realistic environment you need:
+
+##### 1. A recent copy of the production environment's database
+
+**Travis**
+
+If you have Drush site aliases, and your repository is private, then follow these
+instructions to [add an SSH key](https://docs.travis-ci.com/user/private-dependencies/#User-Key).
+Next, set up a drush site alias. Finally, adjust the Behat job to run `drush @my.alias sql-cli`.
+
+**CircleCI**
+
+If you have Drush site aliases, then at the CircleCI dashboard go to the project's permissions
+and add an SSH key. Next, add `drush @my.alias sql-cli` to the Behat job at `.circleci/config.yml`.
+
+**Alternative**
+
+Alternatively, upload a [sanitized](https://drushcommands.com/drush-8x/sql/sql-sanitize/) database
+dump somewhere and set up the `DB_DUMP_URL` environment variable so the job can download it.
+
+For example:
+![Travis CI db env var](docs/images/travisci-db-var.png)
+![CircleCI database via environment variable](docs/images/circleci-db-env.png)
+
+##### 2. The production environment's files directory
+
+If you have a site alias, then add `drush rsync @my.alias @self` to the Behat job. Alternatively,
+use [Stage File Proxy](https://www.drupal.org/project/stage_file_proxy) module.

dist/circleci/.circleci/RoboFile.php

@@ -1,5 +1,4 @@
 <?php
-
 // @codingStandardsIgnoreStart
 
 /**
@@ -83,6 +82,23 @@ public function jobRunBehatTests()
         return $collection->run();
     }
 
+    /**
+     * Command to run Cypress tests.
+     *
+     * @return \Robo\Result
+     *   The result tof the collection of tasks.
+     */
+    public function jobRunCypressTests()
+    {
+        $collection = $this->collectionBuilder();
+        $collection->addTask($this->installDependencies());
+        $collection->addTask($this->waitForDatabase());
+        $collection->addTaskList($this->importDatabase());
+        $collection->addTaskList($this->runUpdatePath());
+        $collection->addTaskList($this->runCypressTests());
+        return $collection->run();
+    }
+
     /**
      * Imports and updates the database.
      *
@@ -96,7 +112,7 @@ public function jobRunBehatTests()
      */
     protected function importDatabase()
     {
-        $force = true;
+        $force = TRUE;
         $tasks = [];
         $tasks[] = $this->taskExec('mysql -u root -h 127.0.0.1 -e "create database drupal"');
         $tasks[] = $this->taskFilesystemStack()
@@ -130,7 +146,7 @@ protected function runUpdatePath()
      */
     protected function runBehatTests()
     {
-        $force = true;
+        $force = TRUE;
         $tasks = [];
         $tasks[] = $this->taskExec('service apache2 start');
         $tasks[] = $this->taskFilesystemStack()
@@ -139,6 +155,26 @@ protected function runBehatTests()
         return $tasks;
     }
 
+    /**
+     * Runs Cypress tests.
+     *
+     * @return \Robo\Task\Base\Exec[]
+     *   An array of tasks.
+     */
+    protected function runCypressTests()
+    {
+        $force = TRUE;
+        $tasks = [];
+        $tasks[] = $this->taskExec('service apache2 start');
+        $tasks[] = $this->taskFilesystemStack()
+            ->copy('.cypress/cypress.json', 'cypress.json', $force)
+            ->copy('.cypress/package.json', 'package.json', $force);
+        $tasks[] = $this->taskExec('sleep 30s');
+        $tasks[] = $this->taskExec('npm install cypress --save-dev');
+        $tasks[] = $this->taskExec('$(npm bin)/cypress run');
+        return $tasks;
+    }
+
     /**
      * Installs composer dependencies.
      *
@@ -186,7 +222,7 @@ protected function installDrupal()
      */
     protected function runUnitTests()
     {
-        $force = true;
+        $force = TRUE;
         $tasks = [];
         $tasks[] = $this->taskFilesystemStack()
             ->copy('.circleci/config/phpunit.xml', 'web/core/phpunit.xml', $force)
@@ -205,7 +241,7 @@ protected function runUnitTests()
      */
     protected function runUnitTestsWithCoverage()
     {
-        $force = true;
+        $force = TRUE;
         $tasks = [];
         $tasks[] = $this->taskFilesystemStack()
             ->copy('.circleci/config/phpunit.xml', 'web/core/phpunit.xml', $force)

dist/circleci/.circleci/config.yml

@@ -12,13 +12,11 @@ copy_robo: &copy_robo
 defaults: &defaults
   docker:
     - image: juampynr/drupal8ci:latest
-
-    - image: selenium/standalone-chrome-debug:3.7.1-beryllium
-
+      environment:
+        XDEBUG_MODE: coverage
     - image: mariadb:10.3
       environment:
         MYSQL_ALLOW_EMPTY_PASSWORD: 1
-
   working_directory: /opt/drupal
 
 #Jobs
@@ -51,6 +49,26 @@ behat_tests: &behat_tests
     - store_artifacts:
         path: /opt/drupal/artifacts
 
+## Job to run the update path and Cypress tests.
+# juampynr/drupal9ci:latest lands with PHP8 and node, so if your project is PHP8 you can remove the `Set up node` step.
+cypress_tests: &cypress_tests
+  <<: *defaults
+  steps:
+    - checkout
+    - *copy_robo
+    - run:
+        name: Setup node
+        command: |
+          curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+          apt install -y nodejs xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+    - run:
+        name: Run Cypress tests
+        command: robo job:run-cypress-tests
+    - store_test_results:
+        path: /opt/drupal/artifacts/cypress
+    - store_artifacts:
+        path: /opt/drupal/artifacts
+
 ## Job to check coding standards.
 code_sniffer: &code_sniffer
   <<: *defaults
@@ -88,6 +106,8 @@ jobs:
      <<: *code_sniffer
   run-code-coverage:
      <<: *code_coverage
+  run-cypress-tests:
+     <<: *cypress_tests
 
 # Declare a workflow that runs all of our jobs in parallel.
 workflows:
@@ -98,3 +118,4 @@ workflows:
       - run-behat-tests
       - run-code-sniffer
       - run-code-coverage
+      - run-cypress-tests

dist/common/.cypress/README.md

@@ -0,0 +1,14 @@
+## Cypress CI setup.
+
+`package.json` is empty by default to avoid linking front end dependencies
+to e2e testing. It is recommended that you only add here e2e related
+dependencies. If you want to test locally, you can copy this file to the
+root of the repo (if you don't have one already) and just run locally
+`npm install cypress --save-dev`.
+
+`cypress.json` is set up to work with the CI integration. If you want to
+test locally, copy this file to the root of the repo and tweak any of the
+values if needed (ie: `baseUrl`).
+
+Once everything is set up locally, you can run the tests like this:
+`$(npm bin)/cypress open` or `$(npm bin)/cypress run`.

dist/common/.cypress/cypress.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost",
+  "integrationFolder": "tests/cypress",
+  "env": {
+    "FOO": "bar"
+  }
+}

dist/common/.cypress/package.json

@@ -0,0 +1 @@
+{}

dist/common/tests/cypress/see_homepage.js

@@ -0,0 +1,6 @@
+describe('Visit homepage', () => {
+  it('Sees welcome message', () => {
+    cy.visit('/')
+    cy.contains('Welcome').should('be.visible')
+  })
+})

dist/common/tests/cypress/user_register.js

@@ -0,0 +1,11 @@
+describe('Register page', () => {
+  it('Registers a new user', () => {
+    const id = Date.now().toString()
+
+    cy.visit('/user/register')
+    cy.get('input[name=name]').type(`john_doe_${id}`)
+    cy.get('input[name=mail]').type(`john_doe_${id}@domain.com`)
+    cy.get('#edit-submit').click()
+    cy.contains('Thank you').should('be.visible')
+  })
+})

dist/github-actions/.github/config/.env

@@ -5,3 +5,4 @@ DTT_BASE_URL=http://localhost
 DTT_API_URL=http://localhost:9222
 BROWSERTEST_OUTPUT_DIRECTORY=/tmp
 DTT_SCREENSHOT_REPORT_DIRECTORY=/tmp/screenshots
+XDEBUG_MODE=coverage

dist/github-actions/.github/workflows/ci.yml

@@ -105,3 +105,38 @@ jobs:
         run: |
           vendor/bin/robo job:serve-drupal &
           vendor/bin/robo job:behat-tests
+
+  cypress:
+    runs-on: ubuntu-latest
+    container:
+      image: juampynr/drupal8ci:latest
+    services:
+      mariadb:
+        image: mariadb:latest
+        env:
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+    env:
+      FOO: bar
+      # DB_DUMP_URL: "URL of DB dump"
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+
+      - name: Build project
+        run: |
+          robo job:build
+
+      # juampynr/drupal9ci:latest lands with PHP8 and node, so if your project is PHP8 you can remove this step.
+      - name: Setup node
+        run: |
+          curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+          apt install -y nodejs xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+
+      - name: Run Cypress tests
+        run: |
+          vendor/bin/robo job:serve-drupal &
+          vendor/bin/robo job:cypress-tests