(#102) Prettier changes from #102

 Formatting changes.

cypress/e2e/common/MetaTags.js

@@ -12,17 +12,14 @@ Then('the page contains meta tags with the following names', (dataTable) => {
 	});
 });
 
-Then(
-	'the page contains meta tags with the following properties',
-	(dataTable) => {
-		for (const { property, content } of dataTable.hashes()) {
-			const locator = `META[property='${property}']`;
-			//find element, ensure it has attribute content
-			//compare content's value with expected one
-			cy.get(locator).should('have.attr', 'content').and('be.eq', content);
-		}
+Then('the page contains meta tags with the following properties', (dataTable) => {
+	for (const { property, content } of dataTable.hashes()) {
+		const locator = `META[property='${property}']`;
+		//find element, ensure it has attribute content
+		//compare content's value with expected one
+		cy.get(locator).should('have.attr', 'content').and('be.eq', content);
 	}
-);
+});
 
 Then('there is a canonical link with the href {string}', (href) => {
 	cy.get("link[rel='canonical']")

cypress/e2e/common/analytics.js

@@ -70,8 +70,7 @@ const convertAnalyticsDatatableObject = (obj) => {
 	return Object.entries(objPass1).reduce((ac, [key, val] = {}) => {
 		return {
 			...ac,
-			[key]:
-				typeof val === 'object' ? convertAnalyticsDatatableObject(val) : val,
+			[key]: typeof val === 'object' ? convertAnalyticsDatatableObject(val) : val,
 		};
 	}, {});
 };
@@ -82,9 +81,7 @@ const convertAnalyticsDatatableObject = (obj) => {
  * @param {string} event The name of the event
  */
 const getEventFromEDDL = (win, type, event) => {
-	return win.NCIDataLayer.filter(
-		(evt) => evt.type === type && evt.event === event
-	);
+	return win.NCIDataLayer.filter((evt) => evt.type === type && evt.event === event);
 };
 
 When('the NCIDataLayer is cleared', () => {
@@ -100,44 +97,41 @@ When('the NCIDataLayer is cleared', () => {
 // basically build up an object from the data table for comparison to the
 // matched event. Note we do not just look at the page here since in the
 // future we could have additional data points.
-Then(
-	'there should be an analytics event with the following details',
-	(datatable) => {
-		cy.window().then((win) => {
-			console.log('finding analytics event for analytics step');
-			// First convert the datatable into nested object.
-			const rawDataObj = convertAnalyticsDatatableObject(datatable.rowsHash());
-			// Gotta strip the header row. (key/value)
-			const dataObj = Object.entries(rawDataObj).reduce((ac, [key, val]) => {
-				if (key === 'key') {
-					return ac;
-				}
-				return {
-					...ac,
-					[key]: val,
-				};
-			}, {});
-
-			if (!dataObj.event) {
-				throw new Error('Datatable is missing the event name');
+Then('there should be an analytics event with the following details', (datatable) => {
+	cy.window().then((win) => {
+		console.log('finding analytics event for analytics step');
+		// First convert the datatable into nested object.
+		const rawDataObj = convertAnalyticsDatatableObject(datatable.rowsHash());
+		// Gotta strip the header row. (key/value)
+		const dataObj = Object.entries(rawDataObj).reduce((ac, [key, val]) => {
+			if (key === 'key') {
+				return ac;
 			}
+			return {
+				...ac,
+				[key]: val,
+			};
+		}, {});
 
-			if (!dataObj.type) {
-				throw new Error('Datatable is missing the event type');
-			}
+		if (!dataObj.event) {
+			throw new Error('Datatable is missing the event name');
+		}
 
-			// Find the matching events, this should be only one.
-			const matchedEvents = getEventFromEDDL(win, dataObj.type, dataObj.event);
-			expect(matchedEvents).to.have.length(1);
+		if (!dataObj.type) {
+			throw new Error('Datatable is missing the event type');
+		}
 
-			const eventData = matchedEvents[0];
-			console.log(eventData);
+		// Find the matching events, this should be only one.
+		const matchedEvents = getEventFromEDDL(win, dataObj.type, dataObj.event);
+		expect(matchedEvents).to.have.length(1);
 
-			// This is a cheat. For the most part we know all the values so this
-			// is ok. We won't support regex matching this way.
-			// TODO: add regex matching, and when that is added make sure you
-			// also add a check to make sure there are not unexpected props.
-			expect(eventData).to.eql(dataObj);
-		});
-	}
-);
+		const eventData = matchedEvents[0];
+		console.log(eventData);
+
+		// This is a cheat. For the most part we know all the values so this
+		// is ok. We won't support regex matching this way.
+		// TODO: add regex matching, and when that is added make sure you
+		// also add a check to make sure there are not unexpected props.
+		expect(eventData).to.eql(dataObj);
+	});
+});

cypress/e2e/common/index.js

@@ -93,8 +93,7 @@ And('the following links and texts exist on the page', (dataTable) => {
 And('the system returns the no results found page', () => {
 	cy.window().then((win) => {
 		if (win.INT_TEST_APP_PARAMS) {
-			const noResultsPageTitle =
-				i18n.nciSearchResults[win.INT_TEST_APP_PARAMS.language];
+			const noResultsPageTitle = i18n.nciSearchResults[win.INT_TEST_APP_PARAMS.language];
 			cy.get('h1').should('contain', noResultsPageTitle);
 		}
 	});

src/components/atomic/InputLabel/InputLabel.jsx

@@ -8,11 +8,7 @@ const InputLabel = ({ label, labelHint, htmlFor, required, hasError }) => {
 	classes += required ? ' ncids-label--required' : '';
 	classes += hasError ? ' ncids-label--error' : '';
 	return (
-		<label
-			id={`${htmlFor}-label`}
-			className={classes}
-			htmlFor={htmlFor}
-			data-testid={`tid-${htmlFor}-label`}>
+		<label id={`${htmlFor}-label`} className={classes} htmlFor={htmlFor} data-testid={`tid-${htmlFor}-label`}>
 			{label}
 			{labelHint && <span className="ncids-hint"> {labelHint}</span>}
 		</label>

src/components/atomic/InputLabel/__tests__/InputLabel.tests.js

@@ -7,24 +7,12 @@ const htmlFor = 'mock';
 const labelHint = 'Mock hint';
 
 describe('Input label', function () {
-	render(
-		<InputLabel
-			label="Mock Input Label"
-			hasError
-			htmlFor={htmlFor}
-			id="mock-test"
-			labelHint={labelHint}
-			required
-		/>
-	);
+	render(<InputLabel label="Mock Input Label" hasError htmlFor={htmlFor} id="mock-test" labelHint={labelHint} required />);
 
 	it('InputLabel renders with correct class names and label hint', function () {
 		const label = screen.getByTestId(`tid-${htmlFor}-label`);
 		expect(label).toBeInTheDocument();
 		expect(screen.getByText(labelHint)).toBeInTheDocument();
-		expect(label).toHaveClass(
-			'ncids-label ncids-label--required ncids-label--error',
-			{ exact: true }
-		);
+		expect(label).toHaveClass('ncids-label ncids-label--required ncids-label--error', { exact: true });
 	});
 });

src/components/atomic/Radio/Radio.jsx

@@ -6,15 +6,7 @@ import './Radio.scss';
 const Radio = ({ id, label, className, disabled, value, ...otherProps }) => {
 	return (
 		<div className={`ncids-radio ${className}`}>
-			<input
-				className="ncids-radio__input"
-				type="radio"
-				disabled={disabled}
-				aria-disabled={disabled}
-				id={id}
-				value={value ? value : id}
-				{...otherProps}
-			/>
+			<input className="ncids-radio__input" type="radio" disabled={disabled} aria-disabled={disabled} id={id} value={value ? value : id} {...otherProps} />
 			<label className="ncids-radio__label" htmlFor={id}>
 				{label}
 			</label>

src/components/atomic/RemovableTag/RemovableTag.jsx

@@ -9,23 +9,11 @@ const RemovableTag = ({ label, onRemove }) => {
 	};
 
 	return (
-		<div
-			data-testid=".cts-removable-tag"
-			className="cts-removable-tag"
-			role="option"
-			aria-selected="true">
-			<span
-				data-testid=".cts-removable-tag__label"
-				className="cts-removable-tag__label">
+		<div data-testid=".cts-removable-tag" className="cts-removable-tag" role="option" aria-selected="true">
+			<span data-testid=".cts-removable-tag__label" className="cts-removable-tag__label">
 				{label}
 			</span>
-			<button
-				data-testid=".cts-removable-tag__button"
-				className="cts-removable-tag__button"
-				type="button"
-				aria-label={`remove ${label}`}
-				onClick={handleClick}
-				value={label}>
+			<button data-testid=".cts-removable-tag__button" className="cts-removable-tag__button" type="button" aria-label={`remove ${label}`} onClick={handleClick} value={label}>
 				<span aria-hidden="true">X</span>
 			</button>
 		</div>

src/components/atomic/RemovableTag/__tests__/RemovableTag.tests.js

@@ -11,9 +11,7 @@ describe('RemovableTag component', () => {
 		render(<RemovableTag key={key} label={label} onRemove={onRemove} />);
 		const tagLabel = screen.getByTestId('.cts-removable-tag__label');
 		expect(screen.getByTestId('.cts-removable-tag')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('.cts-removable-tag__button')
-		).toBeInTheDocument();
+		expect(screen.getByTestId('.cts-removable-tag__button')).toBeInTheDocument();
 		expect(tagLabel).toHaveTextContent(label);
 		expect(tagLabel).toBeInTheDocument();
 		const tagButton = screen.getByRole('button');

src/components/atomic/TextInput/TextInput.jsx

@@ -5,27 +5,7 @@ import './TextInput.scss';
 
 import InputLabel from '../InputLabel';
 
-const TextInput = ({
-	action = () => {},
-	allowedChars,
-	classes = '',
-	disabled = false,
-	enableSpellCheck = false,
-	errorMessage,
-	id,
-	inputHelpText,
-	label,
-	labelHidden,
-	labelHint,
-	maxLength,
-	name,
-	onBlur,
-	placeHolder,
-	required = false,
-	modified = false,
-	type = 'text',
-	value,
-}) => {
+const TextInput = ({ action = () => {}, allowedChars, classes = '', disabled = false, enableSpellCheck = false, errorMessage, id, inputHelpText, label, labelHidden, labelHint, maxLength, name, onBlur, placeHolder, required = false, modified = false, type = 'text', value }) => {
 	const [hasError, setError] = useState(false);
 	const [inputValue, setInputValue] = useState(value || '');
 	const [isPristine, setPristine] = useState(true);
@@ -36,10 +16,7 @@ const TextInput = ({
 
 	if (hasError) {
 		error = (
-			<span
-				className="ncids-input__error-message"
-				data-testid="tid-error"
-				role="alert">
+			<span className="ncids-input__error-message" data-testid="tid-error" role="alert">
 				{errorMessage}
 			</span>
 		);
@@ -49,9 +26,7 @@ const TextInput = ({
 		helpText = <span className="ncids-input__help-text">{inputHelpText}</span>;
 	}
 
-	ariaLabel = labelHidden
-		? { 'aria-label': label }
-		: { 'aria-labelledby': `${id}-label` };
+	ariaLabel = labelHidden ? { 'aria-label': label } : { 'aria-labelledby': `${id}-label` };
 
 	useEffect(() => {
 		setError(!!errorMessage);
@@ -87,38 +62,10 @@ const TextInput = ({
 	};
 
 	return (
-		<div
-			className={`ncids-input-group ${
-				hasError ? 'ncids-input-group--error ' : ''
-			}${classes}`}>
-			{labelHidden ? null : (
-				<InputLabel
-					label={label}
-					labelHint={labelHint}
-					htmlFor={id}
-					hasError={hasError}
-					required={required}
-				/>
-			)}
+		<div className={`ncids-input-group ${hasError ? 'ncids-input-group--error ' : ''}${classes}`}>
+			{labelHidden ? null : <InputLabel label={label} labelHint={labelHint} htmlFor={id} hasError={hasError} required={required} />}
 			{error}
-			<input
-				id={id}
-				name={name || id}
-				type={type}
-				value={inputValue}
-				className={`ncids-input ${
-					hasError ? 'ncids-input--error ' : ''
-				}${classes} ${modified ? 'ncids-input--modified' : ''}`}
-				required={required}
-				maxLength={maxLength}
-				placeholder={placeHolder}
-				aria-required={required}
-				disabled={disabled}
-				onBlur={handleBlur}
-				onChange={handleChange}
-				spellCheck={enableSpellCheck ? true : false}
-				{...ariaLabel}
-			/>
+			<input id={id} name={name || id} type={type} value={inputValue} className={`ncids-input ${hasError ? 'ncids-input--error ' : ''}${classes} ${modified ? 'ncids-input--modified' : ''}`} required={required} maxLength={maxLength} placeholder={placeHolder} aria-required={required} disabled={disabled} onBlur={handleBlur} onChange={handleChange} spellCheck={enableSpellCheck ? true : false} {...ariaLabel} />
 			{helpText}
 		</div>
 	);
@@ -143,18 +90,7 @@ TextInput.propTypes = {
 	placeHolder: PropTypes.string,
 	required: PropTypes.bool,
 	modified: PropTypes.bool,
-	type: PropTypes.oneOf([
-		'text',
-		'email',
-		'password',
-		'search',
-		'url',
-		'date',
-		'month',
-		'tel',
-		'week',
-		'number',
-	]),
+	type: PropTypes.oneOf(['text', 'email', 'password', 'search', 'url', 'date', 'month', 'tel', 'week', 'number']),
 	value: PropTypes.string,
 };
 

src/components/atomic/TextInput/__tests__/TextInput.test.js

@@ -106,8 +106,7 @@ describe('TextInput component', function () {
 				retMockActionObject = {
 					...mockActionObject,
 					isExecuted: true,
-					hasCorrectTargetEventValue:
-						value === mockActionEvent.event.target.value,
+					hasCorrectTargetEventValue: value === mockActionEvent.event.target.value,
 				};
 			};