2023-03-17 16:20:25 +05:30
|
|
|
import { nextTick } from 'vue';
|
|
|
|
import { GlSkeletonLoader, GlAlert } from '@gitlab/ui';
|
2023-03-04 22:38:38 +05:30
|
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
import Skeleton from '~/observability/components/skeleton/index.vue';
|
2023-03-04 22:38:38 +05:30
|
|
|
import DashboardsSkeleton from '~/observability/components/skeleton/dashboards.vue';
|
|
|
|
import ExploreSkeleton from '~/observability/components/skeleton/explore.vue';
|
|
|
|
import ManageSkeleton from '~/observability/components/skeleton/manage.vue';
|
2023-05-27 22:25:52 +05:30
|
|
|
import EmbedSkeleton from '~/observability/components/skeleton/embed.vue';
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-05-27 22:25:52 +05:30
|
|
|
import {
|
|
|
|
SKELETON_VARIANTS_BY_ROUTE,
|
|
|
|
DEFAULT_TIMERS,
|
|
|
|
SKELETON_VARIANT_EMBED,
|
|
|
|
} from '~/observability/constants';
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
describe('Skeleton component', () => {
|
2023-03-04 22:38:38 +05:30
|
|
|
let wrapper;
|
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
|
|
|
|
|
|
|
|
const findContentWrapper = () => wrapper.findByTestId('observability-wrapper');
|
|
|
|
|
|
|
|
const findExploreSkeleton = () => wrapper.findComponent(ExploreSkeleton);
|
|
|
|
|
|
|
|
const findDashboardsSkeleton = () => wrapper.findComponent(DashboardsSkeleton);
|
|
|
|
|
|
|
|
const findManageSkeleton = () => wrapper.findComponent(ManageSkeleton);
|
|
|
|
|
2023-05-27 22:25:52 +05:30
|
|
|
const findEmbedSkeleton = () => wrapper.findComponent(EmbedSkeleton);
|
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
|
|
|
|
2023-03-04 22:38:38 +05:30
|
|
|
const mountComponent = ({ ...props } = {}) => {
|
2023-03-17 16:20:25 +05:30
|
|
|
wrapper = shallowMountExtended(Skeleton, {
|
2023-03-04 22:38:38 +05:30
|
|
|
propsData: props,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('on mount', () => {
|
|
|
|
beforeEach(() => {
|
2023-03-17 16:20:25 +05:30
|
|
|
mountComponent({ variant: 'explore' });
|
2023-03-04 22:38:38 +05:30
|
|
|
});
|
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
describe('loading timers', () => {
|
|
|
|
it('show Skeleton if content is not loaded within CONTENT_WAIT_MS', async () => {
|
|
|
|
expect(findExploreSkeleton().exists()).toBe(false);
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(false);
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
await nextTick();
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
expect(findExploreSkeleton().exists()).toBe(true);
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(false);
|
|
|
|
});
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
it('does not show the skeleton if content has loaded within CONTENT_WAIT_MS', async () => {
|
|
|
|
expect(findExploreSkeleton().exists()).toBe(false);
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(false);
|
|
|
|
|
|
|
|
wrapper.vm.onContentLoaded();
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(true);
|
|
|
|
expect(findExploreSkeleton().exists()).toBe(false);
|
|
|
|
|
|
|
|
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(true);
|
|
|
|
expect(findExploreSkeleton().exists()).toBe(false);
|
|
|
|
});
|
2023-03-04 22:38:38 +05:30
|
|
|
});
|
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
describe('error timeout', () => {
|
|
|
|
it('shows the error dialog if content has not loaded within TIMEOUT_MS', async () => {
|
|
|
|
expect(findAlert().exists()).toBe(false);
|
|
|
|
jest.advanceTimersByTime(DEFAULT_TIMERS.TIMEOUT_MS);
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(findAlert().exists()).toBe(true);
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not show the error dialog if content has loaded within TIMEOUT_MS', async () => {
|
|
|
|
wrapper.vm.onContentLoaded();
|
|
|
|
jest.advanceTimersByTime(DEFAULT_TIMERS.TIMEOUT_MS);
|
2023-03-04 22:38:38 +05:30
|
|
|
|
2023-03-17 16:20:25 +05:30
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(findAlert().exists()).toBe(false);
|
|
|
|
expect(findContentWrapper().isVisible()).toBe(true);
|
|
|
|
});
|
2023-03-04 22:38:38 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('skeleton variant', () => {
|
|
|
|
it.each`
|
|
|
|
skeletonType | condition | variant
|
2023-03-17 16:20:25 +05:30
|
|
|
${'dashboards'} | ${'variant is dashboards'} | ${SKELETON_VARIANTS[0]}
|
|
|
|
${'explore'} | ${'variant is explore'} | ${SKELETON_VARIANTS[1]}
|
|
|
|
${'manage'} | ${'variant is manage'} | ${SKELETON_VARIANTS[2]}
|
2023-05-27 22:25:52 +05:30
|
|
|
${'embed'} | ${'variant is embed'} | ${SKELETON_VARIANT_EMBED}
|
2023-03-04 22:38:38 +05:30
|
|
|
${'default'} | ${'variant is not manage, dashboards or explore'} | ${'unknown'}
|
|
|
|
`('should render $skeletonType skeleton if $condition', async ({ skeletonType, variant }) => {
|
|
|
|
mountComponent({ variant });
|
2023-03-17 16:20:25 +05:30
|
|
|
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
|
|
|
|
await nextTick();
|
2023-05-27 22:25:52 +05:30
|
|
|
const showsDefaultSkeleton = ![...SKELETON_VARIANTS, SKELETON_VARIANT_EMBED].includes(
|
|
|
|
variant,
|
|
|
|
);
|
2023-03-17 16:20:25 +05:30
|
|
|
|
|
|
|
expect(findDashboardsSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[0]);
|
|
|
|
expect(findExploreSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[1]);
|
|
|
|
expect(findManageSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[2]);
|
2023-05-27 22:25:52 +05:30
|
|
|
expect(findEmbedSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANT_EMBED);
|
2023-03-04 22:38:38 +05:30
|
|
|
|
|
|
|
expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(showsDefaultSkeleton);
|
|
|
|
});
|
|
|
|
});
|
2023-03-17 16:20:25 +05:30
|
|
|
|
|
|
|
describe('on destroy', () => {
|
|
|
|
it('should clear init timer and timeout timer', () => {
|
|
|
|
jest.spyOn(global, 'clearTimeout');
|
|
|
|
mountComponent();
|
|
|
|
wrapper.destroy();
|
|
|
|
expect(clearTimeout).toHaveBeenCalledTimes(2);
|
|
|
|
expect(clearTimeout.mock.calls).toEqual([
|
|
|
|
[wrapper.vm.loadingTimeout], // First call
|
|
|
|
[wrapper.vm.errorTimeout], // Second call
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
2023-03-04 22:38:38 +05:30
|
|
|
});
|