Create shared specs new variable list

This ports the old variable_list shared examples
to a new file

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

@@ -60,7 +60,7 @@ export default {
 </script>
 <template>
   <gl-dropdown :text="value">
-    <gl-search-box-by-type v-model.trim="searchTerm" />
+    <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
     <gl-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
@@ -75,7 +75,7 @@ export default {
     }}</gl-dropdown-item>
     <template v-if="shouldRenderCreateButton">
       <gl-dropdown-divider />
-      <gl-dropdown-item @click="createClicked">
+      <gl-dropdown-item data-testid="create-wildcard-button" @click="createClicked">
         {{ composedCreateButtonLabel }}
       </gl-dropdown-item>
     </template>

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

@@ -236,6 +236,7 @@ export default {
           :label="__('Environment scope')"
           label-for="ci-variable-env"
           class="w-50"
+          data-testid="environment-scope"
         >
           <ci-environments-dropdown
             class="w-100"
@@ -247,7 +248,11 @@ export default {
       </div>
 
       <gl-form-group :label="__('Flags')" label-for="ci-variable-flags">
-        <gl-form-checkbox v-model="protected_variable" class="mb-0">
+        <gl-form-checkbox
+          v-model="protected_variable"
+          class="mb-0"
+          data-testid="ci-variable-protected-checkbox"
+        >
           {{ __('Protect variable') }}
           <gl-link target="_blank" :href="protectedEnvironmentVariablesLink">
             <gl-icon name="question" :size="12" />
@@ -261,6 +266,7 @@ export default {
           ref="masked-ci-variable"
           v-model="masked"
           data-qa-selector="ci_variable_masked_checkbox"
+          data-testid="ci-variable-masked-checkbox"
         >
           {{ __('Mask variable') }}
           <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">

spec/features/group_variables_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Group variables', :js do
+  let(:user) { create(:user) }
+  let(:group) { create(:group) }
+  let!(:variable) { create(:ci_group_variable, key: 'test_key', value: 'test_value', masked: true, group: group) }
+  let(:page_path) { group_settings_ci_cd_path(group) }
+
+  before do
+    group.add_owner(user)
+    gitlab_sign_in(user)
+    wait_for_requests
+    visit page_path
+  end
+
+  it_behaves_like 'variable list'
+end

spec/features/project_group_variables_spec.rb

@@ -49,4 +49,16 @@ RSpec.describe 'Project group variables', :js do
     expect(page).to have_content(subgroup.name)
     expect(page).to have_content(subgroup_nested.name)
   end
+
+  it 'project origin keys link to ancestor groups ci_cd settings' do
+    visit project_path
+
+    find('.group-origin-link').click
+
+    wait_for_requests
+
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:nth-child(1) [data-label="Key"]').text).to eq(key1)
+    end
+  end
 end

spec/features/project_variables_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Project variables', :js do
+  let(:user)     { create(:user) }
+  let(:project)  { create(:project) }
+  let(:variable) { create(:ci_variable, key: 'test_key', value: 'test_value', masked: true) }
+  let(:page_path) { project_settings_ci_cd_path(project) }
+
+  before do
+    sign_in(user)
+    project.add_maintainer(user)
+    project.variables << variable
+    visit page_path
+  end
+
+  it_behaves_like 'variable list'
+
+  it 'adds a new variable with an environment scope' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('akey')
+      find('#ci-variable-value').set('akey_value')
+      find('[data-testid="environment-scope"]').click
+      find_button('clear').click
+      find('[data-testid="ci-environment-search"]').set('review/*')
+      find('[data-testid="create-wildcard-button"]').click
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:first-child [data-label="Environments"]').text).to eq('review/*')
+    end
+  end
+end

spec/support/shared_examples/features/variable_list_shared_examples.rb

+# frozen_string_literal: true
+
+RSpec.shared_examples 'variable list' do
+  it 'shows a list of variables' do
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq(variable.key)
+    end
+  end
+
+  it 'adds a new CI variable' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('key')
+      find('#ci-variable-value').set('key_value')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Key"]').text).to eq('key')
+    end
+  end
+
+  it 'adds a new protected variable' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('key')
+      find('#ci-variable-value').set('key_value')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    page.within('.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"]')).not_to be_nil
+    end
+  end
+
+  it 'defaults to unmasked' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('key')
+      find('#ci-variable-value').set('key_value')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    page.within('.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"]')).not_to be_nil
+    end
+  end
+
+  it 'reveals and hides variables' do
+    page.within('.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)
+
+      click_button('Reveal value')
+
+      expect(first('.js-ci-variable-row td[data-label="Key"]').text).to eq(variable.key)
+      expect(first('.js-ci-variable-row td[data-label="Value"]').text).to eq(variable.value)
+      expect(page).not_to have_content('*' * 17)
+
+      click_button('Hide value')
+
+      expect(first('.js-ci-variable-row td[data-label="Key"]').text).to eq(variable.key)
+      expect(page).to have_content('*' * 17)
+    end
+  end
+
+  it 'deletes a variable' do
+    expect(page).to have_selector('.js-ci-variable-row', count: 1)
+
+    page.within('.ci-variable-table') do
+      click_button('Edit')
+    end
+
+    page.within('#add-ci-variable') do
+      click_button('Delete variable')
+    end
+
+    wait_for_requests
+
+    expect(first('.js-ci-variable-row').text).to eq('There are no variables yet.')
+  end
+
+  it 'edits a variable' do
+    page.within('.ci-variable-table') do
+      click_button('Edit')
+    end
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('new_key')
+
+      click_button('Update variable')
+    end
+
+    wait_for_requests
+
+    expect(first('.js-ci-variable-row td[data-label="Key"]').text).to eq('new_key')
+  end
+
+  it 'edits a variable to be unmasked' do
+    page.within('.ci-variable-table') do
+      click_button('Edit')
+    end
+
+    page.within('#add-ci-variable') do
+      find('[data-testid="ci-variable-protected-checkbox"]').click
+      find('[data-testid="ci-variable-masked-checkbox"]').click
+
+      click_button('Update variable')
+    end
+
+    wait_for_requests
+
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Masked"] svg[data-testid="close-icon"]')).not_to be_nil
+    end
+  end
+
+  it 'edits a variable to be masked' do
+    page.within('.ci-variable-table') do
+      click_button('Edit')
+    end
+
+    page.within('#add-ci-variable') do
+      find('[data-testid="ci-variable-masked-checkbox"]').click
+
+      click_button('Update variable')
+    end
+
+    wait_for_requests
+
+    page.within('.ci-variable-table') do
+      click_button('Edit')
+    end
+
+    page.within('#add-ci-variable') do
+      find('[data-testid="ci-variable-masked-checkbox"]').click
+
+      click_button('Update variable')
+    end
+
+    page.within('.ci-variable-table') do
+      expect(find('.js-ci-variable-row:nth-child(1) td[data-label="Masked"] svg[data-testid="mobile-issue-close-icon"]')).not_to be_nil
+    end
+  end
+
+  it 'shows a validation error box about duplicate keys' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('key')
+      find('#ci-variable-value').set('key_value')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('key')
+      find('#ci-variable-value').set('key_value')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    expect(find('.flash-container')).not_to be_nil
+    expect(find('.flash-text').text).to have_content('Variables key (key) has already been taken')
+  end
+
+  it 'prevents a variable to be added if no values are provided when a variable is set to masked' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('empty_mask_key')
+      find('[data-testid="ci-variable-protected-checkbox"]').click
+      find('[data-testid="ci-variable-masked-checkbox"]').click
+
+      expect(find_button('Add variable', disabled: true)).not_to be_nil
+    end
+  end
+
+  it 'shows validation error box about unmaskable values' do
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('empty_mask_key')
+      find('#ci-variable-value').set('???')
+      find('[data-testid="ci-variable-protected-checkbox"]').click
+      find('[data-testid="ci-variable-masked-checkbox"]').click
+
+      expect(find('div.invalid-feedback').text).to have_content('This variable can not be masked')
+      expect(find_button('Add variable', disabled: true)).not_to be_nil
+    end
+  end
+
+  it 'handles multiple edits and a deletion' do
+    # Create two variables
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('akey')
+      find('#ci-variable-value').set('akeyvalue')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('zkey')
+      find('#ci-variable-value').set('zkeyvalue')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    expect(page).to have_selector('.js-ci-variable-row', count: 3)
+
+    # Remove the `akey` variable
+    page.within('.ci-variable-table') do
+      page.within('.js-ci-variable-row:first-child') do
+        click_button('Edit')
+      end
+    end
+
+    page.within('#add-ci-variable') do
+      click_button('Delete variable')
+    end
+
+    wait_for_requests
+
+    # Add another variable
+    click_button('Add Variable')
+
+    page.within('#add-ci-variable') do
+      find('[data-qa-selector="ci_variable_key_field"] input').set('ckey')
+      find('#ci-variable-value').set('ckeyvalue')
+
+      click_button('Add variable')
+    end
+
+    wait_for_requests
+
+    # expect to find 3 rows of variales in alphabetical order
+    expect(page).to have_selector('.js-ci-variable-row', count: 3)
+    rows = all('.js-ci-variable-row')
+    expect(rows[0].find('td[data-label="Key"]').text).to eq('ckey')
+    expect(rows[1].find('td[data-label="Key"]').text).to eq('test_key')
+    expect(rows[2].find('td[data-label="Key"]').text).to eq('zkey')
+  end
+
+  context 'defaults to the application setting' do
+    context 'application setting is true' do
+      before do
+        stub_application_setting(protected_ci_variables: true)
+
+        visit page_path
+      end
+
+      it 'defaults to protected' do
+        click_button('Add Variable')
+
+        page.within('#add-ci-variable') do
+          expect(find('[data-testid="ci-variable-protected-checkbox"]').checked?).to be(true)
+        end
+      end
+
+      it 'shows a message regarding the changed default' do
+        expect(page).to have_content 'Environment variables are configured by your administrator to be protected by default'
+      end
+    end
+
+    context 'application setting is false' do
+      before do
+        stub_application_setting(protected_ci_variables: false)
+
+        visit page_path
+      end
+
+      it 'defaults to unprotected' do
+        click_button('Add Variable')
+
+        page.within('#add-ci-variable') do
+          expect(find('[data-testid="ci-variable-protected-checkbox"]').checked?).to be(false)
+        end
+      end
+
+      it 'does not show a message regarding the default' do
+        expect(page).not_to have_content 'Environment variables are configured by your administrator to be protected by default'
+      end
+    end
+  end
+end