Use data test id

Let's move away from using
a css class and use a actual
testing selector.

app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue

@@ -84,7 +84,7 @@ export default {
 </script>
 
 <template>
-  <div class="ci-variable-table">
+  <div class="ci-variable-table" data-testid="ci-variable-table">
     <gl-table
       :fields="fields"
       :items="variables"

spec/features/project_group_variables_spec.rb

@@ -57,7 +57,7 @@ RSpec.describe 'Project group variables', :js do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) [data-label="Key"]').text).to eq(key1)
     end
   end

spec/features/project_variables_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'Project variables', :js do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:first-child [data-label="Environments"]').text).to eq('review/*')
     end
   end

spec/support/shared_examples/features/variable_list_shared_examples.rb

@@ -2,7 +2,7 @@
 
 RSpec.shared_examples 'variable list' do
   it 'shows a list of variables' do
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq(variable.key)
     end
   end
@@ -16,7 +16,7 @@ RSpec.shared_examples 'variable list' do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq('key')
     end
   end
@@ -30,7 +30,7 @@ RSpec.shared_examples 'variable list' do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq('key')
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Protected"] svg[data-testid="mobile-issue-close-icon"]')).to be_present
     end
@@ -45,14 +45,14 @@ RSpec.shared_examples 'variable list' do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq('key')
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Masked"] svg[data-testid="close-icon"]')).to be_present
     end
   end
 
   it 'reveals and hides variables' do
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(first('.js-ci-variable-row td[data-label="Key"]').text).to eq(variable.key)
       expect(page).to have_content('*' * 17)
 
@@ -72,7 +72,7 @@ RSpec.shared_examples 'variable list' do
   it 'deletes a variable' do
     expect(page).to have_selector('.js-ci-variable-row', count: 1)
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       click_button('Edit')
     end
 
@@ -86,7 +86,7 @@ RSpec.shared_examples 'variable list' do
   end
 
   it 'edits a variable' do
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       click_button('Edit')
     end
 
@@ -102,7 +102,7 @@ RSpec.shared_examples 'variable list' do
   end
 
   it 'edits a variable to be unmasked' do
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       click_button('Edit')
     end
 
@@ -115,13 +115,13 @@ RSpec.shared_examples 'variable list' do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Masked"] svg[data-testid="close-icon"]')).to be_present
     end
   end
 
   it 'edits a variable to be masked' do
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       click_button('Edit')
     end
 
@@ -133,7 +133,7 @@ RSpec.shared_examples 'variable list' do
 
     wait_for_requests
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       click_button('Edit')
     end
 
@@ -143,7 +143,7 @@ RSpec.shared_examples 'variable list' do
       click_button('Update variable')
     end
 
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Masked"] svg[data-testid="mobile-issue-close-icon"]')).to be_present
     end
   end
@@ -211,7 +211,7 @@ RSpec.shared_examples 'variable list' do
     expect(page).to have_selector('.js-ci-variable-row', count: 3)
 
     # Remove the `akey` variable
-    page.within('.ci-variable-table') do
+    page.within('[data-testid="ci-variable-table"]') do
       page.within('.js-ci-variable-row:first-child') do
         click_button('Edit')
       end