From 390e0d8906c066996e8bbb14aa5824643f9798f8 Mon Sep 17 00:00:00 2001
From: ddavison <ddavison@gitlab.com>
Date: Wed, 29 May 2019 16:47:53 -0700
Subject: Introduce data-qa-selector to supplant .qa-class

In order to break away from using CSS classes as
our primary method of element identification, we
need to provide the ability to search for data
attributes.

Make Test::Sanity::Selectors now work

Utilize regex to match on literal strings of the element name

Suggest the data-qa-selector pattern vs the qa-

Add data-qa-selector to login page to start

We need a page that is heavily used in order to be
confident that this functionality works. Let's start
with the Login page

Use appropriate HAML data tag practices
---
 qa/qa/page/element.rb        |  4 ++--
 qa/spec/page/element_spec.rb | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'qa')

diff --git a/qa/qa/page/element.rb b/qa/qa/page/element.rb
index 7a01320901d..f9aa9cc6377 100644
--- a/qa/qa/page/element.rb
+++ b/qa/qa/page/element.rb
@@ -28,7 +28,7 @@ module QA
       end
 
       def selector_css
-        ".#{selector}"
+        "[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
diff --git a/qa/spec/page/element_spec.rb b/qa/spec/page/element_spec.rb
index f746fe06e40..87c9fbf74a3 100644
--- a/qa/spec/page/element_spec.rb
+++ b/qa/spec/page/element_spec.rb
@@ -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("[data-qa-selector='my_element']")
+    end
+  end
 end
-- 
cgit v1.2.1


From 98fc3f23db648a16096994ba3b70d461b5b1ccf0 Mon Sep 17 00:00:00 2001
From: ddavison <ddavison@gitlab.com>
Date: Thu, 6 Jun 2019 22:34:42 -0700
Subject: Fix Main::Menu locators

Fix the locators to not use a regex
Add requirement
---
 qa/qa/page/main/menu.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'qa')

diff --git a/qa/qa/page/main/menu.rb b/qa/qa/page/main/menu.rb
index 9c99e43d4c0..c98d85d7911 100644
--- a/qa/qa/page/main/menu.rb
+++ b/qa/qa/page/main/menu.rb
@@ -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
-- 
cgit v1.2.1


From 3281e6db23d8f1ea6757af6eb71e87ed7a93c130 Mon Sep 17 00:00:00 2001
From: ddavison <ddavison@gitlab.com>
Date: Wed, 10 Jul 2019 16:20:31 -0700
Subject: Treat element#selector_css string appropriately

Proper escaping should be used for page/base.rb#scroll_to
as it is a single quoted JS string
---
 qa/qa/page/element.rb        | 2 +-
 qa/spec/page/element_spec.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'qa')

diff --git a/qa/qa/page/element.rb b/qa/qa/page/element.rb
index f9aa9cc6377..9e6fd2fdd4f 100644
--- a/qa/qa/page/element.rb
+++ b/qa/qa/page/element.rb
@@ -28,7 +28,7 @@ module QA
       end
 
       def selector_css
-        "[data-qa-selector='#{@name}'],.#{selector}"
+        %Q([data-qa-selector="#{@name}"],.#{selector})
       end
 
       def expression
diff --git a/qa/spec/page/element_spec.rb b/qa/spec/page/element_spec.rb
index 87c9fbf74a3..20d4a00c020 100644
--- a/qa/spec/page/element_spec.rb
+++ b/qa/spec/page/element_spec.rb
@@ -114,7 +114,7 @@ describe QA::Page::Element do
   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("[data-qa-selector='my_element']")
+      expect(subject.selector_css).to include(%q([data-qa-selector="my_element"]))
     end
   end
 end
-- 
cgit v1.2.1