diff --git a/packages/koenig-lexical/playwright.config.js b/packages/koenig-lexical/playwright.config.js index cd25fe8f30..ae4a22ad8f 100644 --- a/packages/koenig-lexical/playwright.config.js +++ b/packages/koenig-lexical/playwright.config.js @@ -42,6 +42,11 @@ export default defineConfig({ name: 'firefox', use: {...devices['Desktop Firefox']}, testMatch: /.*firefox.test.js/ + }, + { + name: 'webkit', + use: {...devices['Desktop Safari']}, + testIgnore: /.*firefox.test.js/ } ], diff --git a/packages/koenig-lexical/test/e2e/card-behaviour.test.js b/packages/koenig-lexical/test/e2e/card-behaviour.test.js index da161b9100..142c7ea979 100644 --- a/packages/koenig-lexical/test/e2e/card-behaviour.test.js +++ b/packages/koenig-lexical/test/e2e/card-behaviour.test.js @@ -564,7 +564,10 @@ test.describe('Card behaviour', async () => { }); // selects the card once caret reaches top of paragraph - test('moving through paragraph to card', async function () { + test('moving through paragraph to card', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('---'); await expect(await page.locator('[data-kg-card="horizontalrule"]')).toBeVisible(); @@ -688,7 +691,10 @@ test.describe('Card behaviour', async () => { test.describe('DOWN', function () { // moves caret to beginning of paragraph - test('with selected card before paragraph', async function () { + test('with selected card before paragraph', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('---'); await page.keyboard.type('First line'); @@ -819,7 +825,11 @@ test.describe('Card behaviour', async () => { `); }); - test('with selected card at end of document', async function () { + test('with selected card at end of document', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await page.keyboard.type('---'); await page.keyboard.press('Backspace'); @@ -1004,7 +1014,10 @@ test.describe('Card behaviour', async () => { }); // deletes empty paragraph, selects card - test('on empty paragraph after card', async function () { + test('on empty paragraph after card', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('---'); await page.keyboard.press('Enter'); @@ -1218,7 +1231,10 @@ test.describe('Card behaviour', async () => { `); }); - test('with selected card as only node', async function () { + test('with selected card as only node', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('---'); await page.keyboard.press('Backspace'); @@ -1743,7 +1759,10 @@ test.describe('Card behaviour', async () => { }); }); - test('with selected card and card at bottom', async function () { + test('with selected card and card at bottom', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('---'); await page.keyboard.type('---'); @@ -1774,7 +1793,10 @@ test.describe('Card behaviour', async () => { `); }); - test('with caret in text and card at bottom', async function () { + test('with caret in text and card at bottom', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } await focusEditor(page); await page.keyboard.type('First'); await page.keyboard.press('Enter'); diff --git a/packages/koenig-lexical/test/e2e/cards/bookmark-card-labs.test.js b/packages/koenig-lexical/test/e2e/cards/bookmark-card-labs.test.js index c5928a3686..9d40545c7a 100644 --- a/packages/koenig-lexical/test/e2e/cards/bookmark-card-labs.test.js +++ b/packages/koenig-lexical/test/e2e/cards/bookmark-card-labs.test.js @@ -246,7 +246,11 @@ test.describe('Bookmark card (labs: internalLinking)', async () => { await expect(page.locator('[data-kg-card="bookmark"]')).toHaveCount(2); }); - test('can undo/redo without losing caption', async function () { + test('can undo/redo without losing caption', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await insertCard(page, {cardName: 'bookmark'}); diff --git a/packages/koenig-lexical/test/e2e/cards/bookmark-card.test.js b/packages/koenig-lexical/test/e2e/cards/bookmark-card.test.js index c1094a2081..bd9d99fcca 100644 --- a/packages/koenig-lexical/test/e2e/cards/bookmark-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/bookmark-card.test.js @@ -240,7 +240,11 @@ test.describe('Bookmark card', async () => { await expect(await page.locator('[data-kg-card="bookmark"]')).toHaveCount(2); }); - test('can undo/redo without losing caption', async function () { + test('can undo/redo without losing caption', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await insertCard(page, {cardName: 'bookmark'}); diff --git a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js index 467af9c8c1..522ea03504 100644 --- a/packages/koenig-lexical/test/e2e/cards/callout-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/callout-card.test.js @@ -325,7 +325,11 @@ test.describe('Callout Card', async () => { await expect(content).toContainText('Hello world'); }); - test('can undo/redo without losing content', async function () { + test('can undo/redo without losing content', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await insertCard(page, {cardName: 'callout'}); diff --git a/packages/koenig-lexical/test/e2e/cards/code-block-card.test.js b/packages/koenig-lexical/test/e2e/cards/code-block-card.test.js index cfe3a83f9f..047fb3afd4 100644 --- a/packages/koenig-lexical/test/e2e/cards/code-block-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/code-block-card.test.js @@ -166,7 +166,11 @@ test.describe('Code Block card', async () => { await expect(languageInput).not.toHaveClass(/opacity-0/); }); - test('can undo/redo without losing caption', async function () { + test('can undo/redo without losing caption', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await page.keyboard.type('```javascript '); await page.waitForSelector('[data-kg-card="codeblock"] .cm-editor'); diff --git a/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js b/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js index 11f0adf19f..3ac1d32eb0 100644 --- a/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/gallery-card.test.js @@ -320,7 +320,11 @@ test.describe('Gallery card', async () => { await expect(page.locator('[data-testid="gallery-image"]')).toHaveCount(2); }); - test('can undo/redo without losing nested editor content', async () => { + test('can undo/redo without losing nested editor content', async ({browserName}) => { + if (browserName === 'webkit') { + test.skip(); + } + await test.step('insert and upload images to gallery card', async () => { const filePaths = Array.from(Array(2).keys()).map(n => path.relative(process.cwd(), __dirname + `/../fixtures/large-image-${n}.png`)); const fileChooserPromise = page.waitForEvent('filechooser'); diff --git a/packages/koenig-lexical/test/e2e/cards/image-card.test.js b/packages/koenig-lexical/test/e2e/cards/image-card.test.js index bc2a48487e..a366ec7f87 100644 --- a/packages/koenig-lexical/test/e2e/cards/image-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/image-card.test.js @@ -528,7 +528,11 @@ test.describe('Image card', async () => { `); }); - test('replaces image when new image file dropped on populated card', async function () { + test('replaces image when new image file dropped on populated card', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await insertImage(page); @@ -841,7 +845,10 @@ test.describe('Image card', async () => { await expect(await page.locator('[data-kg-card="image"]')).toHaveCount(2); }); - test('can select caption text without scrolling', async function () { + test('can select caption text without scrolling', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } // Type in some text, so that we can scroll await focusEditor(page); await enterUntilScrolled(page); @@ -891,7 +898,10 @@ test.describe('Image card', async () => { }); }); - test('can select caption text and make it italic', async function () { + test('can select caption text and make it italic', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } // Type in some text, so that we can scroll await focusEditor(page); await enterUntilScrolled(page); @@ -927,7 +937,10 @@ test.describe('Image card', async () => { }); }); - test('does not remove text when pressing ENTER in the middle of a caption', async function () { + test('does not remove text when pressing ENTER in the middle of a caption', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } // Type in some text, so that we can scroll await focusEditor(page); await enterUntilScrolled(page); diff --git a/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js b/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js index 2e9e529229..627e148883 100644 --- a/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js +++ b/packages/koenig-lexical/test/e2e/cards/markdown-card.test.js @@ -109,32 +109,51 @@ test.describe('Markdown card', async () => { `, {ignoreCardContents: true}); }); - test('should open unsplash dialog on Cmd-Alt-O', async function () { + test('should open unsplash dialog on Cmd-Alt-O', async function ({browserName}) { await focusEditor(page); await page.keyboard.type('/'); await page.click('[data-kg-card-menu-item="Markdown"]'); await page.click('[data-kg-card="markdown"]'); - await page.keyboard.press(`Control+Alt+O`); + if (browserName === 'chromium' || browserName === 'firefox') { + await page.keyboard.press(`Control+Alt+O`); + } + + if (browserName === 'webkit') { + await page.keyboard.press(`Meta+Alt+O`); + } await page.waitForSelector('[data-kg-modal="unsplash"]'); }); - test('should toggle spellcheck on Cmd-Alt-S', async function () { + test('should toggle spellcheck on Cmd-Alt-S', async function ({browserName}) { await focusEditor(page); await insertCard(page, {cardName: 'markdown'}); await expect(page.locator('[title*="Spellcheck"]')).not.toBeNull(); - await page.keyboard.press(`Control+Alt+S`); + if (browserName === 'chromium' || browserName === 'firefox') { + await page.keyboard.press(`Control+Alt+S`); + } + + if (browserName === 'webkit') { + await page.keyboard.press(`Meta+Alt+S`); + } + await expect(page.locator('[title*="Spellcheck"][class*="active"]')).toHaveCount(1); }); - test('should open image upload dialog on Cmd-Alt-I', async function () { + test('should open image upload dialog on Cmd-Alt-I', async function ({browserName}) { const fileChooserPromise = page.waitForEvent('filechooser'); await focusEditor(page); await page.keyboard.type('/'); await page.click('[data-kg-card-menu-item="Markdown"]'); await page.click('[data-kg-card="markdown"]'); - await page.keyboard.press(`Control+Alt+I`); + if (browserName === 'chromium' || browserName === 'firefox') { + await page.keyboard.press(`Control+Alt+I`); + } + + if (browserName === 'webkit') { + await page.keyboard.press(`Meta+Alt+I`); + } await fileChooserPromise; }); @@ -188,7 +207,7 @@ test.describe('Markdown card', async () => { `, {ignoreCardContents: true}); }); - test('can upload an image', async function () { + test('can upload an image', async function ({browserName}) { const filePath = path.relative(process.cwd(), __dirname + '/../fixtures/large-image.png'); await focusEditor(page); const fileChooserPromise = page.waitForEvent('filechooser'); @@ -196,7 +215,14 @@ test.describe('Markdown card', async () => { await page.keyboard.type('/'); await page.click('[data-kg-card-menu-item="Markdown"]'); await page.waitForSelector('[data-kg-card="markdown"] .editor-toolbar'); - await page.keyboard.press(`Control+Alt+I`); + + if (browserName === 'chromium' || browserName === 'firefox') { + await page.keyboard.press(`Control+Alt+I`); + } + + if (browserName === 'webkit') { + await page.keyboard.press(`Meta+Alt+I`); + } const fileChooser = await fileChooserPromise; await fileChooser.setFiles(filePath); diff --git a/packages/koenig-lexical/test/e2e/internal-linking.test.js b/packages/koenig-lexical/test/e2e/internal-linking.test.js index be23720f0e..baca69d99b 100644 --- a/packages/koenig-lexical/test/e2e/internal-linking.test.js +++ b/packages/koenig-lexical/test/e2e/internal-linking.test.js @@ -283,7 +283,11 @@ test.describe('Internal linking', async () => { `); }); - test('removes at-linking when backspacing', async function () { + test('removes at-linking when backspacing', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + await focusEditor(page); await page.keyboard.type('@'); await page.keyboard.type('AB'); diff --git a/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js index d470cdb3aa..07494af3ae 100644 --- a/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js +++ b/packages/koenig-lexical/test/e2e/plugins/DragDropReorderPlugin.test.js @@ -118,7 +118,11 @@ test.describe('Drag Drop Reorder Plugin', async function () { `, {ignoreCardContents: true}); }); - test('can drag and drop a card at the bottom of the editor', async function () { + test('can drag and drop a card at the bottom of the editor', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + const filePath = path.relative(process.cwd(), __dirname + '/../fixtures/large-image.png'); await focusEditor(page); @@ -173,7 +177,11 @@ test.describe('Drag Drop Reorder Plugin', async function () { `, {ignoreCardContents: true}); }); - test('can display placeholder element while hovering between nodes', async function () { + test('can display placeholder element while hovering between nodes', async function ({browserName}) { + if (browserName === 'webkit') { + test.skip(); + } + const filePath = path.relative(process.cwd(), __dirname + '/../fixtures/large-image.png'); await focusEditor(page); diff --git a/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js index 24dcbaa8d0..d7d0daf79c 100644 --- a/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js +++ b/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js @@ -93,10 +93,10 @@ test.describe('Emoji Picker Plugin', async function () { test('can use the mouse to select an emoji', async function () { await focusEditor(page); - await page.keyboard.type(':t'); + await await page.keyboard.type(':taco'); await expect(page.getByTestId('emoji-menu')).toBeVisible(); - await page.click('[data-testid="emoji-option-2"]'); + await page.click('[data-testid="emoji-option-0"]'); await expect(page.getByTestId('emoji-menu')).not.toBeVisible(); await assertHTML(page, '
🌮
');