Web:Files:Tests: add new tests for catalog, context menu and filter
This commit is contained in:
Timofey
parent
581405c0dc
commit
9d871fd7c0
@ -1,5 +1,5 @@
|
||||
const fs = require('fs');
|
||||
const { setHeadlessWhen, setWindowSize } = require('@codeceptjs/configure');
|
||||
const fs = require("fs");
|
||||
const { setHeadlessWhen, setWindowSize } = require("@codeceptjs/configure");
|
||||
|
||||
// turn on headless mode when running with HEADLESS=true environment variable
|
||||
// export HEADLESS=true && npx codeceptjs run
|
||||
@ -12,7 +12,7 @@ const sizes = {
|
||||
desktop: { width: 1920, height: 1080 },
|
||||
};
|
||||
|
||||
const deviceType = process.env.DEVICE_TYPE || 'desktop';
|
||||
const deviceType = process.env.DEVICE_TYPE || "desktop";
|
||||
|
||||
const isTranslation = !!process.env.TRANSLATION;
|
||||
|
||||
@ -20,7 +20,7 @@ const device = sizes[deviceType];
|
||||
|
||||
setWindowSize(device.width, device.height);
|
||||
|
||||
const browser = process.env.profile || 'chromium';
|
||||
const browser = process.env.profile || "chromium";
|
||||
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
@ -37,16 +37,22 @@ const baseFolder = isTranslation
|
||||
: `./tests/screenshots/${browser}/${deviceType}`;
|
||||
|
||||
const tests = isTranslation
|
||||
? './tests/translation_tests.js'
|
||||
: ['./tests/action_tests.js', './tests/render_tests.js'];
|
||||
? "./tests/translation_tests.js"
|
||||
: [
|
||||
"./tests/context-menu_tests.js",
|
||||
"./tests/filter_tests.js",
|
||||
"./tests/catalog_tests.js",
|
||||
];
|
||||
|
||||
const reportDir = isTranslation
|
||||
? `../../../TestsResults/files`
|
||||
: `./tests/reports/${browser}/${deviceType}`;
|
||||
|
||||
const reportFileName = isTranslation ? 'file-translation' : 'report';
|
||||
const reportFileName = isTranslation ? "file-translation" : "report";
|
||||
|
||||
const diffFolder = isTranslation ? '../../../TestsResults/files/diff' : './tests/output/diff/';
|
||||
const diffFolder = isTranslation
|
||||
? "../../../TestsResults/files/diff"
|
||||
: "./tests/output/diff/";
|
||||
|
||||
if (isTranslation) {
|
||||
fs.rmdir(diffFolder, { recursive: true }, (err) => {
|
||||
@ -63,41 +69,41 @@ exports.config = {
|
||||
output: screenshotOutput,
|
||||
helpers: {
|
||||
Playwright: {
|
||||
url: 'http://localhost:8092',
|
||||
url: "http://localhost:8092",
|
||||
// show browser window
|
||||
show: false,
|
||||
browser: browser,
|
||||
// restart browser between tests
|
||||
restart: true,
|
||||
waitForNavigation: 'networkidle0',
|
||||
waitForNavigation: "networkidle0",
|
||||
// don't save screenshot on failure
|
||||
disableScreenshots: false,
|
||||
},
|
||||
ResembleHelper: {
|
||||
require: 'codeceptjs-resemblehelper',
|
||||
screenshotFolder: './tests/output/',
|
||||
require: "codeceptjs-resemblehelper",
|
||||
screenshotFolder: "./tests/output/",
|
||||
baseFolder: baseFolder,
|
||||
diffFolder: diffFolder,
|
||||
},
|
||||
PlaywrightHelper: {
|
||||
require: './tests/helpers/playwright.helper.js',
|
||||
require: "./tests/helpers/playwright.helper.js",
|
||||
},
|
||||
},
|
||||
include: {
|
||||
I: './steps_file.js',
|
||||
I: "./steps_file.js",
|
||||
},
|
||||
bootstrap: null,
|
||||
mocha: {
|
||||
reporterOptions: {
|
||||
mochawesome: {
|
||||
stdout: '-',
|
||||
stdout: "-",
|
||||
options: {
|
||||
reportDir: reportDir,
|
||||
reportFilename: reportFileName,
|
||||
},
|
||||
},
|
||||
'mocha-junit-reporter': {
|
||||
stdout: '-',
|
||||
"mocha-junit-reporter": {
|
||||
stdout: "-",
|
||||
options: {
|
||||
mochaFile: `${reportDir}/${reportFileName}.xml`,
|
||||
attachments: false,
|
||||
@ -105,7 +111,7 @@ exports.config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
name: 'ASC.Web.Files',
|
||||
name: "ASC.Web.Files",
|
||||
plugins: {
|
||||
pauseOnFail: {},
|
||||
retryFailedStep: {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const Endpoints = require('./tests/mocking/endpoints.js');
|
||||
const Endpoints = require("./tests/mocking/endpoints.js");
|
||||
// in this file you can append custom step methods to 'I' object
|
||||
|
||||
module.exports = function () {
|
||||
@ -7,37 +7,68 @@ module.exports = function () {
|
||||
// It is recommended to place a general 'login' function here.
|
||||
|
||||
mockData: function () {
|
||||
this.mockEndpoint(Endpoints.self, 'self');
|
||||
this.mockEndpoint(Endpoints.settings, 'settings');
|
||||
this.mockEndpoint(Endpoints.build, 'build');
|
||||
this.mockEndpoint(Endpoints.info, 'info');
|
||||
this.mockEndpoint(Endpoints.common, 'common');
|
||||
this.mockEndpoint(Endpoints.cultures, 'cultures');
|
||||
this.mockEndpoint(Endpoints.fileSettings, 'default');
|
||||
this.mockEndpoint(Endpoints.capabilities, 'capabilities');
|
||||
this.mockEndpoint(Endpoints.thirdparty, 'thirdparty');
|
||||
this.mockEndpoint(Endpoints.thumbnails, 'thumbnails');
|
||||
this.mockEndpoint(Endpoints.self, "self");
|
||||
this.mockEndpoint(Endpoints.settings, "settings");
|
||||
this.mockEndpoint(Endpoints.build, "build");
|
||||
this.mockEndpoint(Endpoints.info, "info");
|
||||
this.mockEndpoint(Endpoints.common, "common");
|
||||
this.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
this.mockEndpoint(Endpoints.fileSettings, "default");
|
||||
this.mockEndpoint(Endpoints.capabilities, "capabilities");
|
||||
this.mockEndpoint(Endpoints.thirdparty, "thirdparty");
|
||||
this.mockEndpoint(Endpoints.thumbnails, "thumbnails");
|
||||
},
|
||||
|
||||
selectAuthor: function () {
|
||||
// open author selector
|
||||
this.click({ react: "SelectorAddButton" });
|
||||
|
||||
// open "All users" in author selector
|
||||
this.forceClick({ name: "selector-row-option-1" });
|
||||
|
||||
// select user with display name 'Administrator'
|
||||
this.forceClick({ name: "selector-row-option-1" });
|
||||
},
|
||||
|
||||
openArticle: function () {
|
||||
this.seeElement({
|
||||
react: 'styled.div',
|
||||
props: { className: 'not-selectable', visible: true },
|
||||
react: "styled.div",
|
||||
props: { className: "not-selectable", visible: true },
|
||||
});
|
||||
this.click({
|
||||
react: "styled.div",
|
||||
props: { className: "not-selectable", visible: true },
|
||||
});
|
||||
this.click({ react: 'styled.div', props: { className: 'not-selectable', visible: true } });
|
||||
},
|
||||
|
||||
openProfileMenu: function () {
|
||||
this.seeElement({ react: 'Avatar', props: { className: 'icon-profile-menu' } });
|
||||
this.click({ react: 'Avatar', props: { className: 'icon-profile-menu' } });
|
||||
this.seeElement({
|
||||
react: "Avatar",
|
||||
props: { className: "icon-profile-menu" },
|
||||
});
|
||||
this.click({
|
||||
react: "Avatar",
|
||||
props: { className: "icon-profile-menu" },
|
||||
});
|
||||
},
|
||||
|
||||
openContextMenu: function () {
|
||||
this.seeElement({ react: 'ContextMenuButton', props: { className: 'expandButton' } });
|
||||
this.click({ react: 'ContextMenuButton', props: { className: 'expandButton' } });
|
||||
this.seeElement({
|
||||
react: "ContextMenuButton",
|
||||
props: { className: "expandButton" },
|
||||
});
|
||||
this.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { className: "expandButton" },
|
||||
});
|
||||
},
|
||||
|
||||
switchView: function (type) {
|
||||
this.click({ react: 'styled.div', key: type, props: { isChecked: false } });
|
||||
this.click({
|
||||
react: "styled.div",
|
||||
key: type,
|
||||
props: { isChecked: false },
|
||||
});
|
||||
this.wait(2);
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
const Endpoints = require('./mocking/endpoints.js');
|
||||
|
||||
const browser = process.env.profile || 'chromium';
|
||||
const deviceType = process.env.DEVICE_TYPE || 'desktop';
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
const featureName = isModel
|
||||
? `Files actions on '${browser}' with '${deviceType}' dimension (model)`
|
||||
: `Files actions on '${browser}' with '${deviceType}' dimension`;
|
||||
|
||||
const renamedFolderTitle = 'Renamed folder';
|
||||
|
||||
Feature(featureName);
|
||||
|
||||
Before(async ({ I }) => {
|
||||
I.mockData();
|
||||
});
|
||||
|
||||
Scenario('Rename file test', ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, 'one');
|
||||
I.mockEndpoint(Endpoints.my, 'many');
|
||||
I.mockEndpoint(Endpoints.getFolder(9), '9');
|
||||
I.mockEndpoint(Endpoints.getSubfolder(9), '9');
|
||||
I.checkRequest(
|
||||
`http://localhost:8092/api/2.0/files/folder/16`,
|
||||
{ title: renamedFolderTitle },
|
||||
'files/folder',
|
||||
'16',
|
||||
);
|
||||
I.amOnPage('/products/files');
|
||||
I.wait(5);
|
||||
|
||||
I.click('New folder');
|
||||
I.see('New folder');
|
||||
|
||||
I.openContextMenu();
|
||||
I.see('Rename');
|
||||
I.click('Rename');
|
||||
I.type(renamedFolderTitle);
|
||||
I.pressKey('Enter');
|
||||
I.see('Done');
|
||||
});
|
||||
|
||||
Scenario('Add and remove from favorites file test', ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, 'empty');
|
||||
I.mockEndpoint(Endpoints.my, 'default');
|
||||
I.mockEndpoint(Endpoints.getFile(5), 'addFavorite');
|
||||
I.checkRequest(
|
||||
`http://localhost:8092/api/2.0/files/favorites`,
|
||||
{ id: '5' },
|
||||
'files/favorites',
|
||||
'default',
|
||||
);
|
||||
I.amOnPage('/products/files');
|
||||
I.wait(5);
|
||||
|
||||
I.openContextMenu();
|
||||
I.see('Mark as favorite');
|
||||
I.click('Mark as favorite');
|
||||
|
||||
I.mockEndpoint(Endpoints.getFile(5), 'removeFavorite');
|
||||
|
||||
I.openContextMenu();
|
||||
I.see('Remove from favorites');
|
||||
I.click('Remove from favorites');
|
||||
});
|
||||
239
products/ASC.Files/Client/tests/catalog_tests.js
Normal file
239
products/ASC.Files/Client/tests/catalog_tests.js
Normal file
@ -0,0 +1,239 @@
|
||||
const Endpoints = require("./mocking/endpoints.js");
|
||||
|
||||
const browser = process.env.profile || "chromium";
|
||||
const deviceType = process.env.DEVICE_TYPE || "desktop";
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
const featureName = isModel
|
||||
? `Catalog test on '${browser}' with '${deviceType}' dimension (model)`
|
||||
: `Catalog test on '${browser}' with '${deviceType}' dimension`;
|
||||
|
||||
Feature(featureName);
|
||||
|
||||
Before(async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.self, "self");
|
||||
I.mockEndpoint(Endpoints.settings, "settings");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "info");
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.fileSettings, "default");
|
||||
|
||||
I.mockEndpoint(Endpoints.capabilities, "capabilities");
|
||||
I.mockEndpoint(Endpoints.thirdparty, "thirdparty");
|
||||
I.mockEndpoint(Endpoints.thumbnails, "thumbnails");
|
||||
});
|
||||
|
||||
Scenario("Catalog with empty folders", ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, "empty");
|
||||
I.mockEndpoint(Endpoints.my, "empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(1), "1");
|
||||
I.mockEndpoint(Endpoints.getFolder(2), "emptyShared");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(2), "2-empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(3), "emptyFavorites");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(3), "3-empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(4), "emptyRecent");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(4), "4-empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(5), "emptyPrivate");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(5), "5-empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(6), "emptyCommon");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(6), "6-empty");
|
||||
I.mockEndpoint(Endpoints.getFolder(7), "emptyTrash");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(7), "7-empty");
|
||||
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
I.saveScreenshot(`catalog.documents-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.documents-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType === "desktop") {
|
||||
I.click({ react: "CatalogItem", props: { id: 2 } });
|
||||
|
||||
I.saveScreenshot(`catalog.shared-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.shared-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "CatalogItem", props: { id: 3 } });
|
||||
|
||||
I.saveScreenshot(`catalog.favorites-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.favorites-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "CatalogItem", props: { id: 4 } });
|
||||
|
||||
I.saveScreenshot(`catalog.recent-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.recent-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "CatalogItem", props: { id: 5 } });
|
||||
|
||||
I.saveScreenshot(`catalog.private-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.private-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "CatalogItem", props: { id: 6 } });
|
||||
|
||||
I.saveScreenshot(`catalog.common-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.common-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "CatalogItem", props: { id: 7 } });
|
||||
|
||||
I.saveScreenshot(`catalog.trash-empty.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.trash-empty.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Scenario("Documents with many files", ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, "one");
|
||||
I.mockEndpoint(Endpoints.my, "default");
|
||||
I.mockEndpoint(Endpoints.getFolder(1), "1");
|
||||
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
I.saveScreenshot(`catalog.documents-many.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.documents-many.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Scenario("Catalog actions", ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, "one");
|
||||
I.mockEndpoint(Endpoints.my, "default");
|
||||
I.mockEndpoint(Endpoints.news, "news");
|
||||
I.mockEndpoint(Endpoints.getFolder(1), "1");
|
||||
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
if (deviceType === "desktop") {
|
||||
I.click({ react: "Badge", props: { className: "catalog-item__badge" } });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`catalog.badge.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.badge.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.forceClick({ react: "Backdrop" });
|
||||
|
||||
I.click({ react: "MainButton" });
|
||||
|
||||
I.saveScreenshot(`catalog.main-button.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.main-button.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (deviceType === "tablet" || deviceType === "smallTablet") {
|
||||
I.saveScreenshot(`catalog.close.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.close.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// open catalog
|
||||
I.click({ name: "catalog-burger" });
|
||||
|
||||
I.saveScreenshot(`catalog.open.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.open.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close catalog
|
||||
I.click({ name: "catalog-burger" });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.close.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "MainButtonMobile" });
|
||||
|
||||
I.saveScreenshot(`catalog.main-button.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.main-button.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (deviceType === "mobile") {
|
||||
// open catalog
|
||||
I.click({ name: "catalog-burger" });
|
||||
|
||||
I.saveScreenshot(`catalog.open.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.open.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close catalog
|
||||
I.click({ react: "CatalogBackdrop" });
|
||||
|
||||
I.click({ react: "MainButtonMobile" });
|
||||
|
||||
I.saveScreenshot(`catalog.main-button.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`catalog.main-button.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
239
products/ASC.Files/Client/tests/context-menu_tests.js
Normal file
239
products/ASC.Files/Client/tests/context-menu_tests.js
Normal file
@ -0,0 +1,239 @@
|
||||
const Endpoints = require("./mocking/endpoints.js");
|
||||
|
||||
const browser = process.env.profile || "chromium";
|
||||
const deviceType = process.env.DEVICE_TYPE || "desktop";
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
const featureName = isModel
|
||||
? `Context menu test on '${browser}' with '${deviceType}' dimension (model)`
|
||||
: `Context menu test on '${browser}' with '${deviceType}' dimension`;
|
||||
|
||||
Feature(featureName);
|
||||
|
||||
Before(async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.self, "self");
|
||||
I.mockEndpoint(Endpoints.settings, "settings");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "info");
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.root, "one");
|
||||
I.mockEndpoint(Endpoints.my, "default");
|
||||
I.mockEndpoint(Endpoints.fileSettings, "default");
|
||||
I.mockEndpoint(Endpoints.getFolder(1), "1");
|
||||
I.mockEndpoint(Endpoints.capabilities, "capabilities");
|
||||
I.mockEndpoint(Endpoints.thirdparty, "thirdparty");
|
||||
I.mockEndpoint(Endpoints.thumbnails, "thumbnails");
|
||||
});
|
||||
|
||||
Scenario("Context menu", ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.share, "share");
|
||||
I.mockEndpoint(Endpoints.history, "history");
|
||||
I.mockEndpoint(Endpoints.favorites, "favorites");
|
||||
I.mockEndpoint(Endpoints.fileops, "fileops");
|
||||
I.mockEndpoint(Endpoints.copy, "copy");
|
||||
I.mockEndpoint(Endpoints.getFile(5417), "5417");
|
||||
I.mockEndpoint(Endpoints.getFileOperation(1), "1");
|
||||
I.mockEndpoint(Endpoints.getSubfolder(1), "1");
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.saveScreenshot(`context-menu.default.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.default.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType === "desktop") {
|
||||
// open sharing settings panel
|
||||
I.click({ name: "sharing-settings" });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`context-menu.sharing-settings.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.sharing-settings.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close sharing settings panel
|
||||
I.forceClick({ react: "Backdrop" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
// copy link
|
||||
I.click({ name: "link-for-portal-users" });
|
||||
I.see("Link has been copied to the clipboard");
|
||||
|
||||
// close toast
|
||||
I.click({ react: "Toast" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
// open version history panel
|
||||
I.click({ name: "show-version-history" });
|
||||
|
||||
I.wait(2);
|
||||
|
||||
I.saveScreenshot(`context-menu.version-history.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.version-history.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close version history panel
|
||||
I.forceClick({ react: "Backdrop" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
// add to favorites
|
||||
I.click({ name: "mark-as-favorite" });
|
||||
|
||||
I.see("Added to favorites");
|
||||
// close toast
|
||||
I.click({ react: "Toast" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
// add to favorites
|
||||
I.click({ name: "remove-from-favorites" });
|
||||
|
||||
I.see("Removed from favorites");
|
||||
// close toast
|
||||
I.click({ react: "Toast" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "download-as" });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`context-menu.download-as.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.download-as.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
// close download as panel
|
||||
I.click({ react: "Button", props: { label: "Cancel" } });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "move-to" });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`context-menu.move-to.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.move-to.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close move to panel
|
||||
I.forceClick({ react: "Backdrop" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "copy-to" });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`context-menu.copy-to.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.copy-to.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
// close move to panel
|
||||
I.forceClick({ react: "Backdrop" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "copy" });
|
||||
|
||||
// open context menu
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "rename" });
|
||||
|
||||
I.type("Rename file");
|
||||
|
||||
I.pressKey("Enter");
|
||||
|
||||
I.see("Done");
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.click({
|
||||
react: "ContextMenuButton",
|
||||
props: { iconName: "/static/images/vertical-dots.react.svg" },
|
||||
});
|
||||
|
||||
I.click({ name: "delete" });
|
||||
|
||||
I.wait(1);
|
||||
|
||||
I.saveScreenshot(`context-menu.delete.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`context-menu.delete.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
I.click({ react: "Button", props: { label: "Cancel" } });
|
||||
}
|
||||
});
|
||||
232
products/ASC.Files/Client/tests/filter_tests.js
Normal file
232
products/ASC.Files/Client/tests/filter_tests.js
Normal file
@ -0,0 +1,232 @@
|
||||
const Endpoints = require("./mocking/endpoints.js");
|
||||
|
||||
const browser = process.env.profile || "chromium";
|
||||
const deviceType = process.env.DEVICE_TYPE || "desktop";
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
const sizes = {
|
||||
mobile: { width: 375, height: 667 },
|
||||
smallTablet: { width: 600, height: 667 },
|
||||
tablet: { width: 1023, height: 667 },
|
||||
desktop: { width: 1920, height: 1080 },
|
||||
};
|
||||
|
||||
const featureName = isModel
|
||||
? `Filter test on '${browser}' with '${deviceType}' dimension (model)`
|
||||
: `Filter test on '${browser}' with '${deviceType}' dimension`;
|
||||
|
||||
const boundingBox =
|
||||
deviceType === "mobile"
|
||||
? { left: 0, top: 0, right: 0, bottom: 0 }
|
||||
: { left: sizes[deviceType] - 480, top: 0, right: 0, bottom: 0 };
|
||||
|
||||
Feature(featureName);
|
||||
|
||||
Before(async ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.self, "self");
|
||||
I.mockEndpoint(Endpoints.settings, "settings");
|
||||
I.mockEndpoint(Endpoints.build, "build");
|
||||
I.mockEndpoint(Endpoints.info, "info");
|
||||
I.mockEndpoint(Endpoints.common, "common");
|
||||
I.mockEndpoint(Endpoints.cultures, "cultures");
|
||||
I.mockEndpoint(Endpoints.root, "one");
|
||||
I.mockEndpoint(Endpoints.my, "default");
|
||||
I.mockEndpoint(Endpoints.fileSettings, "default");
|
||||
I.mockEndpoint(Endpoints.getFolder(1), "1");
|
||||
I.mockEndpoint(Endpoints.capabilities, "capabilities");
|
||||
I.mockEndpoint(Endpoints.thirdparty, "thirdparty");
|
||||
I.mockEndpoint(Endpoints.thumbnails, "thumbnails");
|
||||
});
|
||||
|
||||
Scenario("Filter block ", ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.group, "group");
|
||||
I.mockEndpoint(Endpoints.people, "people");
|
||||
I.mockEndpoint(Endpoints.admin, "admin");
|
||||
I.mockEndpoint(Endpoints.getFile(1), "1");
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
// open filter block
|
||||
I.click({ react: "FilterButton" });
|
||||
|
||||
I.saveScreenshot(`filter.filter-block.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.filter-block.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
if (deviceType === "desktop") {
|
||||
// open author selector
|
||||
I.click({ react: "SelectorAddButton" });
|
||||
|
||||
I.saveScreenshot(`filter.author-selector.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.author-selector.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// open "All users" in author selector
|
||||
I.forceClick({ name: "selector-row-option-1" });
|
||||
|
||||
I.saveScreenshot(`filter.all-users.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.all-users.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// click arrow button with "All users" group selected
|
||||
I.click({ react: "IconButton", props: { className: "arrow-button" } });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.author-selector.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// click arrow button without group selected
|
||||
I.click({ react: "IconButton", props: { className: "arrow-button" } });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.filter-block.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
I.selectAuthor();
|
||||
|
||||
I.saveScreenshot(`filter.selected-author.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.selected-author.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// select "documents" type
|
||||
I.click({ name: "documents-3" });
|
||||
|
||||
I.saveScreenshot(`filter.documents-type.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.documents-type.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// deselect "documents" type
|
||||
I.click({ name: "documents-3" });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.selected-author.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// select "documents" type
|
||||
I.click({ name: "documents-3" });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.documents-type.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// select "no subfolders" filter
|
||||
I.click({ react: "ToggleButton", props: { isChecked: false } });
|
||||
|
||||
I.saveScreenshot(`filter.no-subfolders.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.no-subfolders.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// deselect "no subfolders" filter
|
||||
I.click({ react: "ToggleButton", props: { isChecked: true } });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.documents-type.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// select "no subfolders" filter
|
||||
I.click({ react: "ToggleButton", props: { isChecked: false } });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.no-subfolders.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
// clear filter
|
||||
I.click({
|
||||
react: "IconButton",
|
||||
props: { iconName: "/static/images/clear.react.svg" },
|
||||
});
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.filter-block.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
|
||||
I.selectAuthor();
|
||||
I.click({ name: "documents-3" });
|
||||
I.click({ react: "ToggleButton", props: { isChecked: false } });
|
||||
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.no-subfolders.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
boundingBox: boundingBox,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (deviceType !== "desktop") {
|
||||
Scenario("Sort block ", ({ I }) => {
|
||||
I.amOnPage("/products/files");
|
||||
|
||||
I.wait(3);
|
||||
|
||||
I.click({ react: "SortButton" });
|
||||
|
||||
I.saveScreenshot(`filter.sort-block.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`filter.sort-block.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,200 +0,0 @@
|
||||
const Endpoints = require('./mocking/endpoints.js');
|
||||
|
||||
const browser = process.env.profile || 'chromium';
|
||||
const deviceType = process.env.DEVICE_TYPE || 'desktop';
|
||||
const isModel = !!process.env.MODEL;
|
||||
|
||||
const featureName = isModel
|
||||
? `Files render on '${browser}' with '${deviceType}' dimension (model)`
|
||||
: `Files render on '${browser}' with '${deviceType}' dimension`;
|
||||
|
||||
Feature(featureName);
|
||||
|
||||
Before(async ({ I }) => {
|
||||
I.mockData();
|
||||
});
|
||||
|
||||
Scenario('Default root folders render test', ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, 'empty');
|
||||
I.mockEndpoint(Endpoints.my, 'default');
|
||||
I.mockEndpoint(Endpoints.getFolder(3), 'emptyShared');
|
||||
I.mockEndpoint(Endpoints.getFolder(4), 'emptyFavorites');
|
||||
I.mockEndpoint(Endpoints.getFolder(5), 'emptyRecent');
|
||||
I.mockEndpoint(Endpoints.getFolder(6), 'emptyPrivate');
|
||||
I.mockEndpoint(Endpoints.getFolder(7), 'emptyCommon');
|
||||
I.mockEndpoint(Endpoints.getFolder(8), 'emptyTrash');
|
||||
|
||||
I.amOnPage('/products/files');
|
||||
I.wait(5);
|
||||
|
||||
I.see('My documents');
|
||||
I.saveScreenshot(`1.row-default-my-documents-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`1.row-default-my-documents-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'mobile') {
|
||||
I.switchView('tile');
|
||||
I.saveScreenshot(`1.tile-default-my-documents-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`1.tile-default-my-documents-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Shared with me');
|
||||
I.wait(2);
|
||||
I.see('Shared with me');
|
||||
I.saveScreenshot(`2.empty-shared-with-me-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`2.empty-shared-with-me-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Favorites');
|
||||
I.wait(2);
|
||||
I.see('Favorites');
|
||||
I.saveScreenshot(`3.empty-favorites-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`3.empty-favorites-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Recent');
|
||||
I.wait(2);
|
||||
I.see('Recent');
|
||||
I.saveScreenshot(`4.empty-recent-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`4.empty-recent-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Private Room');
|
||||
I.wait(2);
|
||||
I.see('Private Room');
|
||||
I.saveScreenshot(`5.empty-private-room-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`5.empty-private-room-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Common');
|
||||
I.wait(2);
|
||||
I.see('Common');
|
||||
I.saveScreenshot(`6.empty-common-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`6.empty-common-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Trash');
|
||||
I.wait(2);
|
||||
I.see('Trash');
|
||||
I.saveScreenshot(`7.empty-trash-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`7.empty-trash-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Scenario('Default settings render test', ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, 'empty');
|
||||
I.mockEndpoint(Endpoints.my, 'default');
|
||||
I.amOnPage('/products/files');
|
||||
I.wait(5);
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click({ react: 'ContextTreeNode', props: { eventKey: 'settings' } });
|
||||
I.see('Common settings');
|
||||
I.see('Admin settings');
|
||||
I.see('Connected clouds');
|
||||
|
||||
I.click('Common settings');
|
||||
if (deviceType !== 'desktop') I.forceClick('.backdrop-active');
|
||||
I.see('Common settings');
|
||||
I.saveScreenshot(`8.default-common-settings-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`8.default-common-settings-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Admin settings');
|
||||
if (deviceType !== 'desktop') I.forceClick('.backdrop-active');
|
||||
I.see('Admin settings');
|
||||
I.saveScreenshot(`9.default-admin-settings-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`9.default-admin-settings-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'desktop') I.openArticle();
|
||||
I.click('Connected clouds');
|
||||
if (deviceType !== 'desktop') I.forceClick('.backdrop-active');
|
||||
I.see('Connected clouds');
|
||||
I.saveScreenshot(`10.default-connected-clouds-tab.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`10.default-connected-clouds-tab.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Scenario('Many documents and folders render test', ({ I }) => {
|
||||
I.mockEndpoint(Endpoints.root, 'one');
|
||||
I.mockEndpoint(Endpoints.my, 'many');
|
||||
I.mockEndpoint(Endpoints.getFolder(9), '9');
|
||||
I.mockEndpoint(Endpoints.getSubfolder(9), '9');
|
||||
I.amOnPage('/products/files');
|
||||
I.wait(5);
|
||||
|
||||
I.click('New folder');
|
||||
I.see('New folder');
|
||||
|
||||
I.saveScreenshot(`11.row-many-documents.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`11.row-many-documents.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (deviceType !== 'mobile') {
|
||||
I.switchView('tile');
|
||||
I.saveScreenshot(`11.tile-many-documents.png`);
|
||||
if (!isModel) {
|
||||
I.seeVisualDiff(`11.tile-many-documents.png`, {
|
||||
tolerance: 3,
|
||||
prepareBaseImage: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user