Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-23 19:49:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: make export tests pass

Browse Source
This commit is contained in:
Abdullah Atta
2023-08-01 19:01:08 +05:00
committed by Abdullah Atta
parent e066d1ce8d
commit 32b8b008f2
11 changed files with 201 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/__e2e__/models/context-menu.model.ts
View File

@@ -46,7 +46,7 @@ export class ContextMenuModel {
}
getItem(id: string) {
return this.page.locator(getTestId(`menuitem-${id}`));
return this.page.locator(getTestId(`menu-button-${id}`));
}
async hasItem(id: string) {

6
apps/web/__e2e__/models/note-properties.model.ts
View File

@@ -200,7 +200,7 @@ export class NotePropertiesModel extends BaseProperties {
export class NoteContextMenuModel extends BaseProperties {
private readonly menu: ContextMenuModel;
constructor(page: Page, noteLocator: Locator) {
super(page, noteLocator, "menuitem");
super(page, noteLocator, "menu-button");
this.menu = new ContextMenuModel(page);
}
@@ -209,7 +209,7 @@ export class NoteContextMenuModel extends BaseProperties {
await this.menu.clickOnItem("colors");
const state = await new ToggleModel(
this.page,
`menuitem-${color}`
`menu-button-${color}`
).isToggled();
await this.close();
return state;
@@ -218,7 +218,7 @@ export class NoteContextMenuModel extends BaseProperties {
async color(color: string) {
await this.open();
await this.menu.clickOnItem("colors");
await new ToggleModel(this.page, `menuitem-${color}`).on();
await new ToggleModel(this.page, `menu-button-${color}`).on();
await this.close();
}

9
apps/web/__e2e__/models/notebook-item.model.ts
View File

@@ -61,17 +61,20 @@ export class NotebookItemModel extends BaseItemModel {
async pin() {
await this.contextMenu.open(this.locator);
await new ToggleModel(this.page, "menuitem-pin").on();
await new ToggleModel(this.page, "menu-button-pin").on();
}
async unpin() {
await this.contextMenu.open(this.locator);
await new ToggleModel(this.page, "menuitem-pin").off();
await new ToggleModel(this.page, "menu-button-pin").off();
}
async isPinned() {
await this.contextMenu.open(this.locator);
const state = await new ToggleModel(this.page, "menuitem-pin").isToggled();
const state = await new ToggleModel(
this.page,
"menu-button-pin"
).isToggled();
await this.contextMenu.close();
return state;
}

2
apps/web/__e2e__/models/toggle.model.ts
View File

@@ -50,7 +50,7 @@ export class ToggleModel {
}
private async waitUntilToggleState(locator: Locator, state: TOGGLE_STATES) {
if (this.id.startsWith("menuitem")) await this.page.waitForTimeout(200);
if (this.id.startsWith("menu-button")) await this.page.waitForTimeout(200);
else
await this.getToggleState(locator, state).waitFor({ state: "visible" });
}

2
apps/web/__e2e__/notes.test.ts
View File

@@ -229,7 +229,7 @@ test("add tags to note", async ({ page }) => {
});
for (const format of ["html", "txt", "md"] as const) {
test(`export note as ${format}`, async ({ page }) => {
test.only(`export note as ${format}`, async ({ page }) => {
const app = new AppModel(page);
await app.goto();
const notes = await app.goToNotes();

58
apps/web/__e2e__/notes.test.ts-snapshots/export-html-Chromium-linux.txt
View File

@@ -11,6 +11,8 @@
<meta name="created-on" content="xxx" />
<meta name="last-edited-on" content="xxx" />
<link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=1690898057761">
<style>
img {
max-width: 100% !important;
@@ -21,8 +23,7 @@
body {
background-color: transparent !important;
color: #202124;
font-family: "Open Sans", "Noto Sans", Frutiger, Calibri, Myriad, Arial,
Ubuntu, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
font-family: "Open Sans", "Noto Sans", Frutiger, Calibri, Myriad, Arial, Ubuntu, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
}
h1,
@@ -104,22 +105,19 @@
border: 1px solid #e5e5e5;
border-radius: 5px;
padding: 3px 5px 0px 5px;
font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas,
Liberation Mono, Menlo, monospace !important;
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
font-size: 10pt !important;
}
.ProseMirror code > span {
font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas,
Liberation Mono, Menlo, monospace !important;
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
}
pre {
padding: 10px;
background-color: #e5e5e5;
border-radius: 5px;
font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas,
Liberation Mono, Menlo, monospace !important;
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
margin-bottom: 16px !important;
}
@@ -153,47 +151,9 @@
table p {
margin: 0;
}
code[class*="language-"],
pre[class*="language-"]
{
color: #F8F8F2;
background: #282A36;
text-shadow: none;
font-family: PT Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
monospace;
text-align: left;
white-space: pre-wrap;
word-spacing: normal;
word-break: break-word;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]
{
background: #282A36;
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
height: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"]
{
background: #282A36;
}
</style>
<style>
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#50fa7b}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.important,.token.regex{color:#ffb86c}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
</style>
</head>
<body>

163
apps/web/__e2e__/notes.test.ts-snapshots/export-html-Chromium-win32.txt Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta
name="description"
content="This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1"
/>
<title>Test 1 - Notesnook</title>
<meta name="created-on" content="xxx" />
<meta name="last-edited-on" content="xxx" />
<link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=1690898057761">
<style>
img {
max-width: 100% !important;
height: auto !important;
border-radius: 5px;
}
body {
background-color: transparent !important;
color: #202124;
font-family: "Open Sans", "Noto Sans", Frutiger, Calibri, Myriad, Arial, Ubuntu, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #212121;
}
p {
margin-bottom: 0px;
}
p[data-spacing="double"] {
margin-top: 1em;
}
p[data-spacing="single"] {
margin-top: 0px;
}
p[data-spacing="single"]:empty {
margin-top: 1em;
}
pre.codeblock {
overflow-x: auto;
}
iframe {
max-width: 100% !important;
background-color: transparent !important;
}
li > p {
margin-top: 0px;
margin-bottom: 10px;
}
.checklist > li {
list-style: none;
margin: 0.25em 0;
}
.checklist > li::before {
content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
cursor: pointer;
height: 1.1em;
margin-left: -2.5em;
margin-top: 0em;
position: absolute;
width: 1.5em;
padding-left: 1em;
}
.checklist li.checked::before {
content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23008837%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}
.checklist li.checked {
color: #505050;
}
[dir="rtl"] .checklist > li::before {
margin-left: 0;
margin-right: -1.5em;
}
blockquote {
border-left: 5px solid #e5e5e5;
padding-left: 10px;
margin-top: 0px;
}
code:not(pre code) {
background-color: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 5px;
padding: 3px 5px 0px 5px;
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
font-size: 10pt !important;
}
.ProseMirror code > span {
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
}
pre {
padding: 10px;
background-color: #e5e5e5;
border-radius: 5px;
font-family: Hack, Consolas, "Andale Mono", "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace !important;
margin-bottom: 16px !important;
}
table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
}
table td,
table th {
border: 1px solid #e5e5e5;
box-sizing: border-box;
min-width: 1em;
padding: 3px 5px;
position: relative;
vertical-align: top;
}
table td > *,
table th > * {
margin-bottom: 0;
}
table th {
background-color: #f7f7f7;
font-weight: bold;
text-align: left;
}
table p {
margin: 0;
}
</style>
<style>
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#50fa7b}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.important,.token.regex{color:#ffb86c}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
</style>
</head>
<body>
<h1>Test 1</h1>
<p data-spacing="double">This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1</p>
</body>
</html>

7
apps/web/__e2e__/notes.test.ts-snapshots/export-md-Chromium-win32.txt Normal file
View File

@@ -0,0 +1,7 @@
# Test 1
This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1
---

7
apps/web/__e2e__/notes.test.ts-snapshots/export-txt-Chromium-win32.txt Normal file
View File

@@ -0,0 +1,7 @@
Test 1
----------
This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1
----------
Tags:

2
packages/ui/src/components/menu/index.tsx
View File

@@ -159,6 +159,7 @@ function MenuContainer(props: PropsWithChildren<MenuContainerProps>) {
return (
<Box
className="menuContainer"
data-test-id="menu-container"
as="ul"
tabIndex={-1}
sx={{
@@ -180,6 +181,7 @@ function MenuContainer(props: PropsWithChildren<MenuContainerProps>) {
>
{title && (
<Text
data-test-id="menu-title"
sx={{
fontFamily: "body",
fontSize: "subtitle",

2
packages/ui/src/components/menu/menu-button.tsx
View File

@@ -54,7 +54,7 @@ export function MenuButton(props: MenuButtonProps) {
>
<Button
id={`${key}-menu-item`}
data-test-id={`MenuButton-${key}`}
data-test-id={`menu-button-${key}`}
key={key}
ref={itemRef}
tabIndex={-1}