Update unit and feature spec

Update the specs and also apply
some styling to the table to match
previous implementation.

app/assets/javascripts/jobs/components/trigger_block.vue

@@ -2,19 +2,25 @@
 import { GlButton, GlTable } from '@gitlab/ui';
 import { __ } from '~/locale';
 
+const DEFAULT_TD_CLASSES = 'gl-w-half gl-font-sm! gl-border-gray-200!';
+const DEFAULT_TH_CLASSES =
+  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1!';
+
 export default {
   fields: [
     {
       key: 'key',
       label: __('Key'),
       tdAttr: { 'data-testid': 'trigger-build-key' },
-      tdClass: 'gl-w-half gl-font-sm!',
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
     },
     {
       key: 'value',
       label: __('Value'),
       tdAttr: { 'data-testid': 'trigger-build-value' },
-      tdClass: 'gl-w-half gl-font-sm!',
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
     },
   ],
   components: {
@@ -68,12 +74,17 @@ export default {
       <p class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
         <span class="gl-font-weight-bold">{{ __('Trigger variables:') }}</span>
 
-        <gl-button v-if="hasValues" class="gl-mt-2" size="small" @click="toggleValues">{{
-          getToggleButtonText
-        }}</gl-button>
+        <gl-button
+          v-if="hasValues"
+          class="gl-mt-2"
+          size="small"
+          data-testid="trigger-reveal-values-button"
+          @click="toggleValues"
+          >{{ getToggleButtonText }}</gl-button
+        >
       </p>
 
-      <gl-table :items="trigger.variables" :fields="$options.fields" small>
+      <gl-table :items="trigger.variables" :fields="$options.fields" small bordered>
         <template #cell(value)="data">
           {{ getDisplayValue(data.value) }}
         </template>

spec/features/projects/jobs_spec.rb

@@ -533,10 +533,10 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
             expect(page).to have_content('Trigger token')
             expect(page).to have_content('Trigger variables')
 
-            expect(page).not_to have_css('.js-reveal-variables')
+            expect(page).not_to have_selector('[data-testid="trigger-reveal-values-button"]')
 
-            expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1')
-            expect(page).to have_selector('.js-build-value', text: '••••••')
+            expect(page).to have_selector('[data-testid="trigger-build-key"]', text: 'TRIGGER_KEY_1')
+            expect(page).to have_selector('[data-testid="trigger-build-value"]', text: '••••••')
           end
         end
 
@@ -571,17 +571,17 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
             expect(page).to have_content('Trigger token')
             expect(page).to have_content('Trigger variables')
 
-            expect(page).to have_css('.js-reveal-variables')
+            expect(page).to have_selector('[data-testid="trigger-reveal-values-button"]')
 
-            expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1')
-            expect(page).to have_selector('.js-build-value', text: '••••••')
+            expect(page).to have_selector('[data-testid="trigger-build-key"]', text: 'TRIGGER_KEY_1')
+            expect(page).to have_selector('[data-testid="trigger-build-value"]', text: '••••••')
           end
 
           it 'reveals values on button click', :js do
             click_button 'Reveal values'
 
-            expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1')
-            expect(page).to have_selector('.js-build-value', text: 'TRIGGER_VALUE_1')
+            expect(page).to have_selector('[data-testid="trigger-build-key"]', text: 'TRIGGER_KEY_1')
+            expect(page).to have_selector('[data-testid="trigger-build-value"]', text: 'TRIGGER_VALUE_1')
           end
         end
 

spec/frontend/jobs/components/trigger_block_spec.js

@@ -25,7 +25,7 @@ describe('Trigger block', () => {
     wrapper = null;
   });
 
-  describe('with short token', () => {
+  describe('with short token and no variables', () => {
     it('renders short token', () => {
       createComponent({
         trigger: {
@@ -42,6 +42,7 @@ describe('Trigger block', () => {
     beforeEach(() => {
       createComponent({ trigger: { variables: [] } });
     });
+
     it('does not render short token', () => {
       expect(findShortToken().exists()).toBe(false);
     });
@@ -55,30 +56,30 @@ describe('Trigger block', () => {
   describe('with variables', () => {
     describe('hide/reveal variables', () => {
       it('should toggle variables on click', async () => {
+        const hiddenValue = '••••••';
+        const gcsVar = { key: 'UPLOAD_TO_GCS', value: 'false', public: false };
+        const s3Var = { key: 'UPLOAD_TO_S3', value: 'true', public: false };
+
         createComponent({
           trigger: {
-            short_token: 'bd7e',
-            variables: [
-              { key: 'UPLOAD_TO_GCS', value: 'false', public: false },
-              { key: 'UPLOAD_TO_S3', value: 'true', public: false },
-            ],
+            variables: [gcsVar, s3Var],
           },
         });
 
         expect(findRevealButton().text()).toBe('Reveal values');
 
-        expect(findVariableValue(0).text()).toBe('••••••');
-        expect(findVariableValue(1).text()).toBe('••••••');
+        expect(findVariableValue(0).text()).toBe(hiddenValue);
+        expect(findVariableValue(1).text()).toBe(hiddenValue);
 
-        expect(findVariableKey(0).text()).toBe('UPLOAD_TO_GCS');
-        expect(findVariableKey(1).text()).toBe('UPLOAD_TO_S3');
+        expect(findVariableKey(0).text()).toBe(gcsVar.key);
+        expect(findVariableKey(1).text()).toBe(s3Var.key);
 
         await findRevealButton().trigger('click');
 
         expect(findRevealButton().text()).toBe('Hide values');
 
-        expect(findVariableValue(0).text()).toBe('false');
-        expect(findVariableValue(1).text()).toBe('true');
+        expect(findVariableValue(0).text()).toBe(gcsVar.value);
+        expect(findVariableValue(1).text()).toBe(s3Var.value);
       });
     });
   });