f1b51729fc
refs https://github.com/TryGhost/Product/issues/3504 - App component now uses React hooks intead of React class component - App is now written in TypeScript - All JavaScript is now removed from the Comments-UI project - Removed `PopupNotification` because these were never displayed - Removed `action` from AppContext (never used) - Moved options parsing out of `index.ts` into a separate utility file, similar to the signup-form - Improved reliability of some editor tests by always waiting for the editor to be focused (was not always the case) + added an utility method for this
318 lines
10 KiB
TypeScript
318 lines
10 KiB
TypeScript
import {MockedApi, getHeight, getModifierKey, initialize, selectText, setClipboard, waitEditorFocused} from '../utils/e2e';
|
|
import {expect, test} from '@playwright/test';
|
|
|
|
test.describe('Editor', async () => {
|
|
test('Can comment on a post', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
mockedApi.addComment({
|
|
html: '<p>This is comment 1</p>'
|
|
});
|
|
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly',
|
|
count: true,
|
|
title: 'Title'
|
|
});
|
|
|
|
await expect(frame.getByTestId('comment-component')).toHaveCount(1);
|
|
await expect(frame.getByTestId('count')).toHaveText('1 comment');
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
const editorHeight = await getHeight(editor);
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
// Wait for animation to finish
|
|
await page.waitForTimeout(200);
|
|
const newEditorHeight = await getHeight(editor);
|
|
|
|
expect(newEditorHeight).toBeGreaterThan(editorHeight);
|
|
|
|
// Type in the editor
|
|
await editor.type('Newly added comment');
|
|
|
|
// Post the comment
|
|
const button = await frame.getByTestId('submit-form-button');
|
|
await button.click();
|
|
|
|
// Check editor is empty
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check the comment is added to the view
|
|
await expect(frame.getByTestId('comment-component')).toHaveCount(2);
|
|
await expect(frame.getByTestId('count')).toHaveText('2 comments');
|
|
|
|
await expect(frame.getByText('This is comment 1')).toBeVisible();
|
|
await expect(frame.getByText('Newly added comment')).toBeVisible();
|
|
});
|
|
|
|
test('Can use C to focus editor', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
const editorHeight = await getHeight(editor);
|
|
|
|
await page.keyboard.press('c');
|
|
|
|
// Wait for animation to finish
|
|
await page.waitForTimeout(200);
|
|
const newEditorHeight = await getHeight(editor);
|
|
|
|
expect(newEditorHeight).toBeGreaterThan(editorHeight);
|
|
});
|
|
|
|
test('Can use CMD+ENTER to submmit', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
mockedApi.addComment({
|
|
html: '<p>This is comment 1</p>'
|
|
});
|
|
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly',
|
|
count: true,
|
|
title: 'Title'
|
|
});
|
|
|
|
await expect(frame.getByTestId('comment-component')).toHaveCount(1);
|
|
await expect(frame.getByTestId('count')).toHaveText('1 comment');
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
const editorHeight = await getHeight(editor);
|
|
|
|
await editor.click({force: true});
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
// Wait for animation to finish
|
|
await page.waitForTimeout(200);
|
|
const newEditorHeight = await getHeight(editor);
|
|
|
|
expect(newEditorHeight).toBeGreaterThan(editorHeight);
|
|
|
|
// Type in the editor
|
|
await editor.type('Newly added comment');
|
|
|
|
// Post the comment
|
|
await page.keyboard.press(`${getModifierKey()}+Enter`);
|
|
|
|
// Check editor is empty
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check the comment is added to the view
|
|
await expect(frame.getByTestId('comment-component')).toHaveCount(2);
|
|
await expect(frame.getByTestId('count')).toHaveText('2 comments');
|
|
|
|
await expect(frame.getByText('This is comment 1')).toBeVisible();
|
|
await expect(frame.getByText('Newly added comment')).toBeVisible();
|
|
});
|
|
|
|
test.describe('Markdown', () => {
|
|
test('Can use > to type a quote', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
// Type in the editor
|
|
await editor.type('> This is a quote');
|
|
await page.keyboard.press('Enter');
|
|
await editor.type('This is a new line');
|
|
await page.keyboard.press('Enter');
|
|
await page.keyboard.press('Enter');
|
|
await editor.type('This is a new paragraph');
|
|
|
|
// Post the comment
|
|
await page.keyboard.press(`${getModifierKey()}+Enter`);
|
|
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check comment
|
|
expect(mockedApi.comments).toHaveLength(1);
|
|
expect(mockedApi.comments[0].html).toBe('<blockquote><p>This is a quote</p><p>This is a new line</p></blockquote><p>This is a new paragraph<br></p>');
|
|
});
|
|
|
|
test('Can paste an URL to create a link', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
await setClipboard(page, 'https://www.google.com');
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Check focused
|
|
const editorEditable = frame.getByTestId('editor');
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
// Type in the editor
|
|
await editor.type('Click here to go to a new page');
|
|
|
|
// Select 'here'
|
|
await selectText(editorEditable, /here/);
|
|
await page.keyboard.press(`${getModifierKey()}+KeyV`);
|
|
await page.waitForTimeout(200);
|
|
|
|
// Click the button
|
|
const button = await frame.getByTestId('submit-form-button');
|
|
await button.click();
|
|
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check comment
|
|
expect(mockedApi.comments).toHaveLength(1);
|
|
expect(mockedApi.comments[0].html).toBe('<p>Click <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.google.com">here</a> to go to a new page</p>');
|
|
});
|
|
|
|
test('Can paste text without creating a url', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
await setClipboard(page, 'Some random text');
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
const editorEditable = frame.getByTestId('editor');
|
|
|
|
// Type in the editor
|
|
await editor.type('Click here to go to a new page');
|
|
|
|
// Select 'here'
|
|
await selectText(editorEditable, /here/);
|
|
await page.keyboard.press(`${getModifierKey()}+KeyV`);
|
|
await page.waitForTimeout(200);
|
|
|
|
// Click the button
|
|
const button = await frame.getByTestId('submit-form-button');
|
|
await button.click();
|
|
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check comment
|
|
expect(mockedApi.comments).toHaveLength(1);
|
|
expect(mockedApi.comments[0].html).toBe('<p>Click Some random text to go to a new page</p>');
|
|
});
|
|
|
|
test('Cannot bold text', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
await setClipboard(page, 'Some random text');
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
const editorEditable = frame.getByTestId('editor');
|
|
|
|
// Type in the editor
|
|
await editor.type('Click here to go to a new page');
|
|
|
|
// Select 'here'
|
|
await selectText(editorEditable, /here/);
|
|
await page.keyboard.press(`${getModifierKey()}+B`);
|
|
await page.waitForTimeout(200);
|
|
|
|
// Click the button
|
|
const button = await frame.getByTestId('submit-form-button');
|
|
await button.click();
|
|
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check comment
|
|
expect(mockedApi.comments).toHaveLength(1);
|
|
expect(mockedApi.comments[0].html).toBe('<p>Click here to go to a new page</p>');
|
|
});
|
|
|
|
test('Can do a soft line break', async ({page}) => {
|
|
const mockedApi = new MockedApi({});
|
|
mockedApi.setMember({});
|
|
|
|
const {frame} = await initialize({
|
|
mockedApi,
|
|
page,
|
|
publication: 'Publisher Weekly'
|
|
});
|
|
|
|
const editor = frame.getByTestId('form-editor');
|
|
|
|
await editor.click({force: true});
|
|
|
|
// Wait for focused
|
|
await waitEditorFocused(editor);
|
|
|
|
// Type in the editor
|
|
await editor.type('This is line 1');
|
|
await page.keyboard.press('Shift+Enter');
|
|
await editor.type('This is line 2');
|
|
await page.keyboard.press('Enter');
|
|
await editor.type('This is a new paragraph');
|
|
|
|
// Click the button
|
|
const button = await frame.getByTestId('submit-form-button');
|
|
await button.click();
|
|
|
|
await expect(editor).toHaveText('');
|
|
|
|
// Check comment
|
|
expect(mockedApi.comments).toHaveLength(1);
|
|
expect(mockedApi.comments[0].html).toBe('<p>This is line 1<br>This is line 2</p><p>This is a new paragraph</p>');
|
|
});
|
|
});
|
|
});
|
|
|