debian-mirror-gitlab/spec/frontend/observability/skeleton_spec.js

139 lines
5.1 KiB
JavaScript
Raw Normal View History

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
});