diff --git a/ee/app/assets/javascripts/vulnerabilities/components/explain_vulnerability/explain_vulnerability.vue b/ee/app/assets/javascripts/vulnerabilities/components/explain_vulnerability/explain_vulnerability.vue index 3d56e82a338061ea70c6388074d427716e2a79c1..a8e83ffa1a04950b4873c1ad2e2c392216d66302 100644 --- a/ee/app/assets/javascripts/vulnerabilities/components/explain_vulnerability/explain_vulnerability.vue +++ b/ee/app/assets/javascripts/vulnerabilities/components/explain_vulnerability/explain_vulnerability.vue @@ -43,7 +43,8 @@ export default { </script> <template> - <div class="gl-flex"> + <div class="gl-flex gl-items-center"> + <gl-icon class="gl-mr-2" name="tanuki-ai" data-testid="ai-icon" /> <gl-sprintf :message="$options.explainVulnerabilityMessage"> <template #message> <gl-button @@ -61,7 +62,7 @@ export default { </template> </gl-sprintf> <gl-link :href="$options.infoHelpLink" class="gl-text-gray-500" - ><gl-icon name="information-o" class="gl-ml-2" + ><gl-icon name="information-o" class="gl-ml-2" data-testid="info-icon" /></gl-link> </div> </template> diff --git a/ee/spec/frontend/vulnerabilities/explain_vulnerability/explain_vulnerability_spec.js b/ee/spec/frontend/vulnerabilities/explain_vulnerability/explain_vulnerability_spec.js index 9d8e7aa60c938c2cb257de8db54f155b37296f5d..52431ee65a3cf65b41d9623d645f9ad79232e71c 100644 --- a/ee/spec/frontend/vulnerabilities/explain_vulnerability/explain_vulnerability_spec.js +++ b/ee/spec/frontend/vulnerabilities/explain_vulnerability/explain_vulnerability_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import { GlLink, GlIcon, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import ExplainVulnerability from 'ee/vulnerabilities/components/explain_vulnerability/explain_vulnerability.vue'; import { helpCenterState } from '~/super_sidebar/constants'; @@ -31,7 +31,8 @@ describe('Explain Vulnerability component', () => { const findExplainVulnerabilityButton = () => wrapper.findByTestId('explain-vulnerability-button'); const findLink = () => wrapper.findComponent(GlLink); - const findIcon = () => wrapper.findComponent(GlIcon); + const findInfoIcon = () => wrapper.findByTestId('info-icon'); + const findAiIcon = () => wrapper.findByTestId('ai-icon'); const clickExplainVulnerabilityButton = () => findExplainVulnerabilityButton().vm.$emit('click'); beforeEach(createWrapper); @@ -56,7 +57,11 @@ describe('Explain Vulnerability component', () => { }); it('shows the information icon', () => { - expect(findIcon().props('name')).toBe('information-o'); + expect(findInfoIcon().props('name')).toBe('information-o'); + }); + + it('shows the AI icon', () => { + expect(findAiIcon().props('name')).toBe('tanuki-ai'); }); describe('when the "Explain vulnerability" button is clicked', () => {