Commit e7103152 authored by Phil Hughes's avatar Phil Hughes

Merge branch '349670-loading-training-item' into 'master'

Add training item loading in vulnerability details page

See merge request gitlab-org/gitlab!78709
parents 265b5914 2fdd9906
<script>
import { GlLink, GlIcon } from '@gitlab/ui';
import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -27,6 +27,7 @@ export default {
components: {
GlLink,
GlIcon,
GlSkeletonLoader,
},
mixins: [glFeatureFlagsMixin()],
props: {
......@@ -112,9 +113,7 @@ export default {
{{ $options.i18n.trainingUnavailable }}
</p>
<div v-else-if="isLoading">
<!-- Loading skeleton will be added in a follow up issue
https://gitlab.com/gitlab-org/gitlab/-/issues/349670 -->
{{ $options.i18n.loading }}
<gl-skeleton-loader :width="200" :lines="3" />
</div>
<div v-else>
<div class="gl-font-weight-bold gl-font-base">{{ training.name }}</div>
......
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import MockAdapter from 'axios-mock-adapter';
import { GlLink, GlIcon } from '@gitlab/ui';
import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import httpStatus from '~/lib/utils/http_status';
......@@ -58,6 +58,8 @@ describe('VulnerabilityTraining component', () => {
mock.restore();
});
const delayTrainingResponse = async () =>
mock.onGet(mockProvider.path).reply(() => new Promise(() => {}));
const mockTrainingSuccess = async () =>
mock.onGet(mockProvider.path).reply(httpStatus.OK, { url: mockSuccessTrainingUrl });
const waitForQueryToBeLoaded = () => waitForPromises();
......@@ -115,6 +117,14 @@ describe('VulnerabilityTraining component', () => {
});
describe('training item', () => {
it('displays GlSkeletonLoader when loading', async () => {
await delayTrainingResponse();
createComponent();
await waitForQueryToBeLoaded();
expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
});
it('displays training item information', async () => {
await mockTrainingSuccess();
createComponent();
......
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