From 56e77d74c1c3d9df6fe624868d9486dd5751e22a Mon Sep 17 00:00:00 2001
From: Will Meek <wmeek@gitlab.com>
Date: Thu, 18 Jan 2024 11:25:02 +0000
Subject: [PATCH] Migrate Spec and Doc QA selectors to testid
---
doc/development/fe_guide/view_component.md | 2 +-
.../testing_guide/end_to_end/beginners_guide.md | 8 ++++----
.../capybara_to_chemlab_migration_guide.md | 4 ++--
.../testing_guide/end_to_end/page_objects.md | 12 ++++--------
spec/frontend/fixtures/static/textarea.html | 2 +-
.../form/input_copy_toggle_visibility_spec.js | 6 +++---
spec/helpers/search_helper_spec.rb | 8 ++++----
7 files changed, 19 insertions(+), 23 deletions(-)
diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md
index a616a3d7c48d6..a0c626dfb6d6f 100644
--- a/doc/development/fe_guide/view_component.md
+++ b/doc/development/fe_guide/view_component.md
@@ -163,7 +163,7 @@ For example:
```haml
= render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
- checkbox_options: { data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
+ checkbox_options: { data: { testid: 'initialize-with-sast-checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
- c.with_label do
= s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
- c.with_help_text do
diff --git a/doc/development/testing_guide/end_to_end/beginners_guide.md b/doc/development/testing_guide/end_to_end/beginners_guide.md
index b57757c5aac53..5fc18d7aeaec6 100644
--- a/doc/development/testing_guide/end_to_end/beginners_guide.md
+++ b/doc/development/testing_guide/end_to_end/beginners_guide.md
@@ -321,22 +321,22 @@ the **Issue Show** page already exists, add the `closed?` method.
module Page::Project::Issue
class Show
view 'app/views/projects/issues/show.html.haml' do
- element :closed_status_box
+ element 'closed-status-box'
end
def closed?
- has_element?(:closed_status_box)
+ has_element?('closed-status-box')
end
end
end
```
-Next, define the element `closed_status_box` within your view, so your Page Object
+Next, define the element `closed-status-box` within your view, so your Page Object
can see it.
```haml
-#=> app/views/projects/issues/show.html.haml
-.issuable-status-box.status-box.status-box-issue-closed{ ..., data: { qa_selector: 'closed_status_box' } }
+.issuable-status-box.status-box.status-box-issue-closed{ ..., data: { testid: 'closed-status-box' } }
```
## Run the spec
diff --git a/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md b/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md
index 64bb5df5db11e..98484b7f2d631 100644
--- a/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md
+++ b/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md
@@ -95,12 +95,12 @@ end
### Element Naming Convention
-Since the element type is preserved within the Page Library, there is no need to specify a `_field` or `_button` suffix to the data-qa-selector.
+Since the element type is preserved within the Page Library, there is no need to specify a `_field` or `_button` suffix to the data-testid.
```html
<!-- Before -->
<input type="text" name="first-name" data-testid="first_name_field" />
-<input type="submit" name="continue" value="Continue" data-testid="continue_button" />
+<input type="submit" name="continue" value="Continue" data-testid="continue-button" />
<!-- After -->
<input type="text" name="first-name" data-testid="first_name" />
diff --git a/doc/development/testing_guide/end_to_end/page_objects.md b/doc/development/testing_guide/end_to_end/page_objects.md
index 812d2724b721b..33f70c73c912f 100644
--- a/doc/development/testing_guide/end_to_end/page_objects.md
+++ b/doc/development/testing_guide/end_to_end/page_objects.md
@@ -158,20 +158,16 @@ Things to note:
- The name of the element and the `data-testid` must match and be either snake cased or kebab cased
- If the element appears on the page unconditionally, add `required: true` to the element. See
[Dynamic element validation](dynamic_element_validation.md)
-- You may see `data-qa-selector` classes in existing Page Objects. We should prefer the [`data-testid`](#data-testid-vs-data-qa-selector)
- method of definition over the `data-qa-selector` CSS class
+- You should not see `data-qa-selector` classes in Page Objects.
+ We should use the [`data-testid`](#data-testid-vs-data-qa-selector)
+ method of definition
### `data-testid` vs `data-qa-selector`
> Introduced in GitLab 16.1
-There are two supported methods of defining elements within a view.
-
-1. `data-testid`
-1. `data-qa-selector` attribute
-
Any existing `data-qa-selector` class should be considered deprecated
-and we should prefer the `data-testid` method of definition.
+and we should use the `data-testid` method of definition.
### Dynamic element selection
diff --git a/spec/frontend/fixtures/static/textarea.html b/spec/frontend/fixtures/static/textarea.html
index 68d5a0f2d4d2c..6bebd5df11b11 100644
--- a/spec/frontend/fixtures/static/textarea.html
+++ b/spec/frontend/fixtures/static/textarea.html
@@ -10,7 +10,7 @@
<textarea class="note-textarea js-gfm-input js-autosize markdown-area"
placeholder="Write milestone description..." dir="auto"
data-supports-quick-actions="false" data-supports-autocomplete="true"
- data-qa-selector="milestone_description_field" data-autofocus="false"
+ data-testid="milestone-description-field" data-autofocus="false"
name="milestone[description]"
id="milestone_description"></textarea>
<a class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
diff --git a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
index b57643a135957..27227ac69ddca 100644
--- a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
+++ b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
@@ -378,7 +378,7 @@ describe('InputCopyToggleVisibility', () => {
props: {
formInputGroupProps: {
name: 'Foo bar',
- 'data-qa-selector': 'Foo bar',
+ 'data-testid': 'Foo bar',
class: 'Foo bar',
id: 'Foo bar',
},
@@ -387,14 +387,14 @@ describe('InputCopyToggleVisibility', () => {
expect(findFormInput().attributes()).toMatchObject({
name: 'Foo bar',
- 'data-qa-selector': 'Foo bar',
+ 'data-testid': 'Foo bar',
class: expect.stringContaining('Foo bar'),
id: 'Foo bar',
});
const attributesInputGroup = findFormInputGroup().attributes();
expect(attributesInputGroup.name).toBeUndefined();
- expect(attributesInputGroup['data-qa-selector']).toBeUndefined();
+ expect(attributesInputGroup['data-testid']).toBeUndefined();
expect(attributesInputGroup.class).not.toContain('Foo bar');
expect(attributesInputGroup.id).toBeUndefined();
});
diff --git a/spec/helpers/search_helper_spec.rb b/spec/helpers/search_helper_spec.rb
index bad30b5033d9f..e8c412cc8923f 100644
--- a/spec/helpers/search_helper_spec.rb
+++ b/spec/helpers/search_helper_spec.rb
@@ -1108,10 +1108,10 @@ def simple_sanitize(str)
context 'data' do
where(:scope, :label, :data, :search, :active_scope) do
- "projects" | "Projects" | { qa_selector: 'projects_tab' } | nil | "projects"
- "snippet_titles" | "Snippets" | nil | { snippets: "test" } | "code"
- "projects" | "Projects" | { qa_selector: 'projects_tab' } | nil | "issue"
- "snippet_titles" | "Snippets" | nil | { snippets: "test" } | "snippet_titles"
+ "projects" | "Projects" | { testid: 'projects-tab' } | nil | "projects"
+ "snippet_titles" | "Snippets" | nil | { snippets: "test" } | "code"
+ "projects" | "Projects" | { testid: 'projects-tab' } | nil | "issue"
+ "snippet_titles" | "Snippets" | nil | { snippets: "test" } | "snippet_titles"
end
with_them do
--
GitLab