mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-05-05 14:47:12 -04:00
Added change user color test.
This commit is contained in:
SamTV12345
parent
8777c9595d
commit
dad4258758
4 changed files with 154 additions and 158 deletions
103
src/tests/frontend-new/specs/change_user_color.spec.ts
Normal file
103
src/tests/frontend-new/specs/change_user_color.spec.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
import {expect, test} from "@playwright/test";
|
||||||
|
import {goToNewPad, sendChatMessage, showChat} from "../helper/padHelper";
|
||||||
|
|
||||||
|
test.beforeEach(async ({page}) => {
|
||||||
|
await goToNewPad(page);
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('change user color', function () {
|
||||||
|
|
||||||
|
test('Color picker matches original color and remembers the user color after a refresh',
|
||||||
|
async function ({page}) {
|
||||||
|
|
||||||
|
// click on the settings button to make settings visible
|
||||||
|
let $userButton = page.locator('.buttonicon-showusers');
|
||||||
|
await $userButton.click()
|
||||||
|
|
||||||
|
let $userSwatch = page.locator('#myswatch');
|
||||||
|
await $userSwatch.click()
|
||||||
|
// Change the color value of the Farbtastic color picker
|
||||||
|
|
||||||
|
const $colorPickerSave = page.locator('#mycolorpickersave');
|
||||||
|
let $colorPickerPreview = page.locator('#mycolorpickerpreview');
|
||||||
|
|
||||||
|
// Same color represented in two different ways
|
||||||
|
const testColorHash = '#abcdef';
|
||||||
|
const testColorRGB = 'rgb(171, 205, 239)';
|
||||||
|
|
||||||
|
// Check that the color picker matches the automatically assigned random color on the swatch.
|
||||||
|
// NOTE: This has a tiny chance of creating a false positive for passing in the
|
||||||
|
// off-chance the randomly assigned color is the same as the test color.
|
||||||
|
expect(await $colorPickerPreview.getAttribute('style')).toContain(await $userSwatch.getAttribute('style'));
|
||||||
|
|
||||||
|
// The swatch updates as the test color is picked.
|
||||||
|
await page.evaluate((testRGBColor) => {
|
||||||
|
document.getElementById('mycolorpickerpreview')!.style.backgroundColor = testRGBColor;
|
||||||
|
}, testColorRGB
|
||||||
|
)
|
||||||
|
|
||||||
|
await $colorPickerSave.click();
|
||||||
|
|
||||||
|
// give it a second to save the color on the server side
|
||||||
|
await page.waitForTimeout(1000)
|
||||||
|
|
||||||
|
|
||||||
|
// get a new pad, but don't clear the cookies
|
||||||
|
await goToNewPad(page)
|
||||||
|
|
||||||
|
|
||||||
|
// click on the settings button to make settings visible
|
||||||
|
await $userButton.click()
|
||||||
|
|
||||||
|
await $userSwatch.click()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
expect(await $colorPickerPreview.getAttribute('style')).toContain(await $userSwatch.getAttribute('style'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Own user color is shown when you enter a chat', async function ({page}) {
|
||||||
|
|
||||||
|
const colorOption = page.locator('#options-colorscheck');
|
||||||
|
if (!(await colorOption.isChecked())) {
|
||||||
|
await colorOption.check();
|
||||||
|
}
|
||||||
|
|
||||||
|
// click on the settings button to make settings visible
|
||||||
|
const $userButton = page.locator('.buttonicon-showusers');
|
||||||
|
await $userButton.click()
|
||||||
|
|
||||||
|
const $userSwatch = page.locator('#myswatch');
|
||||||
|
await $userSwatch.click()
|
||||||
|
|
||||||
|
const $colorPickerSave = page.locator('#mycolorpickersave');
|
||||||
|
|
||||||
|
// Same color represented in two different ways
|
||||||
|
const testColorHash = '#abcdef';
|
||||||
|
const testColorRGB = 'rgb(171, 205, 239)';
|
||||||
|
|
||||||
|
// The swatch updates as the test color is picked.
|
||||||
|
await page.evaluate((testRGBColor) => {
|
||||||
|
document.getElementById('mycolorpickerpreview')!.style.backgroundColor = testRGBColor;
|
||||||
|
}, testColorRGB
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
await $colorPickerSave.click();
|
||||||
|
// click on the chat button to make chat visible
|
||||||
|
await showChat(page)
|
||||||
|
await sendChatMessage(page, 'O hi');
|
||||||
|
|
||||||
|
// wait until the chat message shows up
|
||||||
|
const chatP = page.locator('#chattext').locator('p')
|
||||||
|
const chatText = await chatP.innerText();
|
||||||
|
|
||||||
|
expect(chatText).toContain('O hi');
|
||||||
|
|
||||||
|
const color = await chatP.evaluate((el) => {
|
||||||
|
return window.getComputedStyle(el).getPropertyValue('background-color');
|
||||||
|
}, chatText);
|
||||||
|
|
||||||
|
expect(color).toBe(testColorRGB);
|
||||||
|
});
|
||||||
|
});
|
||||||
51
src/tests/frontend-new/specs/urls_become_clickable.spec.ts
Normal file
51
src/tests/frontend-new/specs/urls_become_clickable.spec.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import {expect, test} from "@playwright/test";
|
||||||
|
import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page })=>{
|
||||||
|
await goToNewPad(page);
|
||||||
|
})
|
||||||
|
|
||||||
|
test.describe('entering a URL makes a link', function () {
|
||||||
|
for (const url of ['https://etherpad.org', 'www.etherpad.org', 'https://www.etherpad.org']) {
|
||||||
|
test(url, async function ({page}) {
|
||||||
|
const padBody = await getPadBody(page);
|
||||||
|
await clearPadContent(page)
|
||||||
|
const url = 'https://etherpad.org';
|
||||||
|
await writeToPad(page, url);
|
||||||
|
await expect(padBody.locator('div').first()).toHaveText(url);
|
||||||
|
await expect(padBody.locator('a')).toHaveText(url);
|
||||||
|
await expect(padBody.locator('a')).toHaveAttribute('href', url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
test.describe('special characters inside URL', async function () {
|
||||||
|
for (const char of '-:@_.,~%+/?=&#!;()[]$\'*') {
|
||||||
|
const url = `https://etherpad.org/${char}foo`;
|
||||||
|
test(url, async function ({page}) {
|
||||||
|
const padBody = await getPadBody(page);
|
||||||
|
await clearPadContent(page)
|
||||||
|
await padBody.click()
|
||||||
|
await clearPadContent(page)
|
||||||
|
await writeToPad(page, url);
|
||||||
|
await expect(padBody.locator('div').first()).toHaveText(url);
|
||||||
|
await expect(padBody.locator('a')).toHaveText(url);
|
||||||
|
await expect(padBody.locator('a')).toHaveAttribute('href', url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('punctuation after URL is ignored', ()=> {
|
||||||
|
for (const char of ':.,;?!)]\'*') {
|
||||||
|
const want = 'https://etherpad.org';
|
||||||
|
const input = want + char;
|
||||||
|
test(input, async function ({page}) {
|
||||||
|
const padBody = await getPadBody(page);
|
||||||
|
await clearPadContent(page)
|
||||||
|
await writeToPad(page, input);
|
||||||
|
await expect(padBody.locator('a')).toHaveCount(1);
|
||||||
|
await expect(padBody.locator('a')).toHaveAttribute('href', want);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
describe('change user color', function () {
|
|
||||||
// create a new pad before each test run
|
|
||||||
beforeEach(async function () {
|
|
||||||
await helper.aNewPad();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Color picker matches original color and remembers the user color' +
|
|
||||||
' after a refresh', async function () {
|
|
||||||
this.timeout(10000);
|
|
||||||
let chrome$ = helper.padChrome$;
|
|
||||||
|
|
||||||
// click on the settings button to make settings visible
|
|
||||||
let $userButton = chrome$('.buttonicon-showusers');
|
|
||||||
$userButton.trigger('click');
|
|
||||||
|
|
||||||
let $userSwatch = chrome$('#myswatch');
|
|
||||||
$userSwatch.trigger('click');
|
|
||||||
|
|
||||||
const fb = chrome$.farbtastic('#colorpicker');
|
|
||||||
const $colorPickerSave = chrome$('#mycolorpickersave');
|
|
||||||
let $colorPickerPreview = chrome$('#mycolorpickerpreview');
|
|
||||||
|
|
||||||
// Same color represented in two different ways
|
|
||||||
const testColorHash = '#abcdef';
|
|
||||||
const testColorRGB = 'rgb(171, 205, 239)';
|
|
||||||
|
|
||||||
// Check that the color picker matches the automatically assigned random color on the swatch.
|
|
||||||
// NOTE: This has a tiny chance of creating a false positive for passing in the
|
|
||||||
// off-chance the randomly assigned color is the same as the test color.
|
|
||||||
expect($colorPickerPreview.css('background-color')).to.be($userSwatch.css('background-color'));
|
|
||||||
|
|
||||||
// The swatch updates as the test color is picked.
|
|
||||||
fb.setColor(testColorHash);
|
|
||||||
expect($colorPickerPreview.css('background-color')).to.be(testColorRGB);
|
|
||||||
$colorPickerSave.trigger('click');
|
|
||||||
expect($userSwatch.css('background-color')).to.be(testColorRGB);
|
|
||||||
|
|
||||||
// give it a second to save the color on the server side
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
||||||
|
|
||||||
// get a new pad, but don't clear the cookies
|
|
||||||
await helper.aNewPad({clearCookies: false});
|
|
||||||
|
|
||||||
chrome$ = helper.padChrome$;
|
|
||||||
|
|
||||||
// click on the settings button to make settings visible
|
|
||||||
$userButton = chrome$('.buttonicon-showusers');
|
|
||||||
$userButton.trigger('click');
|
|
||||||
|
|
||||||
$userSwatch = chrome$('#myswatch');
|
|
||||||
$userSwatch.trigger('click');
|
|
||||||
|
|
||||||
$colorPickerPreview = chrome$('#mycolorpickerpreview');
|
|
||||||
|
|
||||||
expect($colorPickerPreview.css('background-color')).to.be(testColorRGB);
|
|
||||||
expect($userSwatch.css('background-color')).to.be(testColorRGB);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Own user color is shown when you enter a chat', function (done) {
|
|
||||||
this.timeout(1000);
|
|
||||||
const chrome$ = helper.padChrome$;
|
|
||||||
|
|
||||||
const $colorOption = helper.padChrome$('#options-colorscheck');
|
|
||||||
if (!$colorOption.is(':checked')) {
|
|
||||||
$colorOption.trigger('click');
|
|
||||||
}
|
|
||||||
|
|
||||||
// click on the settings button to make settings visible
|
|
||||||
const $userButton = chrome$('.buttonicon-showusers');
|
|
||||||
$userButton.trigger('click');
|
|
||||||
|
|
||||||
const $userSwatch = chrome$('#myswatch');
|
|
||||||
$userSwatch.trigger('click');
|
|
||||||
|
|
||||||
const fb = chrome$.farbtastic('#colorpicker');
|
|
||||||
const $colorPickerSave = chrome$('#mycolorpickersave');
|
|
||||||
|
|
||||||
// Same color represented in two different ways
|
|
||||||
const testColorHash = '#abcdef';
|
|
||||||
const testColorRGB = 'rgb(171, 205, 239)';
|
|
||||||
|
|
||||||
fb.setColor(testColorHash);
|
|
||||||
$colorPickerSave.trigger('click');
|
|
||||||
|
|
||||||
// click on the chat button to make chat visible
|
|
||||||
const $chatButton = chrome$('#chaticon');
|
|
||||||
$chatButton.trigger('click');
|
|
||||||
const $chatInput = chrome$('#chatinput');
|
|
||||||
$chatInput.sendkeys('O hi'); // simulate a keypress of typing user
|
|
||||||
$chatInput.sendkeys('{enter}');
|
|
||||||
|
|
||||||
// wait until the chat message shows up
|
|
||||||
helper.waitFor(() => chrome$('#chattext').children('p').length !== 0).done(() => {
|
|
||||||
const $firstChatMessage = chrome$('#chattext').children('p');
|
|
||||||
// expect the first chat message to be of the user's color
|
|
||||||
expect($firstChatMessage.css('background-color')).to.be(testColorRGB);
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
describe('urls', function () {
|
|
||||||
// Returns the first text element. Note that any change to the text element will result in the
|
|
||||||
// element being replaced with another object.
|
|
||||||
const txt = () => helper.padInner$('div').first();
|
|
||||||
|
|
||||||
before(async function () {
|
|
||||||
await helper.aNewPad();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(async function () {
|
|
||||||
await helper.clearPad();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('entering a URL makes a link', function () {
|
|
||||||
for (const url of ['https://etherpad.org', 'www.etherpad.org']) {
|
|
||||||
it(url, async function () {
|
|
||||||
this.timeout(5000);
|
|
||||||
const url = 'https://etherpad.org';
|
|
||||||
await helper.edit(url);
|
|
||||||
await helper.waitForPromise(() => txt().find('a').length === 1, 2000);
|
|
||||||
const link = txt().find('a');
|
|
||||||
expect(link.attr('href')).to.be(url);
|
|
||||||
expect(link.text()).to.be(url);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('special characters inside URL', function () {
|
|
||||||
for (const char of '-:@_.,~%+/?=&#!;()[]$\'*') {
|
|
||||||
const url = `https://etherpad.org/${char}foo`;
|
|
||||||
it(url, async function () {
|
|
||||||
await helper.edit(url);
|
|
||||||
await helper.waitForPromise(() => txt().find('a').length === 1);
|
|
||||||
const link = txt().find('a');
|
|
||||||
expect(link.attr('href')).to.be(url);
|
|
||||||
expect(link.text()).to.be(url);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('punctuation after URL is ignored', function () {
|
|
||||||
for (const char of ':.,;?!)]\'*') {
|
|
||||||
const want = 'https://etherpad.org';
|
|
||||||
const input = want + char;
|
|
||||||
it(input, async function () {
|
|
||||||
await helper.edit(input);
|
|
||||||
await helper.waitForPromise(() => txt().find('a').length === 1);
|
|
||||||
const link = txt().find('a');
|
|
||||||
expect(link.attr('href')).to.be(want);
|
|
||||||
expect(link.text()).to.be(want);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue