Bug 34319: Upgrade cypress 9.7.0 to 12.17.2

We are currently using 9.7.0. Since 10 the config file structure changed, and has been renamed cypress.json to cypress.config.ts

https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0

Also cypress-studio (used for bug 34076) is not working on 9.7.0.

Test plan:
yarn install
yarn build
mv /root/.cache/Cypress/12.17.2/ /kohadevbox/Cypress/
perl /kohadevbox/misc4dev/run_tests.pl --run-cypress-tests-only

You should not get any failures from the tests.

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

cypress.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+    fixturesFolder: "t/cypress/fixtures",
+    screenshotsFolder: "t/cypress/screenshots",
+    videosFolder: "t/cypress/videos",
+    defaultCommandTimeout: 10000,
+
+    e2e: {
+        experimentalStudio: true,
+        baseUrl: "http://localhost:8081",
+        specPattern: "t/cypress/integration/**/*.*",
+        supportFile: "t/cypress/support/e2e.js",
+    },
+
+    component: {
+        devServer: {
+            framework: "vue-cli",
+            bundler: "webpack",
+        },
+    },
+});

cypress.json

@@ -1,11 +0,0 @@
-{
-    "baseUrl": "http://kohadev-intra.mydnsname.org:8081",
-    "fixturesFolder": "t/cypress/fixtures",
-    "integrationFolder": "t/cypress/integration",
-    "pluginsFile": "t/cypress/plugins",
-    "screenshotsFolder": "t/cypress/screenshots",
-    "supportFile": "t/cypress/support",
-    "videosFolder": "t/cypress/videos",
-    "testFiles": "**/*.*",
-    "defaultCommandTimeout": 10000
-}

package.json

@@ -17,7 +17,7 @@
     "babel-core": "^7.0.0-beta.3",
     "bootstrap": "^4.5.2",
     "css-loader": "^6.6.0",
-    "cypress": "^9.5.2",
+    "cypress": "^12.17.2",
     "datatables.net-buttons": "^2.3.4",
     "datatables.net-vue3": "^2.0.0",
     "gulp": "^4.0.2",

t/cypress/support/commands.js

@@ -1,41 +0,0 @@
-// ***********************************************
-// 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) => { ... })
-
-function get_fallback_login_value(param) {
-
-    var env_var = param == 'username' ? 'KOHA_USER' : 'KOHA_PASS';
-
-    return typeof Cypress.env(env_var) === 'undefined' ? 'koha' : Cypress.env(env_var);
-}
-
-Cypress.Commands.add('login', (username, password) => {
-    var user = typeof username === 'undefined' ? get_fallback_login_value('username') : username;
-    var pass = typeof password === 'undefined' ? get_fallback_login_value('password') : password;
-    cy.visit('/cgi-bin/koha/mainpage.pl?logout.x=1')
-    cy.get("#userid").type(user)
-    cy.get("#password").type(pass)
-    cy.get("#submit-button").click()
-})

t/cypress/support/e2e.js

@@ -1,23 +1,44 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
 //
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
 //
-// 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
-// ***********************************************************
+// -- 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) => { ... })
 
-// Import commands.js using ES2015 syntax:
-import './commands';
+function get_fallback_login_value(param) {
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+    var env_var = param == 'username' ? 'KOHA_USER' : 'KOHA_PASS';
+
+    return typeof Cypress.env(env_var) === 'undefined' ? 'koha' : Cypress.env(env_var);
+}
+
+Cypress.Commands.add('login', (username, password) => {
+    var user = typeof username === 'undefined' ? get_fallback_login_value('username') : username;
+    var pass = typeof password === 'undefined' ? get_fallback_login_value('password') : password;
+    cy.visit('/cgi-bin/koha/mainpage.pl?logout.x=1')
+    cy.get("#userid").type(user)
+    cy.get("#password").type(pass)
+    cy.get("#submit-button").click()
+})
 
 Cypress.Commands.add('left_menu_active_item_is', (label) => {
     cy.get("#navmenulist a.current:not(.disabled)").should('have.length',1).contains(label);
@@ -90,4 +111,4 @@ cy.get_agreements_to_relate = () => {
             name: "fourth agreement name"
         },
     ]
-}
+}