Commit ce61b507 authored by Samantha Ming's avatar Samantha Ming

Add training logo to vulnerability details

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/355120
parent 46f0c463
......@@ -9,6 +9,7 @@ import { convertToGraphQLId } from '~/graphql_shared/utils';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import Tracking from '~/tracking';
import { TRACK_CLICK_TRAINING_LINK_ACTION } from '~/security_configuration/constants';
import { TEMP_PROVIDER_LOGOS } from '~/security_configuration/components/constants';
import { SUPPORTED_IDENTIFIER_TYPES, SECURITY_TRAINING_URL_STATUS_COMPLETED } from '../constants';
export const i18n = {
......@@ -22,6 +23,7 @@ export const i18n = {
export default {
i18n,
TEMP_PROVIDER_LOGOS,
components: {
GlLink,
GlIcon,
......@@ -142,6 +144,9 @@ export default {
<div v-else>
<div v-for="({ name, url }, index) in securityTrainingUrls" :key="index" class="gl-mt-6">
<div>
<span v-if="$options.TEMP_PROVIDER_LOGOS[name]" class="gl-mr-1 gl-display-inline-flex">
<img :src="$options.TEMP_PROVIDER_LOGOS[name].svg" width="12" role="presentation" />
</span>
<span class="gl-font-weight-bold gl-font-base">{{ name }}</span>
</div>
<gl-link :href="url" target="_blank" @click="clickTrainingLink(name, url)">
......
......@@ -20,6 +20,7 @@ import {
testProviderName,
testTrainingUrls,
getSecurityTrainingProvidersData,
tempProviderLogos,
} from 'jest/security_configuration/mock_data';
import { getSecurityTrainingVulnerabilityData, defaultProps } from './mock_data';
......@@ -98,6 +99,7 @@ describe('VulnerabilityTraining component', () => {
const findTrainingItemName = (name) => wrapper.findByText(name);
const findTrainingItemLinks = () => wrapper.findAllComponents(GlLink);
const findTrainingItemLinkIcons = () => wrapper.findAllComponents(GlIcon);
const findTrainingLogos = () => wrapper.findAll('img');
describe('with the query being successful', () => {
describe('basic structure', () => {
......@@ -217,6 +219,31 @@ describe('VulnerabilityTraining component', () => {
});
});
describe('training logo', () => {
beforeEach(async () => {
createApolloProvider();
createComponent();
wrapper.vm.$options.TEMP_PROVIDER_LOGOS = tempProviderLogos;
await waitForQueryToBeLoaded();
});
const providerIndexArray = [0, 1];
it.each(providerIndexArray)('displays the correct width for training item %s', (index) => {
expect(findTrainingLogos().at(index).attributes('width')).toBe('12');
});
it.each(providerIndexArray)('has a11y decorative attribute for provider %s', (index) => {
expect(findTrainingLogos().at(index).attributes('role')).toBe('presentation');
});
it.each(providerIndexArray)('displays the correct svg path for training item %s', (index) => {
expect(findTrainingLogos().at(index).attributes('src')).toBe(
tempProviderLogos[testProviderName[index]].svg,
);
});
});
describe('training item', () => {
it('displays correct number of training items', async () => {
createApolloProvider();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment