Enable Cypress component testing

app/cdash/tests/CMakeLists.txt

@@ -123,7 +123,7 @@ add_php_test(buildusernote)
 add_php_test(committerinfo)
 add_php_test(image)
 add_php_test(displayimage)
-add_cypress_test(banner)
+add_cypress_e2e_test(banner)
 add_php_test(manageprojectroles)
 add_php_test(manageusers)
 add_php_test(projectindb)

app/cdash/tests/js/e2e_tests/CMakeLists.txt

@@ -17,8 +17,8 @@ function(add_protractor_test test_name)
   )
 endfunction()
 
-add_cypress_test(manage-overview)
-add_cypress_test(sub-project-dependencies)
+add_cypress_e2e_test(manage-overview)
+add_cypress_e2e_test(sub-project-dependencies)
 add_protractor_test(manageBuildGroup)
 add_protractor_test(manageSubProject)
 add_protractor_test(viewBuildError)
@@ -27,13 +27,13 @@ add_protractor_test(sort_index)
 add_protractor_test(expected_build)
 add_protractor_test(remove_build)
 add_protractor_test(viewSubProjects)
-add_cypress_test(test-summary)
+add_cypress_e2e_test(test-summary)
 add_protractor_test(queryTests)
-add_cypress_test(filter-labels)
+add_cypress_e2e_test(filter-labels)
 add_protractor_test(viewTestPagination)
 add_protractor_test(done_build)
 add_protractor_test(multiSort)
 add_protractor_test(subprojectGroupOrder)
-add_cypress_test(calendar)
-add_cypress_test(colorblind)
-add_cypress_test(daterange)
+add_cypress_e2e_test(calendar)
+add_cypress_e2e_test(colorblind)
+add_cypress_e2e_test(daterange)

cypress.config.js

@@ -1,5 +1,7 @@
 const { defineConfig } = require('cypress');
 
+const { VueLoaderPlugin } = require('vue-loader');
+
 module.exports = defineConfig({
   fixturesFolder: 'tests/cypress/fixtures',
   screenshotsFolder: 'tests/cypress/screenshots',
@@ -16,4 +18,42 @@ module.exports = defineConfig({
     supportFile: 'tests/cypress/support/e2e.js',
     experimentalStudio: true,
   },
+  component: {
+    specPattern: 'tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/cypress/support/component.js',
+    indexHtmlFile: 'tests/cypress/support/component-index.html',
+    devServer: {
+      framework: 'vue',
+      bundler: 'webpack',
+      webpackConfig: {
+        mode: 'development',
+        module: {
+          rules: [
+            {
+              test: /\.vue$/,
+              loader: 'vue-loader',
+            },
+            // this will apply to both plain `.js` files
+            // AND `<script>` blocks in `.vue` files
+            {
+              test: /\.js$/,
+              loader: 'babel-loader',
+            },
+            // this will apply to both plain `.css` files
+            // AND `<style>` blocks in `.vue` files
+            {
+              test: /\.css$/,
+              use: [
+                'vue-style-loader',
+                'css-loader',
+              ],
+            },
+          ],
+        },
+        plugins: [
+          new VueLoaderPlugin(),
+        ],
+      },
+    },
+  },
 });

tests/CMakeLists.txt

@@ -6,31 +6,55 @@ function(add_vue_test TestName)
   )
 endfunction()
 
-function(add_cypress_test TestName)
+function(cypress_shared)
   if(DEFINED ENV{APP_URL})
-    set(APP_URL $ENV{APP_URL})
+    set(APP_URL $ENV{APP_URL} PARENT_SCOPE)
   elseif(EXISTS ${CDash_SOURCE_DIR}/.env)
     file(STRINGS ${CDash_SOURCE_DIR}/.env env_vars)
     foreach(var IN LISTS env_vars)
       if(var MATCHES "^APP_URL=(.*)$")
-        set(APP_URL "${CMAKE_MATCH_1}")
+        set(APP_URL "${CMAKE_MATCH_1}" PARENT_SCOPE)
         break()
       endif()
     endforeach()
   else()
-    set(APP_URL "http://localhost:8080")
+    set(APP_URL "http://localhost:8080" PARENT_SCOPE)
   endif()
+endfunction()
+
+function(add_cypress_e2e_test TestName)
+  cypress_shared()
 
   add_test(
-    NAME cypress/${TestName}
+    NAME cypress/e2e/${TestName}
     COMMAND ${NPX_EXE} cypress run
+      --e2e
       --project ${CDash_SOURCE_DIR}
       --spec ${CDash_SOURCE_DIR}/tests/cypress/e2e/${TestName}.cy.js
       --config baseUrl=${APP_URL}
   )
   # Cypress tries to put stuff in our home directory, which doesn't work for /var/www.
   set_tests_properties(
-    cypress/${TestName}
+    cypress/e2e/${TestName}
+    PROPERTIES
+    ENVIRONMENT "HOME=/cdash;"
+  )
+endfunction()
+
+function(add_cypress_component_test TestName)
+  cypress_shared()
+
+  add_test(
+    NAME cypress/component/${TestName}
+    COMMAND ${NPX_EXE} cypress run
+      --component
+      --project ${CDash_SOURCE_DIR}
+      --spec ${CDash_SOURCE_DIR}/tests/cypress/component/${TestName}.cy.js
+      --config baseUrl=${APP_URL}
+  )
+  # Cypress tries to put stuff in our home directory, which doesn't work for /var/www.
+  set_tests_properties(
+    cypress/component/${TestName}
     PROPERTIES
     ENVIRONMENT "HOME=/cdash;"
   )
@@ -76,6 +100,8 @@ add_vue_test(Spec/manage-measurements)
 add_vue_test(Spec/page-header/header-menu)
 add_vue_test(Spec/test-details)
 
+add_cypress_component_test(loading-indicator)
+
 cdash_install()
 
-add_cypress_test(user-profile)
+add_cypress_e2e_test(user-profile)

tests/cypress/component/loading-indicator.cy.js

@@ -0,0 +1,34 @@
+import LoadingIndicator from '../../../resources/js/components/shared/LoadingIndicator.vue';
+
+it('displays according to isLoading prop', () => {
+  cy.mount(LoadingIndicator, {
+    props: {
+      isLoading: true,
+    },
+    slots: {
+      default: 'Rendered content',
+    },
+  });
+
+  // The loading indicator has a delay to prevent a flicker on pages which render immediately.
+  cy.wait(1000);
+
+  cy.get('img[alt="The page is loading."').should('be.visible');
+
+  cy.should('not.contain', 'Rendered content');
+
+  cy.mount(LoadingIndicator, {
+    props: {
+      isLoading: false,
+    },
+    slots: {
+      default: 'Rendered content',
+    },
+  });
+
+  cy.wait(1000);
+
+  cy.get('img[alt="The page is loading."').should('not.exist');
+
+  cy.contains('Rendered content').should('be.visible');
+});

tests/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

tests/cypress/support/component.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/component.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';
+
+import { mount } from 'cypress/vue';
+
+Cypress.Commands.add('mount', mount);