test: added visual toolbar tests (#768)

Author: d3m1d0v

src/toolbar/FlexToolbar.tsx

@@ -64,6 +64,7 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
                 {dots?.length && (
                     <ToolbarListButton
                         qa="g-md-toolbar-more-action"
+                        qaMenu="g-md-toolbar-more-menu"
                         data={dots}
                         icon={{data: Ellipsis}}
                         title={props.dotsTitle}

src/toolbar/ToolbarListButton.tsx

@@ -23,7 +23,10 @@ const b = cn('toolbar-list-button');
 
 export type {ToolbarListButtonData};
 
-export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
+export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &
+    ToolbarListButtonData<E> & {
+        qaMenu?: string;
+    };
 
 export function ToolbarListButton<E>({
     className,
@@ -37,6 +40,7 @@ export function ToolbarListButton<E>({
     alwaysActive,
     replaceActiveIcon,
     qa,
+    qaMenu,
 }: ToolbarListButtonProps<E>) {
     const [anchorElement, setAnchorElement] = useElementState();
     const [open, , hide, toggleOpen] = useBooleanState(false);
@@ -83,7 +87,7 @@ export function ToolbarListButton<E>({
                 {buttonContent}
             </ToolbarButtonView>
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
-                <Menu size="l" className={b('menu')}>
+                <Menu size="l" className={b('menu')} qa={qaMenu}>
                     {data
                         .map((data) => {
                             const {
@@ -136,6 +140,7 @@ export function ToolbarListButton<E>({
                                     placement="left"
                                     modal={false}
                                     disabled={hideHintWhenDisabled}
+                                    qa="g-md-toolbar-action-disabled-hint"
                                     key={id}
                                 >
                                     {(props, ref) => (

tests/playwright/core/editor.ts

@@ -13,6 +13,8 @@ class MarkdownEditorLocators {
     readonly settingsContent;
     readonly toolbar;
     readonly toolbarMoreActionButton;
+    readonly toolbarActionDisabledHint;
+    readonly toolbarMoreMenu;
     readonly cmAutocomplete;
 
     constructor(page: Page) {
@@ -29,6 +31,8 @@ class MarkdownEditorLocators {
         // editor
         this.contenteditable = this.editor.locator('[contenteditable=true]');
         this.toolbarMoreActionButton = this.editor.getByTestId('g-md-toolbar-more-action');
+        this.toolbarActionDisabledHint = page.getByTestId('g-md-toolbar-action-disabled-hint');
+        this.toolbarMoreMenu = page.getByTestId('g-md-toolbar-more-menu');
 
         this.cmAutocomplete = this.editor.locator('.cm-tooltip-autocomplete');
     }
@@ -39,9 +43,9 @@ type PasteData = Partial<Record<DataTransferType, string>>;
 type VisibleState = 'attached' | 'detached' | 'visible' | 'hidden' | undefined;
 
 export class MarkdownEditorPage {
+    readonly locators;
     protected readonly page: Page;
     protected readonly expect: Expect;
-    protected readonly locators;
 
     constructor(page: Page, expect: Expect) {
         this.page = page;
@@ -175,6 +179,23 @@ export class MarkdownEditorPage {
         await this.locators.toolbarMoreActionButton.click();
     }
 
+    async openToolbarMoreMenu() {
+        const visible = await this.locators.toolbarMoreMenu.isVisible();
+        if (!visible) {
+            await this.clickToolbarMoreActionButton();
+            await this.locators.toolbarMoreMenu.waitFor({state: 'visible'});
+        }
+    }
+
+    async hoverToolbarMoreAction(label: string) {
+        await this.locators.toolbarMoreMenu.waitFor({state: 'visible'});
+        await this.getToolbarButton(label).hover({force: true});
+    }
+
+    async waitForToolbarActionDisabledHint() {
+        await this.locators.toolbarActionDisabledHint.waitFor({state: 'visible'});
+    }
+
     /**
      * Clicks a toolbar button using its aria-label
      */

tests/playwright/core/expectScreenshot.ts

@@ -12,21 +12,23 @@ export const expectScreenshot: PlaywrightFixture<ExpectScreenshotFixture> = asyn
     testInfo,
 ) => {
     const expectScreenshot: ExpectScreenshotFixture = async ({
+        fullPage,
         component,
         nameSuffix,
         themes: paramsThemes,
         ...pageScreenshotOptions
     } = defaultParams) => {
         const captureScreenshot = async () => {
-            return (
-                (component || page.locator('.playwright-wrapper-test'))
-                    // TODO: @makhnatkin make more flexible
-                    .locator('.playground__editor-markup')
-                    .screenshot({
-                        animations: 'disabled',
-                        ...pageScreenshotOptions,
-                    })
-            );
+            const locator = fullPage
+                ? page
+                : component ||
+                  page.locator('.playwright-wrapper-test').locator('.playground__editor-markup');
+
+            return locator.screenshot({
+                animations: 'disabled',
+                style: '.playground__pm-selection {display:none;}',
+                ...pageScreenshotOptions,
+            });
         };
 
         const nameScreenshot =
@@ -52,6 +54,8 @@ export const expectScreenshot: PlaywrightFixture<ExpectScreenshotFixture> = asyn
 
         if (themes?.includes('light')) {
             await page.emulateMedia({colorScheme: 'light'});
+            // sometimes theme doesn't change in webkit without timeout
+            await page.waitForTimeout(100);
 
             expect(await captureScreenshot()).toMatchSnapshot({
                 name: `${nameScreenshot} light.png`,
@@ -60,6 +64,8 @@ export const expectScreenshot: PlaywrightFixture<ExpectScreenshotFixture> = asyn
 
         if (themes?.includes('dark')) {
             await page.emulateMedia({colorScheme: 'dark'});
+            // sometimes theme doesn't change in webkit without timeout
+            await page.waitForTimeout(100);
 
             expect(await captureScreenshot()).toMatchSnapshot({
                 name: `${nameScreenshot} dark.png`,

tests/playwright/core/mount.tsx

@@ -1,3 +1,5 @@
+import dd from 'ts-dedent';
+
 import type {MountFixture, PlaywrightFixture} from './types';
 
 export const mount: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
@@ -14,10 +16,25 @@ export const mount: PlaywrightFixture<MountFixture> = async ({mount: baseMount},
                 }}
                 className="playwright-wrapper-test"
             >
+                {/* reset body styles */}
+                <style>{'body {margin: 0}'}</style>
                 {/* Do not scale buttons while clicking. Floating UI might position its elements differently in every test run. */}
                 <style>{'.g-button, .g-button::after { transform: scale(1) !important; }'}</style>
                 {/* Do not show ProseMirror dev toolkit. */}
                 <style>{'.__prosemirror-dev-toolkit__ {display: none;}'}</style>
+                {options?.hidePlaygroundBlocks && (
+                    <style>
+                        {dd`
+                            .playground__header,
+                            .playground__actions {
+                                display: none;
+                            }
+                            .playground__pm-selection {
+                                pointer-events: none;
+                            }
+                        `}
+                    </style>
+                )}
                 {component}
             </div>,
             options,

tests/playwright/core/types.ts

@@ -23,6 +23,7 @@ interface ComponentFixtures {
         options?: MountOptions<HooksConfig> & {
             width?: number | string;
             rootStyle?: React.CSSProperties;
+            hidePlaygroundBlocks?: boolean;
         },
     ): Promise<MountResult>;
 }
@@ -60,5 +61,5 @@ export interface WaitFixture {
 export interface CaptureScreenshotParams extends PageScreenshotOptions {
     nameSuffix?: string;
     component?: Locator | Page;
-    themes?: Array<'light' | 'dark'>;
+    themes?: ReadonlyArray<'light' | 'dark'>;
 }