orc-shared 5.10.2 → 5.99.0-dev.10

package/src/components/Form/Inputs/MultiSelector.test.js

@@ -0,0 +1,332 @@
+import React from "react";
+import sinon from "sinon";
+import MultiSelector from "./MultiSelector";
+import { TestWrapper, createMuiTheme, extractMessages } from "../../../utils/testUtils";
+import Immutable from "immutable";
+import SelectMUI from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import TooltippedTypography from "../../MaterialUI/DataDisplay/TooltippedElements/TooltippedTypography";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
+import FormControl from "@material-ui/core/FormControl";
+import { render, screen, fireEvent } from "@testing-library/react";
+import sharedMessages from "../../../sharedMessages";
+
+const messages = extractMessages(sharedMessages);
+
+describe("MultiSelector", () => {
+	let update, state, store, chevronDown, multipleRenderValue;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+		multipleRenderValue = sinon.fake.returns("En, It");
+
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en-CA",
+			},
+		});
+
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+
+		chevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+	});
+
+	const theme = createMuiTheme();
+
+	it("renders a multi selector with multiple options", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<SelectMUI
+						value={["English"]}
+						disableUnderline={true}
+						IconComponent={chevronDown}
+						error={false}
+						multiple={true}
+						renderValue={selected => selected.join(", ")}
+					>
+						<MenuItem key="English" value="English">
+							<TooltippedTypography children="English" titleValue="English" />
+						</MenuItem>
+						<MenuItem key="Francais" value="Francais">
+							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+						</MenuItem>
+					</SelectMUI>
+				</FormControl>
+			</TestWrapper>,
+		));
+
+	it("renders a multi selector with select all and clear options without errors", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<SelectMUI
+						value={["English"]}
+						disableUnderline={true}
+						IconComponent={chevronDown}
+						error={false}
+						multiple={false}
+						renderValue={selected => selected.join(", ")}
+					>
+						<MenuItem key="English" value="English">
+							<TooltippedTypography children="English" titleValue="English" />
+						</MenuItem>
+						<MenuItem key="Francais" value="Francais">
+							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+						</MenuItem>
+					</SelectMUI>
+				</FormControl>
+			</TestWrapper>,
+		));
+
+	it("Expect multipleRenderValue to be called and selection to be rendered correctly", () => {
+		const allOptions = [
+			{ value: "English", label: "English" },
+			{ value: "Francais", label: "Francais" },
+			{ value: "Italiano", label: "Italiano" },
+		];
+
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					multipleRenderValue={multipleRenderValue}
+					value={["English", "Italiano"]}
+					options={allOptions}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectionText = screen.queryByText("En, It");
+
+		expect(selectionText, "not to be null");
+		expect(multipleRenderValue, "to have a call satisfying", { args: [["English", "Italiano"], allOptions] });
+	});
+
+	it("Expect to have both 'Select All' and 'Clear' options to be available with partial selection", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
+
+		expect(selectAllOption, "not to be null");
+		expect(clearOption, "not to be null");
+	});
+
+	it("Expect to have only 'Clear' option to be available with all options being selected", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English", "Francais"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
+
+		expect(selectAllOption, "to be null");
+		expect(clearOption, "not to be null");
+	});
+
+	it("Expect to have only 'Select All' option to be available with an empty selection", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={[]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const selectAllOption = screen.queryByText("Select All");
+		const clearOption = screen.queryByText("Clear");
+
+		expect(selectAllOption, "not to be null");
+		expect(clearOption, "to be null");
+	});
+
+	it("Picking one selection should update with it along with existing ones", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Italiano");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [["English", "Italiano"]] }]);
+	});
+
+	it("The 'Select All' option should update with all values", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Select All");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [["English", "Francais", "Italiano"]] }]);
+	});
+
+	it("The 'Clear' option should update with an empty list", () => {
+		const multiSelector = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					addClearSelectAll={true}
+					value={["English"]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+						{ value: "Italiano", label: "Italiano" },
+					]}
+				/>
+			</TestWrapper>
+		);
+
+		render(multiSelector);
+
+		const selectButton = screen.getByRole("button");
+		fireEvent.mouseDown(selectButton);
+
+		const optionToSelect = screen.getByText("Clear");
+		fireEvent.click(optionToSelect);
+
+		expect(update, "to have calls satisfying", [{ args: [[]] }]);
+	});
+
+	it("renders a multi selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<MultiSelector
+					update={update}
+					required={true}
+					value={[]}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<FormControl>
+					<div>
+						<SelectMUI value={[""]} disableUnderline={true} IconComponent={chevronDown} error={true} multiple={true}>
+							<MenuItem key="English" value="English">
+								<TooltippedTypography children="English" titleValue="English" />
+							</MenuItem>
+							<MenuItem key="Francais" value="Francais">
+								<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+							</MenuItem>
+						</SelectMUI>
+						<div></div>
+					</div>
+				</FormControl>
+			</TestWrapper>,
+		);
+	});
+});

package/src/components/Form/Inputs/Selector.js

@@ -1,17 +1,25 @@
 import React from "react";
 import Select from "../../MaterialUI/Inputs/Select";
-import { memoize } from "../../../utils";
 import SelectProps from "../../MaterialUI/Inputs/SelectProps";
 
-export const selectEventUpdater = memoize(update => value => update(value));
-
 const Selector = ({ value, options, update, ...props }) => {
 	const selectProps = new SelectProps();
 
 	selectProps.set(SelectProps.propNames.value, value);
 	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
 	selectProps.set(SelectProps.propNames.disabled, props.disabled);
-	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+	selectProps.set(SelectProps.propNames.update, update);
+	selectProps.set(SelectProps.propNames.autoWidth, false);
+	selectProps.set(SelectProps.propNames.positionOverride, {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left",
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left",
+		},
+	});
 
 	const hasError = props.required && !value ? true : false;
 	selectProps.set(SelectProps.propNames.error, hasError);

package/src/components/Form/Inputs/Selector.test.js

@@ -1,12 +1,13 @@
 import React from "react";
 import sinon from "sinon";
-import Selector, { selectEventUpdater } from "./Selector";
+import Selector from "./Selector";
 import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
 import Immutable from "immutable";
 import SelectMUI from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import TooltippedTypography from "../../MaterialUI/DataDisplay/TooltippedElements/TooltippedTypography";
 import Icon from "../../MaterialUI/DataDisplay/Icon";
+import { mount } from "enzyme";
 
 describe("Selector", () => {
 	let update, state, store, chevronDown;
@@ -88,18 +89,32 @@ describe("Selector", () => {
 			</TestWrapper>,
 		);
 	});
-});
 
-describe("selectEventUpdater", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
-	});
+	it("Update is invoked when selection has changed", () => {
+		const mountedComponent = mount(
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider intlProvider>
+				<Selector
+					update={update}
+					required={true}
+					value={null}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+		);
 
-	it("creates a handler for an event and calls update with the value of the target", () =>
-		expect(selectEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
-			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
-		));
+		const selectMui = mountedComponent.find(SelectMUI);
 
-	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+		const event = {
+			target: {
+				value: "Francais",
+			},
+		};
+
+		selectMui.invoke("onChange")(event);
+
+		expect(update, "to have calls satisfying", [{ args: ["Francais"] }]);
+	});
 });

package/src/components/Form/Inputs/index.js

@@ -1,5 +1,5 @@
 import Selector from "./Selector";
-import MultiSelector from "../../MultiSelector";
+import MultiSelector from "./MultiSelector";
 import Button from "./Button";
 import { ReadOnly } from "./ReadOnly";
 import { SwitchInput } from "./Toggles";

package/src/components/InternetExplorerWarningMessage.js

@@ -8,29 +8,29 @@ import sharedMessages from "../sharedMessages";
 const useStyles = makeStyles(theme => ({
 	container: {
 		fontFamily: "'Open Sans', sans-serif",
-		fontSize: "14px",
+		fontSize: theme.spacing(1.4),
 		background: "rgba(255,255,255,0.85)",
-		maxWidth: "700px",
-		width: "calc(100% - 40px)",
+		maxWidth: theme.spacing(70),
+		width: `calc(100% - ${theme.spacing(4)})`,
 		display: "block",
 		top: "50%",
 		left: "50%",
 		position: "absolute",
-		boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
+		boxShadow: `${theme.spacing(0, 0.4, 0.8, 0)} rgba(0, 0, 0, 0.2), ${theme.spacing(0, 0.6, 2, 0)} rgba(0, 0, 0, 0.19)`,
 		transform: "translateY(-50%) translateX(-50%)",
-		padding: "80px",
-		borderRadius: "3px",
+		padding: theme.spacing(8),
+		borderRadius: theme.spacing(0.3),
 		"& header": {
-			paddingBottom: "20px",
-			marginBottom: "20px",
+			paddingBottom: theme.spacing(2),
+			marginBottom: theme.spacing(2),
 			borderBottom: "1px solid #999",
 			"& h1": {
 				fontWeight: 400,
-				fontWize: "30px",
+				fontWize: theme.spacing(3),
 				marginTop: 0,
-				marginBottom: "5px",
+				marginBottom: theme.spacing(0.5),
 				"& p": {
-					fontSize: "16px",
+					fontSize: theme.spacing(1.6),
 					margin: 0,
 					color: "#999",
 					fontWeight: 400,
@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({
 		flexWrap: "wrap",
 		width: "100%",
 		boxSizing: "border-box",
-		marginTop: "40px",
+		marginTop: theme.spacing(4),
 	},
 	gridItem: {
 		display: "flex",
@@ -52,16 +52,16 @@ const useStyles = makeStyles(theme => ({
 		flexDirection: "column",
 	},
 	browserIconContainer: {
-		width: "48px",
+		width: theme.spacing(4.8),
 		textAlign: "center",
 	},
 	browserIconCaption: {
-		fontSize: "11px",
+		fontSize: theme.spacing(1.1),
 		color: "#999",
 	},
 	browserIcon: {
 		stroke: "none",
-		fontSize: "48px",
+		fontSize: theme.spacing(4.8),
 	},
 }));