Commit 0e2535e0 authored by Enrique Alcantara's avatar Enrique Alcantara

Add ContentEditorError component

Add a component to display errors notified
by the ContentEditor
parent f74b0c27
<script>
import { GlAlert } from '@gitlab/ui';
import EditorStateObserver from './editor_state_observer.vue';
export default {
components: {
GlAlert,
EditorStateObserver,
},
data() {
return {
error: null,
};
},
methods: {
displayError({ error }) {
this.error = error;
},
dismissError() {
this.error = null;
},
},
};
</script>
<template>
<editor-state-observer @error="displayError">
<gl-alert v-if="error" class="gl-mb-6" variant="danger" @dismiss="dismissError">
{{ error }}
</gl-alert>
</editor-state-observer>
</template>
......@@ -5,6 +5,9 @@ export const tiptapToComponentMap = {
update: 'docUpdate',
selectionUpdate: 'selectionUpdate',
transaction: 'transaction',
focus: 'focus',
blur: 'blur',
error: 'error',
};
const getComponentEventName = (tiptapEventName) => tiptapToComponentMap[tiptapEventName];
......
import { GlAlert } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import ContentEditorError from '~/content_editor/components/content_editor_error.vue';
import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
import { createTestEditor, emitEditorEvent } from '../test_utils';
describe('content_editor/components/content_editor_error', () => {
let wrapper;
let tiptapEditor;
const findErrorAlert = () => wrapper.findComponent(GlAlert);
const createWrapper = async () => {
tiptapEditor = createTestEditor();
wrapper = shallowMountExtended(ContentEditorError, {
provide: {
tiptapEditor,
},
stubs: {
EditorStateObserver,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('renders error when content editor emits an error event', async () => {
const error = 'error message';
createWrapper();
await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
expect(findErrorAlert().text()).toBe(error);
});
it('allows dismissing the error', async () => {
const error = 'error message';
createWrapper();
await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
findErrorAlert().vm.$emit('dismiss');
await nextTick();
expect(findErrorAlert().exists()).toBe(false);
});
});
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