feat: v4.0.0 (#1016)
Co-authored-by: Denys Konovalov <kontakt@denyskon.de> Co-authored-by: Mathieu COSYNS <64072917+Mathieu-COSYNS@users.noreply.github.com>
This commit is contained in:
Daniel Lautzenheiser
committed by
GitHub
GitHub
parent
682576ffc4
commit
799c7e6936
322
cypress/support/commands.ts
Normal file
322
cypress/support/commands.ts
Normal file
@ -0,0 +1,322 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add("login", (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
|
||||
import { oneLineTrim } from 'common-tags';
|
||||
import { rehype } from 'rehype';
|
||||
import { visit } from 'unist-util-visit';
|
||||
|
||||
function runTimes(
|
||||
cyInstance: Cypress.Chainable,
|
||||
fn: (chain: Cypress.Chainable) => Cypress.Chainable,
|
||||
count = 1,
|
||||
) {
|
||||
let chain = cyInstance,
|
||||
i = count;
|
||||
while (i) {
|
||||
i -= 1;
|
||||
chain = fn(chain);
|
||||
}
|
||||
return chain;
|
||||
}
|
||||
|
||||
(
|
||||
[
|
||||
'enter',
|
||||
'backspace',
|
||||
['selectAll', 'selectall'],
|
||||
['up', 'upArrow'],
|
||||
['down', 'downArrow'],
|
||||
['left', 'leftArrow'],
|
||||
['right', 'rightArrow'],
|
||||
] as const
|
||||
).forEach(key => {
|
||||
const [cmd, keyName] = typeof key === 'object' ? key : [key, key];
|
||||
Cypress.Commands.add(cmd, { prevSubject: true }, (subject, { shift, times = 1 } = {}) => {
|
||||
const fn = (chain: Cypress.Chainable) =>
|
||||
chain.type(`${shift ? '{shift}' : ''}{${keyName}}`, { delay: 50 });
|
||||
return runTimes(cy.wrap(subject), fn, times);
|
||||
});
|
||||
});
|
||||
|
||||
// Convert `tab` command from plugin to a child command with `times` support
|
||||
Cypress.Commands.add('tabkey', { prevSubject: true }, (subject, { shift, times } = {}) => {
|
||||
const fn = (chain: Cypress.Chainable) => chain.tab({ shift });
|
||||
cy.wait(100);
|
||||
return runTimes(cy, fn, times).wrap(subject);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
|
||||
cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
|
||||
|
||||
cy.document().trigger('selectionchange');
|
||||
return cy.wrap(subject);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('print', { prevSubject: 'optional' }, (subject, str) => {
|
||||
cy.log(str);
|
||||
console.info(`cy.log: ${str}`);
|
||||
return cy.wrap(subject);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
|
||||
return cy.wrap(subject).selection($el => {
|
||||
if (typeof query === 'string') {
|
||||
const anchorNode = getTextNode($el[0], query);
|
||||
const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
|
||||
const anchorOffset = anchorNode?.wholeText.indexOf(query) ?? 0;
|
||||
const focusOffset = endQuery
|
||||
? (focusNode?.wholeText ?? '').indexOf(endQuery) + endQuery.length
|
||||
: anchorOffset + query.length;
|
||||
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
|
||||
} else if (typeof query === 'object') {
|
||||
const el = $el[0];
|
||||
const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
|
||||
const anchorOffset = query.anchorOffset || 0;
|
||||
const focusNode = query.focusQuery
|
||||
? getTextNode(el.querySelector(query.focusQuery))
|
||||
: anchorNode;
|
||||
const focusOffset = query.focusOffset || 0;
|
||||
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
|
||||
}
|
||||
return cy.wrap(subject);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('setCursor', { prevSubject: true }, (subject, query, atStart) => {
|
||||
return cy.wrap(subject).selection($el => {
|
||||
const node = getTextNode($el[0], query);
|
||||
const offset = (node?.wholeText.indexOf(query) ?? 0) + (atStart ? 0 : query.length);
|
||||
const document = node?.ownerDocument;
|
||||
document?.getSelection()?.removeAllRanges();
|
||||
document?.getSelection()?.collapse(node, offset);
|
||||
|
||||
return cy.wrap(subject);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('setCursorBefore', { prevSubject: true }, (subject, query) => {
|
||||
cy.wrap(subject).setCursor(query, true);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('setCursorAfter', { prevSubject: true }, (subject, query) => {
|
||||
cy.wrap(subject).setCursor(query);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('login', () => {
|
||||
cy.viewport(1200, 1200);
|
||||
cy.visit('/');
|
||||
cy.contains('button', 'Login').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('loginAndNewPost', () => {
|
||||
cy.login();
|
||||
cy.contains('a', 'New Post').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add(
|
||||
'dragTo',
|
||||
{
|
||||
prevSubject: 'element',
|
||||
},
|
||||
(subject, selector, options) => {
|
||||
cy.wrap(subject, { log: false }).then(subject => {
|
||||
return cy
|
||||
.document()
|
||||
.its('body')
|
||||
.find(selector)
|
||||
.then($el => {
|
||||
const target = $el[0].getBoundingClientRect();
|
||||
const x = Math.floor(target.x + target.width / 2);
|
||||
const y = target.y + 200;
|
||||
|
||||
cy.wrap(subject)
|
||||
.trigger('pointerdown', { force: true })
|
||||
.wait(options?.delay || 100, { log: Boolean(options?.delay) });
|
||||
|
||||
cy.wrap(subject)
|
||||
.trigger('pointermove', {
|
||||
force: true,
|
||||
clientX: x,
|
||||
clientY: y,
|
||||
})
|
||||
.wait(options?.delay || 100, { log: Boolean(options?.delay) });
|
||||
|
||||
cy.wrap(subject)
|
||||
.trigger('pointermove', {
|
||||
force: true,
|
||||
clientX: x,
|
||||
clientY: y,
|
||||
})
|
||||
.wait(options?.delay || 100, { log: Boolean(options?.delay) });
|
||||
|
||||
cy.document().its('body').find(selector).trigger('pointerup', { force: true }).wait(250);
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
Cypress.Commands.add('clickToolbarButton', (title, { times } = {}) => {
|
||||
const isHeading = title.startsWith('Heading');
|
||||
if (isHeading) {
|
||||
cy.get('button[title="Headings"]').click();
|
||||
}
|
||||
const instance = isHeading ? cy.contains('div', title) : cy.get(`button[title="${title}"]`);
|
||||
const fn = (chain: Cypress.Chainable) => chain.click();
|
||||
// this seems to be the only thing that makes cypress stable(ish)
|
||||
// eslint-disable-next-line cypress/no-unnecessary-waiting
|
||||
cy.wait(100);
|
||||
return runTimes(instance, fn, times).focused();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('insertEditorComponent', (title: string) => {
|
||||
cy.get('button[title="Add Component"]').click();
|
||||
cy.contains('div', title).click().focused();
|
||||
});
|
||||
|
||||
(
|
||||
[
|
||||
['clickHeadingOneButton', 'Heading 1'],
|
||||
['clickHeadingTwoButton', 'Heading 2'],
|
||||
['clickOrderedListButton', 'Numbered List'],
|
||||
['clickUnorderedListButton', 'Bulleted List'],
|
||||
['clickCodeButton', 'Code'],
|
||||
['clickItalicButton', 'Italic'],
|
||||
['clickQuoteButton', 'Quote'],
|
||||
['clickLinkButton', 'Link'],
|
||||
] as const
|
||||
).forEach(([commandName, toolbarButtonName]) => {
|
||||
Cypress.Commands.add(commandName, opts => {
|
||||
return cy.clickToolbarButton(toolbarButtonName, opts);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('clickModeToggle', () => {
|
||||
cy.get('.cms-editor-visual').within(() => {
|
||||
cy.get('button[role="switch"]').click().focused();
|
||||
});
|
||||
});
|
||||
|
||||
([['insertCodeBlock', 'Code Block']] as const).forEach(([commandName, componentTitle]) => {
|
||||
Cypress.Commands.add(commandName, () => {
|
||||
return cy.insertEditorComponent(componentTitle);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('getMarkdownEditor', () => {
|
||||
return cy.get('[data-slate-editor="true"]');
|
||||
});
|
||||
|
||||
Cypress.Commands.add('confirmMarkdownEditorContent', (expectedDomString: string) => {
|
||||
return cy.getMarkdownEditor().should(([element]) => {
|
||||
// Slate makes the following representations:
|
||||
// - blank line: 2 BOM's + <br>
|
||||
// - blank element (placed inside empty elements): 1 BOM + <br>
|
||||
// - inline element (e.g. link tag <a>) are wrapped with BOM characters (https://github.com/ianstormtaylor/slate/issues/2722)
|
||||
// We replace to represent a blank line as a single <br>, remove the
|
||||
// contents of elements that are actually empty, and remove BOM characters wrapping <a> tags
|
||||
const actualDomString = toPlainTree(element.innerHTML)
|
||||
.replace(/\uFEFF\uFEFF<br>/g, '<br>')
|
||||
.replace(/\uFEFF<br>/g, '')
|
||||
.replace(/\uFEFF<a>/g, '<a>')
|
||||
.replace(/<\/a>\uFEFF/g, '</a>');
|
||||
expect(actualDomString).equals(oneLineTrim(expectedDomString));
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('clearMarkdownEditorContent', () => {
|
||||
return cy.getMarkdownEditor().selectAll().backspace({ times: 2 });
|
||||
});
|
||||
|
||||
Cypress.Commands.add('confirmRawEditorContent', expectedDomString => {
|
||||
cy.get('.cms-editor-raw').within(() => {
|
||||
cy.contains('span', expectedDomString);
|
||||
});
|
||||
});
|
||||
|
||||
function toPlainTree(domString: string) {
|
||||
return rehype()
|
||||
.use(removeSlateArtifacts)
|
||||
.data('settings', { fragment: true })
|
||||
.processSync(domString)
|
||||
.toString();
|
||||
}
|
||||
|
||||
function getActualBlockChildren(node: any) {
|
||||
if (node.tagName === 'span') {
|
||||
return node.children.flatMap(getActualBlockChildren);
|
||||
}
|
||||
if (node.children) {
|
||||
return {
|
||||
...node,
|
||||
children: node.children.flatMap(getActualBlockChildren),
|
||||
};
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
function removeSlateArtifacts() {
|
||||
return function transform(tree: any) {
|
||||
visit(tree, 'element', node => {
|
||||
// remove all element attributes
|
||||
delete node.properties;
|
||||
|
||||
// remove slate padding spans to simplify test cases
|
||||
if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(node.tagName)) {
|
||||
node.children = node.children.flatMap(getActualBlockChildren);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function getTextNode(el: Node, match?: string): Text | null {
|
||||
const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
|
||||
if (!match) {
|
||||
return walk.nextNode() as Text;
|
||||
}
|
||||
|
||||
let node: Text;
|
||||
while ((node = walk.nextNode() as Text)) {
|
||||
if (node.wholeText.includes(match)) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function setBaseAndExtent(
|
||||
anchorNode: Node | null,
|
||||
anchorOffset: number,
|
||||
focusNode: Node | null,
|
||||
focusOffset: number,
|
||||
) {
|
||||
if (!anchorNode || !focusNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const document = anchorNode?.ownerDocument;
|
||||
document?.getSelection()?.removeAllRanges();
|
||||
document?.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
|
||||
}
|
||||
27
cypress/support/e2e.ts
Normal file
27
cypress/support/e2e.ts
Normal file
@ -0,0 +1,27 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
import 'cypress-plugin-tab';
|
||||
import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
|
||||
|
||||
addMatchImageSnapshotCommand({
|
||||
failureThreshold: 0.01,
|
||||
failureThresholdType: 'percent',
|
||||
customDiffConfig: { threshold: 0.09 },
|
||||
capture: 'viewport',
|
||||
});
|
||||
|
||||
Cypress.on('uncaught:exception', () => false);
|
||||
|
||||
import './commands';
|
||||
Reference in New Issue
Block a user