Skip to content

Remove the id attribute from the Text input for assistance in e2e tests #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SwikritiT merged 1 commit into from
Nov 23, 2022
Merged

Remove the id attribute from the Text input for assistance in e2e tests #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/components/admin/TextInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{{ labelText }}
</div>
<div class="text-input-input-wrapper">
<input :id="id"
<input
ref="textInput"
:value="value"
:type="type"
Expand Down Expand Up @@ -69,10 +69,6 @@ export default {
default: '',
type: String,
},
id: {
type: String,
required: true,
},
type: {
type: String,
default: 'text',
Expand Down
8 changes: 3 additions & 5 deletions tests/jest/components/AdminSettings.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
52 changes: 26 additions & 26 deletions tests/jest/components/__snapshots__/AdminSettings.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@ 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>
<!---->
</div>
`;

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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -92,23 +92,23 @@ 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>
<!---->
</div>
`;

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>
<!---->
Expand Down