orc-shared 5.99.0-dev.4 → 5.99.0-dev.6

package/dist/hooks/useWindowSize.js

@@ -0,0 +1,88 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useWindowSize = exports.default = void 0;
+var _react = require("react");
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var useWindowSize = exports.useWindowSize = function useWindowSize() {
+  var _useState = (0, _react.useState)({
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight,
+      outerWidth: window.outerWidth,
+      outerHeight: window.outerHeight
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      var haveChanged = windowSize.innerWidth !== window.innerWidth || windowSize.innerHeight !== window.innerHeight || windowSize.outerWidth !== window.outerWidth || windowSize.outerHeight !== window.outerHeight;
+      if (haveChanged) {
+        setWindowSize({
+          innerWidth: window.innerWidth,
+          innerHeight: window.innerHeight,
+          outerWidth: window.outerWidth,
+          outerHeight: window.outerHeight
+        });
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, [windowSize]);
+  return windowSize;
+};
+__signature__(useWindowSize, "useState{[windowSize, setWindowSize]({\n\t\tinnerWidth: window.innerWidth,\n\t\tinnerHeight: window.innerHeight,\n\t\touterWidth: window.outerWidth,\n\t\touterHeight: window.outerHeight,\n\t})}\nuseEffect{}");
+__signature__(useWindowSize, "useState{[windowSize, setWindowSize]({\n\t\tinnerWidth: window.innerWidth,\n\t\tinnerHeight: window.innerHeight,\n\t\touterWidth: window.outerWidth,\n\t\touterHeight: window.outerHeight,\n\t})}\nuseEffect{}");
+var _default = useWindowSize;
+var _default2 = _default;
+var _default3 = exports.default = _default2;
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useWindowSize, "useWindowSize", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(useWindowSize, "useWindowSize", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/hooks/useWindowSize.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/dist/sharedMessages.js

@@ -497,6 +497,14 @@ var sharedMessages = (0, _reactIntl.defineMessages)({
   december: {
     id: "orc-shared.december",
     defaultMessage: "December"
+  },
+  selectAll: {
+    id: "orc-shared.selectAll",
+    defaultMessage: "Select All"
+  },
+  clear: {
+    id: "orc-shared.clear",
+    defaultMessage: "Clear"
   }
 });
 var _default = sharedMessages;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.99.0-dev.4",
+	"version": "5.99.0-dev.6",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

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

@@ -1,23 +1,73 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import Select from "../../MaterialUI/Inputs/Select";
-import { memoize } from "../../../utils";
 import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+import sharedMessages from "../../../sharedMessages";
 
-export const selectEventUpdater = memoize(update => value => update(value));
+const clearValue = "__#Clear#__";
+const selectAllValue = "__#SelectAll#__";
+
+const MultiSelector = ({ value, width = 700, options, update, addClearSelectAll, multipleRenderValue, ...props }) => {
+	const { formatMessage } = useIntl();
+
+	const valueUpdater = value => {
+		if (value.indexOf(clearValue) >= 0) {
+			update([]);
+		} else if (value.indexOf(selectAllValue) >= 0) {
+			update(options.map(x => x.value));
+		} else {
+			update(value);
+		}
+	};
 
-const MultiSelector = ({ value, options, update, ...props }) => {
 	const selectProps = new SelectProps();
 
+	const selectionOptions = [];
+
+	if (addClearSelectAll) {
+		if (value.length > 0) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.clear),
+				value: clearValue,
+			});
+		}
+		if (value.length !== options.length) {
+			selectionOptions.push({
+				label: formatMessage(sharedMessages.selectAll),
+				value: selectAllValue,
+			});
+		}
+	}
+
+	const allOptions = [...selectionOptions, ...options];
+
 	selectProps.set(SelectProps.propNames.value, value);
 	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
 	selectProps.set(SelectProps.propNames.disabled, props.disabled);
 	selectProps.set(SelectProps.propNames.multiple, true);
-	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+	selectProps.set(SelectProps.propNames.multipleSelectWidth, width);
+	selectProps.set(SelectProps.propNames.update, valueUpdater);
+	selectProps.set(SelectProps.propNames.autoWidth, false);
+	selectProps.set(SelectProps.propNames.autoFocus, false);
+	selectProps.set(
+		SelectProps.propNames.renderValue,
+		multipleRenderValue ? () => multipleRenderValue(value, options) : null,
+	);
+	selectProps.set(SelectProps.propNames.positionOverride, {
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left",
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left",
+		},
+	});
 
 	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
 	selectProps.set(SelectProps.propNames.error, hasError);
 
-	return <Select options={options} selectProps={selectProps} />;
+	return <Select options={allOptions} selectProps={selectProps} />;
 };
 
 export default MultiSelector;

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

@@ -1,17 +1,23 @@
 import React from "react";
 import sinon from "sinon";
-import MultiSelector, { selectEventUpdater } from "./MultiSelector";
-import { TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+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;
+	let update, state, store, chevronDown, multipleRenderValue;
 	beforeEach(() => {
 		update = sinon.spy().named("update");
+		multipleRenderValue = sinon.fake.returns("En, It");
 
 		state = Immutable.fromJS({
 			locale: {
@@ -34,7 +40,7 @@ describe("MultiSelector", () => {
 
 	it("renders a multi selector with multiple options", () =>
 		expect(
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
 				<MultiSelector
 					update={update}
 					value={["English"]}
@@ -46,32 +52,34 @@ describe("MultiSelector", () => {
 			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
-				<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>
+			<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 an error", () => {
+	it("renders a multi selector with select all and clear options without errors", () =>
 		expect(
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
 				<MultiSelector
 					update={update}
-					required={true}
-					value={[]}
+					addClearSelectAll={true}
+					value={["English"]}
 					options={[
 						{ value: "English", label: "English" },
 						{ value: "Francais", label: "Francais" },
@@ -80,9 +88,16 @@ describe("MultiSelector", () => {
 			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
-				<div>
-					<SelectMUI value={[""]} disableUnderline={true} IconComponent={chevronDown} error={true} multiple={true}>
+			<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>
@@ -90,23 +105,228 @@ describe("MultiSelector", () => {
 							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
 						</MenuItem>
 					</SelectMUI>
-					<div></div>
-				</div>
+				</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] });
 	});
-});
 
-describe("selectEventUpdater", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
+	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("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"] }]),
-		));
+	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");
 
-	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+		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"] }]);
+	});
 });