From 2635080721ed4cf6471745f42199af8ca3067014 Mon Sep 17 00:00:00 2001
From: Swikriti Tripathi <swikriti808@gmail.com>
Date: Wed, 23 Nov 2022 14:45:04 +0545
Subject: [PATCH] Remove the id attribute from the Text input for assistance in
 e2e tests

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>
---
 src/components/admin/TextInput.vue            |  6 +--
 tests/jest/components/AdminSettings.spec.js   |  8 ++-
 .../__snapshots__/AdminSettings.spec.js.snap  | 52 +++++++++----------
 .../__snapshots__/TextInput.spec.js.snap      | 28 +++++-----
 4 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/src/components/admin/TextInput.vue b/src/components/admin/TextInput.vue
index 9593ddd3a..b252deff5 100644
--- a/src/components/admin/TextInput.vue
+++ b/src/components/admin/TextInput.vue
@@ -4,7 +4,7 @@
 			{{ labelText }}
 		</div>
 		<div class="text-input-input-wrapper">
-			<input :id="id"
+			<input
 				ref="textInput"
 				:value="value"
 				:type="type"
@@ -69,10 +69,6 @@ export default {
 			default: '',
 			type: String,
 		},
-		id: {
-			type: String,
-			required: true,
-		},
 		type: {
 			type: String,
 			default: 'text',
diff --git a/tests/jest/components/AdminSettings.spec.js b/tests/jest/components/AdminSettings.spec.js
index cc0d3e8bb..e64f6b08e 100644
--- a/tests/jest/components/AdminSettings.spec.js
+++ b/tests/jest/components/AdminSettings.spec.js
@@ -36,9 +36,7 @@ global.navigator = {
 }
 
 const selectors = {
-	oauthInstanceInput: '#openproject-oauth-instance',
-	oauthClientId: '#openproject-client-id',
-	oauthClientSecret: '#openproject-client-secret',
+	oauthInstanceInput: '#openproject-oauth-instance > .text-input-input-wrapper > input',
 	serverHostForm: '.openproject-server-host',
 	opOauthForm: '.openproject-oauth-values',
 	ncOauthForm: '.nextcloud-oauth-values',
@@ -48,8 +46,8 @@ const selectors = {
 	resetOPOAuthFormButton: '[data-test-id="reset-op-oauth-btn"]',
 	resetNcOAuthFormButton: '[data-test-id="reset-nc-oauth-btn"]',
 	submitOPOAuthFormButton: '[data-test-id="submit-op-oauth-btn"]',
-	opOauthClientIdInput: '#openproject-oauth-client-id',
-	opOauthClientSecretInput: '#openproject-oauth-client-secret',
+	opOauthClientIdInput: '#openproject-oauth-client-id > .text-input-input-wrapper > input',
+	opOauthClientSecretInput: '#openproject-oauth-client-secret > .text-input-input-wrapper > input',
 	submitServerHostFormButton: '[data-test-id="submit-server-host-form-btn"]',
 	submitNcOAuthFormButton: '[data-test-id="submit-nc-oauth-values-form-btn"]',
 	resetAllAppSettingsButton: '#reset-all-app-settings-btn',
diff --git a/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap b/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
index 3d5603f9b..fe69a09b6 100644
--- a/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
+++ b/tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
@@ -4,8 +4,8 @@ exports[`AdminSettings.vue Nextcloud OAuth values form edit mode should show the
 <div class="nextcloud-oauth-values">
   <formheading-stub index="3" title="Nextcloud OAuth client" iscomplete="true"></formheading-stub>
   <div>
-    <textinput-stub value="nc-client-id" id="nextcloud-oauth-client-id" type="text" placeholder="" label="Nextcloud OAuth client ID" hinttext="Copy the following values back into the OpenProject {htmlLink} as an Administrator." isrequired="true" withcopybtn="true" readonly="true" class="py-1"></textinput-stub>
-    <textinput-stub value="nc-client-secret" id="nextcloud-oauth-client-secret" type="text" placeholder="" label="Nextcloud OAuth client secret" hinttext="Copy the following values back into the OpenProject {htmlLink} as an Administrator." isrequired="true" withcopybtn="true" readonly="true" class="py-1"></textinput-stub>
+    <textinput-stub value="nc-client-id" type="text" placeholder="" label="Nextcloud OAuth client ID" hinttext="Copy the following values back into the OpenProject {htmlLink} as an Administrator." isrequired="true" withcopybtn="true" readonly="true" id="nextcloud-oauth-client-id" class="py-1"></textinput-stub>
+    <textinput-stub value="nc-client-secret" type="text" placeholder="" label="Nextcloud OAuth client secret" hinttext="Copy the following values back into the OpenProject {htmlLink} as an Administrator." isrequired="true" withcopybtn="true" readonly="true" id="nextcloud-oauth-client-secret" class="py-1"></textinput-stub>
     <div class="form-actions">
       <button-stub type="primary" nativetype="button" data-test-id="submit-nc-oauth-values-form-btn">
         Yes, I have copied these values
@@ -41,22 +41,22 @@ exports[`AdminSettings.vue OpenProject OAuth values form edit mode should show t
     </div>
   </div>
   <div>
-    <div class="text-input py-1">
+    <div class="text-input py-1" id="openproject-oauth-client-id">
       <div class="text-input-label">
         OpenProject OAuth client ID *
       </div>
-      <div class="text-input-input-wrapper"><input id="openproject-oauth-client-id" type="text" placeholder="" class="">
+      <div class="text-input-input-wrapper"><input type="text" placeholder="" class="">
         <!---->
       </div>
       <div>
         <div class="text-input-hint">Go to your OpenProject {htmlLink} as an Administrator and start the setup and copy the values here.</div>
       </div>
     </div>
-    <div class="text-input py-1">
+    <div class="text-input py-1" id="openproject-oauth-client-secret">
       <div class="text-input-label">
         OpenProject OAuth client secret *
       </div>
-      <div class="text-input-input-wrapper"><input id="openproject-oauth-client-secret" type="text" placeholder="" class="">
+      <div class="text-input-input-wrapper"><input type="text" placeholder="" class="">
         <!---->
       </div>
       <div>
@@ -126,16 +126,16 @@ exports[`AdminSettings.vue server host url form edit mode cancel button should b
 			</span></span></button>
 `;
 
-exports[`AdminSettings.vue server host url form edit mode readonly state should clear the readonly state when clicked on the input 1`] = `<input id="openproject-oauth-instance" type="text" placeholder="https://www.my-openproject.com" class="">`;
+exports[`AdminSettings.vue server host url form edit mode readonly state should clear the readonly state when clicked on the input 1`] = `<input type="text" placeholder="https://www.my-openproject.com" class="">`;
 
-exports[`AdminSettings.vue server host url form edit mode readonly state should set the input field to readonly at first 1`] = `<input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-readonly">`;
+exports[`AdminSettings.vue server host url form edit mode readonly state should set the input field to readonly at first 1`] = `<input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-readonly">`;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 1`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -150,11 +150,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 2`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -169,11 +169,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 3`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -188,11 +188,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 4`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -207,11 +207,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 5`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -226,11 +226,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 6`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -245,11 +245,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 7`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -264,11 +264,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 8`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
@@ -281,11 +281,11 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 `;
 
 exports[`AdminSettings.vue server host url form edit mode submit button should set the input to error state and display correct message when the url is invalid 9`] = `
-<div class="text-input pb-1">
+<div class="text-input pb-1" id="openproject-oauth-instance">
   <div class="text-input-label">
     OpenProject host *
   </div>
-  <div class="text-input-input-wrapper"><input id="openproject-oauth-instance" type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="https://www.my-openproject.com" class="text-input-error text-input-readonly">
     <!---->
   </div>
   <div>
diff --git a/tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap b/tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap
index f228a1b2c..cbfc28d48 100644
--- a/tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap
+++ b/tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap
@@ -13,11 +13,11 @@ exports[`TextInput.vue is required prop should not add asterik to the label text
 `;
 
 exports[`TextInput.vue messages should not show error message details if not error message is provided 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class="">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class="">
     <!---->
   </div>
   <!---->
@@ -25,11 +25,11 @@ exports[`TextInput.vue messages should not show error message details if not err
 `;
 
 exports[`TextInput.vue messages should show error message details if both error message and details are provided 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class="text-input-error">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class="text-input-error">
     <!---->
   </div>
   <div>
@@ -44,11 +44,11 @@ exports[`TextInput.vue messages should show error message details if both error
 `;
 
 exports[`TextInput.vue messages should show error message if both error message and hint text are provided 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class="text-input-error">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class="text-input-error">
     <!---->
   </div>
   <div>
@@ -61,11 +61,11 @@ exports[`TextInput.vue messages should show error message if both error message
 `;
 
 exports[`TextInput.vue messages should show error message if provided 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class="text-input-error">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class="text-input-error">
     <!---->
   </div>
   <div>
@@ -78,11 +78,11 @@ exports[`TextInput.vue messages should show error message if provided 1`] = `
 `;
 
 exports[`TextInput.vue messages should show hint text if provided 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class="">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class="">
     <!---->
   </div>
   <div>
@@ -92,11 +92,11 @@ exports[`TextInput.vue messages should show hint text if provided 1`] = `
 `;
 
 exports[`TextInput.vue readonly prop should set the input to readonly 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" readonly="readonly" placeholder="" class="text-input-readonly">
+  <div class="text-input-input-wrapper"><input type="text" readonly="readonly" placeholder="" class="text-input-readonly">
     <!---->
   </div>
   <!---->
@@ -104,11 +104,11 @@ exports[`TextInput.vue readonly prop should set the input to readonly 1`] = `
 `;
 
 exports[`TextInput.vue with copy button prop should render copy button if set 1`] = `
-<div class="text-input">
+<div class="text-input" id="unique-id">
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input id="unique-id" type="text" placeholder="" class=""> <button data-v-a8d79470="" type="button" disabled="disabled" title="Copy value" class="button-vue text-input-copy-value button-vue--icon-and-text button-vue--vue-secondary"><span data-v-a8d79470="" class="button-vue__wrapper"><span data-v-a8d79470="" class="button-vue__icon"><span aria-hidden="true" aria-label="" role="img" class="material-design-icon clippy-icon" data-v-a8d79470=""><svg fill="currentColor" width="16" height="16" enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m13 15h-11l0.0005-10h11v3.0002l1-0.0004 0.0005-5.0001c0.000058-0.5834-0.4165-1.0002-1.0005-1.0001l-3.467 0.0005c0.0008-1.183-0.9492-2.0001-2.1325-2.0001s-2.1333 0.8171-2.1333 2.0004h-3.2c-0.5834 0-1.0662 0.4166-1.0662 0.9999l-0.0005 12c-0.0000243 0.584 0.4833 1 1.0667 1l10.933-0.0005c0.584-0.001 1-0.416 1-1v-3h-1zm-8.8005-12h1.0672c0.5833 0 1.0666-0.4162 1.0666-0.9996 0-0.5833 0.4834-0.9337 1.0667-0.9337s1.0667 0.3504 1.0667 0.9337c0 0.5834 0.5333 0.9996 1.0666 0.9996h1.2667c0.517 0 1.2 0.4166 1.2 1h-9c-0.0004-0.65 0.5988-1 1.1988-1zm-1.1995 8h2v-1h-2zm7.9998-2v-2l-4 3 3.9998 3v-2l5.0002-0.00005v-2l-4.9998-0.00005zm-8 4h4v-1h-4zm6-7h-6v1h6zm-3 2h-3v1h3z"></path></svg></span></span> <span data-v-a8d79470="" class="button-vue__text">
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class=""> <button data-v-a8d79470="" type="button" disabled="disabled" title="Copy value" class="button-vue text-input-copy-value button-vue--icon-and-text button-vue--vue-secondary"><span data-v-a8d79470="" class="button-vue__wrapper"><span data-v-a8d79470="" class="button-vue__icon"><span aria-hidden="true" aria-label="" role="img" class="material-design-icon clippy-icon" data-v-a8d79470=""><svg fill="currentColor" width="16" height="16" enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m13 15h-11l0.0005-10h11v3.0002l1-0.0004 0.0005-5.0001c0.000058-0.5834-0.4165-1.0002-1.0005-1.0001l-3.467 0.0005c0.0008-1.183-0.9492-2.0001-2.1325-2.0001s-2.1333 0.8171-2.1333 2.0004h-3.2c-0.5834 0-1.0662 0.4166-1.0662 0.9999l-0.0005 12c-0.0000243 0.584 0.4833 1 1.0667 1l10.933-0.0005c0.584-0.001 1-0.416 1-1v-3h-1zm-8.8005-12h1.0672c0.5833 0 1.0666-0.4162 1.0666-0.9996 0-0.5833 0.4834-0.9337 1.0667-0.9337s1.0667 0.3504 1.0667 0.9337c0 0.5834 0.5333 0.9996 1.0666 0.9996h1.2667c0.517 0 1.2 0.4166 1.2 1h-9c-0.0004-0.65 0.5988-1 1.1988-1zm-1.1995 8h2v-1h-2zm7.9998-2v-2l-4 3 3.9998 3v-2l5.0002-0.00005v-2l-4.9998-0.00005zm-8 4h4v-1h-4zm6-7h-6v1h6zm-3 2h-3v1h3z"></path></svg></span></span> <span data-v-a8d79470="" class="button-vue__text">
 			Copy value
 		</span></span></button></div>
   <!---->