Skip to content

Commit ca3c7d6

Browse files
matthewlipskimatthewlipski
authored
chore: Playwright update (#355)
* Updated playwright version * Fixed indent line not showing * Minor updates to tests & screenshots
1 parent 1013b77 commit ca3c7d6

File tree

12 files changed

+75
-90
lines changed

12 files changed

+75
-90
lines changed

‎package-lock.json

Lines changed: 41 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"examples/*"
77
],
88
"devDependencies": {
9-
"@playwright/experimental-ct-react": "^1.33.0",
10-
"@playwright/test": "^1.33.0",
9+
"@playwright/experimental-ct-react": "^1.38.1",
10+
"@playwright/test": "^1.38.1",
1111
"eslint": "^8.22.0",
1212
"eslint-plugin-import": "^2.28.0",
1313
"eslint-config-react-app": "^7.0.0",
@@ -20,7 +20,7 @@
2020
"scripts": {
2121
"start": "lerna run --stream --scope @blocknote/example-editor dev",
2222
"start:built": "npx serve examples/editor/dist",
23-
"test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.35.1-focal npx playwright test -u",
23+
"test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.1-focal npx playwright test -u",
2424
"build": "lerna run --stream build --concurrency 1",
2525
"build:site": "lerna run --stream docs:build --concurrency 1",
2626
"lint": "lerna run --stream lint",

‎packages/core/src/extensions/Blocks/nodes/Block.module.css

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -56,20 +56,6 @@ NESTED BLOCKS
5656
transition: all 0.2s 0.1s;
5757
}
5858

59-
[data-theme="light"]
60-
.blockGroup
61-
.blockGroup
62-
> .blockOuter:not([data-prev-depth-changed])::before {
63-
border-left: 1px solid #AFAFAF;
64-
}
65-
66-
[data-theme="dark"]
67-
.blockGroup
68-
.blockGroup
69-
> .blockOuter:not([data-prev-depth-changed])::before {
70-
border-left: 1px solid #7F7F7F;
71-
}
72-
7359
.blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
7460
height: 0;
7561
}
@@ -248,16 +234,6 @@ NESTED BLOCKS
248234
font-style: italic;
249235
}
250236

251-
[data-theme="light"] .isEmpty .inlineContent:before,
252-
.isFilter .inlineContent:before {
253-
color: #CFCFCF;
254-
}
255-
256-
[data-theme="dark"] .isEmpty .inlineContent:before,
257-
.isFilter .inlineContent:before {
258-
color: #7F7F7F;
259-
}
260-
261237
/* TODO: would be nicer if defined from code */
262238

263239
.blockContent.isEmpty.hasAnchor .inlineContent:before {

‎packages/react/src/BlockNoteTheme.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,15 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
209209
{
210210
color: theme.colors.sideMenu,
211211
},
212+
// Indent lines
213+
[`.${blockStyles.blockGroup}`]: {
214+
[`.${blockStyles.blockGroup}`]: {
215+
[`.${blockStyles.blockOuter}:not([data-prev-depth-changed])::before`]:
216+
{
217+
borderLeft: `1px solid ${theme.colors.sideMenu}`,
218+
},
219+
},
220+
},
212221
// Highlight text colors
213222
...(Object.fromEntries(
214223
Object.entries(textColors).map(([key, value]) => [

‎tests/end-to-end/colors/colors.test.ts

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,15 @@ test.describe("Check Background & Text Color Functionality", () => {
2424
await insertHeading(page, 2);
2525
await insertHeading(page, 3);
2626

27-
const element = await page.locator(H_TWO_BLOCK_SELECTOR);
28-
const boundingBox = await element.boundingBox();
29-
const { x, y, height } = boundingBox;
30-
31-
await page.mouse.click(x + 1, y + height / 2, { clickCount: 2 });
27+
await page.keyboard.press("ArrowUp");
28+
await page.keyboard.press("ArrowUp");
29+
await page.keyboard.press("Control+ArrowLeft");
30+
await page.keyboard.press("Control+Shift+ArrowRight");
3231

3332
await page.locator(COLORS_BUTTON_SELECTOR).click();
3433
await page.locator(TEXT_COLOR_SELECTOR("red")).click();
3534

36-
await page.mouse.move(x + 1, y + height / 2, { steps: 5 });
37-
await page.waitForTimeout(350);
38-
await page.mouse.click(x + 1, y + height / 2);
35+
await page.keyboard.press("ArrowLeft");
3936

4037
// Waits for formatting toolbar animation to finish.
4138
await page.waitForTimeout(500);
@@ -49,18 +46,15 @@ test.describe("Check Background & Text Color Functionality", () => {
4946
await insertHeading(page, 2);
5047
await insertHeading(page, 3);
5148

52-
const element = await page.locator(H_TWO_BLOCK_SELECTOR);
53-
const boundingBox = await element.boundingBox();
54-
const { x, y, height } = boundingBox;
55-
56-
await page.mouse.click(x + 1, y + height / 2, { clickCount: 2 });
49+
await page.keyboard.press("ArrowUp");
50+
await page.keyboard.press("ArrowUp");
51+
await page.keyboard.press("Control+ArrowLeft");
52+
await page.keyboard.press("Control+Shift+ArrowRight");
5753

5854
await page.locator(COLORS_BUTTON_SELECTOR).click();
5955
await page.locator(BACKGROUND_COLOR_SELECTOR("red")).click();
6056

61-
await page.mouse.move(x + 1, y + height / 2, { steps: 5 });
62-
await page.waitForTimeout(350);
63-
await page.mouse.click(x + 1, y + height / 2);
57+
await page.keyboard.press("ArrowLeft");
6458

6559
// Waits for formatting toolbar animation to finish.
6660
await page.waitForTimeout(500);

‎tests/end-to-end/colors/colors.test.ts-snapshots/backgroundColorMark-webkit-linux.png

58 Bytes
Loading

‎tests/end-to-end/colors/colors.test.ts-snapshots/blockBackgroundColor-webkit-linux.png

-100 Bytes
Loading

‎tests/end-to-end/colors/colors.test.ts-snapshots/blockTextColor-webkit-linux.png

-115 Bytes
Loading

‎tests/end-to-end/colors/colors.test.ts-snapshots/textColorMark-webkit-linux.png

20 Bytes
Loading

‎tests/end-to-end/textalignment/textAlignment.test.ts

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ test.describe("Check Text Alignment Functionality", () => {
2323
await insertHeading(page, 2);
2424
await insertHeading(page, 3);
2525

26-
const element = await page.locator(H_TWO_BLOCK_SELECTOR);
27-
const boundingBox = await element.boundingBox();
28-
const { x, y, width, height } = boundingBox;
29-
30-
await page.mouse.click(x + 20, y + height / 2, { clickCount: 2 });
26+
await page.keyboard.press("ArrowUp");
27+
await page.keyboard.press("ArrowUp");
28+
await page.keyboard.press("Control+ArrowLeft");
29+
await page.keyboard.press("Control+Shift+ArrowRight");
3130

3231
await page.locator(ALIGN_TEXT_RIGHT_BUTTON_SELECTOR).click();
3332
await page.waitForTimeout(350);
34-
await page.mouse.click(x + width - 20, y + height / 2);
33+
34+
await page.keyboard.press("ArrowLeft");
3535

3636
// Waits for formatting toolbar animation to finish.
3737
await page.waitForTimeout(500);
@@ -47,28 +47,15 @@ test.describe("Check Text Alignment Functionality", () => {
4747
await insertHeading(page, 2);
4848
await insertHeading(page, 3);
4949

50-
const firstElement = await page.locator(H_TWO_BLOCK_SELECTOR);
51-
const firstElementBoundingBox = await firstElement.boundingBox();
52-
await page.mouse.click(
53-
firstElementBoundingBox.x + 20,
54-
firstElementBoundingBox.y + firstElementBoundingBox.height / 2
55-
);
56-
57-
const secondElement = await page.locator(H_ONE_BLOCK_SELECTOR);
58-
const secondElementBoundingBox = await secondElement.boundingBox();
59-
await page.keyboard.down("Shift");
60-
await page.mouse.click(
61-
secondElementBoundingBox.x + 20,
62-
secondElementBoundingBox.y + secondElementBoundingBox.height / 2
63-
);
64-
await page.keyboard.up("Shift");
50+
await page.keyboard.press("ArrowUp");
51+
await page.keyboard.press("ArrowUp");
52+
await page.keyboard.press("Control+ArrowLeft");
53+
await page.keyboard.press("Control+Shift+ArrowUp");
6554

6655
await page.locator(ALIGN_TEXT_RIGHT_BUTTON_SELECTOR).click();
6756
await page.waitForTimeout(350);
68-
await page.mouse.click(
69-
secondElementBoundingBox.x + secondElementBoundingBox.width - 20,
70-
secondElementBoundingBox.y + secondElementBoundingBox.height / 2
71-
);
57+
58+
await page.keyboard.press("ArrowLeft");
7259

7360
// Waits for formatting toolbar animation to finish.
7461
await page.waitForTimeout(500);

0 commit comments

Comments
 (0)