Skip to content
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.

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

[BI-972] - Testing Automation Framework (TAF) Button ID selectors #97

Merged
merged 7 commits into from
Jul 14, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
4 changes: 3 additions & 1 deletion src/components/file-import/FileSelectMessageBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
<div class="level-right">
<div class="level-item">
<div>
<a v-if="file" class="button is-primary has-text-weight-bold" v-on:click="$emit('import')">Import</a>
<a v-if="file" class="button is-primary has-text-weight-bold" :id="importButtonId" v-on:click="$emit('import')">Import</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -112,6 +112,8 @@
@Prop()
private errors!: ValidationError | string | null;

private importButtonId: string = "import-button";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to worry about collisions of id names across components? Should there be a naming convention including the component name?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's something I was wondering about since I'm a little less familiar with BI. I'm open to establishing a naming convention (beyond going with lowercase and dashes for id names).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya, not sure what the best approach is. In some of our old unit tests we were using the vue test utils and had a data-testid. @ctucker3 did most of the work on that and may have some input.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah in my research it seemed there were mixed opinions on using id vs some custom attribute.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have much of a preference either way. If we go with id, it makes sense to me to include the component name in some form in the id for the reusable components.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that @HMS17 has done a bunch of work using IDs, I'd also vote to include component name in with the id value.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added component name to the ids I have so far.


mounted() {
this.file = this.value;
}
Expand Down
9 changes: 6 additions & 3 deletions src/components/file-import/FileSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<template>
<label class="file-select">
<div v-if="value" class="button is-outlined is-primary">
<div v-if="value" :id="chooseDiffFileId" class="button is-outlined is-primary">
<span class="icon is-small">
<UploadIcon
size="1.5x"
Expand All @@ -28,7 +28,7 @@
Choose a different file...
</span>
</div>
<div v-else class="button is-primary">
<div v-else :id="chooseFileId" class="button is-primary">
<span class="icon is-small">
<UploadIcon
size="1.5x"
Expand Down Expand Up @@ -57,6 +57,9 @@
@Prop()
private value!: File;

private chooseFileId: string = "choose-file";
private chooseDiffFileId: string = "choose-different-file";

@Prop()
private fileTypes!: string[];

Expand All @@ -76,4 +79,4 @@
.file-select > input[type="file"] {
display: none;
}
</style>
</style>
4 changes: 3 additions & 1 deletion src/components/trait/TraitImportTemplateMessageBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div class="has-text-dark has-text-centered is-size-7">
<!-- temporary link until the backend card is done -->
<a href="https://cornell.box.com/shared/static/snf69ydrzmmr27qfqby0pcr0mw34qulr.xls"
class="button is-outlined is-primary">Download the Trait Import Template</a>
class="button is-outlined is-primary" :id="downloadTraitTemplateId">Download the Trait Import Template</a>
<br/>Template version placeholder
</div>
</div>
Expand All @@ -53,5 +53,7 @@
})
export default class TraitImportTemplateMessageBox extends Vue {

private downloadTraitTemplateId: string = "download-trait-template";

}
</script>
4 changes: 3 additions & 1 deletion src/views/trait/TraitsImport.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div class="column is-whole has-text-centered buttons">
<button
class="button is-danger"
v-on:click="handleAbortModal()"
v-on:click="handleAbortModal()" :id="yesAbortId"
>
<strong>Yes, abort</strong>
</button>
Expand Down Expand Up @@ -159,6 +159,8 @@ export default class TraitsImport extends ProgramsBase {
private tableLoaded = false;
private numTraits = 0;
private showAbortModal = false;

private yesAbortId: string = "yes-abort";

private ImportState = ImportState;
private ImportEvent = ImportEvent;
Expand Down