Skip to content

Commit 452990a

Browse files
makhnatkinmakhnatkin
authored
test: added Italic, Underline, Strikethrough, Marked tests (#770)
1 parent ef69f89 commit 452990a

File tree

6 files changed

+877
-2
lines changed

6 files changed

+877
-2
lines changed

‎tests/visual-tests/playground/Bold.visual.test.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,8 @@ test.describe('Bold', () => {
5050
await editor.assertToolbarButtonNotSelected('Bold');
5151
});
5252

53-
//
53+
// key combo fails in headless mode
5454
test.skip('should mark via keyboard shortcut @wysiwyg', async ({editor, wait}) => {
55-
// Skip: key combo fails in Docker for unknown reason
5655
await editor.switchMode('wysiwyg');
5756
await editor.assertToolbarButtonNotSelected('Bold');
5857

‎tests/visual-tests/playground/Italic.visual.test.tsx

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import dd from 'ts-dedent';
2+
3+
import {expect, test} from 'playwright/core';
4+
5+
import {Playground} from './Playground.helpers';
6+
7+
test.describe('Italic', () => {
8+
test.beforeEach(async ({mount}) => {
9+
const initialMarkup = dd`
10+
some text
11+
`;
12+
13+
await mount(<Playground initial={initialMarkup} />);
14+
});
15+
16+
test.describe('mark', () => {
17+
test('should mark via toolbar @wysiwyg', async ({editor, wait}) => {
18+
await editor.switchMode('wysiwyg');
19+
await editor.assertToolbarButtonNotSelected('Italic');
20+
21+
await editor.focus();
22+
await editor.press('ArrowDown');
23+
await editor.press('Enter');
24+
25+
await editor.clickToolbarButton('Italic');
26+
await wait.timeout();
27+
28+
await editor.pressSequentially('next');
29+
await editor.assertToolbarButtonSelected('Italic');
30+
31+
await editor.press('ArrowUp');
32+
await editor.assertToolbarButtonNotSelected('Italic');
33+
});
34+
35+
test('should mark via input rule @wysiwyg', async ({editor, wait}) => {
36+
await editor.switchMode('wysiwyg');
37+
await editor.assertToolbarButtonNotSelected('Italic');
38+
39+
await editor.focus();
40+
await editor.press('ArrowDown');
41+
await editor.press('Enter');
42+
43+
await editor.inputRule('*next*');
44+
await wait.timeout();
45+
await editor.press('ArrowLeft');
46+
47+
await editor.assertToolbarButtonSelected('Italic');
48+
49+
await editor.press('ArrowUp');
50+
await editor.assertToolbarButtonNotSelected('Italic');
51+
});
52+
53+
// key combo fails in headless mode
54+
test.skip('should mark via keyboard shortcut @wysiwyg', async ({editor, wait}) => {
55+
await editor.switchMode('wysiwyg');
56+
await editor.assertToolbarButtonNotSelected('Italic');
57+
58+
await editor.focus();
59+
await editor.press('ArrowDown');
60+
await editor.press('Enter');
61+
62+
await editor.press('Control+I');
63+
await wait.timeout();
64+
65+
await editor.pressSequentially('next');
66+
await wait.timeout();
67+
68+
await editor.assertToolbarButtonSelected('Italic');
69+
70+
await editor.press('ArrowUp');
71+
await editor.assertToolbarButtonNotSelected('Italic');
72+
});
73+
74+
test('should mark via toolbar @markup', async ({editor, wait}) => {
75+
await editor.switchMode('markup');
76+
77+
await editor.focus();
78+
await editor.press('ArrowDown');
79+
await editor.press('Enter');
80+
81+
await editor.clickToolbarButton('Italic');
82+
await wait.timeout();
83+
await editor.pressSequentially('next');
84+
85+
await expect(editor.getByTextInContenteditable('_next_')).toBeVisible();
86+
});
87+
});
88+
89+
test.describe('mode switch', () => {
90+
test('should remain after mode switch @wysiwyg @markup', async ({editor, wait}) => {
91+
await editor.clearContent();
92+
93+
const markup = 'some text\n*next*';
94+
await editor.switchMode('markup');
95+
await editor.fill(markup);
96+
await wait.timeout();
97+
98+
await editor.switchMode('wysiwyg');
99+
100+
await editor.focus();
101+
await editor.press('ArrowDown');
102+
await wait.timeout();
103+
104+
await editor.assertToolbarButtonSelected('Italic');
105+
106+
await editor.press('ArrowUp');
107+
await editor.assertToolbarButtonNotSelected('Italic');
108+
109+
await editor.switchMode('markup');
110+
});
111+
});
112+
113+
test.describe('interaction', () => {
114+
test('should add mark to selected text via toolbar @wysiwyg', async ({editor, wait}) => {
115+
await editor.switchMode('wysiwyg');
116+
await editor.assertToolbarButtonNotSelected('Italic');
117+
118+
await editor.focus();
119+
await editor.press('ArrowDown');
120+
await editor.press('Enter');
121+
122+
await editor.pressSequentially('next');
123+
await wait.timeout();
124+
125+
await editor.selectTextIn('p:nth-child(2)');
126+
127+
await editor.assertToolbarButtonNotSelected('Italic');
128+
await editor.clickToolbarButton('Italic');
129+
await wait.timeout(300);
130+
131+
await editor.assertToolbarButtonSelected('Italic');
132+
await editor.press('ArrowUp');
133+
await wait.timeout();
134+
135+
await editor.assertToolbarButtonNotSelected('Italic');
136+
});
137+
138+
test('should add mark to selected text via context toolbar @wysiwyg', async ({
139+
editor,
140+
wait,
141+
}) => {
142+
await editor.switchMode('wysiwyg');
143+
await editor.assertToolbarButtonNotSelected('Italic');
144+
145+
await editor.focus();
146+
await editor.press('ArrowDown');
147+
await editor.press('Enter');
148+
149+
await editor.pressSequentially('next');
150+
await wait.timeout();
151+
152+
await editor.selectTextIn('p:nth-child(2)');
153+
154+
await editor.assertToolbarButtonNotSelected('Italic');
155+
await editor.assertToolbarButtonNotSelected('Italic', true);
156+
await editor.clickToolbarButton('Italic', true);
157+
await wait.timeout(300);
158+
159+
await editor.assertToolbarButtonSelected('Italic');
160+
await editor.press('ArrowUp');
161+
162+
await editor.assertToolbarButtonNotSelected('Italic');
163+
});
164+
165+
test('should delete mark to selected text via toolbar @wysiwyg', async ({editor, wait}) => {
166+
await editor.switchMode('wysiwyg');
167+
168+
await editor.focus();
169+
await editor.press('ArrowDown');
170+
await editor.press('Enter');
171+
172+
await editor.inputRule('*next*');
173+
await wait.timeout();
174+
175+
await editor.selectTextIn('p:nth-child(2)');
176+
await editor.assertToolbarButtonSelected('Italic');
177+
178+
await editor.clickToolbarButton('Italic');
179+
await wait.timeout();
180+
await editor.assertToolbarButtonNotSelected('Italic');
181+
});
182+
});
183+
});

‎tests/visual-tests/playground/Marked.visual.test.tsx

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import dd from 'ts-dedent';
2+
3+
import {expect, test} from 'playwright/core';
4+
5+
import {Playground} from './Playground.helpers';
6+
7+
test.describe('Marked', () => {
8+
test.beforeEach(async ({mount}) => {
9+
const initialMarkup = dd`
10+
some text
11+
`;
12+
13+
await mount(<Playground initial={initialMarkup} />);
14+
});
15+
16+
test.describe('mark', () => {
17+
test('should mark via toolbar @wysiwyg', async ({editor, wait}) => {
18+
await editor.switchMode('wysiwyg');
19+
await editor.assertToolbarButtonNotSelected('Marked');
20+
21+
await editor.focus();
22+
await editor.press('ArrowDown');
23+
await editor.press('Enter');
24+
25+
await editor.clickToolbarButton('Marked');
26+
await wait.timeout();
27+
28+
await editor.pressSequentially('next');
29+
await editor.assertToolbarButtonSelected('Marked');
30+
31+
await editor.press('ArrowUp');
32+
await editor.assertToolbarButtonNotSelected('Marked');
33+
});
34+
35+
test('should mark via input rule @wysiwyg', async ({editor, wait}) => {
36+
await editor.switchMode('wysiwyg');
37+
await editor.assertToolbarButtonNotSelected('Marked');
38+
39+
await editor.focus();
40+
await editor.press('ArrowDown');
41+
await editor.press('Enter');
42+
43+
await editor.inputRule('==next==');
44+
await wait.timeout();
45+
await editor.press('ArrowLeft');
46+
47+
await editor.assertToolbarButtonSelected('Marked');
48+
49+
await editor.press('ArrowUp');
50+
await editor.assertToolbarButtonNotSelected('Marked');
51+
});
52+
53+
test('should mark via toolbar @markup', async ({editor, wait}) => {
54+
await editor.switchMode('markup');
55+
56+
await editor.focus();
57+
await editor.press('ArrowDown');
58+
await editor.press('Enter');
59+
60+
await editor.openToolbarMoreMenu();
61+
await wait.timeout();
62+
63+
await editor.clickToolbarButton('Marked', true);
64+
await wait.timeout();
65+
await editor.pressSequentially('next');
66+
67+
await expect(editor.getByTextInContenteditable('==next==')).toBeVisible();
68+
});
69+
});
70+
71+
test.describe('mode switch', () => {
72+
test('should remain after mode switch @wysiwyg @markup', async ({editor, wait}) => {
73+
await editor.clearContent();
74+
75+
const markup = 'some text\n==next==';
76+
await editor.switchMode('markup');
77+
await editor.fill(markup);
78+
await wait.timeout();
79+
80+
await editor.switchMode('wysiwyg');
81+
82+
await editor.focus();
83+
await editor.press('ArrowDown');
84+
await wait.timeout();
85+
86+
await editor.assertToolbarButtonSelected('Marked');
87+
88+
await editor.press('ArrowUp');
89+
await editor.assertToolbarButtonNotSelected('Marked');
90+
91+
await editor.switchMode('markup');
92+
});
93+
});
94+
95+
test.describe('interaction', () => {
96+
test('should add mark to selected text via toolbar @wysiwyg', async ({editor, wait}) => {
97+
await editor.switchMode('wysiwyg');
98+
await editor.assertToolbarButtonNotSelected('Marked');
99+
100+
await editor.focus();
101+
await editor.press('ArrowDown');
102+
await editor.press('Enter');
103+
104+
await editor.pressSequentially('next');
105+
await wait.timeout();
106+
107+
await editor.selectTextIn('p:nth-child(2)');
108+
109+
await editor.assertToolbarButtonNotSelected('Marked');
110+
await editor.clickToolbarButton('Marked');
111+
await wait.timeout(300);
112+
113+
await editor.assertToolbarButtonSelected('Marked');
114+
await editor.press('ArrowUp');
115+
await wait.timeout();
116+
117+
await editor.assertToolbarButtonNotSelected('Marked');
118+
});
119+
120+
test('should add mark to selected text via context toolbar @wysiwyg', async ({
121+
editor,
122+
wait,
123+
}) => {
124+
await editor.switchMode('wysiwyg');
125+
await editor.assertToolbarButtonNotSelected('Marked');
126+
127+
await editor.focus();
128+
await editor.press('ArrowDown');
129+
await editor.press('Enter');
130+
131+
await editor.pressSequentially('next');
132+
await wait.timeout();
133+
134+
await editor.selectTextIn('p:nth-child(2)');
135+
136+
await editor.assertToolbarButtonNotSelected('Marked');
137+
await editor.assertToolbarButtonNotSelected('Marked', true);
138+
await editor.clickToolbarButton('Marked', true);
139+
await wait.timeout(300);
140+
141+
await editor.assertToolbarButtonSelected('Marked');
142+
await editor.press('ArrowUp');
143+
144+
await editor.assertToolbarButtonNotSelected('Marked');
145+
});
146+
147+
test('should delete mark to selected text via toolbar @wysiwyg', async ({editor, wait}) => {
148+
await editor.switchMode('wysiwyg');
149+
150+
await editor.focus();
151+
await editor.press('ArrowDown');
152+
await editor.press('Enter');
153+
154+
await editor.inputRule('==next==');
155+
await wait.timeout();
156+
157+
await editor.selectTextIn('p:nth-child(2)');
158+
await editor.assertToolbarButtonSelected('Marked');
159+
160+
await editor.clickToolbarButton('Marked');
161+
await wait.timeout();
162+
await editor.assertToolbarButtonNotSelected('Marked');
163+
});
164+
});
165+
});

0 commit comments

Comments
 (0)