mirror of
https://github.com/hanzoai/team.git
synced 2026-09-30 01:57:35 +00:00
30381b8b42
* MM-67755: WYSIWYG editor for message composition
- Add TipTap-based WYSIWYG editor as an opt-in setting
- Implement formatting bar with text styles dropdown, link popover
- Add custom list extension for Mattermost markdown compatibility
- Add suggestion list integration for mentions and emoji
- Add feature flag and user preference toggle
- Update e2e tests for WYSIWYG editor compatibility
Made-with: Cursor
* Fix package versions to match current master (11.7.0)
Made-with: Cursor
* Add missing PermissionPolicies feature flag from master
Made-with: Cursor
* Fix remaining WYSIWYG UX issues: toolbar overlap, autocomplete, emoji, tables
Made-with: Cursor
* Address CodeRabbit review: null guards, XSS fix, e2e tests, constants alignment
Made-with: Cursor
* UX fixes required by Matt
* linter
* fix e2e
* Fix CI failures: resolve merge conflicts with master
- Fix TS errors from useRewrite hook refactor (additionalControl → rewriteMenuProps)
- Fix onComposition → onCompositionUpdate prop rename on Textbox
- Remove accidentally re-added enzyme-to-json/serializer from jest config
- Extract new i18n strings for WYSIWYG editor components
Made-with: Cursor
* Fix lint: remove unused aiRewriteEnabled and rewriteMenuProps vars
Made-with: Cursor
* Fix jest and E2E test failures
- Add lowlight and ESM deps to jest transformIgnorePatterns
- Replace have.value with have.text for contenteditable elements
- Remove selectionStart/selectionEnd assertions for WYSIWYG editor
Made-with: Cursor
* e2e test
* Expose focus()/blur() on WysiwygEditor handle so focus hooks work
useTextboxFocus drives focus into the composer for many flows (channel
switch, RHS open, post-submit refocus, Reply shortcut, "type to focus
main input"). It calls textboxRef.current?.focus(), but textboxRef is
the legacy <Textbox> ref and is null when the WYSIWYG editor is the
mounted composer, so every focus call becomes a silent no-op.
Add focus() and blur() to WysiwygEditorHandle, backed by editor.commands
.focus()/blur(), and pass wysiwygRef into useTextboxFocus so it picks
whichever ref is mounted. The hook keeps its existing signature for
legacy callers; wysiwygRef is optional.
Verified locally on the WYSIWYG branch:
- messaging/focus_move_spec (3/6 failing -> 6/6 passing)
- messaging/message_edit_post_clear_text_spec (0/1 -> 1/1)
- messaging/message_edit_post_history_spec (0/3 -> 1/3)
- keyboard_shortcuts/dot_menu_spec gets past the Reply-focus assertion
* e2e: coerce postMessage args to string in WYSIWYG branch
The legacy textarea path used cy.invoke('val', message) which silently
coerced numbers/undefined to strings. The WYSIWYG branch added in the
previous refactor calls message.replace() and crashes with
"TypeError: message.replace is not a function" whenever a spec passes a
non-string value, e.g. cy.uiPostMessageQuickly(0) or before-each hooks
that pass undefined.
Funnel everything through asPostMessage() so the WYSIWYG branch is just
as forgiving as the textarea branch. Loosen postMessage /
postMessageReplyInRHS / uiPostMessageQuickly typings to `unknown` to
match what callers actually pass.
Fixes failures in: copy_post_text_spec, save_post_spec,
search_filter/{after,before,future_date}_spec, and
scroll/default_images_collapsed_spec.
* filtetr by feature flag for now
* coderabbit ai feedback
* coderabbitai comments
* align with code conventions
* fix e2e test
* PR comments
* fix i18n
* anchor link popover to editor selectio
* UX issues
* regression
* Final UX feedback
* linter
* e2e test rename
* Final UX
* Fix playwright lint
* Align e2e mocks with master
* Disable feature flag
* Sanitize urls before handling actions with link popove
---------
Co-authored-by: Nevyana Angelova <[email protected]>
Co-authored-by: Mattermost Build <[email protected]>
Co-authored-by: Hanzo Dev <[email protected]>
438 lines
18 KiB
TypeScript
438 lines
18 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {expect, test} from '@mattermost/playwright-lib';
|
|
|
|
/**
|
|
* @objective Verify keyboard navigation through interactive elements in Advanced settings
|
|
*/
|
|
test(
|
|
'navigate on keyboard tab between interactive elements',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings']},
|
|
async ({pw}) => {
|
|
// # Create and sign in a new user
|
|
const {user, adminClient} = await pw.initSetup();
|
|
const config = await adminClient.getConfig();
|
|
const wysiwygEnabled =
|
|
config.FeatureFlags?.WysiwygEditor === true || config.FeatureFlags?.WysiwygEditor === 'true';
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible and focus should be on the modal
|
|
await expect(settingsModal.container).toBeVisible();
|
|
await pw.toBeFocusedWithFocusVisible(settingsModal.container);
|
|
|
|
// # Press Tab and verify focus is on Close button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(settingsModal.closeButton);
|
|
|
|
// # Click on Advanced tab to open it
|
|
await settingsModal.advancedTab.click();
|
|
|
|
// * Advanced Settings panel should be visible
|
|
await expect(advancedSettings.container).toBeVisible();
|
|
|
|
// # Press Tab to move focus to Send Messages on CTRL+ENTER button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.ctrlEnterEditButton);
|
|
|
|
if (wysiwygEnabled) {
|
|
// # Press Tab to move focus to Rich text editing button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.wysiwygEditorEditButton);
|
|
}
|
|
|
|
// # Press Tab to move focus to Enable Post Formatting button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.postFormattingEditButton);
|
|
|
|
// # Press Tab to move focus to Enable Join/Leave Messages button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.joinLeaveEditButton);
|
|
|
|
// # Press Tab to move focus to Scroll position button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.scrollPositionEditButton);
|
|
|
|
// # Press Tab to move focus to Allow message drafts to sync button
|
|
await page.keyboard.press('Tab');
|
|
await pw.toBeFocusedWithFocusVisible(advancedSettings.syncDraftsEditButton);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Advanced settings panel passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Advanced settings panel',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user, adminClient} = await pw.initSetup();
|
|
|
|
const config = await adminClient.getConfig();
|
|
const wysiwygEnabled =
|
|
config.FeatureFlags?.WysiwygEditor === true || config.FeatureFlags?.WysiwygEditor === 'true';
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
// * Advanced Settings panel should be visible
|
|
await expect(settingsModal.advancedSettings.container).toBeVisible();
|
|
|
|
const wysiwygSnapshot = wysiwygEnabled
|
|
? `
|
|
- heading "Rich text editing (Beta)" [level=4]
|
|
- button "Rich text editing (Beta) Edit"
|
|
- text: /(Markdown editing [(]default[)]|Rich text editing.*)/`
|
|
: '';
|
|
|
|
// * Verify aria snapshot of Advanced settings tab
|
|
await expect(settingsModal.advancedSettings.container).toMatchAriaSnapshot(`
|
|
- tabpanel "advanced":
|
|
- heading "Advanced Settings" [level=3]
|
|
- heading /Send Messages on (CTRL|⌘)\\+ENTER/ [level=4]
|
|
- button /Send Messages on (CTRL|⌘)\\+ENTER Edit/
|
|
- text: /(On for all messages|On only for code blocks starting with \`\`\`|Off)/${wysiwygSnapshot}
|
|
- heading "Enable Post Formatting" [level=4]
|
|
- button "Enable Post Formatting Edit"
|
|
- text: /(On|Off)/
|
|
- heading "Enable Join/Leave Messages" [level=4]
|
|
- button "Enable Join/Leave Messages Edit"
|
|
- text: /(On|Off)/
|
|
- heading "Scroll position when viewing an unread channel" [level=4]
|
|
- button "Scroll position when viewing an unread channel Edit"
|
|
- text: /(Start me where I left off|Start me at the newest message)/
|
|
- heading "Allow message drafts to sync with the server" [level=4]
|
|
- button "Allow message drafts to sync with the server Edit"
|
|
- text: /(On|Off)/
|
|
`);
|
|
|
|
// * Analyze the Advanced settings panel for accessibility issues
|
|
const accessibilityScanResults = await axe
|
|
.builder(page, {disableColorContrast: true})
|
|
.include(settingsModal.advancedSettings.id)
|
|
.analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Send Messages on CTRL+ENTER section passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Send Messages on CTRL+ENTER section',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user} = await pw.initSetup();
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Click Edit on Send Messages section
|
|
await advancedSettings.ctrlEnterEditButton.click();
|
|
|
|
// * Verify aria snapshot of Send Messages section when expanded
|
|
await advancedSettings.expandedSection.waitFor();
|
|
await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
|
|
- heading /Send Messages on (CTRL|⌘)\\+ENTER/ [level=4]
|
|
- group /Send Messages on (CTRL|⌘)\\+ENTER/:
|
|
- text: /Send Messages on (CTRL|⌘)\\+ENTER/
|
|
- radio "On for all messages"
|
|
- text: On for all messages
|
|
- radio /(On only for code blocks starting with \`\`\`|On only for code blocks starting with \\\`\\\`\\\`)/ [checked]
|
|
- text: /(On only for code blocks starting with \`\`\`|On only for code blocks starting with \\\`\\\`\\\`)/
|
|
- radio "Off"
|
|
- text: /Off When enabled, (CTRL|⌘) \\+ ENTER will send the message and ENTER inserts a new line\\./
|
|
- separator
|
|
- alert
|
|
- button "Save"
|
|
- button "Cancel"
|
|
`);
|
|
|
|
// # Analyze the expanded section for accessibility issues
|
|
const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Enable Post Formatting section passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Enable Post Formatting section',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user} = await pw.initSetup();
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Click Edit on Enable Post Formatting section
|
|
await advancedSettings.postFormattingEditButton.click();
|
|
|
|
// * Verify aria snapshot of Enable Post Formatting section when expanded
|
|
await advancedSettings.expandedSection.waitFor();
|
|
await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
|
|
- heading "Enable Post Formatting" [level=4]
|
|
- group "Enable Post Formatting":
|
|
- radio /(On|Off)/ [checked]
|
|
- text: /(On|Off)/
|
|
- separator
|
|
- alert
|
|
- button "Save"
|
|
- button "Cancel"
|
|
`);
|
|
|
|
// # Analyze the expanded section for accessibility issues
|
|
const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Enable Join/Leave Messages section passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Enable Join/Leave Messages section',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user} = await pw.initSetup();
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Click Edit on Enable Join/Leave Messages section
|
|
await advancedSettings.joinLeaveEditButton.click();
|
|
|
|
// * Verify aria snapshot of Enable Join/Leave Messages section when expanded
|
|
await advancedSettings.expandedSection.waitFor();
|
|
await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
|
|
- heading "Enable Join/Leave Messages" [level=4]
|
|
- group "Enable Join/Leave Messages":
|
|
- text: Enable Join/Leave Messages
|
|
- radio "On" [checked]
|
|
- text: "On"
|
|
- radio "Off"
|
|
- text: /Off When "On", System Messages saying a user has joined or left a channel will be visible\\./
|
|
- separator
|
|
- alert
|
|
- button "Save"
|
|
- button "Cancel"
|
|
`);
|
|
|
|
// # Analyze the expanded section for accessibility issues
|
|
const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify Scroll position section passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Scroll position section',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user} = await pw.initSetup();
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Click Edit on Scroll position section
|
|
await advancedSettings.scrollPositionEditButton.click();
|
|
|
|
// * Verify aria snapshot of Scroll position section when expanded
|
|
await advancedSettings.expandedSection.waitFor();
|
|
await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
|
|
- heading "Scroll position when viewing an unread channel" [level=4]
|
|
- group "Scroll position when viewing an unread channel":
|
|
- text: Scroll position when viewing an unread channel
|
|
- radio "Start me where I left off" [checked]
|
|
- text: Start me where I left off
|
|
- radio "Start me at the newest message"
|
|
- text: /Start me at the newest message Choose your scroll position when you view an unread channel\\./
|
|
- separator
|
|
- alert
|
|
- button "Save"
|
|
- button "Cancel"
|
|
`);
|
|
|
|
// # Analyze the expanded section for accessibility issues
|
|
const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|
|
|
|
/**
|
|
* @objective Verify message drafts sync section passes accessibility scan and matches aria-snapshot
|
|
*/
|
|
test(
|
|
'accessibility scan and aria-snapshot of Allow message drafts to sync section',
|
|
{tag: ['@accessibility', '@settings', '@advanced_settings', '@snapshots']},
|
|
async ({pw, axe}) => {
|
|
// # Create and sign in a new user
|
|
const {user} = await pw.initSetup();
|
|
|
|
// # Log in a user in new browser context
|
|
const {page, channelsPage} = await pw.testBrowser.login(user);
|
|
const globalHeader = channelsPage.globalHeader;
|
|
const settingsModal = channelsPage.settingsModal;
|
|
|
|
// # Visit a default channel page
|
|
await channelsPage.goto();
|
|
await channelsPage.toBeVisible();
|
|
|
|
// # Set focus to Settings button and press Enter
|
|
await globalHeader.settingsButton.focus();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// * Settings modal should be visible
|
|
await expect(settingsModal.container).toBeVisible();
|
|
|
|
// # Open Advanced tab
|
|
await settingsModal.advancedTab.click();
|
|
|
|
const advancedSettings = settingsModal.advancedSettings;
|
|
|
|
// # Click Edit on Allow message drafts to sync section
|
|
await advancedSettings.syncDraftsEditButton.click();
|
|
|
|
// * Verify aria snapshot of Allow message drafts to sync section when expanded
|
|
await advancedSettings.expandedSection.waitFor();
|
|
await expect(advancedSettings.expandedSection).toMatchAriaSnapshot(`
|
|
- heading "Allow message drafts to sync with the server" [level=4]
|
|
- group "Allow message drafts to sync with the server":
|
|
- text: Allow message drafts to sync with the server
|
|
- radio "On" [checked]
|
|
- text: "On"
|
|
- radio "Off"
|
|
- text: /Off When enabled, message drafts are synced with the server/
|
|
- separator
|
|
- alert
|
|
- button "Save"
|
|
- button "Cancel"
|
|
`);
|
|
|
|
// # Analyze the expanded section for accessibility issues
|
|
const accessibilityScanResults = await axe.builder(page).include(advancedSettings.expandedSectionId).analyze();
|
|
|
|
// * Should have no violation
|
|
expect(accessibilityScanResults.violations).toHaveLength(0);
|
|
},
|
|
);
|