orc-shared 5.10.1-dev.8 → 5.10.1-dev.9

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

@@ -0,0 +1,112 @@
+import React from "react";
+import sinon from "sinon";
+import MultiSelector, { selectEventUpdater } from "./MultiSelector";
+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";
+
+describe("MultiSelector", () => {
+	let update, state, store, chevronDown;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+
+		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 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 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>,
+		));
+
+	it("renders a multi selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider 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 stylesProvider muiThemeProvider={{ theme }}>
+				<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>
+			</TestWrapper>,
+		);
+	});
+});
+
+describe("selectEventUpdater", () => {
+	let update;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+	});
+
+	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("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+});

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/Loader.test.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import { mount, act } from "unexpected-reaction";
 import sinon from "sinon";
 import { spyOnConsole } from "../utils/testUtils";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 import Loader, { Loading } from "./Loader";
+import ColumnWrapper from "./ColumnWrapper";
 
 describe("Loader placeholder", () => {
 	let clock;
@@ -18,11 +18,9 @@ describe("Loader placeholder", () => {
 
 	it("renders null, then load spinner if no props set", () => {
 		const loader = mount(
-			<ThemeProvider theme={{ icons: { loading: "test-loader" } }}>
-				<div>
-					<Loading />
-				</div>
-			</ThemeProvider>,
+			<div>
+				<Loading />
+			</div>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -34,7 +32,7 @@ describe("Loader placeholder", () => {
 			"svg",
 			"to satisfy",
 			<svg>
-				<use href="#icon-test-loader" />
+				<use href="#icon-orckestra-loader" />
 			</svg>,
 		);
 	});
@@ -50,9 +48,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<Loading {...{ error }} />
-					</ThemeProvider>
+					<Loading {...{ error }} />
 				</Provider>,
 				"when mounted",
 				"to satisfy",
@@ -63,9 +59,7 @@ describe("Loader placeholder", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<ErrorPlaceholder message="This is a test" />
-					</ThemeProvider>
+					<ErrorPlaceholder message="This is a test" />
 				</Provider>,
 			);
 		});
@@ -73,9 +67,9 @@ describe("Loader placeholder", () => {
 });
 
 describe("Loader", () => {
-	let clock, buttonLoader, errorLoader;
+	let clock, componentLoader, errorLoader;
 	beforeEach(() => {
-		buttonLoader = () => import("./Button");
+		componentLoader = () => import("./ColumnWrapper");
 		errorLoader = () => Promise.reject(new Error("This is not right"));
 		clock = sinon.useFakeTimers();
 	});
@@ -85,13 +79,11 @@ describe("Loader", () => {
 	spyOnConsole(["error"]);
 
 	it("loads the component", () => {
-		const Comp = Loader(buttonLoader);
+		const Comp = Loader(componentLoader);
 		const loader = mount(
-			<ThemeProvider theme={{}}>
-				<div>
-					<Comp />
-				</div>
-			</ThemeProvider>,
+			<div>
+				<Comp />
+			</div>,
 		);
 		expect(loader, "to satisfy", <div />);
 		act(() => {
@@ -115,7 +107,7 @@ describe("Loader", () => {
 				loader,
 				"to satisfy",
 				<div>
-					<button />
+					<ColumnWrapper />
 				</div>,
 			).then(() => expect(console.error, "was not called")),
 		);
@@ -131,11 +123,9 @@ describe("Loader", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<div>
-						<Comp />
-					</div>
-				</ThemeProvider>
+				<div>
+					<Comp />
+				</div>
 			</Provider>,
 		);
 		expect(loader, "to satisfy", <div />);
@@ -148,7 +138,7 @@ describe("Loader", () => {
 			"svg",
 			"to satisfy",
 			<svg>
-				<use href="#icon-loading" />
+				<use href="#icon-orckestra-loader" />
 			</svg>,
 		);
 		let load;
@@ -166,11 +156,9 @@ describe("Loader", () => {
 						getState: () => ({}),
 					}}
 				>
-					<ThemeProvider theme={{}}>
-						<div>
-							<ErrorPlaceholder message="This is not right" />
-						</div>
-					</ThemeProvider>
+					<div>
+						<ErrorPlaceholder message="This is not right" />
+					</div>
 				</Provider>,
 			).then(() => expect(console.error, "was called")),
 		);

package/src/components/LoadingIcon.js

@@ -1,19 +1,6 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-const LoadingIcon = withTheme(props => (
-	<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-));
+const LoadingIcon = () => <Placeholder icon="orckestra-loader" animateIcon />;
 
 export default LoadingIcon;

package/src/components/LoadingIcon.test.js

@@ -1,26 +1,8 @@
 import React from "react";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 import LoadingIcon from "./LoadingIcon";
 
 describe("LoadingIcon", () => {
 	it("shows a spinning load icon", () =>
-		expect(
-			<ThemeProvider theme={{}}>
-				<LoadingIcon />
-			</ThemeProvider>,
-			"when mounted",
-			"to satisfy",
-			<Placeholder icon="loading" animate />,
-		));
-
-	it("gets icon from theme", () =>
-		expect(
-			<ThemeProvider theme={{ icons: { loading: "spinner" } }}>
-				<LoadingIcon />
-			</ThemeProvider>,
-			"when mounted",
-			"to satisfy",
-			<Placeholder icon="spinner" animate />,
-		));
+		expect(<LoadingIcon />, "when mounted", "to satisfy", <Placeholder icon="orckestra-loader" animateIcon />));
 });

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -8,7 +8,7 @@ import TableMui from "@material-ui/core/Table";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import { buildHeaderAndRowFromConfig } from "./tableHelpers";
-import Placeholder from "../../Placeholder";
+import Placeholder from "./PredefinedElements/Placeholder";
 import TableInfoBar from "./PredefinedElements/TableInfoBar";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import TableProps from "./TableProps";

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

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const renderMultipleValues = selected => selected?.join(", ");
+
 const selectEmptyValue = "~~#~~";
 
 const Select = ({ options, selectProps, children }) => {
@@ -169,6 +171,7 @@ const Select = ({ options, selectProps, children }) => {
 	const native = selectProps?.get(SelectProps.propNames.native);
 	const onClose = selectProps?.get(SelectProps.propNames.onClose);
 	const inputProps = selectProps?.get(SelectProps.propNames.inputProps);
+	const multiple = selectProps?.get(SelectProps.propNames.multiple);
 	const hasError = !!error;
 
 	if (sortType === sortTypeEnum.numeric) {
@@ -252,6 +255,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),
@@ -275,6 +280,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),

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

@@ -669,4 +669,49 @@ describe("Select Component", () => {
 
 		expect(muiSelect.prop("open"), "to be true");
 	});
+
+	it("Renders Select component with multiple values", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.multiple, true);
+		selectProps.set(SelectProps.propNames.value, ["aValue"]);
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const ChevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					value={["aValue"]}
+					disableUnderline={true}
+					IconComponent={ChevronDown}
+					error={false}
+					multiple={true}
+					renderValue={selected => selected.join(", ")}
+				>
+					<MenuItem key="aValue" value="aValue">
+						<TooltippedTypography children="aLabel" titleValue="aLabel" />
+					</MenuItem>
+					<MenuItem key="anotherValue" value="anotherValue">
+						<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

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

@@ -21,6 +21,7 @@ class SelectProps extends ComponentProps {
 		onClose: "onClose",
 		native: "native",
 		inputProps: "inputProps",
+		multiple: "multiple",
 	};
 
 	static ruleNames = {
@@ -42,6 +43,7 @@ class SelectProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.onClose, null);
 		this.componentProps.set(this.constructor.propNames.native, null);
 		this.componentProps.set(this.constructor.propNames.inputProps, null);
+		this.componentProps.set(this.constructor.propNames.multiple, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.root, null);
 		this.componentClasses.set(this.constructor.ruleNames.paper, null);

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

@@ -15,6 +15,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		expect(SelectProps.propNames, "to have keys", propNames);
@@ -34,6 +35,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		const selectProps = new SelectProps();

package/src/components/MaterialUI/Navigation/DropDownMenu.js

@@ -1,9 +1,9 @@
 import React, { useState, isValidElement, cloneElement } from "react";
+import { FormattedMessage } from "react-intl";
 import { makeStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import Text from "../../Text";
 import DropDownMenuProps, { isDropDownMenuProps } from "./DropDownMenuProps";
 
 const useStyles = makeStyles(theme => ({
@@ -95,7 +95,7 @@ const DropDownMenu = ({ payload, menuItems, children, dropDownMenuProps = new Dr
 						onClick={onMenuItemClick(action, itemContext)}
 						disabled={disabled}
 					>
-						<Text message={title} />
+						{typeof title === "string" ? title : <FormattedMessage {...title} />}
 					</MenuItem>
 				))}
 			</Menu>

package/src/components/MaterialUI/Navigation/DropDownMenu.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Provider } from "react-redux";
 import ReactDOM from "react-dom";
 import sinon from "sinon";
 import { mount } from "enzyme";
@@ -14,7 +13,7 @@ describe("DropDownMenu", () => {
 	let store, menuItems, container;
 	beforeEach(() => {
 		menuItems = [
-			{ title: "asd", action: sinon.spy().named("action"), itemContext: "aContext" },
+			{ title: { id: "asd", defaultMessage: "asd" }, action: sinon.spy().named("action"), itemContext: "aContext" },
 			{ title: "asd2", action: sinon.spy().named("action"), itemContext: "myContext" },
 		];
 		store = {
@@ -73,9 +72,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		ReactDOM.render(
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>,
+			</TestWrapper>,
 			container,
 		);
 
@@ -98,9 +97,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>
+			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);

package/src/components/Navigation/Navigation.test.js

@@ -5,11 +5,6 @@ import Navigation from "./index";
 import TabBar from "../MaterialUI/Navigation/TabBar";
 import { TestWrapper, createMuiTheme } from "./../../utils/testUtils";
 
-jest.mock("./Tab", () => ({
-	__esModule: true,
-	default: require("../../utils/testUtils").PropStruct,
-}));
-
 const TestComp = () => <div />;
 const TestComp1 = () => <div />;
 const TestComp2 = () => <div />;