Use Playwright

This commit is contained in:
Kev 2021-12-08 19:47:59 +00:00 committed by Marcel van Remmerden
parent aef8040d25
commit d5a2634eec
9 changed files with 105 additions and 124 deletions

View File

@ -12,7 +12,7 @@
/>
</head>
<body>
<body data-testid="gitdock">
<div id="header">
<div id="user"></div>
<div id="counts">

View File

@ -11,7 +11,7 @@
rel="stylesheet"
/>
</head>
<body>
<body data-testid="gitdock">
<div id="login-page-wrapper">
<div id="login-page">
<div id="hero-wrapper">

View File

@ -44,6 +44,7 @@
"menubar": "^9.0.5",
"node-browser-history": "^2.4.6",
"node-fetch": "^2.6.1",
"playwright": "^1.17.1",
"universal-analytics": "^0.4.23"
},
"config": {

View File

@ -4,40 +4,38 @@ const { stopAppAfterEach, newApp } = require('./util');
describe('"Bookmarks" section', function () {
this.timeout(25000);
const addBookmark = async (app, link) => {
const bookmarkInput = await app.client.$('#bookmark-link');
await bookmarkInput.setValue(link);
const addButton = await app.client.$('#bookmark-add-button');
await addButton.click();
const addBookmark = async (window, link) => {
let element = await window.$('#bookmark-link');
await element.fill(link);
await window.click('#bookmark-add-button');
};
describe('without bookmarks', function () {
beforeEach(async function () {
this.app = newApp({ loggedIn: true });
await this.app.start();
await newApp(this, { loggedIn: true });
});
stopAppAfterEach();
it('can add and delete a bookmark', async function () {
await addBookmark(this.app, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
await addBookmark(this.window, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
const title = await this.app.client.$('#bookmark-title');
assert.equal(await title.isExisting(), true);
assert.equal(await title.getText(), '500 error on MR approvers edit page (#1)');
const title = this.window.locator('#bookmark-title');
assert.equal(await title.innerText(), '500 error on MR approvers edit page (#1)');
const deleteButton = await this.app.client.$('.bookmark-delete');
await deleteButton.click();
await this.window.click('.bookmark-delete');
const bookmarkInput = await this.app.client.$('#bookmark-link');
assert.equal(await bookmarkInput.isExisting(), true);
assert.equal(await title.isExisting(), false);
const bookmarkInput = this.window.locator('#bookmark-link');
assert.equal(await bookmarkInput.count(), 1);
assert.equal(await title.count(), 0);
});
});
describe('with bookmarks', function () {
const FIRST_BOOKMARK_URL = 'https://gitlab.com/user/project/-/merge_requests/1';
beforeEach(async function () {
this.app = newApp({
await newApp(this, {
loggedIn: true,
bookmarks: [
{
@ -46,41 +44,41 @@ describe('"Bookmarks" section', function () {
parent_name: 'Test Project',
parent_url: 'https://gitlab.com/user/project',
type: 'merge_request',
web_url: 'https://gitlab.com/user/project/-/merge_requests/1',
web_url: FIRST_BOOKMARK_URL,
},
],
});
await this.app.start();
});
stopAppAfterEach();
it('can delete a bookmark', async function () {
const title = await this.app.client.$('#bookmark-title');
assert.equal(await title.isExisting(), true);
const title = this.window.locator('#bookmark-title');
assert.equal(await title.count(), 1);
const deleteButton = await this.app.client.$('.bookmark-delete');
await deleteButton.click();
await this.window.click('.bookmark-delete');
assert.equal(await title.isExisting(), false);
assert.equal(await title.count(), 0);
});
it('can add a bookmark', async function () {
const addBookmarksButton = await this.app.client.$('#add-bookmark-dialog a');
await addBookmarksButton.click();
await this.window.click('#add-bookmark-dialog a');
await addBookmark(this.app, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
const titles = await this.app.client.$$('.bookmark-information a');
assert.equal(titles.length, 2);
await addBookmark(this.window, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
const titles = this.window.locator('.bookmark-information a');
assert.equal(await titles.count(), 2);
});
it('cannot add a bookmark twice', async function () {
const addBookmarksButton = await this.app.client.$('#add-bookmark-dialog a');
await addBookmarksButton.click();
await this.window.click('#add-bookmark-dialog a');
await addBookmark(this.app, 'https://gitlab.com/user/project/-/merge_requests/1');
const error = await this.app.client.$('#add-bookmark-error');
assert.equal(await error.getText(), 'This bookmark has already been added.');
await addBookmark(this.window, FIRST_BOOKMARK_URL);
assert.equal(
await this.window.textContent('#add-bookmark-error'),
'This bookmark has already been added.',
);
});
});
});

View File

@ -5,22 +5,18 @@ describe('Feature tests', function () {
this.timeout(25000);
beforeEach(async function () {
this.app = newApp({ loggedIn: true });
await this.app.start();
await newApp(this, { loggedIn: true });
});
stopAppAfterEach();
it('shows overview page', async function () {
let issues = await this.app.client.$('#issues-count');
let mrs = await this.app.client.$('#mrs-count');
let todos = await this.app.client.$('#todos-count');
await issues.waitForExist({ timeout: 5000 });
let issuesExists = await issues.isExisting();
let mrsExists = await mrs.isExisting();
let todosExists = await todos.isExisting();
assert.equal(issuesExists, true);
assert.equal(mrsExists, true);
assert.equal(todosExists, true);
const issues = this.window.locator('#issues-count');
const mrs = this.window.locator('#mrs-count');
const todos = this.window.locator('#todos-count');
assert.equal(await issues.count(), 1);
assert.equal(await mrs.count(), 1);
assert.equal(await todos.count(), 1);
});
});

View File

@ -5,44 +5,32 @@ describe('Application launch', function () {
this.timeout(25000);
beforeEach(async function () {
this.app = newApp();
return this.app.start();
await newApp(this);
});
stopAppAfterEach();
it('starts the menubar and quick actions windows', async function () {
const count = await this.app.client.getWindowCount();
assert.equal(count, 2);
});
it('has the right size', function () {
return this.app.client.browserWindow.getSize().then(function (sizes) {
assert.equal(sizes[0], 550) && assert.equal(sizes[1], 700);
});
const windows = await this.app.windows();
assert.equal(windows.length, 1);
});
it('can log in', async function () {
let element = await this.app.client.$('#instance-checkbox');
return element
.click()
.then(async () => {
let token = await this.app.client.$('#access-token-input');
let url = await this.app.client.$('#instance-url-input');
await token.setValue(process.env.ACCESS_TOKEN);
await url.setValue('https://gitlab.com');
let button = await this.app.client.$('#login-instance-button');
return button.click();
})
.then(async () => {
let issues = await this.app.client.$('#issues-count');
let mrs = await this.app.client.$('#mrs-count');
let todos = await this.app.client.$('#todos-count');
await issues.waitForExist({ timeout: 5000 });
let issuesExists = await issues.isExisting();
let mrsExists = await mrs.isExisting();
let todosExists = await todos.isExisting();
assert.equal(issuesExists, true);
assert.equal(mrsExists, true);
assert.equal(todosExists, true);
});
await this.window.click('#instance-checkbox');
this.window.$eval(
'#access-token-input',
(el, token) => (el.value = token),
process.env.ACCESS_TOKEN,
);
this.window.$eval('#instance-url-input', (el) => (el.value = 'https://gitlab.com'));
await this.window.click('#login-instance-button');
await this.window.waitForNavigation();
const issues = this.window.locator('#issues-count');
const mrs = this.window.locator('#mrs-count');
const todos = this.window.locator('#todos-count');
assert.equal(await issues.count(), 1);
assert.equal(await mrs.count(), 1);
assert.equal(await todos.count(), 1);
});
});

View File

@ -19,14 +19,14 @@ describe('"Recently viewed" section', function () {
},
];
const supportedBrowsersText = async (app) => {
const element = await app.client.$('.supported-browsers');
return element.getText();
const supportedBrowsersText = async (page) => {
const element = await page.$('.supported-browsers');
return element.innerText();
};
const historyTexts = async (app) => {
const elements = await app.client.$$('.history-entry');
const texts = await Promise.all(elements.map((element) => element.getText()));
const historyTexts = async (page) => {
const elements = await page.$$('.history-entry');
const texts = await Promise.all(elements.map((element) => element.innerText()));
return texts;
};
@ -35,12 +35,11 @@ describe('"Recently viewed" section', function () {
describe('without history', function () {
stopAppAfterEach();
this.beforeEach(async function () {
this.app = newApp({ platform, loggedIn: true });
await this.app.start();
await newApp(this, { platform, loggedIn: true });
});
it('renders the correct message', async function () {
const actual = await supportedBrowsersText(this.app);
const actual = await supportedBrowsersText(this.window);
assert.equal(actual, emptyMessage);
});
});
@ -48,7 +47,7 @@ describe('"Recently viewed" section', function () {
describe('with history', function () {
stopAppAfterEach();
this.beforeEach(async function () {
this.app = newApp({
await newApp(this, {
platform,
loggedIn: true,
browserHistory: [
@ -62,11 +61,10 @@ describe('"Recently viewed" section', function () {
],
],
});
await this.app.start();
});
it('renders the history', async function () {
const actual = await historyTexts(this.app);
const actual = await historyTexts(this.window);
assert.equal(actual.length, 1);
assert.equal(actual[0].includes('Test Issue (#1)'), 1);
@ -83,12 +81,11 @@ describe('"Recently viewed" section', function () {
describe('without history', function () {
stopAppAfterEach();
this.beforeEach(async function () {
this.app = newApp({ platform, loggedIn: true });
await this.app.start();
await newApp(this, { platform, loggedIn: true });
});
it('renders the correct message', async function () {
const actual = await supportedBrowsersText(this.app);
const actual = await supportedBrowsersText(this.window);
assert.equal(actual, emptyMessage);
});
});
@ -96,18 +93,17 @@ describe('"Recently viewed" section', function () {
describe('with history', function () {
stopAppAfterEach();
this.beforeEach(async function () {
this.app = newApp({
await newApp(this, {
platform,
loggedIn: true,
browserHistory: [
{ title: 'Test Issue #1', url: 'https://gitlab.com/user/project/-/issues/1' },
],
});
await this.app.start();
});
it('renders the info message as if there was no history', async function () {
const actual = await supportedBrowsersText(this.app);
const actual = await supportedBrowsersText(this.window);
assert.equal(actual, emptyMessage);
});
});

View File

@ -4,21 +4,20 @@ const { newApp, stopAppAfterEach } = require('./util');
describe('Themes', function () {
this.timeout(25000);
const getBackgroundColor = async (app) =>
app.webContents.executeJavaScript(
'document.documentElement.style.getPropertyValue("--background-color")',
const getBackgroundColor = async (page) =>
await page.evaluate(() =>
document.documentElement.style.getPropertyValue('--background-color'),
);
describe('dark theme', function () {
stopAppAfterEach();
beforeEach(async function () {
this.app = newApp({ theme: 'dark' });
await this.app.start();
await newApp(this, { theme: 'dark' });
});
it('has the correct background color', async function () {
const color = await getBackgroundColor(this.app);
const color = await getBackgroundColor(this.window);
assert.equal(color, '#090c10');
});
@ -28,12 +27,11 @@ describe('Themes', function () {
stopAppAfterEach();
beforeEach(async function () {
this.app = newApp({ theme: 'light' });
await this.app.start();
await newApp(this, { theme: 'light' });
});
it('has the correct background color', async function () {
const color = await getBackgroundColor(this.app);
const color = await getBackgroundColor(this.window);
assert.equal(color, '#fff');
});

View File

@ -1,6 +1,5 @@
const electronPath = require('electron');
const path = require('path');
const Application = require('spectron').Application;
const { _electron: electron } = require('playwright-core');
const userDataIfLoggedIn = (loggedIn = false) => {
if (!loggedIn) {
@ -23,25 +22,20 @@ module.exports = {
* bookmarks?: { title: string, type: string, web_url: string, parent_url: string, added: number, parent_name: string }[] },
* }
*/
newApp({ theme, loggedIn, platform = process.platform, browserHistory, bookmarks = [] } = {}) {
async newApp(
thisValue,
{ theme, loggedIn, platform = process.platform, browserHistory, bookmarks = [] } = {},
) {
const store = {
theme,
...userDataIfLoggedIn(loggedIn),
bookmarks,
};
const app = new Application({
path: electronPath,
args: [
'-r',
`${__dirname}/mocks.js`,
'--no-sandbox',
'--ignore-certificate-error',
'--disable-dev-shm-usage',
'--whitelisted-ips=',
path.join(__dirname, '..', '..'),
],
const app = await electron.launch({
args: ['-r', `${__dirname}/mocks.js`, path.join(__dirname, '..', '..', 'myApp.js')],
env: {
...process.env,
NODE_ENV: 'test',
MOCK_STORE: typeof store === 'object' ? JSON.stringify(store) : '',
MOCK_PLATFORM: platform,
@ -49,12 +43,22 @@ module.exports = {
LOGGED_IN: loggedIn ? 'true' : '',
},
});
return app;
const window = await app.firstWindow();
await window.waitForSelector('[data-testid="gitdock"]');
window.setDefaultTimeout(5000);
if (thisValue) {
thisValue.app = app;
thisValue.window = window;
}
return { app, window };
},
stopAppAfterEach() {
afterEach(async function () {
if (this.app && this.app.isRunning()) {
await this.app.stop();
if (this.app) {
await this.app.close();
this.app = null;
}
});
},