MM-63313 Make theme setting radio buttons horizontal and update text (#30584)
* MM-63313 Make theme setting radio buttons horizontal and update text * MM-63313 Add Playwright test for a11y of theme settings * Update snapshot * Run prettier on E2E tests * Address feedback * Ensure new test reliably passes on Firefox For whatever reason, Firefox lets you tab onto the Sidebar Styles panel while it's expanding, possibly because it's a scrollable container with overflowing content or because other browsers don't register the children of that panel as visible while the panel is animating open. Either way, we can look at the CSS on the panel to confirm when the transition is done. * Revert previous changes made to premade theme label alignment and size In the last PR, these were changed from generic divs to buttons, and the default browser style for buttons adds some extra padding and centres the button text by default, so we have to override that. * Adjust margins on inline radio group * Fix playwright test code styling * Fix bad import in E2E tests
Этот коммит содержится в:
Harrison Healey
коммит произвёл
GitHub
GitHub
родитель
b19ce98a74
Коммит
e8685a5802
@@ -26,16 +26,15 @@ test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on t
|
||||
await channelsPage.centerView.postCreate.postMessage('Hello World');
|
||||
|
||||
// # Open settings modal
|
||||
await channelsPage.globalHeader.openSettings();
|
||||
await channelsPage.settingsModal.toBeVisible();
|
||||
const settingsModal = await channelsPage.globalHeader.openSettings();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelsPage.settingsModal.openNotificationsTab();
|
||||
const notificationsSettings = await settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelsPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
await notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
const keywordsInput = await channelsPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
const keywordsInput = await notificationsSettings.getKeywordsInput();
|
||||
|
||||
// # Enter keyword 1
|
||||
await keywordsInput.fill(keywords[0]);
|
||||
@@ -56,7 +55,7 @@ test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on t
|
||||
await keywordsInput.press('Enter');
|
||||
|
||||
// * Verify that the keywords have been added to the collapsed description
|
||||
const keysWithHighlightDesc = channelsPage.settingsModal.notificationsSettings.keysWithHighlightDesc;
|
||||
const keysWithHighlightDesc = notificationsSettings.keysWithHighlightDesc;
|
||||
await keysWithHighlightDesc.waitFor();
|
||||
for (const keyword of keywords.slice(0, 3)) {
|
||||
expect(await keysWithHighlightDesc).toContainText(keyword);
|
||||
@@ -77,25 +76,24 @@ test('MM-T5465-2 Should highlight the keywords when a message is sent with the k
|
||||
await channelsPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelsPage.globalHeader.openSettings();
|
||||
await channelsPage.settingsModal.toBeVisible();
|
||||
const settingsModal = await channelsPage.globalHeader.openSettings();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelsPage.settingsModal.openNotificationsTab();
|
||||
const notificationsSettings = await settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelsPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
await notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelsPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
const keywordsInput = await notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.fill(keywords[3]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelsPage.settingsModal.notificationsSettings.save();
|
||||
await notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelsPage.settingsModal.closeModal();
|
||||
await settingsModal.closeModal();
|
||||
|
||||
// # Post a message without the keyword
|
||||
const messageWithoutKeyword = 'This message does not contain the keyword';
|
||||
@@ -132,25 +130,24 @@ test('MM-T5465-3 Should highlight the keywords when a message is sent with the k
|
||||
await channelsPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelsPage.globalHeader.openSettings();
|
||||
await channelsPage.settingsModal.toBeVisible();
|
||||
const settingsModal = await channelsPage.globalHeader.openSettings();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelsPage.settingsModal.openNotificationsTab();
|
||||
const notificationsSettings = await settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelsPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
await notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelsPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
const keywordsInput = await notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.fill(keywords[3]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelsPage.settingsModal.notificationsSettings.save();
|
||||
await notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelsPage.settingsModal.closeModal();
|
||||
await settingsModal.closeModal();
|
||||
|
||||
// # Post a message without the keyword
|
||||
const messageWithoutKeyword = 'This message does not contain the keyword';
|
||||
@@ -189,25 +186,24 @@ test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions',
|
||||
await channelsPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelsPage.globalHeader.openSettings();
|
||||
await channelsPage.settingsModal.toBeVisible();
|
||||
const settingsModal = await channelsPage.globalHeader.openSettings();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelsPage.settingsModal.openNotificationsTab();
|
||||
const notificationsSettings = await settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelsPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
await notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelsPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
const keywordsInput = await notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.fill(keywords[0]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelsPage.settingsModal.notificationsSettings.save();
|
||||
await notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelsPage.settingsModal.closeModal();
|
||||
await settingsModal.closeModal();
|
||||
|
||||
// # Open the recent mentions
|
||||
await channelsPage.globalHeader.openRecentMentions();
|
||||
@@ -250,25 +246,24 @@ test('MM-T5465-5 Should highlight keywords in message sent from another user', a
|
||||
await channelsPage.toBeVisible();
|
||||
|
||||
// # Open settings modal
|
||||
await channelsPage.globalHeader.openSettings();
|
||||
await channelsPage.settingsModal.toBeVisible();
|
||||
const settingsModal = await channelsPage.globalHeader.openSettings();
|
||||
|
||||
// # Open notifications tab
|
||||
await channelsPage.settingsModal.openNotificationsTab();
|
||||
const notificationsSettings = await settingsModal.openNotificationsTab();
|
||||
|
||||
// # Open keywords that get highlighted section
|
||||
await channelsPage.settingsModal.notificationsSettings.expandSection('keysWithHighlight');
|
||||
await notificationsSettings.expandSection('keysWithHighlight');
|
||||
|
||||
// # Enter the keyword
|
||||
const keywordsInput = await channelsPage.settingsModal.notificationsSettings.getKeywordsInput();
|
||||
const keywordsInput = await notificationsSettings.getKeywordsInput();
|
||||
await keywordsInput.fill(keywords[0]);
|
||||
await keywordsInput.press('Tab');
|
||||
|
||||
// # Save the keyword
|
||||
await channelsPage.settingsModal.notificationsSettings.save();
|
||||
await notificationsSettings.save();
|
||||
|
||||
// # Close the settings modal
|
||||
await channelsPage.settingsModal.closeModal();
|
||||
await settingsModal.closeModal();
|
||||
|
||||
// * Verify that the keywords are highlighted in the last message received
|
||||
const lastPostWithHighlight = await channelsPage.getLastPost();
|
||||
|
||||
Ссылка в новой задаче
Block a user