@onehat/ui 0.4.33 → 0.4.35

package/src/Components/Hoc/withEditor.js

@@ -13,6 +13,7 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js'
 import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -24,7 +25,6 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
-		let [editorMode, setEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
@@ -69,6 +69,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// withSelection
 				selection,
+				getSelection,
 				setSelection,
 
 				// withAlert
@@ -76,16 +77,24 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			forceUpdate = useForceUpdate(),
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			newEntityDisplayValueRef = useRef(),
+			editorModeRef = useRef(EDITOR_MODE__VIEW),
+			isIgnoreNextSelectionChangeRef = useRef(false),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
 			[isEditorShown, setIsEditorShownRaw] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(canEditorViewOnly), // current state of whether editor is in view-only mode
-			[isIgnoreNextSelectionChange, setIsIgnoreNextSelectionChange] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
+			setIsIgnoreNextSelectionChange = (bool) => {
+				isIgnoreNextSelectionChangeRef.current = bool;
+			},
+			getIsIgnoreNextSelectionChange = () => {
+				return isIgnoreNextSelectionChangeRef.current;
+			},
 			setIsEditorShown = (bool) => {
 				setIsEditorShownRaw(bool);
 				if (!bool && onEditorClose) {
@@ -96,8 +105,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				function doIt() {
 					setSelection(newSelection);
 				}
-				const formState = editorStateRef.current;
-				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && editorMode === EDITOR_MODE__EDIT) {
+				const
+					formState = editorStateRef.current,
+					selection = getSelection();
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && getEditorMode() === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
 				} else if (selection && selection[0] && !selection[0].isDestroyed && (selection[0]?.isPhantom || selection[0]?.isRemotePhantom)) {
 					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
@@ -115,6 +126,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				listeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
 			},
+			getEditorMode = () => {
+				return editorModeRef.current;
+			},
+			setEditorMode = (mode) => {
+				if (editorModeRef.current !== mode) {
+					editorModeRef.current = mode;
+					forceUpdate();
+				}
+			},
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
@@ -124,6 +144,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
+				const selection = getSelection();
 				let addValues = values;
 
 				if (Repository?.isLoading) {
@@ -221,6 +242,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT);
 					return;
 				}
+				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -243,6 +265,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (_.isFunction(args)) {
 					cb = args;
 				}
+				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -301,6 +324,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE);
 					return;
 				}
+				const selection = getSelection();
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(selection);
 					if (listenerResult === false) {
@@ -341,6 +365,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for view
 
+				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
@@ -363,7 +388,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for duplicate
 
-
+				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
@@ -384,6 +409,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			},
 			onRemoteDuplicate = async () => {
 				const
+					selection = getSelection(),
 					entity = selection[0],
 					duplicateEntity = await Repository.remoteDuplicate(entity);
 
@@ -392,14 +418,16 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				doEdit();
 			},
 			doEditorSave = async (data, e) => {
-				let mode = editorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				let mode = getEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
 				if (canUser && !canUser(mode)) {
 					showPermissionsError(mode);
 					return;
 				}
 
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
-				const isSingle = selection.length === 1;
+				const
+					selection = getSelection(),
+					isSingle = selection.length === 1;
 				let useStaged = false;
 				if (isSingle) {
 					// just update this one entity
@@ -446,7 +474,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (onChange) {
 						onChange(selection);
 					}
-					if (editorMode === EDITOR_MODE__ADD) {
+					if (getEditorMode() === EDITOR_MODE__ADD) {
 						if (onAdd) {
 							await onAdd(selection);
 						}
@@ -459,7 +487,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						} else {
 							setEditorMode(EDITOR_MODE__VIEW);
 						}
-					} else if (editorMode === EDITOR_MODE__EDIT) {
+					} else if (getEditorMode() === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(selection);
 						}
@@ -475,6 +503,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			doEditorCancel =  () => {
 				async function doIt() {
 					const
+						selection = getSelection(),
 						isSingle = selection.length === 1,
 						isPhantom = selection[0] && !selection[0]?.isDestroyed && selection[0].isPhantom;
 					if (isSingle && isPhantom) {
@@ -513,9 +542,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setIsEditorShown(false);
 				});
 			},
-			calculateEditorMode = (isIgnoreNextSelectionChange = false) => {
+			calculateEditorMode = () => {
 
-				let doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
+				let isIgnoreNextSelectionChange = getIsIgnoreNextSelectionChange(),
+					doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
 				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
 					// allow global override to for this property
 					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
@@ -525,13 +555,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				// calculateEditorMode gets called only on selection changes
+				const selection = getSelection();
 				let mode;
 				if (editorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
 					// special case: side editor is always edit mode
 					mode = EDITOR_MODE__EDIT;
 				} else {
 					if (isIgnoreNextSelectionChange) {
-						mode = editorMode;
+						mode = getEditorMode();
 						if (!canEditorViewOnly && userCanEdit) {
 							if (selection.length > 1) {
 								if (!disableEdit) {
@@ -577,7 +608,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			setEditorMode(calculateEditorMode(isIgnoreNextSelectionChange));
+			setEditorMode(calculateEditorMode());
 
 			setIsIgnoreNextSelectionChange(false);
 			setLastSelection(selection);
@@ -598,7 +629,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			// NOTE: If I don't calculate this on the fly for selection changes,
 			// we see a flash of the previous state, since useEffect hasn't yet run.
 			// (basically redo what's in the useEffect, above)
-			editorMode = calculateEditorMode(isIgnoreNextSelectionChange);
+			setEditorMode(calculateEditorMode());
 		}
 
 		return <WrappedComponent
@@ -611,11 +642,13 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditorViewOnly={isEditorViewOnly}
 					isAdding={isAdding}
 					isSaving={isSaving}
-					editorMode={editorMode}
+					editorMode={getEditorMode()}
+					getEditorMode={getEditorMode}
 					onEditMode={setEditMode}
 					onViewMode={setViewMode}
 					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
+					setIsIgnoreNextSelectionChange={setIsIgnoreNextSelectionChange}
 					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : doEdit}
 					onDelete={(!userCanEdit || disableDelete) ? null : doDelete}

package/src/Components/Hoc/withPdfButtons.js

@@ -206,6 +206,8 @@ export default function withPdfButtons(WrappedComponent) {
 					h: 800,
 					w: styles.FORM_STACK_ROW_THRESHOLD + 10,
 					body: <Form
+								parent={self}
+								reference="chooseFieldsForm"
 								editorType={EDITOR_TYPE__PLAIN}
 								alert={alert}
 								columnDefaults={{
@@ -244,6 +246,8 @@ export default function withPdfButtons(WrappedComponent) {
 					w: 510, // 510 so it's over the stack threshold
 					h: 500,
 					body: <Form
+								parent={self}
+								reference="chooseEmailAddressForm"
 								submitBtnLabel='Email PDF'
 								onSubmit={(values)=> {
 									hideModal();

package/src/Components/Hoc/withSelection.js

@@ -23,8 +23,7 @@ export default function withSelection(WrappedComponent) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
-		const
-			{
+		const {
 				selection,
 				defaultSelection,
 				onChangeSelection,
@@ -48,14 +47,14 @@ export default function withSelection(WrappedComponent) {
 			usesWithValue = !!setValue,
 			initialSelection = selection || defaultSelection || [],
 			forceUpdate = useForceUpdate(),
-			localSelection = useRef(initialSelection),
+			selectionRef = useRef(initialSelection),
 			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
 			setSelection = (selection) => {
-				if (_.isEqual(selection, localSelection.current)) {
+				if (_.isEqual(selection, getSelection())) {
 					return;
 				}
 
-				localSelection.current = selection;
+				selectionRef.current = selection;
 				if (onChangeSelection) {
 					onChangeSelection(selection);
 				}
@@ -64,6 +63,9 @@ export default function withSelection(WrappedComponent) {
 				}
 				forceUpdate();
 			},
+			getSelection = () => {
+				return selectionRef.current;
+			}
 			selectPrev = () => {
 				selectDirection(SELECT_UP);
 			},
@@ -103,21 +105,23 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			addToSelection = (item) => {
-				const newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				setSelection(newSelection);
 			},
 			removeFromSelection = (item) => {
 				let newSelection = [];
 				if (Repository) {
-					newSelection = _.remove(localSelection.current, (sel) => sel !== item);
+					newSelection = _.remove(getSelection(), (sel) => sel !== item);
 				} else {
-					newSelection = _.remove(localSelection.current, (sel) => sel[idIx] !== item[idIx]);
+					newSelection = _.remove(getSelection(), (sel) => sel[idIx] !== item[idIx]);
 				}
 				setSelection(newSelection);
 			},
 			deselectAll = () => {
-				setSelection([]);
+				if (!_.isEmpty(getSelection())) {
+					setSelection([]);
+				}
 			},
 			refreshSelection = () => {
 				// When Repository reloads, the entities get destroyed.
@@ -126,7 +130,7 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(localSelection.current, (item) => item.id);
+					ids = _.map(getSelection(), (item) => item.id);
 				_.each(ids, (id) => {
 					const found = Repository.getById(id);
 					if (found) {
@@ -160,9 +164,9 @@ export default function withSelection(WrappedComponent) {
 			selectRangeTo = (item) => {
 				// Select above max or below min to this one
 				const
-					currentSelectionLength = localSelection.current.length,
+					currentSelectionLength = getSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
+				let newSelection = _.clone(getSelection()); // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();
@@ -189,10 +193,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			isInSelection = (item) => {
 				if (Repository) {
-					return inArray(item, localSelection.current);
+					return inArray(item, getSelection());
 				}
 
-				const found = _.find(localSelection.current, (selectedItem) => {
+				const found = _.find(getSelection(), (selectedItem) => {
 						return selectedItem[idIx] === item[idIx];
 					});
 				return !!found;
@@ -214,10 +218,10 @@ export default function withSelection(WrappedComponent) {
 				return found;
 			},
 			getIdsFromLocalSelection = () => {
-				if (!localSelection.current[0]) {
+				if (!getSelection()[0]) {
 					return null;
 				}
-				const values = _.map(localSelection.current, (item) => {
+				const values = _.map(getSelection(), (item) => {
 					if (Repository) {
 						return item.id;
 					}
@@ -301,7 +305,7 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 
-				if (!_.isEqual(newSelection, localSelection.current)) {
+				if (!_.isEqual(newSelection, getSelection())) {
 					setSelection(newSelection);
 				}
 			};
@@ -352,7 +356,7 @@ export default function withSelection(WrappedComponent) {
 		}, [value]);
 
 		if (self) {
-			self.selection = localSelection.current;
+			self.selection = getSelection();
 			self.setSelection = setSelection;
 			self.selectPrev = selectPrev;
 			self.selectNext = selectNext;
@@ -395,7 +399,8 @@ export default function withSelection(WrappedComponent) {
 					{...props}
 					ref={ref}
 					disableWithSelection={false}
-					selection={localSelection.current}
+					selection={getSelection()}
+					getSelection={getSelection}
 					setSelection={setSelection}
 					selectionMode={selectionMode}
 					selectPrev={selectPrev}

package/src/Functions/Cypress/button_functions.js

@@ -61,7 +61,7 @@ export function clickXButton(parentSelectors) {
 }
 export function clickXButtonIfEnabled(parentSelectors) {
 	cy.log('clickXButtonIfEnabled');
-	return clickButtonIfEnabled(parentSelectors, 'xBtn', true);
+	return clickButtonIfEnabled(parentSelectors, 'xBtn');
 }
 export function clickTrigger(parentSelectors) {
 	cy.log('clickTrigger');
@@ -91,29 +91,29 @@ export function toSideMode(parentSelectors) {
 	cy.log('toSideMode');
 	return clickButtonIfEnabled(parentSelectors, 'sideModeBtn');
 }
-export function clickButton(parentSelectors, name) { // requires the button to be enabled
+export function clickButton(parentSelectors, name, options) { // requires the button to be enabled
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
 	cy.log('clickButton ' + name);
-	return getDomNode([...parentSelectors, name])
+	return getDomNode([...parentSelectors, name], options)
 				.should('not.have.attr', 'data-disabled', 'true') // Check that the element is not disabled
 				.click({ force: true });
 }
-export function clickButtonIfEnabled(parentSelectors, name) { // allows button to be disabled
+export function clickButtonIfEnabled(parentSelectors, name, options) { // allows button to be disabled
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
-	return getDomNode([...parentSelectors, name])
+	return getDomNode([...parentSelectors, name], options)
 				.click({ force: true });
 }
-export function clickButtonIfExists(parentSelectors, name) {
+export function clickButtonIfExists(parentSelectors, name, options) {
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
-	return getDomNode([...parentSelectors, name]).if().then((node) => { // NOTE if() is a cypress-if function
+	return getDomNode([...parentSelectors, name], options).if().then((node) => { // NOTE if() is a cypress-if function
 		if (node) {
-			node.click();
+			cy.get(node).click();
 		}
 	});
 }

package/src/Functions/Cypress/crud_functions.js

@@ -2,6 +2,7 @@ import {
 	fixInflector,
 	getLastPartOfPath,
 	bootstrapRouteWaiters,
+	stubWindowOpen,
 } from './utilities.js';
 import {
 	login,
@@ -11,6 +12,7 @@ import {
 import {
 	getDomNode,
 	getDomNodes,
+	ifExists,
 } from './dom_functions.js';
 import {
 	hasRowWithFieldValue,
@@ -116,6 +118,39 @@ export function crudJson(selector, newData, editData, schema, ancillaryData, lev
 	// do nothing for now
 }
 
+// Editor
+export function viewPdf(editorSelector, formSelector) {
+	ifExists(formSelector, 'viewPdfBtn', (btn) => {
+		clickButton(formSelector, 'viewPdfBtn');
+
+		cy.wait(1000); // allow time for modal to render
+		const modalSelector = editorSelector + '/chooseFieldsForm';
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait(1000); // allow time for pdf to download
+		cy.get('@windowOpen').should('be.calledWithMatch', /viewModelPdf/);
+	});
+}
+export function emailPdf(editorSelector, formSelector) {
+	ifExists(formSelector, 'emailPdfBtn', (btn) => {
+		clickButton(formSelector, 'emailPdfBtn');
+	
+		cy.wait(1000); // allow time for modal to render
+		const modalSelector = editorSelector + '/chooseFieldsForm';
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait(1000); // allow time for new modal to render
+	
+		// UI now shows the email modal
+		fillForm(modalSelector, { email: 'scott@onehat.com', message: 'Sample message', }, { email: 'Input', message: 'TextArea', });
+		clickButton(modalSelector, 'submitBtn');
+		cy.wait('@emailModelPdf');
+
+		getDomNode('InfoModal')
+			.should('exist')
+			.should('contain', 'Email sent successfully.');
+		clickButton('InfoModal', 'okBtn');
+	});
+}
+
 
 // Grid
 export function crudWindowedGridRecord(gridSelector, newData, editData, schema, ancillaryData, level = 0) {
@@ -313,7 +348,11 @@ export function editGridRecord(gridSelector, fieldValues, schema, id, level = 0,
 
 	verifyNoErrorBox();
 	// cy.wait(1000);
-	
+
+	if (whichEditor !== INLINE) {
+		viewPdf(editorSelector, formSelector);
+		emailPdf(editorSelector, formSelector);
+	}
 }
 export function editWindowedGridRecord(gridSelector, fieldValues, schema, id, level = 0) {
 	// edits the record as normal, then closes the editor window
@@ -542,6 +581,11 @@ export function editTreeRecord(treeSelector, fieldValues, schema, id, level = 0,
 
 	verifyNoErrorBox();
 	// cy.wait(1000);
+
+	if (whichEditor !== INLINE) {
+		viewPdf(editorSelector, formSelector);
+		emailPdf(editorSelector, formSelector);
+	}
 	
 }
 export function editWindowedTreeRecord(treeSelector, fieldValues, schema, id, level = 0) {
@@ -591,6 +635,7 @@ export function runClosureTreeControlledManagerScreenCrudTests(model, schema, ne
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		afterEach(function () {
@@ -688,6 +733,7 @@ export function runClosureTreeManagerScreenCrudTests(args) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		// afterEach(function () {
@@ -753,6 +799,7 @@ export function runManagerScreenCrudTests(args) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 		
 		// afterEach(function () {
@@ -806,11 +853,13 @@ export function runReportsManagerTests(reportData) {
 		beforeEach(function () {
 			bootstrapRouteWaiters();
 			login();
+			cy.restoreLocalStorage();
 			cy.url().then((currentUrl) => {
 				if (!currentUrl.endsWith(url)) {
 					navigateViaTabOrHomeButtonTo(url);
 				}
 			});
+			stubWindowOpen();
 		});
 
 		_.each(reportData, (report) => {
@@ -828,14 +877,14 @@ export function runReportsManagerTests(reportData) {
 
 				// Press Excel button
 				clickButton(selector, 'excelBtn');
-				cy.wait('@getWaiter', { timeout: 10000 }).then((interception) => {
+				cy.wait('@getReportWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
 				});
 
 
 				// Press PDF button
 				clickButton(selector, 'pdfBtn');
-				cy.wait('@getReportWaiter', { timeout: 10000 }).then((interception) => {
+				cy.wait('@postReportWaiter', { timeout: 10000 }).then((interception) => {
 					expect(interception.response.headers['content-type']).to.include('pdf');
 				});
 

package/src/Functions/Cypress/dom_functions.js

@@ -8,7 +8,14 @@
  * @return Cypress chainer
  */
 export function getDomNode(selectors, options = {}) {
-	return cy.get(getTestIdSelectors(selectors, true), options);
+	let useFirst;
+	if (options?.hasOwnProperty('first')) {
+		useFirst = options.first;
+		delete options.first;
+	} else {
+		useFirst = true;
+	}
+	return cy.get(getTestIdSelectors(selectors, useFirst), options);
 }
 
 /**
@@ -22,6 +29,31 @@ export function getDomNodes(selectors, options = {}) {
 	return cy.get(getTestIdSelectors(selectors), options);
 }
 
+/**
+ * Verifies that an element with the given selectors does not exist in the DOM.
+ * @argument {string | string[]} selectors - data-testid attribute values
+ * If an array is given, these will be considered nested selectors.
+ * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ */
+export function verifyElementDoesNotExist(selectors) {
+	cy.get('body').then(($body) => {
+		const selectorString = getTestIdSelectors(selectors);
+		if ($body.find(selectorString).length > 0) {
+			throw new Error(`Element with selectors ${selectorString} exists in the DOM, when it should not`);
+		}
+	});
+}
+
+/**
+ * Verifies that an element with the given selectors exists in the DOM.
+ * @argument {string | string[]} selectors - data-testid attribute values
+ * If an array is given, these will be considered nested selectors.
+ * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ */
+export function verifyElementExists(selectors) {
+	cy.get(getTestIdSelectors(selectors)).should('exist');
+}
+
 /**
  * Builds selector string for data-testid attributes.
  * It leaves classname, id, and attribute selectors unchanged.
@@ -79,4 +111,23 @@ export function drag(draggableSelectors, droppableSelectors, options = {}) {
 			.then((success) => {
 				debugger;
 			});
-}
+}
+
+
+// conditions functions that make use of cypress-if
+export function ifExists(parentSelectors, name, cb) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).if().then((node) => {
+		if (node) {
+			cb(node);
+		}
+	});
+}
+export function ifNotExists(parentSelectors, name, cb) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).if('not.exist').then(cb);
+}