Use Playwright
This commit is contained in:
parent
aef8040d25
commit
d5a2634eec
|
|
@ -12,7 +12,7 @@
|
|||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-testid="gitdock">
|
||||
<div id="header">
|
||||
<div id="user"></div>
|
||||
<div id="counts">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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.',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue