ff34b16947
Helper functions: checkAccessibilityEnabledToBe check accessibility state independently from current desktop ui setAccessibilityState set accessibility state independently from current desktop ui Both helper functions check that ui state and a11y support in text input element are in sync. Enable/Disable Accessibility Support test state toggling and state preservation when switching ui Typing after switching accessibility state check editable area content after toggling accessibility support Signed-off-by: Marco Cecchetti <marco.cecchetti@collabora.com> Change-Id: Icce5ae148024a8abf9b65a90229915f28f720554
463 lines
14 KiB
JavaScript
463 lines
14 KiB
JavaScript
/* global cy require Cypress expect */
|
|
|
|
var helper = require('./helper');
|
|
|
|
// Make the sidebar visible by clicking on the corresponding toolbar item.
|
|
// We assume that the sidebar is hidden, when this method is called.
|
|
|
|
function showSidebar() {
|
|
cy.log('Showing sidebar - start.');
|
|
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').should('not.have.class', 'checked');
|
|
cy.cGet('#sidebar-dock-wrapper').should('not.be.visible');
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').click({force: true});
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').should('have.class', 'checked');
|
|
cy.cGet('#sidebar-dock-wrapper').should('be.visible');
|
|
|
|
cy.log('Showing sidebar - end.');
|
|
}
|
|
|
|
// Hide the sidebar by clicking on the corresponding toolbar item.
|
|
// We assume that the sidebar is visible, when this method is called.
|
|
function hideSidebar() {
|
|
cy.log('Hiding sidebar - start.');
|
|
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').should('have.class', 'checked');
|
|
cy.cGet('#sidebar-dock-wrapper').should('be.visible');
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').click({force: true});
|
|
cy.cGet('#tb_editbar_item_sidebar .w2ui-button').should('not.have.class', 'checked');
|
|
cy.cGet('#sidebar-dock-wrapper').should('not.be.visible');
|
|
|
|
cy.log('Hiding sidebar - end.');
|
|
}
|
|
|
|
// Make the status bar visible if it's hidden at the moment.
|
|
// We use the menu option under 'View' menu to make it visible.
|
|
function showStatusBarIfHidden() {
|
|
cy.cGet('#toolbar-down')
|
|
.then(function(statusbar) {
|
|
if (!Cypress.dom.isVisible(statusbar[0])) {
|
|
cy.get('#menu-view')
|
|
.click();
|
|
|
|
cy.get('#menu-showstatusbar')
|
|
.click();
|
|
}
|
|
});
|
|
|
|
cy.cGet('#toolbar-down').should('be.visible');
|
|
}
|
|
|
|
// Make the sidebar visible if it's hidden at the moment.
|
|
function showSidebarIfHidden() {
|
|
cy.get('#tb_editbar_item_sidebar .w2ui-button')
|
|
.then(function(sidebarItem) {
|
|
if (!sidebarItem.hasClass('checked')) {
|
|
showSidebar();
|
|
}
|
|
});
|
|
|
|
cy.get('#sidebar-dock-wrapper')
|
|
.should('be.visible');
|
|
}
|
|
|
|
// Hide the sidebar if it's visible at the moment.
|
|
function hideSidebarIfVisible() {
|
|
cy.get('#tb_editbar_item_sidebar .w2ui-button')
|
|
.then(function(sidebarItem) {
|
|
if (sidebarItem.hasClass('checked')) {
|
|
hideSidebar();
|
|
}
|
|
});
|
|
|
|
cy.get('#sidebar-dock-wrapper')
|
|
.should('not.be.visible');
|
|
}
|
|
|
|
// Select a color from colour palette widget used on top toolbar.
|
|
// Parameters:
|
|
// color - a hexadecimal color code without the '#' mark (e.g. 'FF011B')
|
|
function selectColorFromPalette(color) {
|
|
cy.cGet('.w2ui-overlay').should('be.visible');
|
|
cy.cGet('.w2ui-color [name="' + color + '"]').click();
|
|
cy.cGet('.w2ui-overlay').should('not.exist');
|
|
}
|
|
|
|
// Select an item from a listbox widget used on top toolbar.
|
|
// Parameters:
|
|
// item - item string, that we use a selector to find the right list item.
|
|
function selectFromListbox(item) {
|
|
cy.cGet('.select2-dropdown').should('be.visible');
|
|
// We use force because the tooltip sometimes hides the items.
|
|
cy.cGet('body').contains('.select2-results__option', item).click({force: true});
|
|
cy.cGet('.select2-dropdown').should('not.exist');
|
|
}
|
|
|
|
// Make sure the right dialog is opened and then we close it.
|
|
// Used for tunneled dialogs. We don't interact with this dialogs
|
|
// now, because they are just images. We mostly just check that
|
|
// the dialog is open.
|
|
// Parameters:
|
|
// dialogTitle - a title string to make sure the right dialog was opened.
|
|
function checkDialogAndClose(dialogTitle) {
|
|
// Dialog is opened
|
|
cy.cGet('.lokdialog_canvas').should('be.visible');
|
|
cy.cGet('.ui-dialog-title').should('have.text', dialogTitle);
|
|
|
|
// Close the dialog
|
|
cy.cGet('body').type('{esc}');
|
|
cy.cGet('.lokdialog_canvas').should('not.exist');
|
|
}
|
|
|
|
// Checks wether the document has the given zoom level according to the status bar.
|
|
// Parameters:
|
|
// zoomLevel the expected zoom level (e.g. '100' means 100%).
|
|
function shouldHaveZoomLevel(zoomLevel) {
|
|
cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption').should('have.text', zoomLevel);
|
|
}
|
|
|
|
// Make the zoom related status bar items visible if they are hidden.
|
|
// The status bar van be long to not fit on the screen. We have a scroll
|
|
// item for navigation in this case.
|
|
function makeZoomItemsVisible() {
|
|
cy.cGet('.w2ui-tb-image.w2ui-icon.zoomin')
|
|
.then(function(zoomInItem) {
|
|
if (!Cypress.dom.isVisible(zoomInItem)) {
|
|
cy.cGet('#toolbar-down .w2ui-scroll-right').click();
|
|
}
|
|
});
|
|
|
|
cy.cGet('.w2ui-tb-image.w2ui-icon.zoomin').should('be.visible');
|
|
}
|
|
|
|
// Increase / decrease the zoom level using the status bar related items.
|
|
// Parameters:
|
|
// zoomIn - do a zoom in (e.g. increase zoom level) or zoom out.
|
|
function doZoom(zoomIn) {
|
|
makeZoomItemsVisible();
|
|
|
|
var prevZoom = '';
|
|
cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption')
|
|
.should(function(zoomLevel) {
|
|
prevZoom = zoomLevel.text();
|
|
expect(prevZoom).to.not.equal('');
|
|
});
|
|
|
|
if (zoomIn) {
|
|
cy.cGet('.w2ui-tb-image.w2ui-icon.zoomin').click({force: true});
|
|
cy.wait(500);
|
|
} else {
|
|
cy.cGet('.w2ui-tb-image.w2ui-icon.zoomout').click({force: true});
|
|
cy.wait(500);
|
|
}
|
|
|
|
cy.cGet('#tb_actionbar_item_zoom .w2ui-tb-caption')
|
|
.should(function(zoomLevel) {
|
|
expect(zoomLevel.text()).to.not.equal(prevZoom);
|
|
});
|
|
}
|
|
|
|
// Zoom in the document.
|
|
function zoomIn() {
|
|
doZoom(true);
|
|
}
|
|
|
|
// Zoom out of the document.
|
|
function zoomOut() {
|
|
doZoom(false);
|
|
}
|
|
|
|
// Similarly to zoomIn() and zoomOut() we can change the zoom level.
|
|
// However, in this case we can specify the exact zoom level.
|
|
// Parameters:
|
|
// zoomLevel - a number specifing the zoom level (e.g. '100' means 100%).
|
|
// See also the status bar's zoom level list for possible values.
|
|
function selectZoomLevel(zoomLevel) {
|
|
makeZoomItemsVisible();
|
|
|
|
helper.clickOnIdle('#tb_actionbar_item_zoom');
|
|
|
|
cy.cGet('#w2ui-overlay-actionbar').contains('.menu-text', zoomLevel).click();
|
|
|
|
shouldHaveZoomLevel(zoomLevel);
|
|
}
|
|
|
|
// Reser zoom level to 100%.
|
|
function resetZoomLevel() {
|
|
makeZoomItemsVisible();
|
|
|
|
cy.cGet('#tb_actionbar_item_zoomreset').click();
|
|
|
|
shouldHaveZoomLevel('100');
|
|
}
|
|
|
|
function insertImage(docType) {
|
|
selectZoomLevel('50');
|
|
|
|
cy.cGet('#toolbar-up .w2ui-scroll-right').click();
|
|
|
|
const mode = Cypress.env('USER_INTERFACE');
|
|
|
|
if (mode === 'notebookbar')
|
|
cy.cGet('#toolbar-up .w2ui-scroll-right').click();
|
|
|
|
if (docType === 'calc' && mode === 'notebookbar')
|
|
cy.cGet('#Insert-tab-label').click();
|
|
|
|
actionOnSelector('insertGraphic', (selector) => {
|
|
cy.cGet(selector).click();
|
|
});
|
|
|
|
cy.cGet('#insertgraphic[type=file]').attachFile('/desktop/writer/image_to_insert.png');
|
|
cy.cGet('.leaflet-pane.leaflet-overlay-pane svg g').should('exist');
|
|
}
|
|
|
|
function deleteImage() {
|
|
helper.typeIntoDocument('{del}');
|
|
|
|
helper.waitUntilIdle('.leaflet-pane.leaflet-overlay-pane');
|
|
|
|
cy.cGet('.leaflet-pane.leaflet-overlay-pane svg g').should('not.exist');
|
|
}
|
|
|
|
function assertImageSize(expectedWidth, expectedHeight) {
|
|
cy.cGet('.leaflet-pane.leaflet-overlay-pane svg svg')
|
|
.should('exist')
|
|
.then($ele => {
|
|
const actualWidth = parseInt($ele.attr('width'));
|
|
const actualHeight = parseInt($ele.attr('height'));
|
|
|
|
expect(actualWidth).to.be.closeTo(expectedWidth, 10);
|
|
expect(actualHeight).to.be.closeTo(expectedHeight, 10);
|
|
});
|
|
}
|
|
|
|
function insertMultipleComment(docType, numberOfComments = 1, isMobile = false, selector) {
|
|
var mode = Cypress.env('USER_INTERFACE');
|
|
|
|
if (docType === 'calc') {
|
|
cy.wait(1000);
|
|
}
|
|
|
|
if (docType !== 'draw') {
|
|
cy.cGet('#toolbar-up .w2ui-scroll-right').then($button => {
|
|
if ($button.is(':visible')) {
|
|
$button.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (mode === 'notebookbar') {
|
|
cy.wait(500);
|
|
|
|
cy.cGet('#Insert-tab-label').then($button => {
|
|
if (!$button.hasClass('selected')) {
|
|
$button.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (docType === 'writer' && mode !== 'notebookbar') {
|
|
cy.cGet('#toolbar-up .w2ui-scroll-right').then($button => {
|
|
if ($button.is(':visible')) {
|
|
$button.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
for (var n = 0; n < numberOfComments; n++) {
|
|
if (docType === 'draw') {
|
|
cy.cGet('#menu-insert').click();
|
|
cy.cGet('#menu-insertcomment').click();
|
|
}
|
|
else if (!selector) {
|
|
actionOnSelector('insertAnnotation', (selector) => {
|
|
cy.cGet(selector).click();
|
|
});
|
|
}
|
|
else
|
|
cy.cGet(selector).click();
|
|
|
|
cy.wait(100);
|
|
|
|
cy.cGet('.cool-annotation-table').should('exist');
|
|
|
|
if (isMobile) {
|
|
cy.cGet('#input-modal-input').type('some text' + n);
|
|
cy.cGet('#response-ok').click();
|
|
} else {
|
|
cy.cGet('#annotation-modify-textarea-new').type('some text' + n);
|
|
cy.wait(500);
|
|
cy.cGet('#annotation-save-new').click();
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchUIToNotebookbar() {
|
|
cy.window().then(win => {
|
|
var userInterfaceMode = win['0'].userInterfaceMode;
|
|
if (userInterfaceMode !== 'notebookbar') {
|
|
cy.log('switchUIToNotebookbar start');
|
|
cy.cGet('#menu-view').click();
|
|
cy.cGet('#menu-toggleuimode').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).click();
|
|
cy.log('switchUIToNotebookbar end');
|
|
} else {
|
|
cy.log('switchUIToNotebookbar: already notebookbar UI');
|
|
}
|
|
Cypress.env('USER_INTERFACE', 'notebookbar');
|
|
});
|
|
}
|
|
|
|
function switchUIToCompact() {
|
|
cy.window().then(win => {
|
|
var userInterfaceMode = win['0'].userInterfaceMode;
|
|
if (userInterfaceMode === 'notebookbar') {
|
|
cy.log('switchUIToCompact start');
|
|
cy.cGet('#View-tab-label').click();
|
|
cy.cGet('#toggleuimode').click();
|
|
cy.log('switchUIToCompact end');
|
|
} else {
|
|
cy.log('switchUIToCompact: already compact UI');
|
|
}
|
|
});
|
|
}
|
|
|
|
function actionOnSelector(name, func) {
|
|
cy.task('getSelectors', {
|
|
mode: Cypress.env('USER_INTERFACE'),
|
|
name: name,
|
|
}).then((selector) => {
|
|
func(selector);
|
|
});
|
|
}
|
|
|
|
//type represent horizontal/vertical scrollbar
|
|
//arr : In both cypress GUI and CLI the scrollposition are slightly different
|
|
//so we are passing both in array and assert using oneOf
|
|
function assertScrollbarPosition(type, lowerBound, upperBound) {
|
|
cy.wait(500);
|
|
|
|
cy.cGet('#test-div-' + type + '-scrollbar')
|
|
.then(function($item) {
|
|
const x = parseInt($item.text());
|
|
expect(x).to.be.within(lowerBound, upperBound);
|
|
});
|
|
}
|
|
|
|
function pressKey(n, key) {
|
|
for (let i=0; i<n; i++) {
|
|
helper.typeIntoDocument('{' + key + '}');
|
|
cy.wait(500);
|
|
}
|
|
}
|
|
|
|
function openReadOnlyFile(type, filename) {
|
|
var testFileName = helper.loadTestDocNoIntegration(filename, type, false, false, false);
|
|
|
|
//check doc is loaded
|
|
cy.cGet('.leaflet-canvas-container canvas', {timeout : Cypress.config('defaultCommandTimeout') * 2.0});
|
|
|
|
helper.isCanvasWhite(false);
|
|
|
|
cy.cGet('#PermissionMode').should('be.visible').should('have.text', ' Read-only ');
|
|
|
|
return testFileName;
|
|
}
|
|
|
|
function checkAccessibilityEnabledToBe(state) {
|
|
cy.window().then(win => {
|
|
cy.log('check accessibility enabled to be: ' + state);
|
|
var isAccessibilityEnabledAtServerLevel = win['0'].enableAccessibility;
|
|
// expect(isAccessibilityEnabledAtServerLevel).to.eq(true);
|
|
if (isAccessibilityEnabledAtServerLevel) {
|
|
var userInterfaceMode = win['0'].userInterfaceMode;
|
|
if (userInterfaceMode === 'notebookbar') {
|
|
if (state) {
|
|
cy.cGet('#togglea11ystate').should('have.class', 'selected');
|
|
} else {
|
|
cy.cGet('#togglea11ystate').should('not.have.class', 'selected');
|
|
}
|
|
} else {
|
|
cy.cGet('#menu-tools').click();
|
|
if (state) {
|
|
cy.cGet('#menu-togglea11ystate a').should('have.class', 'lo-menu-item-checked');
|
|
} else {
|
|
cy.cGet('#menu-togglea11ystate a').should('not.have.class', 'lo-menu-item-checked');
|
|
}
|
|
cy.cGet('div.clipboard').type('{esc}', {force: true});
|
|
}
|
|
cy.cGet('div.clipboard').then((clipboard) => {
|
|
expect(clipboard.get(0)._hasAccessibilitySupport()).to.eq(state);
|
|
});
|
|
} else {
|
|
cy.log('accessibility disabled at server level');
|
|
}
|
|
});
|
|
}
|
|
|
|
function setAccessibilityState(enable) {
|
|
cy.window().then(win => {
|
|
cy.log('set accessibility state to: ' + enable);
|
|
var a11yEnabled = win['0'].enableAccessibility;
|
|
if (a11yEnabled) {
|
|
var userInterfaceMode = win['0'].userInterfaceMode;
|
|
if (userInterfaceMode === 'notebookbar') {
|
|
cy.cGet('#Help-tab-label').click();
|
|
cy.cGet('#togglea11ystate').then((button) => {
|
|
//var currentState = button.get(0).classList.contains('selected');
|
|
var currentState = button.hasClass('selected');
|
|
if (currentState !== enable) {
|
|
button.click();
|
|
cy.log('accessibility state changed: ' + enable);
|
|
} else {
|
|
cy.log('accessibility already in requested state: ' + enable);
|
|
}
|
|
});
|
|
} else {
|
|
cy.cGet('#menu-tools').click();
|
|
cy.cGet('#menu-togglea11ystate a').then((item) => {
|
|
var currentState = item.hasClass('lo-menu-item-checked');
|
|
if (currentState !== enable) {
|
|
cy.cGet('#menu-togglea11ystate').click();
|
|
cy.log('accessibility state changed: ' + enable);
|
|
} else {
|
|
cy.log('accessibility already in requested state: ' + enable);
|
|
}
|
|
});
|
|
}
|
|
cy.wait(500);
|
|
cy.cGet('div.clipboard').then((clipboard) => {
|
|
expect(clipboard.get(0)._hasAccessibilitySupport()).to.eq(enable);
|
|
});
|
|
} else {
|
|
cy.log('accessibility disabled at server level');
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports.showSidebar = showSidebar;
|
|
module.exports.hideSidebar = hideSidebar;
|
|
module.exports.showStatusBarIfHidden = showStatusBarIfHidden;
|
|
module.exports.showSidebarIfHidden = showSidebarIfHidden;
|
|
module.exports.hideSidebarIfVisible = hideSidebarIfVisible;
|
|
module.exports.selectColorFromPalette = selectColorFromPalette;
|
|
module.exports.selectFromListbox = selectFromListbox;
|
|
module.exports.checkDialogAndClose = checkDialogAndClose;
|
|
module.exports.makeZoomItemsVisible = makeZoomItemsVisible;
|
|
module.exports.zoomIn = zoomIn;
|
|
module.exports.zoomOut = zoomOut;
|
|
module.exports.shouldHaveZoomLevel = shouldHaveZoomLevel;
|
|
module.exports.selectZoomLevel = selectZoomLevel;
|
|
module.exports.resetZoomLevel = resetZoomLevel;
|
|
module.exports.insertImage = insertImage;
|
|
module.exports.deleteImage = deleteImage;
|
|
module.exports.insertMultipleComment = insertMultipleComment;
|
|
module.exports.actionOnSelector = actionOnSelector;
|
|
module.exports.assertScrollbarPosition = assertScrollbarPosition;
|
|
module.exports.pressKey = pressKey;
|
|
module.exports.assertImageSize = assertImageSize;
|
|
module.exports.openReadOnlyFile = openReadOnlyFile;
|
|
module.exports.switchUIToNotebookbar = switchUIToNotebookbar;
|
|
module.exports.switchUIToCompact = switchUIToCompact;
|
|
module.exports.checkAccessibilityEnabledToBe = checkAccessibilityEnabledToBe;
|
|
module.exports.setAccessibilityState = setAccessibilityState;
|