[MM-38875] Migrate E2E testing to Playwright, re-enable tests (#1800)
* WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * [MM-38875] Migrate E2E testing to Playwright, re-enable tests * Add functionality to map view names to Playwright windows * Added search box test * Added robot.js for automating key presses * Add test using key strokes to navigate menu * Reload test and added webcontentsid to test helper * Check Ctrl+Shift+R as well * oops * Reorganize Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Devin Binnie
@@ -5,8 +5,10 @@
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
const http = require('http');
|
||||
const path = require('path');
|
||||
const robot = require('robotjs');
|
||||
|
||||
// const http = require('http');
|
||||
// const path = require('path');
|
||||
|
||||
const env = require('../../modules/environment');
|
||||
const {asyncSleep} = require('../../modules/utils');
|
||||
@@ -15,15 +17,51 @@ describe('renderer/index.html', function desc() {
|
||||
this.timeout(30000);
|
||||
|
||||
const config = {
|
||||
version: 2,
|
||||
version: 3,
|
||||
teams: [{
|
||||
name: 'example',
|
||||
url: env.mattermostURL,
|
||||
order: 0,
|
||||
tabs: [
|
||||
{
|
||||
name: 'TAB_MESSAGING',
|
||||
order: 0,
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
name: 'TAB_FOCALBOARD',
|
||||
order: 1,
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
name: 'TAB_PLAYBOOKS',
|
||||
order: 2,
|
||||
isOpen: true,
|
||||
},
|
||||
],
|
||||
lastActiveTab: 0,
|
||||
}, {
|
||||
name: 'github',
|
||||
url: 'https://github.com/',
|
||||
order: 1,
|
||||
tabs: [
|
||||
{
|
||||
name: 'TAB_MESSAGING',
|
||||
order: 0,
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
name: 'TAB_FOCALBOARD',
|
||||
order: 1,
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
name: 'TAB_PLAYBOOKS',
|
||||
order: 2,
|
||||
isOpen: true,
|
||||
},
|
||||
],
|
||||
lastActiveTab: 0,
|
||||
}],
|
||||
showTrayIcon: false,
|
||||
trayIconTheme: 'light',
|
||||
@@ -38,178 +76,123 @@ describe('renderer/index.html', function desc() {
|
||||
enableHardwareAcceleration: true,
|
||||
autostart: true,
|
||||
darkMode: false,
|
||||
lastActiveTeam: 0,
|
||||
spellCheckerLocales: [],
|
||||
};
|
||||
|
||||
const serverPort = 8181;
|
||||
|
||||
before(() => {
|
||||
function serverCallback(req, res) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/html',
|
||||
});
|
||||
res.end(fs.readFileSync(path.resolve(env.sourceRootDir, 'test/modules/test.html'), 'utf-8'));
|
||||
}
|
||||
this.server = http.createServer(serverCallback).listen(serverPort, '127.0.0.1');
|
||||
});
|
||||
|
||||
beforeEach(async () => {
|
||||
env.createTestUserDataDir();
|
||||
env.cleanTestConfig();
|
||||
fs.writeFileSync(env.configFilePath, JSON.stringify(config));
|
||||
await asyncSleep(1000);
|
||||
this.app = env.getSpectronApp();
|
||||
await this.app.start();
|
||||
this.app = await env.getApp();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
if (this.app && this.app.isRunning()) {
|
||||
await this.app.stop();
|
||||
if (this.app) {
|
||||
await this.app.close();
|
||||
}
|
||||
});
|
||||
|
||||
after((done) => {
|
||||
this.server.close(done);
|
||||
it('should set src of browser view from config file', async () => {
|
||||
const firstServer = this.app.windows().find((window) => window.url() === config.teams[0].url);
|
||||
const secondServer = this.app.windows().find((window) => window.url() === config.teams[1].url);
|
||||
|
||||
firstServer.should.not.be.null;
|
||||
secondServer.should.not.be.null;
|
||||
});
|
||||
|
||||
// it('should set src of webview from config file', async () => {
|
||||
// const src0 = await this.app.client.getAttribute('#mattermostView0', 'src');
|
||||
// src0.should.equal(config.teams[0].url);
|
||||
it('should set name of menu item from config file', async () => {
|
||||
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
|
||||
const dropdownView = this.app.windows().find((window) => window.url().includes('dropdown'));
|
||||
await mainWindow.click('.TeamDropdownButton');
|
||||
const firstMenuItem = await dropdownView.innerText('.TeamDropdown button.TeamDropdown__button:nth-child(1) span');
|
||||
const secondMenuItem = await dropdownView.innerText('.TeamDropdown button.TeamDropdown__button:nth-child(2) span');
|
||||
|
||||
// const src1 = await this.app.client.getAttribute('#mattermostView1', 'src');
|
||||
// src1.should.equal(config.teams[1].url);
|
||||
firstMenuItem.should.equal(config.teams[0].name);
|
||||
secondMenuItem.should.equal(config.teams[1].name);
|
||||
});
|
||||
|
||||
// const existing = await this.app.client.isExisting('#mattermostView2');
|
||||
// existing.should.be.false;
|
||||
// });
|
||||
it('should only show dropdown when button is clicked', async () => {
|
||||
const mainWindow = await this.app.firstWindow();
|
||||
const browserWindow = await this.app.browserWindow(mainWindow);
|
||||
const mainView = this.app.windows().find((window) => window.url().includes('index'));
|
||||
|
||||
// it('should set name of tab from config file', async () => {
|
||||
// const tabName0 = await this.app.client.getText('#teamTabItem0');
|
||||
// tabName0.should.equal(config.teams[0].name);
|
||||
let dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
|
||||
dropdownHeight.should.equal(0);
|
||||
|
||||
// const tabName1 = await this.app.client.getText('#teamTabItem1');
|
||||
// tabName1.should.equal(config.teams[1].name);
|
||||
// });
|
||||
await mainView.click('.TeamDropdownButton');
|
||||
dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
|
||||
dropdownHeight.should.be.greaterThan(0);
|
||||
|
||||
// it('should show only the selected team', () => {
|
||||
// return this.app.client.
|
||||
// waitForVisible('#mattermostView0', 2000).
|
||||
// waitForVisible('#mattermostView1', 2000, true).
|
||||
// click('#teamTabItem1').
|
||||
// waitForVisible('#mattermostView1', 2000).
|
||||
// waitForVisible('#mattermostView0', 2000, true);
|
||||
// });
|
||||
await mainView.click('.TabBar');
|
||||
dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
|
||||
dropdownHeight.should.equal(0);
|
||||
});
|
||||
|
||||
// validation now prevents incorrect url's from being used
|
||||
// it.skip('should show error when using incorrect URL', async () => {
|
||||
// this.timeout(30000);
|
||||
// fs.writeFileSync(env.configFilePath, JSON.stringify({
|
||||
// version: 2,
|
||||
// teams: [{
|
||||
// name: 'error_1',
|
||||
// url: 'http://false',
|
||||
// order: 0,
|
||||
// }],
|
||||
// }));
|
||||
// await this.app.restart();
|
||||
// return this.app.client.
|
||||
// waitForVisible('#mattermostView0-fail', 20000);
|
||||
// });
|
||||
it('should show only the selected team', async () => {
|
||||
const mainWindow = await this.app.firstWindow();
|
||||
const browserWindow = await this.app.browserWindow(mainWindow);
|
||||
|
||||
// it('shouldn\'t set window title by using webview\'s one', async () => {
|
||||
// fs.writeFileSync(env.configFilePath, JSON.stringify({
|
||||
// version: 2,
|
||||
// teams: [{
|
||||
// name: 'title_test',
|
||||
// url: `http://localhost:${serverPort}`,
|
||||
// order: 0,
|
||||
// }],
|
||||
// }));
|
||||
// await this.app.restart();
|
||||
// await this.app.client.pause(2000);
|
||||
// const windowTitle = await this.app.browserWindow.getTitle();
|
||||
// windowTitle.should.equal('Mattermost Desktop App');
|
||||
// });
|
||||
let firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === url)), env.mattermostURL);
|
||||
firstViewIsAttached.should.be.true;
|
||||
let secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === 'https://github.com/')));
|
||||
secondViewIsAttached.should.be.false;
|
||||
|
||||
// Skip because it's very unstable in CI
|
||||
// it.skip('should update window title when the activated tab\'s title is updated', async () => {
|
||||
// fs.writeFileSync(env.configFilePath, JSON.stringify({
|
||||
// version: 2,
|
||||
// teams: [{
|
||||
// name: 'title_test_0',
|
||||
// url: `http://localhost:${serverPort}`,
|
||||
// order: 0,
|
||||
// }, {
|
||||
// name: 'title_test_1',
|
||||
// url: `http://localhost:${serverPort}`,
|
||||
// order: 1,
|
||||
// }],
|
||||
// }));
|
||||
// await this.app.restart();
|
||||
// await this.app.client.pause(500);
|
||||
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('.TeamDropdownButton');
|
||||
await dropdownView.click('.TeamDropdown button.TeamDropdown__button:nth-child(2)');
|
||||
|
||||
// // Note: Indices of webview are correct.
|
||||
// // Somehow they are swapped.
|
||||
// await this.app.client.
|
||||
// windowByIndex(2).
|
||||
// execute(() => {
|
||||
// document.title = 'Title 0';
|
||||
// });
|
||||
// await this.app.client.windowByIndex(0).pause(500);
|
||||
// let windowTitle = await this.app.browserWindow.getTitle();
|
||||
// windowTitle.should.equal('Title 0');
|
||||
firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === url)), env.mattermostURL);
|
||||
firstViewIsAttached.should.be.false;
|
||||
secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === 'https://github.com/')));
|
||||
secondViewIsAttached.should.be.true;
|
||||
});
|
||||
|
||||
// await this.app.client.
|
||||
// windowByIndex(1).
|
||||
// execute(() => {
|
||||
// document.title = 'Title 1';
|
||||
// });
|
||||
// await this.app.client.windowByIndex(0).pause(500);
|
||||
// windowTitle = await this.app.browserWindow.getTitle();
|
||||
// windowTitle.should.equal('Title 0');
|
||||
// });
|
||||
it('should open the new server prompt after clicking the add button', async () => {
|
||||
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
|
||||
const dropdownView = this.app.windows().find((window) => window.url().includes('dropdown'));
|
||||
await mainWindow.click('.TeamDropdownButton');
|
||||
await dropdownView.click('.TeamDropdown__button.addServer');
|
||||
|
||||
// Skip because it's very unstable in CI
|
||||
// it.skip('should update window title when a tab is selected', async () => {
|
||||
// fs.writeFileSync(env.configFilePath, JSON.stringify({
|
||||
// version: 2,
|
||||
// teams: [{
|
||||
// name: 'title_test_0',
|
||||
// url: `http://localhost:${serverPort}`,
|
||||
// order: 0,
|
||||
// }, {
|
||||
// name: 'title_test_1',
|
||||
// url: `http://localhost:${serverPort}`,
|
||||
// order: 1,
|
||||
// }],
|
||||
// }));
|
||||
// await this.app.restart();
|
||||
const newServerModal = await this.app.waitForEvent('window', {
|
||||
predicate: (window) => window.url().includes('newServer'),
|
||||
});
|
||||
const modalTitle = await newServerModal.innerText('#newServerModal .modal-title');
|
||||
modalTitle.should.equal('Add Server');
|
||||
});
|
||||
|
||||
// // Note: Indices of webview are correct.
|
||||
// // Somehow they are swapped.
|
||||
// await this.app.client.pause(500);
|
||||
it('should switch to servers when keyboard shortcuts are pressed', async () => {
|
||||
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
|
||||
|
||||
// await this.app.client.
|
||||
// windowByIndex(2).
|
||||
// execute(() => {
|
||||
// document.title = 'Title 0';
|
||||
// });
|
||||
// await this.app.client.
|
||||
// windowByIndex(1).
|
||||
// execute(() => {
|
||||
// document.title = 'Title 1';
|
||||
// });
|
||||
// await this.app.client.windowByIndex(0).pause(500);
|
||||
let dropdownButtonText = await mainWindow.innerText('.TeamDropdownButton');
|
||||
dropdownButtonText.should.equal('example');
|
||||
|
||||
// let windowTitle = await this.app.browserWindow.getTitle();
|
||||
// windowTitle.should.equal('Title 0');
|
||||
robot.keyTap('2', ['control', 'shift']);
|
||||
dropdownButtonText = await mainWindow.innerText('.TeamDropdownButton');
|
||||
dropdownButtonText.should.equal('github');
|
||||
|
||||
// await this.app.client.click('#teamTabItem1').pause(500);
|
||||
// windowTitle = await this.app.browserWindow.getTitle();
|
||||
// windowTitle.should.equal('Title 1');
|
||||
// });
|
||||
robot.keyTap('1', ['control', 'shift']);
|
||||
dropdownButtonText = await mainWindow.innerText('.TeamDropdownButton');
|
||||
dropdownButtonText.should.equal('example');
|
||||
});
|
||||
|
||||
// it('should open the new server prompt after clicking the add button', async () => {
|
||||
// // See settings_test for specs that cover the actual prompt
|
||||
// await this.app.client.click('#addServerButton').pause(500);
|
||||
// const isModalExisting = await this.app.client.isExisting('#newServerModal');
|
||||
// isModalExisting.should.be.true;
|
||||
// });
|
||||
if (process.platform !== 'darwin') {
|
||||
it('should open the 3 dot menu with Alt', async () => {
|
||||
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
|
||||
mainWindow.should.not.be.null;
|
||||
|
||||
// Settings window should open if Alt works
|
||||
robot.keyTap('alt');
|
||||
robot.keyTap('enter');
|
||||
robot.keyTap('f');
|
||||
robot.keyTap('s');
|
||||
robot.keyTap('enter');
|
||||
const settingsWindow = await this.app.waitForEvent('window', {
|
||||
predicate: (window) => window.url().includes('settings'),
|
||||
});
|
||||
settingsWindow.should.not.be.null;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user