@onehat/ui 0.3.283 → 0.3.284

package/src/Functions/Cypress/grid_functions.js

@@ -0,0 +1,269 @@
+import {
+	fixInflector,
+	getLastPartOfPath,
+} from './utilities';
+import {
+	getDomNode,
+	getDomNodes,
+} from './dom_functions';
+import Inflector from 'inflector-js';
+import _ from 'lodash';
+const $ = Cypress.$;
+
+
+
+// Get rows
+export function hasRowWithFieldValue(gridSelector, field, value) {
+	return getDomNodes([gridSelector, 'row', 'cell-' + field]).contains(value);
+}
+export function getRowWithFieldValue(gridSelector, field, value) {
+	return getDomNodes([gridSelector, 'row', 'cell-' + field]).contains(value).then((cells) => {
+		if (!cells.length) {
+			return null;
+		}
+		
+		const cell = cells[0];
+		return $(cell).closest('[data-testid="row"]')[0];
+	});
+}
+// export function getRowWithText(grid, text) {
+// 	return getRows(grid).contains(text);
+// }
+// export function getRowWithId(grid, id) {
+// 	return getRows(grid, '[data-cy-recordid=' + id + ']');
+// }
+// export function getRowWithIx(grid, ix) {
+// 	return getRows(grid, '[data-recordindex=' + ix + ']');
+// }
+
+
+// Select rows
+export function selectGridRowById(gridSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'selectGridRowById ' + gridSelector + ' ' + id});
+	});
+	const rowSelector = getGridRowSelectorById(gridSelector, id);
+	getDomNode([gridSelector, rowSelector])
+		.click();
+}
+export function selectGridRowIfNotAlreadySelectedById(gridSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'selectGridRowIfNotAlreadySelectedById ' + gridSelector + ' ' + id});
+	});
+	const rowSelector = getGridRowSelectorById(gridSelector, id);
+	getDomNode([gridSelector, rowSelector]).then((row) => {
+		const found = row.find('[data-testid="row-selected"]')
+		if (!found.length) {
+			selectGridRowById(gridSelector, id);
+		}
+	})
+}
+// export function selectRowWithText(grid, text) {
+// 	getRowWithText(grid, text).click(5, 5);
+// }
+// export function selectRowWithIx(grid, ix) {
+// 	getRowWithIx(grid, ix).click(5, 5);
+// }
+// export function cmdClickRowWithId(grid, id) {
+// 	getRowWithId(grid, id).click('left', { metaKey: true });
+// }
+
+
+// // Double-click rows
+// export function doubleClickRowWithText(grid, text) {
+// 	getRowWithText(grid, text).dblclick();
+// }
+// export function doubleClickRowWithId(grid, id) {
+// 	getRowWithId(grid, id).dblclick();
+// }
+// export function doubleClickRowWithIx(grid, ix) {
+// 	getRowWithIx(grid, ix).dblclick();
+// }
+
+
+export function verifyGridRecordDoesNotExistByValue(gridSelector, fieldValues, schema) {
+	const
+		field = schema.model.displayProperty,
+		value = fieldValues[field];
+		
+	getDomNodes([gridSelector, 'row', 'cell-' + field])
+		.contains(value, { timeout: 500 })
+		.should('not.exist');
+}
+export function verifyGridRecordExistsByValue(gridSelector, fieldValues, schema) {
+	const
+		field = schema.model.displayProperty,
+		value = fieldValues[field];
+		
+	getDomNodes([gridSelector, 'row', 'cell-' + field])
+		.contains(value, { timeout: 500 })
+		.should('exist');
+}
+export function verifyGridRecordExistsById(gridSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyGridRecordExistsById ' + gridSelector + ' ' + id });
+	});
+	
+	const rowSelector = getGridRowSelectorById(gridSelector, id);
+	getDomNodes([gridSelector, rowSelector])
+		.should('exist');
+}
+export function verifyGridRecordDoesNotExistById(gridSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyGridRecordDoesNotExistById ' + gridSelector + ' ' + id });
+	});
+	const rowSelector = getGridRowSelectorById(gridSelector, id);
+	getDomNodes([gridSelector, rowSelector])
+		.should('not.exist');
+}
+export function verifyGridRowIsSelectedById(gridSelector, id) {
+	cy.then(() => {
+		Cypress.log({ name: 'verifyGridRowIsSelectedById ' + gridSelector + ' ' + id});
+	});
+	const rowSelector = getGridRowSelectorById(gridSelector, id);
+	getDomNodes([gridSelector, rowSelector, 'row-selected'])
+		.should('exist');
+}
+
+
+
+
+
+// export function addRecordWithInlineEditor(grid, fieldValues, schema) {
+// 	clickGridAddButton(grid, true);
+// 	fillInlineForm(grid, fieldValues, schema);
+// 	cy.route('POST', '**/extAdd**').as('addWaiter');
+// 	submitInlineForm(grid);
+// 	cy.wait('@addWaiter');
+// 	verifyNoErrorBox();
+// 	getSelectedRowId(grid); // Adds @id alias
+// 	cy.wait(1000);
+// }
+// export function addRecordWithWindowedEditor(grid, editorCls, fieldValues, schema) {
+// 	clickGridAddButton(grid, true);
+// 	fillWindowedForm(editorCls, fieldValues, schema);
+// 	cy.route('POST', '**/extAdd**').as('addWaiter');
+// 	submitWindowedForm(editorCls);
+// 	cy.wait('@addWaiter');
+// 	verifyNoErrorBox();
+// 	getSelectedRowId(grid); // Adds @id alias
+// 	cy.wait(1000);
+// }
+// export function editRecordWithInlineEditor(grid, fieldValues, schema) {
+// 	cy.get("@id").then((id) => {
+// 		doubleClickRowWithId(grid, id);
+// 		fillInlineForm(grid, fieldValues, schema);
+// 		cy.route('POST', '**/extEdit**').as('editWaiter');
+// 		submitInlineForm(grid);
+// 		cy.wait('@editWaiter');
+// 		verifyNoErrorBox();
+// 		cy.wait(500);
+// 	});
+// }
+// export function editRecordWithWindowedEditor(grid, editorCls, fieldValues, schema) {
+// 	cy.get("@id").then((id) => {
+// 		doubleClickRowWithId(grid, id);
+// 		fillWindowedForm(editorCls, fieldValues, schema);
+// 		cy.route('POST', '**/extEdit**').as('editWaiter');
+// 		submitWindowedForm(editorCls);
+// 		cy.wait('@editWaiter');
+// 		verifyNoErrorBox();
+// 	});
+// }
+// export function removeRecord(grid) {
+// 	cy.get("@id").then((id) => {
+// 		cy.wait(500);
+// 		clickGridRemoveButton(grid);
+// 		cy.route('POST', '**/extDelete**').as('removeWaiter');
+// 		clickMessageBoxDefaultButton();
+// 		cy.wait('@removeWaiter');
+// 		verifyNoErrorBox();
+// 	});
+// }
+
+
+// Grid Utilities
+export function getModelFromGridName(gridName) {
+	// try to match with something like 'EquipmentFilteredGridEditor'
+	const
+		pattern = '^' + // start
+						'([\\w]+?)' + // model name
+						'(?=Filtered|Inline|Side|Grid)' + // positive lookahead to guarantee one of these is the next word
+						'(Filtered)?' + // optional
+						'(Inline)?' + // optional
+						'(Side)?' + // optional
+						'Grid' + // required
+						'(Editor)?' + // optional
+						'(Side[AB])?' + // optional
+					'$', // end
+		regex = new RegExp(pattern),
+		match = gridName.match(regex);
+	return match?.length ? match[1] : null;
+}
+export function getModelFromGridPath(gridPath) {
+	// try to match with something like '...__eq_manufacturer_id/grid'
+	let
+		pattern = '^' + // start
+						'.*' + // previous selector path (ignore)
+						'(?=__)' + // positive lookahead to guarantee '__' is the next word
+						'__' + // required
+						'([A-Za-z_]+)' + // field name (model name underscored, singularized)
+						'([\\d]+)?' + // optional (digit, e.g. eq_engine_model1_id)
+						'_id/(combo/)?grid' + // required
+					'$', // end
+		regex = new RegExp(pattern),
+		match = gridPath.match(regex);
+	if (!match) {
+		// try to match with something like '.../work_orders__equipment/combo/grid"'
+		pattern = '^' + // start
+						'.*' + // previous selector path (ignore)
+						'(?=__)' + // positive lookahead to guarantee '__' is the next word
+						'__' + // required
+						'([A-Za-z_]+)' + // field name (model name underscored, pluralized)
+						'/(combo/)?grid' + // required
+					'$', // end
+		regex = new RegExp(pattern);
+		match = gridPath.match(regex);
+	}
+	return match?.length ? match[1] : null;
+}
+export function getModelFromGridSelector(gridSelector) {
+	const gridName = getLastPartOfPath(gridSelector);
+	let model = getModelFromGridName(gridName);
+	if (!model) {
+		model = getModelFromGridPath(gridSelector);
+		if (model) {
+			model = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+		}
+	}
+	return model;
+}
+export function getGridRowSelectorById(gridSelector, id) {
+	const
+		model = getModelFromGridSelector(gridSelector);
+
+		if (!model) {
+			debugger;
+		}
+		const inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+	return inflected + '-' + id;
+}
+
+
+
+// function fillInlineForm(grid, fieldValues, schema) {
+// 	getInlineEditor(grid)
+// 		.then((editor) => {
+// 			fillForm(editor, fieldValues, schema);
+// 		});
+// }
+// function submitInlineForm(grid) {
+// 	cy.wait(1000);
+// 	getInlineEditorButtons(grid)
+// 		.filter('.x-row-editor-update-button')
+// 		// .then((el) => {
+// 		// 	cy.get(el[0]).click();
+// 		// 	// el[0].click();
+// 		// });
+// 		.click({ force: true });
+// }

package/src/Functions/Cypress/index.js

@@ -0,0 +1,19 @@
+import * as ButtonFunctions from './button_functions.js';
+import * as CommonFunctions from './common_functions.js';
+import * as CrudFunctions from './crud_functions.js';
+import * as DomFunctions from './dom_functions.js';
+import * as FormFunctions from './form_functions.js';
+import * as GridFunctions from './grid_functions.js';
+import * as NavigationFunctions from './navigation_functions.js';
+import * as Utilities from './utilities.js';
+
+export default {
+	...ButtonFunctions,
+	...CommonFunctions,
+	...CrudFunctions,
+	...DomFunctions,
+	...FormFunctions,
+	...GridFunctions,
+	...NavigationFunctions,
+	...Utilities,
+};

package/src/Functions/Cypress/navigation_functions.js

@@ -0,0 +1,77 @@
+import {
+	DOMAIN,
+	LOGIN_ID_FIELD,
+	SUPER_USER,
+	SUPER_EMAIL,
+	SUPER_PASSWORD,
+} from './constants';
+import {
+	getDomNode,
+	getDomNodes,
+} from './dom_functions';
+
+
+//     __                _
+//    / /   ____  ____ _(_)___
+//   / /   / __ \/ __ `/ / __ \
+//  / /___/ /_/ / /_/ / / / / /
+// /_____/\____/\__, /_/_/ /_/
+//             /____/
+
+export function login(user, password) {
+	cy.visit(Cypress.env('baseUrl') + 'login')
+		.then(() => {
+			getDomNode(LOGIN_ID_FIELD).clear();
+			getDomNode(LOGIN_ID_FIELD).type(user);
+
+			getDomNode('password').clear();
+			getDomNode('password').type(password);
+			
+			getDomNode('loginBtn').click();
+			cy.url().should('include', 'home');
+		});
+}
+export function loginAsSuper() {
+	return login(LOGIN_ID_FIELD === 'username' ? SUPER_USER : SUPER_EMAIL, SUPER_PASSWORD);
+}
+export function logout() {
+	getDomNode('/logout').click({ force: true });
+}
+
+
+//     _   __            _             __  _
+//    / | / /___ __   __(_)___ _____ _/ /_(_)___  ____
+//   /  |/ / __ `/ | / / / __ `/ __ `/ __/ / __ \/ __ \
+//  / /|  / /_/ /| |/ / / /_/ / /_/ / /_/ / /_/ / / / /
+// /_/ |_/\__,_/ |___/_/\__, /\__,_/\__/_/\____/_/ /_/
+//                     /____/
+
+export function navigateViaTabOrHomeButtonTo(url) {
+	// i.e. If we're on home screen, press the button.
+	// If we have a tab navigation, press the tab's button
+	getDomNode(url).click(); // i.e. the DomNode's data-testid is the url
+	cy.url().should('include', url);
+}
+export function navigateToHome() {
+	navigateToScreen('/home');
+}
+export function navigateToScreen(path) {
+	cy.visit(DOMAIN + path)
+	.then(() => {
+		cy.url().should('include', path);
+	});
+}
+// export function selectMainTab(name) {
+// 	cy.get('.mainTabPanel .x-tab')
+// 		.contains(name)
+// 		.first()
+// 		.click();
+// 	cy.wait(1000); // Time to render new tab
+// }
+// export function selectSecondaryTab(name) {
+// 	cy.get('.mainTabPanel > .x-panel-bodyWrap > .x-panel-body .x-tab')
+// 		.contains(name)
+// 		.first()
+// 		.click();
+// 	cy.wait(1000); // Time to render new tab
+// }

package/src/Functions/Cypress/utilities.js

@@ -0,0 +1,109 @@
+import moment from 'moment';
+
+//    __  ____  _ ___ __  _
+//   / / / / /_(_) (_) /_(_)__  _____
+//  / / / / __/ / / / __/ / _ \/ ___/
+// / /_/ / /_/ / / / /_/ /  __(__  )
+// \____/\__/_/_/_/\__/_/\___/____/
+
+
+export function fixInflector(str) {
+	// inflector-js doesn't handle pluralization of 'equipment' correctly
+	str = str.replace(/quipments/, 'quipment');
+	return str;
+}
+export function getPropertyDefinitionFromSchema(fieldName, schema) {
+	return _.find(schema.model.properties, { name: fieldName });
+}
+export function getLastPartOfPath(path) {
+	return path.split('/').pop();
+}
+export function unescapeHtml(html) {
+	const el = document.createElement('div');
+	return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
+		el.innerHTML = enc;
+		return el.innerText
+	});
+}
+
+/**
+ * Given a URL query string,
+ * return an object with keyed properties
+ * @param {string} urlString
+ * @return {object} keyed properties
+ */
+export function extractKeysValuesFromQueryString(urlString) {
+	var entries = (new URLSearchParams(urlString)).entries(),
+		fv = {},
+		entry;
+	while(!(entry = entries.next()).done) {
+		let [key, val] = entry.value;
+		// if (/\[\]$/.test(key)) {
+		// 	key = key.slice(0, -2);
+		// }
+		if (fv.hasOwnProperty(key)) {
+			if (!_.isArray(fv[key])) {
+				var tmp = fv[key];
+				fv[key] = [];
+				fv[key].push(tmp);
+			}
+			fv[key].push(val);
+		} else {
+			fv[key] = val;
+		}
+	}
+	return fv;
+}
+
+/**
+ * JS equivalent of PHP's urlencode
+ * https://www.php.net/manual/en/function.urlencode.php
+ * Author: http://kevin.vanzonneveld.net
+ * @param {string} string to encode
+ */
+export function urlencode(str) {
+	// Note: Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
+	return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
+}
+
+/**
+ * Deep diff between two objects - i.e. an object with the new value of new & changed fields.
+ * Removed fields will be set as undefined on the result.
+ * Only plain objects will be deeply compared (@see _.isPlainObject)
+ * 
+ * Inspired by: https://gist.github.com/Yimiprod/7ee176597fef230d1451#gistcomment-2565071
+ * This fork: https://gist.github.com/TeNNoX/5125ab5770ba287012316dd62231b764/
+ *
+ * @param  {Object} base   Object to compare with (if falsy we return object)
+ * @param  {Object} object Object compared
+ * @return {Object} Return a new object who represent the changed & new values
+ */
+export function deepDiffObj(base, object) {
+	if (!object) throw new Error(`The object compared should be an object: ${object}`);
+	if (!base) return object;
+	const result = _.transform(object, (result, value, key) => {
+		if (!_.has(base, key)) result[key] = value; // fix edge case: not defined to explicitly defined as undefined
+		if (!_.isEqual(value, base[key])) {
+			result[key] = _.isPlainObject(value) && _.isPlainObject(base[key]) ? deepDiffObj(base[key], value) : value;
+		}
+	});
+	// map removed fields to undefined
+	_.forOwn(base, (value, key) => {
+		if (!_.has(object, key)) result[key] = undefined;
+	});
+	return result;
+}
+
+export const dates = {
+	today: moment().format('YYYY-MM-DD'),
+	todayDatetime: moment().format('YYYY-MM-DD HH:mm:ss'),
+	yesterday: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+	tomorrow: moment().add(1, 'days').format('YYYY-MM-DD'),
+	oneMonthAgo: moment().subtract(1, 'months').format('YYYY-MM-DD'),
+	oneYearAgo: moment().subtract(1, 'years').format('YYYY-MM-DD'),
+	startOfThisMonth: moment().startOf('months').format('YYYY-MM-DD'),
+	endOfLastMonth: moment().subtract(1, 'months').endOf('month').format('YYYY-MM-DD'),
+	twoMonthsAgo: moment().subtract(2, 'months').format('YYYY-MM-DD'),
+	sixMonthsAgo: moment().subtract(6, 'months').format('YYYY-MM-DD'),
+	oneMonthFromNow: moment().add(1, 'months').format('YYYY-MM-DD'),
+};