Use "Testing Library" for content selection

glpi-project · Apr 26, 2024 · 5de843d · 5de843d
1 parent 515b2fc
commit 5de843d
Show file tree

Hide file tree

Showing 7 changed files with 705 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,14 +83,15 @@
     "devDependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.22.15",
         "@babel/preset-env": "^7.22.15",
+        "@testing-library/cypress": "^10.0.1",
         "@testing-library/jest-dom": "^6.4.2",
         "@vue/test-utils": "^2.4.1",
         "@vue/vue3-jest": "^29.2.6",
         "clean-webpack-plugin": "^4.0.0",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^6.10.0",
         "csso-cli": "^4.0.2",
-        "cypress": "^13.6.6",
+        "cypress": "^13.8.1",
         "eslint": "^8.57.0",
         "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-vue": "^9.17.0",

diff --git a/src/Auth.php b/src/Auth.php
@@ -1725,7 +1725,6 @@ public static function dropdownLogin(bool $display = true, $rand = 1)
             'rand'      => $rand,
             'value'     => $default,
             'width'     => '100%',
-            'data-cy'   => 'LoginAuthDropdown',
         ]);
 
         if ($display) {

diff --git a/src/Dropdown.php b/src/Dropdown.php
@@ -2127,7 +2127,6 @@ public static function showAdvanceDateRestrictionSwitch($enabled = 0)
      *    - noselect2           : if true, don't use select2 lib
      *    - templateResult      : if not empty, call this as template results of select2
      *    - templateSelection   : if not empty, call this as template selection of select2
-     *    - data-cy             : data-cy attribute for e2e testing
      *
      * Permit to use optgroup defining items in arrays
      * array('optgroupname'  => array('key1' => 'val1',
@@ -2165,7 +2164,6 @@ public static function showFromArray($name, array $elements, $options = [])
         $param['templateSelection']   = "templateSelection";
         $param['track_changes']       = "true";
         $param['init']                = true;
-        $param['data-cy']             = null;
 
         if (is_array($options) && count($options)) {
             if (isset($options['value']) && strlen($options['value'])) {
@@ -2254,10 +2252,6 @@ public static function showFromArray($name, array $elements, $options = [])
                 $output .= " data-track-changes=''";
             }
 
-            if (!empty($param['data-cy'])) {
-                $output .= sprintf(' data-cy="%s"', htmlspecialchars($param['data-cy']));
-            }
-
             $output .= '>';
             $max_option_size = 0;
             foreach ($elements as $key => $val) {

diff --git a/templates/pages/login.html.twig b/templates/pages/login.html.twig
@@ -57,7 +57,6 @@
                         name="{{ namfield }}"
                         placeholder=""
                         tabindex="1"
-                        data-cy="UsernameInput"
                     />
                 </div>
                 <div class="mb-4">
@@ -96,7 +95,6 @@
                         placeholder=""
                         autocomplete="off"
                         tabindex="2"
-                        data-cy="PasswordInput"
                     />
                 </div>
 
@@ -123,7 +121,6 @@
                                 id="login_remember"
                                 name="{{ rmbfield }}"
                                 {{ config('login_remember_default') ? 'checked' : '' }}
-                                data-cy="RememberMeCheckbox"
                             />
                             <span class="form-check-label">{{ __('Remember me') }}</span>
                         </label>
@@ -136,7 +133,6 @@
                         name="submit"
                         class="btn btn-primary w-100"
                         tabindex="3"
-                        data-cy="LoginButton"
                     >
                         {{ __('Sign in') }}
                     </button>

diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
@@ -48,13 +48,15 @@ Cypress.Commands.add('login', (username = 'e2e_tests', password = 'glpi') => {
             cy.blockGLPIDashboards();
             cy.visit('/');
             cy.title().should('eq', 'Authentication - GLPI');
-            cy.getBySelector('UsernameInput').type(username);
-            cy.getBySelector('PasswordInput').type(password);
-            cy.getBySelector('RememberMeCheckbox').check();
+            cy.findByRole('textbox', {'name': "Login"}).type(username);
+            cy.findByLabelText("Password").type(password);
+            cy.findByRole('checkbox', {name: "Remember me"}).check();
             // Select 'local' from the 'auth' dropdown
-            cy.getBySelector('LoginAuthDropdown').select('local', { force: true });
+            cy.findByLabelText("Login source").select('local', { force: true });
+            // TODO: should be
+            // cy.findByRole('combobox', {name: "Login source"}).select2('local', { force: true });
 
-            cy.getBySelector('LoginButton').click();
+            cy.findByRole('button', {name: "Sign in"}).click();
             // After logging in, the url should contain /front/central.php or /front/helpdesk.public.php
             cy.url().should('match', /\/front\/(central|helpdesk.public).php/);
         },
@@ -269,16 +271,6 @@ Cypress.Commands.add('validateSelect2Loading', {prevSubject: true}, (subject) =>
     });
 });
 
-Cypress.Commands.add('getBySelector', (selector, ...args) => {
-    const escaped_selector = Cypress.$.escapeSelector(selector);
-    return cy.get(`[data-cy=${escaped_selector}]`, ...args);
-});
-
-Cypress.Commands.add('findBySelector', {prevSubject: true}, (subject, selector, ...args) => {
-    const escaped_selector = Cypress.$.escapeSelector(selector);
-    return subject.find(`[data-cy=${escaped_selector}]`, ...args);
-});
-
 Cypress.Commands.add("getMany", (names) => {
     const values = [];
     for (const arg of names) {

diff --git a/tests/cypress/support/e2e.js b/tests/cypress/support/e2e.js
@@ -32,3 +32,4 @@
  */
 
 import './commands.js';
+import '@testing-library/cypress/add-commands';