gitlab-org--gitlab-foss/spec/frontend/content_editor/extensions/details_spec.js

93 lines
3.1 KiB
JavaScript

import Details from '~/content_editor/extensions/details';
import DetailsContent from '~/content_editor/extensions/details_content';
import { createTestEditor, createDocBuilder } from '../test_utils';
describe('content_editor/extensions/details', () => {
let tiptapEditor;
let doc;
let p;
let details;
let detailsContent;
beforeEach(() => {
tiptapEditor = createTestEditor({ extensions: [Details, DetailsContent] });
({
builders: { doc, p, details, detailsContent },
} = createDocBuilder({
tiptapEditor,
names: {
details: { nodeType: Details.name },
detailsContent: { nodeType: DetailsContent.name },
},
}));
});
describe('setDetails command', () => {
describe('when current block is a paragraph', () => {
it('converts current paragraph into a details block', () => {
const initialDoc = doc(p('Text content'));
const expectedDoc = doc(details(detailsContent(p('Text content'))));
tiptapEditor.commands.setContent(initialDoc.toJSON());
tiptapEditor.commands.setDetails();
expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
});
});
describe('when current block is a details block', () => {
it('maintains the same document structure', () => {
const initialDoc = doc(details(detailsContent(p('Text content'))));
tiptapEditor.commands.setContent(initialDoc.toJSON());
tiptapEditor.commands.setDetails();
expect(tiptapEditor.getJSON()).toEqual(initialDoc.toJSON());
});
});
});
describe('toggleDetails command', () => {
describe('when current block is a paragraph', () => {
it('converts current paragraph into a details block', () => {
const initialDoc = doc(p('Text content'));
const expectedDoc = doc(details(detailsContent(p('Text content'))));
tiptapEditor.commands.setContent(initialDoc.toJSON());
tiptapEditor.commands.toggleDetails();
expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
});
});
describe('when current block is a details block', () => {
it('convert details block into a paragraph', () => {
const initialDoc = doc(details(detailsContent(p('Text content'))));
const expectedDoc = doc(p('Text content'));
tiptapEditor.commands.setContent(initialDoc.toJSON());
tiptapEditor.commands.toggleDetails();
expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
});
});
});
it.each`
input | insertedNode
${'<details>'} | ${(...args) => details(detailsContent(p(...args)))}
${'<details'} | ${(...args) => p(...args)}
${'details>'} | ${(...args) => p(...args)}
`('with input=$input, then should insert a $insertedNode', ({ input, insertedNode }) => {
const { view } = tiptapEditor;
const { selection } = view.state;
const expectedDoc = doc(insertedNode());
// Triggers the event handler that input rules listen to
view.someProp('handleTextInput', (f) => f(view, selection.from, selection.to, input));
expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
});
});