2021-05-07 12:10:27 +00:00
|
|
|
|
import { Node } from '@tiptap/core';
|
2021-05-26 18:10:52 +00:00
|
|
|
|
import { Document } from '@tiptap/extension-document';
|
|
|
|
|
import { Paragraph } from '@tiptap/extension-paragraph';
|
|
|
|
|
import { Text } from '@tiptap/extension-text';
|
|
|
|
|
import { Editor } from '@tiptap/vue-2';
|
2021-07-06 15:08:14 +00:00
|
|
|
|
import { builders, eq } from 'prosemirror-test-builder';
|
2021-07-29 09:08:46 +00:00
|
|
|
|
import { nextTick } from 'vue';
|
2021-07-06 15:08:14 +00:00
|
|
|
|
|
|
|
|
|
export const createDocBuilder = ({ tiptapEditor, names = {} }) => {
|
|
|
|
|
const docBuilders = builders(tiptapEditor.schema, {
|
|
|
|
|
p: { nodeType: 'paragraph' },
|
|
|
|
|
...names,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return { eq, builders: docBuilders };
|
|
|
|
|
};
|
2021-05-07 12:10:27 +00:00
|
|
|
|
|
2021-07-29 09:08:46 +00:00
|
|
|
|
export const emitEditorEvent = ({ tiptapEditor, event, params = {} }) => {
|
|
|
|
|
tiptapEditor.emit(event, { editor: tiptapEditor, ...params });
|
|
|
|
|
|
|
|
|
|
return nextTick();
|
|
|
|
|
};
|
|
|
|
|
|
2021-05-26 18:10:52 +00:00
|
|
|
|
/**
|
|
|
|
|
* Creates an instance of the Tiptap Editor class
|
|
|
|
|
* with a minimal configuration for testing purposes.
|
|
|
|
|
*
|
|
|
|
|
* It only includes the Document, Text, and Paragraph
|
|
|
|
|
* extensions.
|
|
|
|
|
*
|
|
|
|
|
* @param {Array} config.extensions One or more extensions to
|
|
|
|
|
* include in the editor
|
|
|
|
|
* @returns An instance of a Tiptap’s Editor class
|
|
|
|
|
*/
|
2021-06-21 15:07:30 +00:00
|
|
|
|
export const createTestEditor = ({ extensions = [] } = {}) => {
|
2021-05-26 18:10:52 +00:00
|
|
|
|
return new Editor({
|
|
|
|
|
extensions: [Document, Text, Paragraph, ...extensions],
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2021-06-08 21:10:05 +00:00
|
|
|
|
export const mockChainedCommands = (editor, commandNames = []) => {
|
|
|
|
|
const commandMocks = commandNames.reduce(
|
|
|
|
|
(accum, commandName) => ({
|
|
|
|
|
...accum,
|
|
|
|
|
[commandName]: jest.fn(),
|
|
|
|
|
}),
|
|
|
|
|
{},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
Object.keys(commandMocks).forEach((commandName) => {
|
|
|
|
|
commandMocks[commandName].mockReturnValue(commandMocks);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
jest.spyOn(editor, 'chain').mockImplementation(() => commandMocks);
|
|
|
|
|
|
|
|
|
|
return commandMocks;
|
|
|
|
|
};
|
|
|
|
|
|
2021-05-26 18:10:52 +00:00
|
|
|
|
/**
|
|
|
|
|
* Creates a Content Editor extension for testing
|
|
|
|
|
* purposes.
|
|
|
|
|
*
|
|
|
|
|
* @param {Array} config.commands A list of command names
|
|
|
|
|
* to include in the test extension. This utility will create
|
|
|
|
|
* Jest mock functions for each command name.
|
|
|
|
|
* @returns An object with the following properties:
|
|
|
|
|
*
|
|
|
|
|
* tiptapExtension A Node tiptap extension
|
|
|
|
|
* commandMocks Jest mock functions for each created command
|
|
|
|
|
* serializer A markdown serializer for the extension
|
|
|
|
|
*/
|
|
|
|
|
export const createTestContentEditorExtension = ({ commands = [] } = {}) => {
|
|
|
|
|
const commandMocks = commands.reduce(
|
|
|
|
|
(accum, commandName) => ({
|
|
|
|
|
...accum,
|
|
|
|
|
[commandName]: jest.fn(),
|
|
|
|
|
}),
|
|
|
|
|
{},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
commandMocks,
|
|
|
|
|
tiptapExtension: Node.create({
|
|
|
|
|
name: 'label',
|
|
|
|
|
priority: 101,
|
|
|
|
|
inline: true,
|
|
|
|
|
group: 'inline',
|
|
|
|
|
addCommands() {
|
|
|
|
|
return commands.reduce(
|
|
|
|
|
(accum, commandName) => ({
|
|
|
|
|
...accum,
|
|
|
|
|
[commandName]: (...params) => () => commandMocks[commandName](...params),
|
|
|
|
|
}),
|
|
|
|
|
{},
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
addAttributes() {
|
|
|
|
|
return {
|
|
|
|
|
labelName: {
|
|
|
|
|
default: null,
|
2021-09-16 15:12:47 +00:00
|
|
|
|
parseHTML: (element) => element.dataset.labelName,
|
2021-05-07 12:10:27 +00:00
|
|
|
|
},
|
2021-05-26 18:10:52 +00:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
parseHTML() {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
tag: 'span[data-reference="label"]',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
},
|
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
|
|
|
return ['span', HTMLAttributes, 0];
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
serializer: (state, node) => {
|
|
|
|
|
state.write(`~${node.attrs.labelName}`);
|
|
|
|
|
state.closeBlock(node);
|
2021-05-07 12:10:27 +00:00
|
|
|
|
},
|
2021-05-26 18:10:52 +00:00
|
|
|
|
};
|
|
|
|
|
};
|