mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Move /e2e -> /e2e-tests

Просмотр исходного кода
Этот коммит содержится в:
Mario Vitale
2023-03-27 16:28:42 +02:00
родитель da7a6825ce
Коммит ba6b97fb62
1142 изменённых файлов: 44 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

81
e2e-tests/cypress/tests/integration/channels/settings/display/theme/code_theme_colors_spec.js Обычный файл
Просмотреть файл

@@ -0,0 +1,81 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [#] indicates a test step (e.g. # Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
// Stage: @prod
// Group: @channels @account_setting
import * as TIMEOUTS from '../../../../../fixtures/timeouts';
describe('Settings > Display > Theme > Custom Theme Colors', () => {
before(() => {
// # Login as new user, visit off-topic and post a message
cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
cy.visit(offTopicUrl);
cy.postMessage('```\ncode\n```');
});
});
[
{name: 'github', backgroundColor: 'rgb(255, 255, 255)', color: 'rgb(36, 41, 46)'},
{name: 'monokai', backgroundColor: 'rgb(39, 40, 34)', color: 'rgb(221, 221, 221)'},
{name: 'solarized-light', backgroundColor: 'rgb(253, 246, 227)', color: 'rgb(88, 110, 117)'},
{name: 'solarized-dark', backgroundColor: 'rgb(0, 43, 54)', color: 'rgb(147, 161, 161)'},
].forEach((theme, index) => {
it(`MM-T293_${index + 1} Theme Colors - Code (${theme.name})`, () => {
// # Navigate to the theme settings
navigateToThemeSettings();
// # Check Custom Themes
cy.get('#customThemes').check().should('be.checked');
// # Open Center Channel Styles section
cy.get('#centerChannelStyles').click({force: true});
// # Select custom code theme
cy.get('#codeThemeSelect').scrollIntoView().should('be.visible').select(theme.name);
// * Verify that the setting changes in the background?
verifyLastPostStyle(theme);
// # Save and close settings modal
cy.get('#saveSetting').click().wait(TIMEOUTS.HALF_SEC);
cy.uiClose();
// * Verify that the styles remain after saving and closing modal
verifyLastPostStyle(theme);
// # Reload the browser
cy.reload();
// * Verify the styles are still intact
verifyLastPostStyle(theme);
});
});
});
function verifyLastPostStyle(codeTheme) {
cy.getLastPostId().then((postId) => {
const postCodeBlock = `#postMessageText_${postId} code`;
// * Verify that the code block background color and color match the desired theme
cy.get(postCodeBlock).
should('have.css', 'background-color', codeTheme.backgroundColor).
and('have.css', 'color', codeTheme.color);
});
}
function navigateToThemeSettings() {
// Change theme to desired theme (keeps settings modal open)
cy.uiOpenSettingsModal('Display');
// Open edit theme
cy.get('#themeTitle').should('be.visible');
cy.get('#themeEdit').click();
cy.get('.section-max').scrollIntoView();
}

110
e2e-tests/cypress/tests/integration/channels/settings/display/theme/custom_theme_color_picker_spec.js Обычный файл
Просмотреть файл

@@ -0,0 +1,110 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [#] indicates a test step (e.g. # Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
// Stage: @prod
// Group: @channels @account_setting
import {hexToRgbArray, rgbArrayToString} from '../../../../../utils';
describe('Settings > Display > Theme', () => {
before(() => {
// # Login as new user and visit off-topic
cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
cy.visit(offTopicUrl);
});
});
beforeEach(() => {
cy.reload();
cy.postMessage('hello');
// # Go to Settings modal - Display section, then custom theme
cy.uiOpenSettingsModal('Display');
cy.get('#displayButton').
should('be.visible').
click();
cy.get('#themeTitle').
scrollIntoView().
should('be.visible').
click();
cy.get('#customThemes').
should('be.visible').
click();
});
it('MM-T280_1 Theme Colors - Color Picker (Sidebar styles)', () => {
// # Change "Sidebar BG" and verify color change
verifyColorPickerChange(
'Sidebar Styles',
'#sidebarBg-squareColorIcon',
'#sidebarBg-inputColorValue',
'#sidebarBg-squareColorIconValue',
);
});
it('MM-T280_2 Theme Colors - Color Picker (Center Channel styles)', () => {
// # Change "Center Channel BG" and verify color change
verifyColorPickerChange(
'Center Channel Styles',
'#centerChannelBg-squareColorIcon',
'#centerChannelBg-inputColorValue',
'#centerChannelBg-squareColorIconValue',
);
});
it('MM-T280_3 Theme Colors - Color Picker (Link and Button styles)', () => {
// # Change "Link Color" and verify color change
verifyColorPickerChange(
'Link and Button Styles',
'#linkColor-squareColorIcon',
'#linkColor-inputColorValue',
'#linkColor-squareColorIconValue',
);
});
});
function verifyColorPickerChange(stylesText, iconButtonId, inputId, iconValueId) {
// # Open styles section
cy.findByText(stylesText).scrollIntoView().should('be.visible').click({force: true});
// # Click the Sidebar BG setting
cy.get(iconButtonId).click();
// # Click the 15, 40 coordinate of color popover
cy.get('.color-popover').should('be.visible').click(15, 40);
// # Click the Sidebar BG setting again to close popover
cy.get(iconButtonId).click();
// # Toggle theme colors the custom theme
cy.get('#standardThemes').
scrollIntoView().
should('be.visible').
check();
cy.get('#customThemes').
scrollIntoView().
should('be.visible').
check();
// # Re-open styles section
cy.findByText(stylesText).
scrollIntoView().
should('be.visible').
click({force: true});
// * Verify color change is applied correctly
cy.get(inputId).
scrollIntoView().
should('be.visible').
invoke('attr', 'value').
then((hexColor) => {
const rbgArr = hexToRgbArray(hexColor);
cy.get(iconValueId).should('be.visible').and('have.css', 'background-color', rgbArrayToString(rbgArr));
});
}

110
e2e-tests/cypress/tests/integration/channels/settings/display/theme/custom_theme_sidebar_styles_spec.js Обычный файл
Просмотреть файл

@@ -0,0 +1,110 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [#] indicates a test step (e.g. # Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
// Stage: @prod
// Group: @channels @account_setting
import {hexToRgbArray, rgbArrayToString} from '../../../../../utils';
describe('Custom Theme - Sidebar Styles', () => {
const themeRgbColor = {};
before(() => {
// # Login as new user and visit off-topic
cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
cy.visit(offTopicUrl);
// # Go to Theme > Custom > Sidebar Styles
cy.uiOpenSettingsModal('Display');
cy.get('#themeTitle').scrollIntoView().click();
cy.uiGetRadioButton('Custom Theme').click();
cy.findByText('Sidebar Styles').scrollIntoView().click({force: true});
});
});
it('MM-T3853_1 Should change custom sidebar styles on click to color picker', () => {
const testCases = [
{key: 0, name: 'Sidebar BG', themeId: 'sidebarBg'},
{key: 1, name: 'Sidebar Text', themeId: 'sidebarText'},
{key: 2, name: 'Sidebar Header BG', themeId: 'sidebarHeaderBg'},
{key: 3, name: 'Team Sidebar BG', themeId: 'sidebarTeamBarBg'},
{key: 4, name: 'Sidebar Header Text', themeId: 'sidebarHeaderTextColor'},
{key: 5, name: 'Sidebar Unread Text', themeId: 'sidebarUnreadText'},
{key: 6, name: 'Sidebar Text Hover BG', themeId: 'sidebarTextHoverBg'},
{key: 7, name: 'Sidebar Text Active Border', themeId: 'sidebarTextActiveBorder'},
{key: 8, name: 'Sidebar Text Active Color', themeId: 'sidebarTextActiveColor'},
{key: 9, name: 'Online Indicator', themeId: 'onlineIndicator'},
{key: 10, name: 'Away Indicator', themeId: 'awayIndicator'},
{key: 11, name: 'Do Not Disturb Indicator', themeId: 'dndIndicator'},
{key: 12, name: 'Mention Jewel BG', themeId: 'mentionBg'},
{key: 13, name: 'Mention Jewel Text', themeId: 'mentionColor'},
];
Cypress._.forEach(testCases, (testCase) => {
// # Click input color button
cy.get('.input-group-addon').eq(testCase.key).scrollIntoView().click({force: true});
// # Click the 15, 40 plus key coordinate of color popover
cy.get('.color-popover').should('be.visible').click(15, 40 + testCase.key);
cy.get(`#${testCase.themeId}-inputColorValue`).scrollIntoView().should('be.visible').invoke('attr', 'value').then((hexColor) => {
themeRgbColor[testCase.themeId] = hexToRgbArray(hexColor);
// * Check that icon color change
cy.get('.color-icon').eq(testCase.key).should('have.css', 'background-color', rgbArrayToString(themeRgbColor[testCase.themeId]));
// * Check that theme colors for text sharing is updated
cy.get('#pasteBox').scrollIntoView().should('contain', `"${testCase.themeId}":"${hexColor.toLowerCase()}"`);
});
});
});
it('MM-T3853_2 Should observe color change in Settings modal before saving', () => {
// * Check Sidebar BG color change
cy.get('.settings-links').should('have.css', 'background-color', rgbArrayToString(themeRgbColor.sidebarBg));
// * Check Sidebar Text color change
const rgbArr = themeRgbColor.sidebarText;
cy.get('#displayButton').should('have.css', 'color', `rgba(${rgbArr[0]}, ${rgbArr[1]}, ${rgbArr[2]}, 0.6)`);
// * Check Sidebar Header BG color change
cy.get('#accountSettingsHeader').should('have.css', 'background', `${rgbArrayToString(themeRgbColor.sidebarHeaderBg)} none repeat scroll 0% 0% / auto padding-box border-box`);
// * Check Sidebar Header Text color change
cy.get('#accountSettingsModalLabel').should('have.css', 'color', rgbArrayToString(themeRgbColor.sidebarHeaderTextColor));
cy.uiSaveAndClose();
});
it('MM-T3853_3 Should take effect each custom color in Channel View', () => {
// * Check Mention Jewel BG color
cy.get('#unreadIndicatorBottom').should('have.css', 'background-color', rgbArrayToString(themeRgbColor.mentionBg));
// * Check Mention Jewel Text color
cy.get('#unreadIndicatorBottom').should('have.css', 'color', rgbArrayToString(themeRgbColor.mentionColor));
// # Set user status to online
cy.uiOpenUserMenu('Online');
// * Check Online Indicator color
cy.get('.icon-check-circle').should('have.css', 'color', rgbArrayToString(themeRgbColor.onlineIndicator));
// # Set user status to away
cy.uiOpenUserMenu('Away');
// * Check Away Indicator color
cy.get('.icon-clock').should('have.css', 'color', rgbArrayToString(themeRgbColor.awayIndicator));
// # Set user status to do not disturb
cy.uiOpenDndStatusSubMenu().find('#dndTime-thirty_minutes_menuitem').click();
// * Check Do Not Disturb Indicator color
cy.get('.icon-minus-circle').should('have.css', 'color', rgbArrayToString(themeRgbColor.dndIndicator));
});
});

48
e2e-tests/cypress/tests/integration/channels/settings/display/theme/save_theme_spec.js Обычный файл
Просмотреть файл

@@ -0,0 +1,48 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [#] indicates a test step (e.g. # Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
// Stage: @prod
// Group: @channels @account_setting
import * as TIMEOUTS from '../../../../../fixtures/timeouts';
describe('Settings > Display > Theme > Save', () => {
before(() => {
// # Login as new user and visit off-topic
cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
cy.visit(offTopicUrl);
});
});
it('MM-T2090 Theme Colors: New theme color is saved', () => {
// # Go to Settings modal - Display section
cy.uiOpenSettingsModal('Display');
// # Go to Theme settings tab
cy.get('#displayButton', {timeout: TIMEOUTS.FIVE_SEC}).should('be.visible').click();
cy.get('#themeTitle', {timeout: TIMEOUTS.TWO_SEC}).should('be.visible').click();
// # Change to dark theme
cy.get('#premadeThemeIndigo').should('not.have.class', 'active').click();
cy.get('#premadeThemeIndigo').should('have.class', 'active');
// # Save and close the Settings modal
cy.uiSaveAndClose();
// # Go to Settings modal - Display section
cy.uiOpenSettingsModal('Display');
// # Go to Theme settings tab
cy.get('#displayButton', {timeout: TIMEOUTS.FIVE_SEC}).should('be.visible').click();
cy.get('#themeTitle', {timeout: TIMEOUTS.TWO_SEC}).should('be.visible').click();
// * Verify dark theme is selected
cy.get('#premadeThemeIndigo').should('have.class', 'active');
});
});

50
e2e-tests/cypress/tests/integration/channels/settings/display/theme/settings_view_spec.js Обычный файл
Просмотреть файл

@@ -0,0 +1,50 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// ***************************************************************
// - [#] indicates a test step (e.g. # Go to a page)
// - [*] indicates an assertion (e.g. * Check the title)
// - Use element ID when selecting an element. Create one if none.
// ***************************************************************
// Stage: @prod
// Group: @channels @account_setting
describe('Settings > Display > Theme', () => {
before(() => {
// # Login as new user and visit off-topic
cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
cy.visit(offTopicUrl);
});
});
it('MM-T3855 Theme Display should render in min setting view', () => {
// # Go to Settings > Display
cy.uiOpenSettingsModal('Display').within(() => {
// * Check the min setting view for each element that is present and contains the expected values
verifyMinDisplayView();
cy.uiClose();
});
});
});
function verifyMinDisplayView() {
cy.get('#themeTitle').should('be.visible', 'contain', 'Theme');
cy.get('#themeEdit').should('be.visible', 'contain', 'Edit');
cy.get('#clockTitle').should('be.visible', 'contain', 'Clock Display');
cy.get('#clockEdit').should('be.visible', 'contain', 'Edit');
cy.get('#name_formatTitle').should('be.visible', 'contain', 'Teammate Name Display');
cy.get('#name_formatEdit').should('be.visible', 'contain', 'Edit');
cy.get('#collapseTitle').should('be.visible', 'contain', 'Default appearance of image previews');
cy.get('#collapseEdit').should('be.visible', 'contain', 'Edit');
cy.get('#message_displayTitle').scrollIntoView().should('be.visible', 'contain', 'Message Display');
cy.get('#message_displayEdit').should('be.visible', 'contain', 'Edit');
cy.get('#languagesTitle').scrollIntoView().should('be.visible', 'contain', 'Language');
cy.get('#languagesEdit').should('be.visible', 'contain', 'Edit');
}