[MM-61717] Refresh Settings Modal without Bootstrap (#3337)

* [MM-61717] Refresh Settings Modal without Bootstrap

* Fix i18n

* Couple small bug fixes

* E2E test updates

* Fix linux tests

* PR feedback

* PR feedback

* PR feedback

* Fix the border opacity and height

* PR feedback

* PR feedback 2
This commit is contained in:
Devin Binnie
2025-02-27 15:51:49 -05:00
committed by GitHub
parent a4019ddd72
commit 5d7374971c
40 changed files with 2294 additions and 1669 deletions

View File

@@ -67,14 +67,14 @@ describe('focus', function desc() {
});
describe('Focus textbox tests', () => {
it('MM-T1315 should return focus to the message box when closing the settings window', async () => {
it('MM-T1315 should return focus to the message box when closing the settings modal', async () => {
this.app.evaluate(({ipcMain}, showWindow) => {
ipcMain.emit(showWindow);
}, SHOW_SETTINGS_WINDOW);
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.waitForSelector('.SettingsModal');
await settingsWindow.close();
const isTextboxFocused = await firstServer.$eval('#post_textbox', (el) => el === document.activeElement);
@@ -91,7 +91,7 @@ describe('focus', function desc() {
textboxString.should.equal('Mattermost');
});
it('MM-T1316 should return focus to the message box when closing the settings window', async () => {
it('MM-T1316 should return focus to the message box when closing the Add Server modal', async () => {
const mainView = this.app.windows().find((window) => window.url().includes('index'));
const dropdownView = this.app.windows().find((window) => window.url().includes('dropdown'));
await mainView.click('.ServerDropdownButton');

View File

@@ -42,9 +42,10 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.waitForSelector('#inputAutoStart', {state: expected ? 'attached' : 'detached'});
const existing = await settingsWindow.isVisible('#inputAutoStart');
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
await settingsWindow.waitForSelector('#CheckSetting_autostart', {state: expected ? 'attached' : 'detached'});
const existing = await settingsWindow.isVisible('#CheckSetting_autostart');
existing.should.equal(expected);
});
});
@@ -58,9 +59,10 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.waitForSelector('#inputShowTrayIcon', {state: expected ? 'attached' : 'detached'});
const existing = await settingsWindow.isVisible('#inputShowTrayIcon');
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
await settingsWindow.waitForSelector('#CheckSetting_showTrayIcon', {state: expected ? 'attached' : 'detached'});
const existing = await settingsWindow.isVisible('#CheckSetting_showTrayIcon');
existing.should.equal(expected);
});
@@ -72,17 +74,18 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.click('#inputShowTrayIcon');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
await settingsWindow.click('#CheckSetting_showTrayIcon button');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
let config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config0.showTrayIcon.should.true;
await settingsWindow.click('#inputShowTrayIcon');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.click('#CheckSetting_showTrayIcon button');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config0.showTrayIcon.should.false;
@@ -97,18 +100,20 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.click('#inputShowTrayIcon');
await settingsWindow.click('input[value="dark"]');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
await settingsWindow.click('#CheckSetting_showTrayIcon button');
await settingsWindow.click('#RadioSetting_trayIconTheme_dark');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config0.trayIconTheme.should.equal('dark');
await settingsWindow.click('input[value="light"]');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('.SettingsModal__saving', {state: 'detached'});
await settingsWindow.click('#RadioSetting_trayIconTheme_light');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config1.trayIconTheme.should.equal('light');
@@ -125,8 +130,9 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const existing = await settingsWindow.isVisible('#inputMinimizeToTray');
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
const existing = await settingsWindow.isVisible('#CheckSetting_minimizeToTray');
existing.should.equal(expected);
});
});
@@ -140,8 +146,9 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const existing = await settingsWindow.isVisible('#inputflashWindow');
await settingsWindow.waitForSelector('#settingCategoryButton-notifications');
await settingsWindow.click('#settingCategoryButton-notifications');
const existing = await settingsWindow.isVisible('#CheckSetting_flashWindow');
existing.should.equal(expected);
});
});
@@ -155,8 +162,9 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const existing = await settingsWindow.isVisible('#inputShowUnreadBadge');
await settingsWindow.waitForSelector('#settingCategoryButton-notifications');
await settingsWindow.click('#settingCategoryButton-notifications');
const existing = await settingsWindow.isVisible('#CheckSetting_showUnreadBadge');
existing.should.equal(expected);
});
});
@@ -169,16 +177,17 @@ describe('Settings', function desc() {
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const existing = await settingsWindow.isVisible('#inputSpellChecker');
await settingsWindow.waitForSelector('#settingCategoryButton-language');
await settingsWindow.click('#settingCategoryButton-language');
const existing = await settingsWindow.isVisible('#CheckSetting_useSpellChecker');
existing.should.equal(true);
const selected = await settingsWindow.isChecked('#inputSpellChecker');
const selected = await settingsWindow.isChecked('#checkSetting-useSpellChecker');
selected.should.equal(true);
await settingsWindow.click('#inputSpellChecker');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.click('#CheckSetting_useSpellChecker button');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config1.useSpellChecker.should.equal(false);
@@ -187,26 +196,28 @@ describe('Settings', function desc() {
describe('Enable GPU hardware acceleration', () => {
it('MM-T4398 should save selected option', async () => {
const ID_INPUT_ENABLE_HARDWARE_ACCELERATION = '#inputEnableHardwareAcceleration';
const ID_INPUT_ENABLE_HARDWARE_ACCELERATION = '#CheckSetting_enableHardwareAcceleration button';
this.app.evaluate(({ipcMain}, showWindow) => {
ipcMain.emit(showWindow);
}, SHOW_SETTINGS_WINDOW);
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const selected = await settingsWindow.isChecked(ID_INPUT_ENABLE_HARDWARE_ACCELERATION);
await settingsWindow.waitForSelector('#settingCategoryButton-advanced');
await settingsWindow.click('#settingCategoryButton-advanced');
console.log('balls');
const selected = await settingsWindow.isChecked('#checkSetting-enableHardwareAcceleration');
selected.should.equal(true); // default is true
await settingsWindow.click(ID_INPUT_ENABLE_HARDWARE_ACCELERATION);
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config0.enableHardwareAcceleration.should.equal(false);
await settingsWindow.click(ID_INPUT_ENABLE_HARDWARE_ACCELERATION);
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.appOptionsSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config1.enableHardwareAcceleration.should.equal(true);
});
@@ -215,26 +226,27 @@ describe('Settings', function desc() {
if (process.platform !== 'darwin') {
describe('Enable automatic check for updates', () => {
it('MM-T4549 should save selected option', async () => {
const ID_INPUT_ENABLE_AUTO_UPDATES = '#inputAutoCheckForUpdates';
const ID_INPUT_ENABLE_AUTO_UPDATES = '#CheckSetting_autoCheckForUpdates button';
this.app.evaluate(({ipcMain}, showWindow) => {
ipcMain.emit(showWindow);
}, SHOW_SETTINGS_WINDOW);
const settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
const selected = await settingsWindow.isChecked(ID_INPUT_ENABLE_AUTO_UPDATES);
await settingsWindow.waitForSelector('#settingCategoryButton-general');
await settingsWindow.click('#settingCategoryButton-general');
const selected = await settingsWindow.isChecked('#checkSetting-autoCheckForUpdates');
selected.should.equal(true); // default is true
await settingsWindow.click(ID_INPUT_ENABLE_AUTO_UPDATES);
await settingsWindow.waitForSelector('.updatesSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.updatesSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config0 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config0.autoCheckForUpdates.should.equal(false);
await settingsWindow.click(ID_INPUT_ENABLE_AUTO_UPDATES);
await settingsWindow.waitForSelector('.updatesSaveIndicator :text("Saving...")');
await settingsWindow.waitForSelector('.updatesSaveIndicator :text("Saved")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Saving...")');
await settingsWindow.waitForSelector('.SettingsModal__saving :text("Changes saved")');
const config1 = JSON.parse(fs.readFileSync(env.configFilePath, 'utf-8'));
config1.autoCheckForUpdates.should.equal(true);
});

View File

@@ -29,9 +29,10 @@ describe('settings/keyboard_shortcuts', function desc() {
settingsWindow = await this.app.waitForEvent('window', {
predicate: (window) => window.url().includes('settings'),
});
await settingsWindow.waitForSelector('.settingsPage.container');
await settingsWindow.waitForSelector('#settingCategoryButton-language');
await settingsWindow.click('#settingCategoryButton-language');
const textbox = await settingsWindow.waitForSelector('#inputSpellCheckerLocalesDropdown');
const textbox = await settingsWindow.waitForSelector('#selectSetting_spellCheckerLocales');
await textbox.scrollIntoViewIfNeeded();
});
@@ -45,22 +46,22 @@ describe('settings/keyboard_shortcuts', function desc() {
describe('MM-T1288 Manipulating Text', () => {
it('MM-T1288_1 should be able to select and deselect language in the settings window', async () => {
let textboxString;
await settingsWindow.click('#inputSpellCheckerLocalesDropdown');
await settingsWindow.type('#inputSpellCheckerLocalesDropdown', 'Afrikaans');
await settingsWindow.click('#selectSetting_spellCheckerLocales');
await settingsWindow.type('#selectSetting_spellCheckerLocales', 'Afrikaans');
robot.keyTap('tab');
await settingsWindow.isVisible('#appOptionsSaveIndicator');
await settingsWindow.isVisible('.SettingsModal__saving');
textboxString = await settingsWindow.innerText('div.SettingsPage__spellCheckerLocalesDropdown__multi-value__label');
textboxString = await settingsWindow.innerText('.SpellCheckerSetting .SelectSetting__select__multi-value__label');
textboxString.should.equal('Afrikaans');
await settingsWindow.isVisible('#appOptionsSaveIndicator');
await settingsWindow.isVisible('.SettingsModal__saving');
await settingsWindow.click('[aria-label="Remove Afrikaans"]');
await settingsWindow.isVisible('#appOptionsSaveIndicator');
await settingsWindow.isVisible('.SettingsModal__saving');
textboxString = await settingsWindow.inputValue('#inputSpellCheckerLocalesDropdown');
textboxString = await settingsWindow.inputValue('#selectSetting_spellCheckerLocales');
textboxString.should.equal('');
});
@@ -68,7 +69,7 @@ describe('settings/keyboard_shortcuts', function desc() {
const textToCopy = 'Afrikaans';
env.clipboard(textToCopy);
const textbox = await settingsWindow.waitForSelector('#inputSpellCheckerLocalesDropdown');
const textbox = await settingsWindow.waitForSelector('#selectSetting_spellCheckerLocales');
await textbox.selectText({force: true});
robot.keyTap('x', [env.cmdOrCtrl]);
@@ -85,7 +86,7 @@ describe('settings/keyboard_shortcuts', function desc() {
const textToCopy = 'Afrikaans';
env.clipboard(textToCopy);
const textbox = await settingsWindow.waitForSelector('#inputSpellCheckerLocalesDropdown');
const textbox = await settingsWindow.waitForSelector('#selectSetting_spellCheckerLocales');
await textbox.selectText({force: true});
robot.keyTap('c', [env.cmdOrCtrl]);