chore: Upgrade Cypress to 13.4.0 (#8271)

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     'prettier',
     'plugin:vue/recommended',
     'plugin:storybook/recommended',
+    'plugin:cypress/recommended',
   ],
   parserOptions: {
     parser: '@babel/eslint-parser',

Gemfile.lock

@@ -175,7 +175,7 @@ GEM
       rexml
     crass (1.0.6)
     csv-safe (3.2.1)
-    cypress-on-rails (1.13.1)
+    cypress-on-rails (1.16.0)
       rack
     database_cleaner (2.0.2)
       database_cleaner-active_record (>= 2, < 3)

Procfile.test

@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-frontend: bin/webpack-dev-server
+frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
-worker: dotenv RAILS_ENV=test bundle exec sidekiq -C config/sidekiq.yml
+worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -136,6 +136,7 @@ export default {
         toStateName: 'labels_list',
         showModalForNewItem: true,
         modalName: 'AddLabel',
+        dataTestid: 'sidebar-new-label-button',
         children: this.labels.map(label => ({
           id: label.id,
           label: label.title,

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -78,6 +78,7 @@
               variant="clear"
               color-scheme="secondary"
               icon="add"
+              :data-testid="menuItem.dataTestid"
               @click="e => newLinkClick(e, navigate)"
             >
               {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}

app/javascript/v3/components/Form/Input.vue

@@ -17,6 +17,7 @@
         autocomplete="off"
         :required="required"
         :placeholder="placeholder"
+        :data-testid="dataTestid"
         :value="value"
         :class="{
           'focus:ring-red-600 ring-red-600': hasError,
@@ -71,6 +72,10 @@ export default {
       type: String,
       default: '',
     },
+    dataTestid: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
     onInput(e) {

config/webpacker.yml

@@ -85,6 +85,27 @@ test:
   # Compile test packs to a separate directory
   public_output_path: packs-test
 
+  dev_server:
+    https: false
+    host: 0.0.0.0
+    port: 3035
+    public: 0.0.0.0:3035
+    hmr: true
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+
 production:
   <<: *default
 

package.json

@@ -11,6 +11,7 @@
     "test:coverage": "jest -w 1 --no-cache --collectCoverage",
     "webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
     "start:dev": "foreman start -f ./Procfile.dev",
+    "start:test": "RAILS_ENV=test foreman start -f ./Procfile.test",
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -69,7 +70,7 @@
     "opus-recorder": "^8.0.5",
     "postcss": "^8.4.31",
     "postcss-loader": "^4.2.0",
-    "semver": "7.5.2",
+    "semver": "7.5.3",
     "tailwindcss": "^3.3.2",
     "turbolinks": "^5.2.0",
     "url-loader": "^2.0.0",
@@ -120,12 +121,13 @@
     "babel-jest": "29",
     "babel-loader": "8.2.2",
     "babel-preset-vue": "^2.0.2",
-    "cypress": "4.12.1",
+    "cypress": "^13.4.0",
     "eslint": "^8.49.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-webpack": "^0.13.7",
     "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",

spec/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 10000,
+  viewportWidth: 1250,
+  viewportHeight: 800,
+  e2e: {
+    baseUrl: 'http://localhost:5050',
+  },
+});

spec/cypress.json

@@ -1,6 +0,0 @@
-{
-  "baseUrl": "http://localhost:5050",
-  "defaultCommandTimeout": 10000,
-  "viewportWidth": 1250,
-  "viewportHeight": 800
-}

spec/cypress/e2e/happy_paths/admin_dashboard_authentication.cy.js

@@ -0,0 +1,17 @@
+describe('AdminDashboardAuthentication', () => {
+  before(() => {
+    cy.app('clean');
+    cy.appScenario('default');
+  });
+
+  it('authenticates an admin ', () => {
+    cy.visit('/');
+
+    cy.get("[data-testid='email_input']").clear();
+    cy.get("[data-testid='email_input']").type('john@acme.inc');
+    cy.get("[data-testid='password_input']").clear();
+    cy.get("[data-testid='password_input']").type('Password1!');
+
+    cy.get("[data-testid='submit_button']").click();
+  });
+});

spec/cypress/e2e/happy_paths/admin_dashboard_create_label.cy.js

@@ -0,0 +1,28 @@
+describe('AdminCreateLabel', () => {
+  before(() => {
+    cy.visit('/');
+
+    cy.get("[data-testid='email_input']").clear();
+    cy.get("[data-testid='email_input']").type('john@acme.inc');
+    cy.get("[data-testid='password_input']").clear();
+    cy.get("[data-testid='password_input']").type('Password1!');
+
+    cy.get("[data-testid='submit_button']").click();
+  });
+
+  it('open add label modal and create a label', () => {
+    cy.get("[data-testid='sidebar-new-label-button']").click();
+
+    cy.get("[data-testid='label-title'] > input").clear();
+    cy.get("[data-testid='label-title'] > input").type(
+      `show_stopper_${new Date().getTime()}`
+    );
+
+    cy.get("[data-testid='label-description'] > input").clear();
+    cy.get("[data-testid='label-description'] > input").type(
+      'denote it with show show stopper cases'
+    );
+
+    cy.get("[data-testid='label-submit']").click();
+  });
+});

spec/cypress/integration/happy_paths/admin_dashboard_authentication.js

@@ -1,20 +0,0 @@
-describe('AdminDashboardAuthentication', function () {
-  before(() => {
-    cy.app('clean');
-    cy.appScenario('default');
-  });
-
-  it('authenticates an admin ', function () {
-    cy.visit('/');
-
-    cy.get("[data-testid='email_input']")
-      .clear()
-      .type('john@acme.inc');
-    cy.get("[data-testid='password_input']")
-      .clear()
-      .type('Password1!');
-
-    cy.get("[data-testid='submit_button']").click();
-  });
-
-});

spec/cypress/integration/happy_paths/admin_dashboard_create_label.js

@@ -1,21 +0,0 @@
-describe('AdminCreateLabel', () => {
-  before(() => {
-    cy.wait(3000);
-  });
-
-  it('open add label modal', () => {
-    cy.get(
-      'ul.menu.vertical > li:last-child > a.sub-menu-title.side-menu > span.child-icon.ion-android-add-circle'
-    ).click();
-  });
-  it('create a label', () => {
-    cy.get("[data-testid='label-title'] > input")
-      .clear()
-      .type(`show_stopper_${new Date().getTime()}`);
-    cy.get("[data-testid='label-description'] > input")
-      .clear()
-      .type('denote it with show show stopper cases');
-
-    cy.get("[data-testid='label-submit']").click();
-  });
-});

spec/cypress/plugins/index.js

@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}