Make loading spinner Pajamas compliant

Makes loading spinner Pajamas-compliant in the
merge-conflict-resolver-app component.

This actually fixes a visual bug as the spinner currently doesn't show
up at all.

Changelog: fixed
parent 17ada326
<script> <script>
import { GlSprintf, GlButton, GlButtonGroup } from '@gitlab/ui'; import { GlSprintf, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
import { mapGetters, mapState, mapActions } from 'vuex'; import { mapGetters, mapState, mapActions } from 'vuex';
import { __ } from '~/locale'; import { __ } from '~/locale';
import FileIcon from '~/vue_shared/components/file_icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue';
...@@ -23,6 +23,7 @@ export default { ...@@ -23,6 +23,7 @@ export default {
GlButton, GlButton,
GlButtonGroup, GlButtonGroup,
GlSprintf, GlSprintf,
GlLoadingIcon,
FileIcon, FileIcon,
DiffFileEditor, DiffFileEditor,
InlineConflictLines, InlineConflictLines,
...@@ -72,9 +73,7 @@ export default { ...@@ -72,9 +73,7 @@ export default {
</script> </script>
<template> <template>
<div id="conflicts"> <div id="conflicts">
<div v-if="isLoading" class="loading"> <gl-loading-icon v-if="isLoading" size="md" data-testid="loading-spinner" />
<div class="spinner spinner-md"></div>
</div>
<div v-if="hasError" class="nothing-here-block"> <div v-if="hasError" class="nothing-here-block">
{{ conflictsData.errorMessage }} {{ conflictsData.errorMessage }}
</div> </div>
......
...@@ -41,6 +41,7 @@ describe('Merge Conflict Resolver App', () => { ...@@ -41,6 +41,7 @@ describe('Merge Conflict Resolver App', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findLoadingSpinner = () => wrapper.find('[data-testid="loading-spinner"]');
const findConflictsCount = () => wrapper.find('[data-testid="conflicts-count"]'); const findConflictsCount = () => wrapper.find('[data-testid="conflicts-count"]');
const findFiles = () => wrapper.findAll('[data-testid="files"]'); const findFiles = () => wrapper.findAll('[data-testid="files"]');
const findFileHeader = (w = wrapper) => w.find('[data-testid="file-name"]'); const findFileHeader = (w = wrapper) => w.find('[data-testid="file-name"]');
...@@ -60,6 +61,19 @@ describe('Merge Conflict Resolver App', () => { ...@@ -60,6 +61,19 @@ describe('Merge Conflict Resolver App', () => {
expect(title.text().trim()).toBe('Showing 3 conflicts between test-conflicts and main'); expect(title.text().trim()).toBe('Showing 3 conflicts between test-conflicts and main');
}); });
it('shows a loading spinner while loading', () => {
store.commit('SET_LOADING_STATE', true);
mountComponent();
expect(findLoadingSpinner().exists()).toBe(true);
});
it('does not show a loading spinner once loaded', () => {
mountComponent();
expect(findLoadingSpinner().exists()).toBe(false);
});
describe('files', () => { describe('files', () => {
it('shows one file area for each file', () => { it('shows one file area for each file', () => {
mountComponent(); mountComponent();
......
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