mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-05-05 06:37:10 -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