orc-shared 5.8.0-dev.8 → 5.9.0-dev.1

package/src/components/MaterialUI/DataDisplay/tableHelpers.js

@@ -66,7 +66,15 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			);
 			checkboxProps.set(CheckboxProps.propNames.metadata, { id: rowId, name: def.fieldName });
 
-			return [<Checkbox id={"select_" + transformedValue} data-row-id={rowId} checkboxProps={checkboxProps} />, null];
+			return [
+				<Checkbox
+					key={def.type + "_" + rowId}
+					id={"select_" + transformedValue}
+					data-row-id={rowId}
+					checkboxProps={checkboxProps}
+				/>,
+				null,
+			];
 
 		case "switch":
 			const switchProps = new SwitchProps();
@@ -85,7 +93,9 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			switchProps.set(SwitchProps.propNames.className, def.switch?.className);
 			switchProps.set(SwitchProps.propNames.metadata, { id: rowId, name: def.fieldName });
 
-			return transformedValue != null ? [<Switch data-row-id={rowId} switchProps={switchProps} />] : [null];
+			return transformedValue != null
+				? [<Switch key={def.type + "_" + rowId} data-row-id={rowId} switchProps={switchProps} />]
+				: [null];
 
 		case "radio":
 			const selectedValue = def.selectedValue;
@@ -107,7 +117,7 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 				StandaloneRadioProps.propNames.readOnly,
 				def.transform?.readOnly != null ? def.transform.readOnly(e, readOnly, def) : readOnly,
 			);
-			return [<StandaloneRadio radioProps={radioProps} />];
+			return [<StandaloneRadio key={def.type + "_" + rowId} radioProps={radioProps} />];
 
 		case "textInput":
 			const inputBaseProps = new InputBaseProps();
@@ -124,7 +134,7 @@ const renderByType = (e, def, rowId, readOnly, transformedValue, index) => {
 			);
 			inputBaseProps.set(InputBaseProps.propNames.inputAttributes, def.inputAttributes);
 			inputBaseProps.set(InputBaseProps.propNames.metadata, { id: rowId, name: def.fieldName });
-			return [<InputBase inputProps={inputBaseProps} />];
+			return [<InputBase key={def.type + "_" + rowId} inputProps={inputBaseProps} />];
 		default:
 			return [defaultRendering(e, def, rowId, readOnly, transformedValue)];
 	}

package/src/components/MaterialUI/Feedback/loadingScreen.test.js

@@ -70,6 +70,7 @@ describe("loadingScreen", () => {
 		const clock = sinon.useFakeTimers();
 		const menuNode = document.createElement("div");
 		document.body.appendChild(menuNode);
+		// eslint-disable-next-line react/no-render-return-value
 		const menu = ReactDOM.render(
 			<div>
 				<TestWrapper stylesProvider muiThemeProvider={{ theme }} provider={{ store }}>

package/src/components/MaterialUI/Feedback/useNotification.test.js

@@ -8,6 +8,7 @@ const TestComp = () => {
 	const addNotification = useNotification(snackPack, setSnackPack);
 	return (
 		<div>
+			{/* eslint-disable-next-line react/no-unknown-property */}
 			<div id="notification" snacks={snackPack} onClick={(message, type) => addNotification(message, type)} />
 		</div>
 	);

package/src/components/MaterialUI/Inputs/CheckboxGroup.js

@@ -3,7 +3,9 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import CheckboxGroupProps, { isCheckboxGroupProps } from "./CheckboxGroupProps";
 import Checkbox from "./Checkbox";
 import CheckboxProps from "./CheckboxProps";
+import TooltippedIcon from "../DataDisplay/TooltippedElements/TooltippedIcon";
 import { makeStyles } from "@material-ui/core/styles";
+import classNames from "classnames";
 
 const useStyles = makeStyles(theme => ({
 	container: {
@@ -14,17 +16,6 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: props => (props.row ? "row" : "column"),
 		flexWrap: "wrap",
-		"& .MuiFormControlLabel-root": {
-			[theme.breakpoints.up("xs")]: {},
-			[theme.breakpoints.up("sm")]: {},
-			[theme.breakpoints.up("md")]: { width: "45%" },
-			[theme.breakpoints.up("lg")]: { width: "30%" },
-			[theme.breakpoints.up("xl")]: { width: "20%" },
-
-			"& + .MuiFormControlLabel-root": {
-				marginTop: theme.spacing(1),
-			},
-		},
 	},
 	errorText: {
 		marginTop: theme.spacing(0.5),
@@ -32,6 +23,28 @@ const useStyles = makeStyles(theme => ({
 		fontSize: theme.typography.fieldLabelSize,
 		float: "left",
 	},
+	warningIcon: {
+		width: "1em",
+		height: "1em",
+		fontSize: 16,
+		alignSelf: "center",
+		marginRight: theme.spacing(2),
+		"& > svg": {
+			color: theme.palette.error.main,
+		},
+	},
+	checkboxItemWarning: {
+		color: theme.palette.error.main,
+	},
+	checkboxItem: props => ({
+		display: "flex",
+		[theme.breakpoints.up("xs")]: {},
+		[theme.breakpoints.up("sm")]: {},
+		[theme.breakpoints.up("md")]: props.row ? { width: "45%" } : {},
+		[theme.breakpoints.up("lg")]: props.row ? { width: "30%" } : {},
+		[theme.breakpoints.up("xl")]: props.row ? { width: "20%" } : {},
+		marginTop: theme.spacing(1),
+	}),
 }));
 
 const CheckboxGroup = ({ checkboxGroupProps }) => {
@@ -73,7 +86,18 @@ const CheckboxGroup = ({ checkboxGroupProps }) => {
 					checkboxProps.set(CheckboxProps.propNames.label, option.label ?? option.value);
 					checkboxProps.set(CheckboxProps.propNames.readOnly, readOnly);
 					checkboxProps.set(CheckboxProps.propNames.disabled, disabled);
-					return <Checkbox key={index} checkboxProps={checkboxProps} />;
+
+					return (
+						<div
+							key={index}
+							className={classNames(classes.checkboxItem, { [classes.checkboxItemWarning]: !!option.warningMessage })}
+						>
+							<Checkbox checkboxProps={checkboxProps} />
+							{option.warningMessage && (
+								<TooltippedIcon className={classes.warningIcon} titleValue={option.warningMessage} id="warning" />
+							)}
+						</div>
+					);
 				})}
 			</div>
 			{error && <div className={classes.errorText}>{error}</div>}

package/src/components/MaterialUI/Inputs/CheckboxGroup.test.js

@@ -7,6 +7,7 @@ import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import CheckboxGroupProps from "./CheckboxGroupProps";
 import CheckboxProps from "./CheckboxProps";
+import TooltippedIcon from "../DataDisplay/TooltippedElements/TooltippedIcon";
 
 describe("CheckboxGroup Component", () => {
 	let update, container;
@@ -74,10 +75,60 @@ describe("CheckboxGroup Component", () => {
 		const expected = (
 			<div>
 				<div>
-					<Checkbox key={1} checkboxProps={checkbox1Props} />
-					<Checkbox key={2} checkboxProps={checkbox2Props} />
-					<Checkbox key={3} checkboxProps={checkbox3Props} />
-					<Checkbox key={4} checkboxProps={checkbox4Props} />
+					<div key={1}>
+						<Checkbox checkboxProps={checkbox1Props} />
+					</div>
+					<div key={2}>
+						<Checkbox checkboxProps={checkbox2Props} />
+					</div>
+					<div key={3}>
+						<Checkbox checkboxProps={checkbox3Props} />
+					</div>
+					<div key={4}>
+						<Checkbox checkboxProps={checkbox4Props} />
+					</div>
+				</div>
+			</div>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders CheckboxGroup component with one warning", () => {
+		const props = new CheckboxGroupProps();
+		const options = [
+			{ value: "option1", sortOrder: 1 },
+			{ value: "option2", sortOrder: 2, warningMessage: "warning message" },
+		];
+
+		props.set(CheckboxGroupProps.propNames.update, update);
+		props.set(CheckboxGroupProps.propNames.value, "option1|option2");
+		props.set(CheckboxGroupProps.propNames.options, options);
+		const component = <CheckboxGroup checkboxGroupProps={props} />;
+
+		const checkbox1Props = new CheckboxProps();
+		checkbox1Props.set(CheckboxProps.propNames.update, update);
+		checkbox1Props.set(CheckboxProps.propNames.value, true);
+		checkbox1Props.set(CheckboxProps.propNames.label, "option1");
+		checkbox1Props.set(CheckboxProps.propNames.readOnly, false);
+		checkbox1Props.set(CheckboxProps.propNames.disabled, false);
+
+		const checkbox2Props = new CheckboxProps();
+		checkbox2Props.set(CheckboxProps.propNames.update, update);
+		checkbox2Props.set(CheckboxProps.propNames.value, false);
+		checkbox2Props.set(CheckboxProps.propNames.label, "option2");
+		checkbox2Props.set(CheckboxProps.propNames.readOnly, false);
+		checkbox2Props.set(CheckboxProps.propNames.disabled, false);
+		const expected = (
+			<div>
+				<div>
+					<div key={1}>
+						<Checkbox checkboxProps={checkbox1Props} />
+					</div>
+					<div key={2}>
+						<Checkbox checkboxProps={checkbox2Props} />
+						<TooltippedIcon titleValue={"warning message"} id="warning" />
+					</div>
 				</div>
 			</div>
 		);

package/src/components/MaterialUI/Inputs/DatePicker.js

@@ -21,11 +21,11 @@ const useStyles = makeStyles(theme => ({
 	datePickerWrapper: {
 		display: "flex",
 		width: "auto",
-		padding: props => (props.readOnly ? "0" : theme.spacing(0.3, 0.5)),
-		border: props => (props.readOnly ? "none" : `1px solid ${theme.palette.grey.borders}`),
+		padding: theme.spacing(0.3, 0.5),
+		border: `1px solid ${theme.palette.grey.borders}`,
 		borderRadius: theme.shape.borderRadius,
 		alignItems: "center",
-		backgroundColor: props => (props.readOnly ? "inherit" : theme.palette.background.default),
+		backgroundColor: theme.palette.background.default,
 		"&:focus, &:focus-within": {
 			borderRadius: theme.shape.borderRadius,
 			borderColor: theme.palette.focus,
@@ -82,6 +82,11 @@ const useStyles = makeStyles(theme => ({
 			opacity: 0.4,
 		},
 	},
+	datePickerWrapperReadOnly: {
+		padding: "0",
+		border: "none",
+		backgroundColor: "inherit",
+	},
 	disabled: {
 		border: `1px solid ${theme.palette.grey.light} !important`,
 		backgroundColor: `${theme.palette.grey.light} !important`,
@@ -157,7 +162,14 @@ const WrappedDatePicker = ({
 
 	return (
 		<div className={classes.container}>
-			<label className={classNames(classes.datePickerWrapper, disabledCls, error ? classes.errorInput : null)}>
+			<label
+				className={classNames(
+					classes.datePickerWrapper,
+					readOnly ? classes.datePickerWrapperReadOnly : null,
+					disabledCls,
+					error ? classes.errorInput : null,
+				)}
+			>
 				<div className={classes.datePickerContainer}>
 					<DatePicker
 						{...props}

package/src/components/MaterialUI/Inputs/DatePicker.test.js

@@ -3,8 +3,10 @@ import DatePicker, { createFormat } from "./DatePicker";
 import { mount } from "enzyme";
 import sinon from "sinon";
 import Icon from "../DataDisplay/Icon";
-import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
+import { TestWrapper, createMuiTheme, generateClassName } from "./../../../utils/testUtils";
 import Immutable from "immutable";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
 
 describe("DatePicker", () => {
 	let updater, state, store;
@@ -426,6 +428,38 @@ describe("DatePicker", () => {
 		input.at(0).simulate("change", event);
 	});
 
+	it("should have readonly styles when readonly", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={true} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be true");
+	});
+
+	it("should have updatable styles when updatable", () => {
+		const date = new Date("2020-06-30T00:00:00");
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider>
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<DatePicker useTime={true} readOnly={false} onChange={updater} value={date} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</TestWrapper>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-datePickerWrapperReadOnly"), "to be false");
+	});
+
 	it("should call onChange prop with useTimeZone", () => {
 		const onChangeMock = jest.fn();
 		const date = new Date("2020-06-30T00:00:00");

package/src/components/MaterialUI/Inputs/Radio.js

@@ -119,7 +119,7 @@ const Radio = ({ radioProps }) => {
 							key={`radiobutton_${radio.value}`}
 							value={radio.value}
 							label={radio.label}
-							disabled={disabled}
+							disabled={disabled ? true : radio.disabled ?? false}
 							control={
 								<RadioMui
 									color="primary"

package/src/components/MaterialUI/Inputs/Radio.test.js

@@ -49,6 +49,7 @@ const ExpectComponentToBeRenderedProperly = radioProps => {
 	expect(radioElements.length, "to equal", radios.length);
 
 	radios.forEach(radio => {
+		const disabledOption = disabled ? true : radio.disabled ?? false;
 		let option =
 			radioElements.find(
 				x =>
@@ -57,7 +58,7 @@ const ExpectComponentToBeRenderedProperly = radioProps => {
 					x.props.control.type.options.name === "MuiRadio" &&
 					x.props.value === radio.value &&
 					x.props.label === radio.label &&
-					x.props.disabled === disabled,
+					x.props.disabled === disabledOption,
 			) || null;
 		expect(option, "not to be", null);
 	});
@@ -226,4 +227,37 @@ describe("Radio Component", () => {
 
 		ExpectEventToBeFiredWithOptionValue(radioProps, clickEvent, "option2");
 	});
+
+	it("Renders Radio component properly with options all disbaled", () => {
+		radios.forEach(radio => {
+			radio.disabled = true;
+		});
+
+		radioProps.set(RadioProps.propNames.label, "aRadioLabel");
+		radioProps.set(RadioProps.propNames.defaultVal, "option1");
+		radioProps.set(RadioProps.propNames.value, "option1");
+		radioProps.set(RadioProps.propNames.radios, radios);
+		radioProps.set(RadioProps.propNames.row, true);
+		radioProps.set(RadioProps.propNames.disabled, false);
+		radioProps.set(RadioProps.propNames.error, null);
+		radioProps.set(RadioProps.propNames.allowSingleRadio, true);
+
+		ExpectComponentToBeRenderedProperly(radioProps);
+	});
+
+	it("Renders Radio component properly with half options disbaled", () => {
+		radios[0].disabled = true;
+		radios[1].disabled = true;
+
+		radioProps.set(RadioProps.propNames.label, "aRadioLabel");
+		radioProps.set(RadioProps.propNames.defaultVal, "option1");
+		radioProps.set(RadioProps.propNames.value, "option1");
+		radioProps.set(RadioProps.propNames.radios, radios);
+		radioProps.set(RadioProps.propNames.row, true);
+		radioProps.set(RadioProps.propNames.disabled, false);
+		radioProps.set(RadioProps.propNames.error, null);
+		radioProps.set(RadioProps.propNames.allowSingleRadio, true);
+
+		ExpectComponentToBeRenderedProperly(radioProps);
+	});
 });

package/src/components/MaterialUI/Inputs/Select.js

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const selectEmptyValue = "~~#~~";
+
 const Select = ({ options, selectProps, children }) => {
 	if (isSelectProps(selectProps) === false) {
 		throw new TypeError("selectProps property is not of type SelectProps");
@@ -177,6 +179,16 @@ const Select = ({ options, selectProps, children }) => {
 		);
 	} else if (sortType === sortTypeEnum.default) {
 		options.sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1));
+	} else if (sortType === sortTypeEnum.alphabetical) {
+		options.sort((a, b) => {
+			if (a.value === selectEmptyValue) {
+				return -1;
+			}
+			if (b.value === selectEmptyValue) {
+				return 1;
+			}
+			return a.label.localeCompare(b.label);
+		});
 	}
 
 	if (showAllValue && showAllLabel) {
@@ -207,7 +219,7 @@ const Select = ({ options, selectProps, children }) => {
 		const appliedClasses = classNames(classes.baseItem, clss);
 		const labelClss = classNames({
 			[classes.label]: true,
-			[classes.emptyLabel]: option.value === "" || option.value === "~~#~~",
+			[classes.emptyLabel]: option.value === "" || option.value === selectEmptyValue,
 		});
 
 		const disabled = !!option.disabled;

package/src/components/MaterialUI/Inputs/Select.test.js

@@ -496,6 +496,43 @@ describe("Select Component", () => {
 		expect(optionsKeys, "to equal", ["#All#", "a", "b", "c"]);
 	});
 
+	it("Sorts select options correctly with alphabetical sorting", () => {
+		const emptyValue = "~~#~~";
+
+		const options = [
+			{ value: "c", label: "c" },
+			{ value: "a", label: "a" },
+			{ value: "b", label: "b" },
+			{ value: "f", label: "f" },
+			{ value: emptyValue, label: "empty" },
+			{ value: "h", label: "h" },
+			{ value: "g", label: "g" },
+			{ value: "e", label: "e" },
+			{ value: "d", label: "[d]" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.sortType, sortTypeEnum.alphabetical);
+		selectProps.set(SelectProps.propNames.value, "b");
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const test = mountedComponent.find(SelectMUI);
+
+		const mountedOptions = test.props().children;
+
+		const optionsKeys = mountedOptions.map(option => option.key);
+
+		expect(optionsKeys, "to equal", [emptyValue, "d", "a", "b", "c", "e", "f", "g", "h"]);
+	});
+
 	it("Sorts select options correctly with numeric sorting", () => {
 		const options = [
 			{ value: "BRC-409 - BRC-PROMENADES", label: "BRC-409 - BRC-PROMENADES", sortOrder: "BRC-409 - BRC-PROMENADES" },

package/src/components/MaterialUI/Inputs/SelectProps.js

@@ -4,6 +4,7 @@ export const sortTypeEnum = {
 	none: 0,
 	default: 1,
 	numeric: 2,
+	alphabetical: 3,
 };
 
 class SelectProps extends ComponentProps {

package/src/components/MaterialUI/Inputs/Switch.js

@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 import SwitchMui from "@material-ui/core/Switch";
 import { makeStyles } from "@material-ui/core/styles";
 import SwitchProps, { isSwitchProps } from "./SwitchProps";
@@ -21,13 +22,19 @@ export const useStyles = makeStyles(theme => ({
 	input: {
 		left: "-250%",
 		width: "600%",
-		cursor: props => (props.readOnly ? "default" : "inherit"),
+		cursor: "inherit",
+	},
+	inputReadOnly: {
+		cursor: "default",
 	},
 	thumb: {
 		width: theme.spacing(1.3),
 		height: theme.spacing(1.3),
 		backgroundColor: theme.palette.background.default,
-		display: props => (props.readOnly ? "none" : "inherit"),
+		display: "inherit",
+	},
+	thumbReadOnly: {
+		display: "none",
 	},
 	track: {
 		backgroundColor: theme.palette.grey.borders,
@@ -45,13 +52,19 @@ export const useStyles = makeStyles(theme => ({
 		"&:before": {
 			content: props => `"${props.formattedOnCaption}"`,
 			left: theme.spacing(0.9),
-			right: props => props.readOnly && theme.spacing(0.9),
 			opacity: 0,
 		},
 		"&:after": {
 			content: props => `"${props.formattedOffCaption}"`,
 			right: theme.spacing(0.9),
-			left: props => props.readOnly && theme.spacing(0.9),
+		},
+	},
+	trackReadOnly: {
+		"&:before": {
+			right: theme.spacing(0.9),
+		},
+		"&:after": {
+			left: theme.spacing(0.9),
 		},
 	},
 	checked: {
@@ -95,8 +108,17 @@ const Switch = ({ switchProps }) => {
 	const formattedOnCaption = onCaption != null ? formatMessage(onCaption) : "";
 	const formattedOffCaption = offCaption != null ? formatMessage(offCaption) : "";
 
-	const classes = useStyles({ formattedOnCaption, formattedOffCaption, readOnly });
-	const switchClasses = { ...classes, ...className };
+	const classes = useStyles({ formattedOnCaption, formattedOffCaption });
+	const switchClasses = {
+		root: classes.root,
+		switchBase: classes.switchBase,
+		input: classNames(classes.input, { [classes.inputReadOnly]: readOnly }),
+		thumb: classNames(classes.thumb, { [classes.thumbReadOnly]: readOnly }),
+		track: classNames(classes.track, { [classes.trackReadOnly]: readOnly }),
+		checked: classes.checked,
+		disabled: classes.disabled,
+		...className,
+	};
 
 	return (
 		<SwitchMui

package/src/components/MaterialUI/Inputs/Switch.test.js

@@ -6,6 +6,9 @@ import { ignoreConsoleError } from "../../../utils/testUtils";
 import SwitchProps from "./SwitchProps";
 import Switch from "./Switch";
 import { IntlProvider } from "react-intl";
+import { StylesProvider } from "@material-ui/core/styles";
+import { MuiThemeProvider } from "@material-ui/core";
+import { generateClassName, createMuiTheme } from "~/utils/testUtils";
 
 const messages = {
 	captionOn: "is On",
@@ -77,6 +80,42 @@ describe("Switch Component", () => {
 		expect(update, "to have calls satisfying", [{ args: [true, {}] }]);
 	});
 
+	it("Renders readonly switch with readonly styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, true);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be true");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be true");
+	});
+
+	it("Renders updatable switch with updatable styles", () => {
+		const switchProps = new SwitchProps();
+		switchProps.set(SwitchProps.propNames.readOnly, false);
+		const component = (
+			<IntlProvider locale="en-US">
+				<StylesProvider generateClassName={generateClassName}>
+					<MuiThemeProvider theme={createMuiTheme()}>
+						<Switch switchProps={switchProps} />
+					</MuiThemeProvider>
+				</StylesProvider>
+			</IntlProvider>
+		);
+		const mountedComponent = mount(component);
+		expect(mountedComponent.exists(".makeStyles-inputReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-thumbReadOnly"), "to be false");
+		expect(mountedComponent.exists(".makeStyles-trackReadOnly"), "to be false");
+	});
+
 	it("Checkbox component handles uncheck", () => {
 		const switchProps = new SwitchProps();