Commit b51ec1fb authored by Mark Lapierre's avatar Mark Lapierre

Merge branch 'qa-dd-data-qa-selector-replacement' into 'master'

Introduce data-qa-selector to supplant .qa-class

See merge request gitlab-org/gitlab-ce!28906
parents ecffca5d 3281e6db
Pipeline #70639755 passed with stages
in 42 minutes and 32 seconds
= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
.form-group
= f.label "Username or email", for: "user_login", class: 'label-bold'
= f.text_field :login, class: "form-control top qa-login-field", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
= f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required.", data: { qa_selector: 'login_field' }
.form-group
= f.label :password, class: 'label-bold'
= f.password_field :password, class: "form-control bottom qa-password-field", required: true, title: "This field is required."
= f.password_field :password, class: "form-control bottom", required: true, title: "This field is required.", data: { qa_selector: 'password_field' }
- if devise_mapping.rememberable?
.remember-me
%label{ for: "user_remember_me" }
......@@ -17,4 +17,4 @@
= recaptcha_tags
.submit-container.move-submit-down
= f.submit "Sign in", class: "btn btn-success qa-sign-in-button"
= f.submit "Sign in", class: "btn btn-success", data: { qa_selector: 'sign_in_button' }
!!! 5
%html.devise-layout-html{ class: system_message_class }
= render "layouts/head"
%body.ui-indigo.login-page.application.navless.qa-login-page{ data: { page: body_data_page } }
%body.ui-indigo.login-page.application.navless{ data: { page: body_data_page, qa_selector: 'login_page' } }
= header_message
.page-wrap
= render "layouts/header/empty"
......
......@@ -5,7 +5,7 @@
- else
- search_path_url = search_path
%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.js-navbar
%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { qa_selector: 'navbar' } }
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid
.header-content
......@@ -64,7 +64,7 @@
.dropdown-menu.dropdown-menu-right
= render 'layouts/header/help_dropdown'
- if header_link?(:user_dropdown)
%li.nav-item.header-user.dropdown{ data: { track_label: "profile_dropdown", track_event: "click_dropdown" } }
%li.nav-item.header-user.dropdown{ data: { track_label: "profile_dropdown", track_event: "click_dropdown", qa_selector: 'user_menu' } }
= link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
= image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
= sprite_icon('angle-down', css_class: 'caret-down')
......
......@@ -28,7 +28,7 @@ module QA
end
def selector_css
".#{selector}"
%Q([data-qa-selector="#{@name}"],.#{selector})
end
def expression
......@@ -40,7 +40,7 @@ module QA
end
def matches?(line)
!!(line =~ expression)
!!(line =~ /["']#{name}['"]|#{expression}/)
end
end
end
......
......@@ -12,7 +12,7 @@ module QA
view 'app/views/layouts/header/_default.html.haml' do
element :navbar, required: true
element :user_avatar, required: true
element :user_menu, '.dropdown-menu' # rubocop:disable QA/ElementWithPattern
element :user_menu, required: true
end
view 'app/views/layouts/nav/_dashboard.html.haml' do
......@@ -82,7 +82,7 @@ module QA
private
def within_top_menu
page.within('.qa-navbar') do
within_element(:navbar) do
yield
end
end
......@@ -91,7 +91,7 @@ module QA
within_top_menu do
click_element :user_avatar
page.within('.dropdown-menu') do
within_element(:user_menu) do
yield
end
end
......
......@@ -11,7 +11,7 @@ describe QA::Page::Element do
describe '#selector_css' do
it 'transforms element name into QA-specific clickable css selector' do
expect(described_class.new(:sign_in_button).selector_css)
.to eq '.qa-sign-in-button'
.to include('.qa-sign-in-button')
end
end
......@@ -49,6 +49,10 @@ describe QA::Page::Element do
it 'does not match if QA selector is not there' do
expect(subject.matches?('some_name selector')).to be false
end
it 'matches when element name is specified' do
expect(subject.matches?('data:{qa:{selector:"some_name"}}')).to be true
end
end
describe 'attributes' do
......@@ -106,4 +110,11 @@ describe QA::Page::Element do
end
end
end
describe 'data-qa selectors' do
subject { described_class.new(:my_element) }
it 'properly translates to a data-qa-selector' do
expect(subject.selector_css).to include(%q([data-qa-selector="my_element"]))
end
end
end
......@@ -30,7 +30,7 @@ module RuboCop
return if args.first.nil?
args.first.each_node(:str) do |arg|
add_offense(arg, message: MESSAGE % "qa-#{element_name.value.to_s.tr('_', '-')}")
add_offense(arg, message: MESSAGE % "data-qa-selector=#{element_name.value}")
end
end
......
......@@ -23,9 +23,9 @@ describe RuboCop::Cop::QA::ElementWithPattern do
expect_offense(<<-RUBY)
view 'app/views/shared/groups/_search_form.html.haml' do
element :groups_filter, 'search_field_tag :filter'
^^^^^^^^^^^^^^^^^^^^^^^^^^ Don't use a pattern for element, create a corresponding `qa-groups-filter` instead.
^^^^^^^^^^^^^^^^^^^^^^^^^^ Don't use a pattern for element, create a corresponding `data-qa-selector=groups_filter` instead.
element :groups_filter_placeholder, /Search by name/
^^^^^^^^^^^^^^ Don't use a pattern for element, create a corresponding `qa-groups-filter-placeholder` instead.
^^^^^^^^^^^^^^ Don't use a pattern for element, create a corresponding `data-qa-selector=groups_filter_placeholder` instead.
end
RUBY
end
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment