Skip to content

Commit 71ab7ae

Browse files
d3m1d0vd3m1d0v
committed
test(SearchPanel): add visual tests for search panel
1 parent d3af4a2 commit 71ab7ae

File tree

2 files changed

+291
-0
lines changed

2 files changed

+291
-0
lines changed

‎tests/playwright/core/editor.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type {Expect, Locator, Page} from '@playwright/test';
22

33
import type {DataTransferType, MarkdownEditorMode} from 'src';
4+
import {SearchQA} from 'src/modules/search';
45

56
type YfmTableCellMenuType = 'row' | 'column';
67
type YfmTableActionKind =
@@ -198,6 +199,84 @@ class YfmTable {
198199
}
199200
}
200201

202+
class SearchPanel {
203+
readonly panelLocator;
204+
205+
readonly closeButtonLocator;
206+
readonly expandButtonLocator;
207+
208+
readonly counterLocator;
209+
readonly nextButtonLocator;
210+
readonly prevButtonLocator;
211+
212+
readonly searchInputLocator;
213+
readonly replaceInputLocator;
214+
215+
readonly caseSensitiveCheckboxLocator;
216+
readonly wholeWordCheckboxLocator;
217+
218+
readonly replaceButtonLocator;
219+
readonly replaceAllButtonLocator;
220+
221+
constructor(page: Page) {
222+
this.panelLocator = page.getByTestId(SearchQA.Panel);
223+
224+
this.closeButtonLocator = this.panelLocator.getByTestId(SearchQA.CloseBtn);
225+
this.expandButtonLocator = this.panelLocator.getByTestId(SearchQA.ExpandBtn);
226+
227+
this.counterLocator = this.panelLocator.getByTestId(SearchQA.Counter);
228+
this.nextButtonLocator = this.panelLocator.getByTestId(SearchQA.NextBtn);
229+
this.prevButtonLocator = this.panelLocator.getByTestId(SearchQA.PrevBtn);
230+
231+
this.searchInputLocator = this.panelLocator.getByTestId(SearchQA.FindInput);
232+
this.replaceInputLocator = this.panelLocator.getByTestId(SearchQA.ReplaceInput);
233+
234+
this.caseSensitiveCheckboxLocator = this.panelLocator.getByTestId(
235+
SearchQA.CaseSensitiveCheck,
236+
);
237+
this.wholeWordCheckboxLocator = this.panelLocator.getByTestId(SearchQA.WholeWordCheck);
238+
239+
this.replaceButtonLocator = this.panelLocator.getByTestId(SearchQA.ReplaceBtn);
240+
this.replaceAllButtonLocator = this.panelLocator.getByTestId(SearchQA.ReplaceAllBtn);
241+
}
242+
243+
waitForVisible() {
244+
return this.panelLocator.waitFor({state: 'visible'});
245+
}
246+
247+
waitForHidden() {
248+
return this.panelLocator.waitFor({state: 'hidden'});
249+
}
250+
251+
close() {
252+
return this.closeButtonLocator.click();
253+
}
254+
255+
expand() {
256+
return this.expandButtonLocator.click();
257+
}
258+
259+
getCounterText() {
260+
return this.counterLocator.textContent();
261+
}
262+
263+
fillFindText(text: string) {
264+
return this.searchInputLocator.locator('input').fill(text);
265+
}
266+
267+
fillReplaceText(text: string) {
268+
return this.replaceInputLocator.locator('input').fill(text);
269+
}
270+
271+
replace() {
272+
return this.replaceButtonLocator.click();
273+
}
274+
275+
replaceAll() {
276+
return this.replaceAllButtonLocator.click();
277+
}
278+
}
279+
201280
class MarkdownEditorLocators {
202281
readonly component;
203282
readonly contenteditable;
@@ -248,6 +327,7 @@ export class MarkdownEditorPage {
248327
readonly yfmNote;
249328
readonly image;
250329
readonly link;
330+
readonly searchPanel;
251331
protected readonly page: Page;
252332
protected readonly expect: Expect;
253333

@@ -261,6 +341,7 @@ export class MarkdownEditorPage {
261341
this.yfmNote = new YfmNote(page);
262342
this.image = new Image(page);
263343
this.link = new Link(page, expect);
344+
this.searchPanel = new SearchPanel(page);
264345
}
265346

266347
/**
@@ -698,4 +779,10 @@ export class MarkdownEditorPage {
698779
async waitForCMAutocomplete() {
699780
await this.locators.cmAutocomplete.waitFor({state: 'visible'});
700781
}
782+
783+
async openSearchPanel() {
784+
await this.focus();
785+
await this.locators.contenteditable.press('Meta+F');
786+
await this.searchPanel.waitForVisible();
787+
}
701788
}

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

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
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('SearchPanel', () => {
8+
test.beforeEach(async ({mount}) => {
9+
const markup = dd`
10+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa purus, commodo et leo vel, pretium facilisis elit.
11+
12+
Vivamus a risus sed orci interdum volutpat. Vivamus aliquet euismod laoreet. Donec nec erat non sapien luctus scelerisque.
13+
14+
Duis fringilla eros sem, id luctus urna maximus sit amet. Aenean vitae massa ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
15+
16+
Phasellus in turpis vitae orci suscipit ultrices. Ut interdum urna a quam aliquet, sed ultricies diam egestas.
17+
`;
18+
19+
await mount(<Playground initial={markup} />);
20+
});
21+
22+
test.describe('mode:wysiwyg', () => {
23+
test.beforeEach(async ({editor}) => {
24+
await editor.switchMode('wysiwyg');
25+
});
26+
27+
test('should open compact search panel', async ({editor, platform, expectScreenshot}) => {
28+
test.skip(platform === 'linux', 'key combo fails in docker container');
29+
30+
await editor.openSearchPanel();
31+
32+
await expectScreenshot({
33+
component: editor.searchPanel.panelLocator,
34+
});
35+
});
36+
37+
test('should open full search panel', async ({
38+
editor,
39+
platform,
40+
expectScreenshot,
41+
wait,
42+
}) => {
43+
test.skip(platform === 'linux', 'key combo fails in docker container');
44+
45+
await editor.openSearchPanel();
46+
await editor.searchPanel.expand();
47+
await wait.hidden(editor.searchPanel.expandButtonLocator);
48+
49+
await expectScreenshot({
50+
component: editor.searchPanel.panelLocator,
51+
});
52+
});
53+
54+
test('should close compact search panel', async ({editor, platform}) => {
55+
test.skip(platform === 'linux', 'key combo fails in docker container');
56+
57+
await editor.openSearchPanel();
58+
await editor.searchPanel.close();
59+
await editor.searchPanel.waitForHidden();
60+
});
61+
62+
test('should close full search panel', async ({editor, platform, wait}) => {
63+
test.skip(platform === 'linux', 'key combo fails in docker container');
64+
65+
await editor.openSearchPanel();
66+
await editor.searchPanel.expand();
67+
await wait.hidden(editor.searchPanel.expandButtonLocator);
68+
await editor.searchPanel.close();
69+
await editor.searchPanel.waitForHidden();
70+
});
71+
72+
test('should activate replace buttons', async ({
73+
editor,
74+
platform,
75+
wait,
76+
expectScreenshot,
77+
}) => {
78+
test.skip(platform === 'linux', 'key combo fails in docker container');
79+
80+
await editor.openSearchPanel();
81+
await editor.searchPanel.expand();
82+
await editor.searchPanel.fillFindText('us');
83+
await wait.timeout(200);
84+
85+
await expectScreenshot({
86+
component: editor.searchPanel.panelLocator,
87+
});
88+
});
89+
90+
test('should update counter after one replacement', async ({editor, platform, wait}) => {
91+
test.skip(platform === 'linux', 'key combo fails in docker container');
92+
93+
await editor.openSearchPanel();
94+
await editor.searchPanel.expand();
95+
await editor.searchPanel.fillFindText('us');
96+
await wait.timeout(100);
97+
98+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 11');
99+
100+
await editor.searchPanel.fillReplaceText('11');
101+
await editor.searchPanel.replace();
102+
await wait.timeout(100);
103+
104+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 10');
105+
});
106+
107+
test('should update counter after all replacement', async ({editor, platform, wait}) => {
108+
test.skip(platform === 'linux', 'key combo fails in docker container');
109+
110+
await editor.openSearchPanel();
111+
await editor.searchPanel.expand();
112+
await editor.searchPanel.fillFindText('us');
113+
await wait.timeout(100);
114+
115+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 11');
116+
117+
await editor.searchPanel.fillReplaceText('22');
118+
await editor.searchPanel.replaceAll();
119+
await wait.timeout(100);
120+
121+
expect(await editor.searchPanel.getCounterText()).toBe('0 of 0');
122+
});
123+
124+
test('should update counter after switching case sensitive flag', async ({
125+
editor,
126+
platform,
127+
wait,
128+
}) => {
129+
test.skip(platform === 'linux', 'key combo fails in docker container');
130+
131+
await editor.openSearchPanel();
132+
await editor.searchPanel.expand();
133+
await editor.searchPanel.fillFindText('Ut');
134+
await wait.timeout(100);
135+
136+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 2');
137+
138+
await editor.searchPanel.caseSensitiveCheckboxLocator.click();
139+
await wait.timeout(100);
140+
141+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 1');
142+
});
143+
144+
test('should update counter after switching whole word flag', async ({
145+
editor,
146+
platform,
147+
wait,
148+
}) => {
149+
test.skip(platform === 'linux', 'key combo fails in docker container');
150+
151+
await editor.openSearchPanel();
152+
await editor.searchPanel.expand();
153+
await editor.searchPanel.fillFindText('Ut');
154+
await wait.timeout(100);
155+
156+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 2');
157+
158+
await editor.searchPanel.wholeWordCheckboxLocator.click();
159+
await wait.timeout(100);
160+
161+
expect(await editor.searchPanel.getCounterText()).toBe('1 of 1');
162+
});
163+
});
164+
165+
test.describe('mode:markup', () => {
166+
test.beforeEach(async ({editor}) => {
167+
await editor.switchMode('markup');
168+
});
169+
170+
test('should open compact search panel', async ({editor, platform, wait}) => {
171+
test.skip(platform === 'linux', 'key combo fails in docker container');
172+
173+
await editor.openSearchPanel();
174+
await wait.visible(editor.searchPanel.expandButtonLocator);
175+
});
176+
177+
test('should open full search panel', async ({editor, platform, wait}) => {
178+
test.skip(platform === 'linux', 'key combo fails in docker container');
179+
180+
await editor.openSearchPanel();
181+
await editor.searchPanel.expand();
182+
await wait.hidden(editor.searchPanel.expandButtonLocator);
183+
await wait.visible(editor.searchPanel.replaceAllButtonLocator);
184+
});
185+
186+
test('should close compact search panel', async ({editor, platform}) => {
187+
test.skip(platform === 'linux', 'key combo fails in docker container');
188+
189+
await editor.openSearchPanel();
190+
await editor.searchPanel.close();
191+
await editor.searchPanel.waitForHidden();
192+
});
193+
194+
test('should close full search panel', async ({editor, platform, wait}) => {
195+
test.skip(platform === 'linux', 'key combo fails in docker container');
196+
197+
await editor.openSearchPanel();
198+
await editor.searchPanel.expand();
199+
await wait.hidden(editor.searchPanel.expandButtonLocator);
200+
await editor.searchPanel.close();
201+
await editor.searchPanel.waitForHidden();
202+
});
203+
});
204+
});

0 commit comments

Comments
 (0)