[MM-53102] Add support for multi-word highlights without notifications in web (#24050)
- Adds a new section under settings/notifications for adding custom multi-word keywords that get highlighted without notification - Adds a new classname for highlighting words although the styling is the same as mentions highlights - Added a few components to the ReduxFromProps pattern - Adds supported type for the hook of PluginComponent type - Add upsell for highlight without notification - Moved 'setting_item.tsx' to the components folder - Improved prop names and function structure for setting_item, setting_item_max and setting_item_min - Moved 'toggle_modal_button.tsx' to the components folder - Removed t and utility messages from a few components - Fixed bug where the tooltip was not getting rendered on restrictedButtons - Improved the mobile view of the settings modal - Adds E2E for the feature
Этот коммит содержится в:
M-ZubairAhmed
коммит произвёл
GitHub
GitHub
родитель
48bf4e9bd8
Коммит
9ac389f506
@@ -0,0 +1,271 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import {expect} from '@playwright/test';
|
||||
|
||||
import {test} from '@e2e-support/test_fixture';
|
||||
import {getRandomId} from '@e2e-support/util';
|
||||
import {createRandomPost} from '@e2e-support/server/post';
|
||||
|
||||
const keywords = [`AB${getRandomId()}`, `CD${getRandomId()}`, `EF${getRandomId()}`, `Highlight me ${getRandomId()}`];
|
||||
|
||||
const highlightWithoutNotificationClass = 'non-notification-highlight';
|
||||
|
||||
test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on the textbox', async ({pw, pages}) => {
|
||||
const {user} = await pw.initSetup();
|
||||
|
||||
// # Log in as a user in new browser context
|
||||
const {page} = await pw.testBrowser.login(user);
|
||||
|
||||
// # Visit default channel page
|
||||
const channelPage = new pages.ChannelsPage(page);
|
||||
await channelPage.goto();
|
||||
await channelPage.toBeVisible();
|
||||
|
||||
await channelPage.centerView.postCreate.postMessage('Hello World');
|
||||
|
||||
// # Open settings modal
|
||||
await channelPage.globalHeader.openSettings();
|
||||
await channelPage.settingsModal.toBeVisible();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelPage.settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
|
||||
// # Enter keyword 1
|
||||
await keywordsInput.type(keywords[0]);
|
||||
|
||||
// # Press Comma on the textbox
|
||||
await keywordsInput.press(',');
|
||||
|
||||
// # Enter keyword 2
|
||||
await keywordsInput.type(keywords[1]);
|
||||
|
||||
// # Press Tab on the textbox
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Enter keyword 3
|
||||
await keywordsInput.type(keywords[2]);
|
||||
|
||||
// # Press Enter on the textbox
|
||||
await keywordsInput.press('Enter');
|
||||
|
||||
// * Verify that the keywords have been added to the collapsed description
|
||||
await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[0])).toBeVisible();
|
||||
await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[1])).toBeVisible();
|
||||
await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[2])).toBeVisible();
|
||||
});
|
||||
|
||||
test('MM-T5465-2 Should highlight the keywords when a message is sent with the keyword in center', async ({
|
||||
pw,
|
||||
pages,
|
||||
}) => {
|
||||
const {user} = await pw.initSetup();
|
||||
|
||||
// # Log in as a user in new browser context
|
||||
const {page} = await pw.testBrowser.login(user);
|
||||
|
||||
// # Visit default channel page
|
||||
const channelPage = new pages.ChannelsPage(page);
|
||||
await channelPage.goto();
|
||||
await channelPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelPage.globalHeader.openSettings();
|
||||
await channelPage.settingsModal.toBeVisible();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelPage.settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.type(keywords[3]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelPage.settingsModal.notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelPage.settingsModal.closeModal();
|
||||
|
||||
// # Post a message without the keyword
|
||||
const messageWithoutKeyword = 'This message does not contain the keyword';
|
||||
await channelPage.centerView.postCreate.postMessage(messageWithoutKeyword);
|
||||
const lastPostWithoutHighlight = await channelPage.centerView.getLastPost();
|
||||
|
||||
// * Verify that the keywords are not highlighted
|
||||
await expect(lastPostWithoutHighlight.container.getByText(messageWithoutKeyword)).toBeVisible();
|
||||
await expect(lastPostWithoutHighlight.container.getByText(messageWithoutKeyword)).not.toHaveClass(
|
||||
highlightWithoutNotificationClass,
|
||||
);
|
||||
|
||||
// # Post a message with the keyword
|
||||
const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
|
||||
await channelPage.centerView.postCreate.postMessage(messageWithKeyword);
|
||||
const lastPostWithHighlight = await channelPage.centerView.getLastPost();
|
||||
|
||||
// * Verify that the keywords are highlighted
|
||||
await expect(lastPostWithHighlight.container.getByText(messageWithKeyword)).toBeVisible();
|
||||
await expect(lastPostWithHighlight.container.getByText(keywords[3])).toHaveClass(highlightWithoutNotificationClass);
|
||||
});
|
||||
|
||||
test('MM-T5465-3 Should highlight the keywords when a message is sent with the keyword in rhs', async ({pw, pages}) => {
|
||||
const {user} = await pw.initSetup();
|
||||
|
||||
// # Log in as a user in new browser context
|
||||
const {page} = await pw.testBrowser.login(user);
|
||||
|
||||
// # Visit default channel page
|
||||
const channelPage = new pages.ChannelsPage(page);
|
||||
await channelPage.goto();
|
||||
await channelPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelPage.globalHeader.openSettings();
|
||||
await channelPage.settingsModal.toBeVisible();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelPage.settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.type(keywords[3]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelPage.settingsModal.notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelPage.settingsModal.closeModal();
|
||||
|
||||
// # Post a message without the keyword
|
||||
const messageWithoutKeyword = 'This message does not contain the keyword';
|
||||
await channelPage.centerView.postCreate.postMessage(messageWithoutKeyword);
|
||||
const lastPostWithoutHighlight = await channelPage.centerView.getLastPost();
|
||||
|
||||
// # Open the message in the RHS
|
||||
await lastPostWithoutHighlight.hover();
|
||||
await lastPostWithoutHighlight.postMenu.toBeVisible();
|
||||
await lastPostWithoutHighlight.postMenu.reply();
|
||||
await channelPage.sidebarRight.toBeVisible();
|
||||
|
||||
// # Post a message with the keyword in the RHS
|
||||
const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
|
||||
await channelPage.sidebarRight.postCreate.postMessage(messageWithKeyword);
|
||||
|
||||
// * Verify that the keywords are highlighted
|
||||
const lastPostWithHighlightInRHS = await channelPage.sidebarRight.getLastPost();
|
||||
await expect(lastPostWithHighlightInRHS.container.getByText(messageWithKeyword)).toBeVisible();
|
||||
await expect(lastPostWithHighlightInRHS.container.getByText(keywords[3])).toHaveClass(
|
||||
highlightWithoutNotificationClass,
|
||||
);
|
||||
});
|
||||
|
||||
test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions', async ({pw, pages}) => {
|
||||
const {user} = await pw.initSetup();
|
||||
|
||||
// # Log in as a user in new browser context
|
||||
const {page} = await pw.testBrowser.login(user);
|
||||
|
||||
// # Visit default channel page
|
||||
const channelPage = new pages.ChannelsPage(page);
|
||||
await channelPage.goto();
|
||||
await channelPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelPage.globalHeader.openSettings();
|
||||
await channelPage.settingsModal.toBeVisible();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelPage.settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.type(keywords[0]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelPage.settingsModal.notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelPage.settingsModal.closeModal();
|
||||
|
||||
// # Open the recent mentions
|
||||
await channelPage.globalHeader.openRecentMentions();
|
||||
|
||||
// * Verify recent mentions is empty
|
||||
await channelPage.sidebarRight.toBeVisible();
|
||||
await expect(channelPage.sidebarRight.container.getByText('No mentions yet')).toBeVisible();
|
||||
});
|
||||
|
||||
test('MM-T5465-5 Should highlight keywords in message sent from another user', async ({pw, pages}) => {
|
||||
const {adminClient, team, adminUser, user} = await pw.initSetup();
|
||||
|
||||
if (!adminUser) {
|
||||
throw new Error('Failed to create admin user');
|
||||
}
|
||||
|
||||
// # Get the default channel of the team for getting the channel id
|
||||
const channel = await adminClient.getChannelByName(team.id, 'town-square');
|
||||
|
||||
const highlightKeyword = keywords[0];
|
||||
const messageWithKeyword = `This recieved message contains the ${highlightKeyword} keyword `;
|
||||
|
||||
// # Create a post containing the keyword in the channel by admin
|
||||
await adminClient.createPost(
|
||||
createRandomPost({
|
||||
message: messageWithKeyword,
|
||||
channel_id: channel.id,
|
||||
user_id: adminUser.id,
|
||||
}),
|
||||
);
|
||||
|
||||
// # Now log in as a user in new browser context
|
||||
const {page} = await pw.testBrowser.login(user);
|
||||
|
||||
// # Visit default channel page
|
||||
const channelPage = new pages.ChannelsPage(page);
|
||||
await channelPage.goto();
|
||||
await channelPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelPage.globalHeader.openSettings();
|
||||
await channelPage.settingsModal.toBeVisible();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelPage.settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.type(keywords[0]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelPage.settingsModal.notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelPage.settingsModal.closeModal();
|
||||
|
||||
// * Verify that the keywords are highlighted in the last message recieved
|
||||
const lastPostWithHighlight = await channelPage.centerView.getLastPost();
|
||||
await expect(lastPostWithHighlight.container.getByText(messageWithKeyword)).toBeVisible();
|
||||
await expect(lastPostWithHighlight.container.getByText(highlightKeyword)).toHaveClass(
|
||||
highlightWithoutNotificationClass,
|
||||
);
|
||||
});
|
||||
Ссылка в новой задаче
Block a user