From 737e7abb16699f51ee71748507d19f8a02b46d91 Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Fri, 7 Feb 2020 17:02:13 -0500 Subject: [PATCH 01/20] Add Variable Modal --- .../components/navigation/more-info-box.js | 24 ++++++++ .../components/variables/constants.js | 48 +++++++++++++++ .../variables/new-variable/new-variable.js | 24 ++++++++ .../variables/new-variable/new-variable.scss | 34 +++++++++++ .../variables/variable-list-modal.js | 46 +++++++++++++++ .../variables/variable-list-modal.scss | 11 ++++ .../variables/variable-list/variable-list.js | 28 +++++++++ .../variable-list/variable-list.scss | 45 ++++++++++++++ .../variable-properties.js | 39 +++++++++++++ .../variable-properties.scss | 58 +++++++++++++++++++ .../variable-properties/variable-values.js | 26 +++++++++ .../variable-properties/variable-values.scss | 35 +++++++++++ 12 files changed, 418 insertions(+) create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/constants.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js index d5e75b1f4a..5ad65fe7e6 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js @@ -6,6 +6,7 @@ import React from 'react' import MoreInfoIcon from '../../assets/more-info-icon' import TriggerListModal from '../triggers/trigger-list-modal' +import VariableListModal from '../variables/variable-list-modal' const { Button, Switch } = Common.components const { ModalUtil } = Common.util @@ -39,6 +40,7 @@ class MoreInfoBox extends React.Component { this.onSave = this.onSave.bind(this) this.showTriggersModal = this.showTriggersModal.bind(this) + this.showVariablesModal = this.showVariablesModal.bind(this) this.closeModal = this.closeModal.bind(this) this.node = React.createRef() @@ -130,6 +132,12 @@ class MoreInfoBox extends React.Component { ModalUtil.show() } + showVariablesModal() { + // Prevent info box from closing when modal is opened + document.removeEventListener('mousedown', this.handleClick, false) + ModalUtil.show() + } + closeModal(modalState) { this.setState(prevState => ({ content: { ...prevState.content, triggers: modalState.triggers }, @@ -195,6 +203,7 @@ class MoreInfoBox extends React.Component { renderInfoBox() { const triggers = this.state.content.triggers + return (
@@ -235,6 +244,21 @@ class MoreInfoBox extends React.Component { ✎ Edit
+
+ + Variables: + {triggers && triggers.length > 0 ? ( + + {triggers + .map(trigger => trigger.type) + .reduce((accum, trigger) => accum + ', ' + trigger)} + + ) : null} + + +
{this.props.hideButtonBar ? null : (
+
+ ) +} + +export default VariableList diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss new file mode 100644 index 0000000000..82171c25be --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss @@ -0,0 +1,45 @@ +@import '~styles/includes'; + +.variable-list { + overflow-y: scroll; + // flex: 1; + width: 12em; + + .single-variable { + background-color: $color-bg; + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + border-right: solid 1px rgba(0, 0, 0, 0.1); + padding: 0.5em; + text-align: left; + padding-left: 1em; + + h4, + p { + padding: 0; + margin: 0; + } + } + + .variable-is-selected { + border-right: none; + color: blue; + } + + .create-variable-button { + margin: 0.5rem; + + .button { + padding: 0.2em 0.5em; + color: $color-action; + background-color: $color-bg; + border-color: $color-action; + border-width: 2px; + height: 2.5em; + + &:hover { + color: $color-bg; + background-color: $color-action; + } + } + } +} diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js new file mode 100644 index 0000000000..1f1e53fb3f --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js @@ -0,0 +1,39 @@ +import './variable-properties.scss' + +import React from 'react' +import Common from 'obojobo-document-engine/src/scripts/common' +import VariableValue from './variable-values' +import { typeList, mapTypeToString } from '../constants' + +const { Button } = Common.components + +const VariableProperties = ({ variable }) => { + return ( +
+
+ + + +
+ +
+ + +
+ + {/* */} +
+ ) +} + +export default VariableProperties diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss new file mode 100644 index 0000000000..0d971d3f43 --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss @@ -0,0 +1,58 @@ +@import '~styles/includes'; + +.variable-properties { + font-size: inherit; + background-color: $color-bg; + padding: 0 1em; + flex: 1; + + .group-item { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: 0.8em 0; + + label { + margin: 0; + width: 4em; + text-align: right; + } + + input { + @include text-input(); + flex: 1; + font-size: inherit; + padding: 0.5em 0.5em; + margin: 0 0.5em; + border: solid 1px rgba(0, 0, 0, 0.1); + } + } + + .select-item { + flex: 1; + display: block; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + + font-size: inherit; + appearance: list-menu; + + border-radius: $dimension-rounded-radius; + background-color: $color-bg; + padding: 0.6em 0.5em; + margin-left: 0.5em; + appearance: none; + border: solid 1px rgba(0, 0, 0, 0.1); + + //stylelint-disable-next-line declaration-colon-newline-after, value-list-comma-newline-after + background-image: linear-gradient(45deg, transparent 50%, gray 50%), + linear-gradient(135deg, gray 50%, transparent 50%); + //stylelint-disable-next-line declaration-colon-newline-after, value-list-comma-newline-after + background-position: calc(100% - 1.5em) 1.1em, calc(100% - 1.1em) 1.1em, + calc(100% - 2.5em) 0.5em; + background-size: 0.4em 0.4em, 0.4em 0.4em, 0.1em 1.5em; + background-repeat: no-repeat; + } +} diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js new file mode 100644 index 0000000000..4f0227ca97 --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js @@ -0,0 +1,26 @@ +import './variable-values.scss' + +import React from 'react' + +const VariableValues = () => { + return ( +
+
+ + +
+
+ + +
+
+ + + to + +
+
+ ) +} + +export default VariableValues diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss new file mode 100644 index 0000000000..d4b2ec8bb3 --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss @@ -0,0 +1,35 @@ +@import '~styles/includes'; + +.variable-values { + font-size: 1em; + border-radius: $dimension-rounded-radius; + border: solid 1px rgba(0, 0, 0, 0.1); + padding: 0.5em; + + .variable-values--group { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: 0.6em; + + label { + margin: 0; + width: 8em; + text-align: left; + } + + span { + margin: 0 0.5em; + } + + input { + @include text-input(); + flex: 1 1 auto; + font-size: inherit; + padding: 0.5em 0; + width: 1em; + border: solid 1px rgba(0, 0, 0, 0.1); + } + } +} From 8c83389ceb5469c547b73b90c132dbd50222ed20 Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Tue, 11 Feb 2020 14:03:38 -0500 Subject: [PATCH 02/20] Add feature to add/delete/duplicate variable --- .../components/navigation/more-info-box.js | 2 +- .../components/triggers/trigger-list-modal.js | 6 +- .../variables/new-variable/new-variable.js | 29 +- .../variables/new-variable/new-variable.scss | 13 +- .../variables/variable-list-modal.js | 70 ++++- .../variables/variable-list/variable-list.js | 10 +- .../variable-list/variable-list.scss | 7 +- .../variable-properties.js | 27 +- .../variable-properties.scss | 66 ++++- .../variable-properties/variable-values.js | 252 ++++++++++++++++-- .../variable-properties/variable-values.scss | 11 +- 11 files changed, 423 insertions(+), 70 deletions(-) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js index 5ad65fe7e6..4a8fcf43e1 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js @@ -140,7 +140,7 @@ class MoreInfoBox extends React.Component { closeModal(modalState) { this.setState(prevState => ({ - content: { ...prevState.content, triggers: modalState.triggers }, + content: { ...prevState.content, ...modalState }, needsUpdate: true })) document.addEventListener('mousedown', this.handleClick, false) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/triggers/trigger-list-modal.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/triggers/trigger-list-modal.js index 344cf51a6a..63cf960969 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/triggers/trigger-list-modal.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/triggers/trigger-list-modal.js @@ -286,7 +286,11 @@ class TriggerListModal extends React.Component { render() { return ( - this.props.onClose(this.state)}> + this.props.onClose({ triggers: this.state.triggers })} + >
{this.state.triggers.map((trigger, triggerIndex) => (
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js index 30437e2315..4d481a0b64 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js @@ -3,20 +3,35 @@ import './new-variable.scss' import React from 'react' import { typeList, mapTypeToString, mapTypeToDescription } from '../constants' -const NewVarible = () => { +const NewVarible = props => { return (
What type of variable do you want to create?
-
- {typeList.map(type => ( -
- {mapTypeToString[type]} -

{mapTypeToDescription[type]}

+
+ {typeList.map((type, index) => ( +
props.onAddVariable(type)} + > + + {mapTypeToString[type]} +
+ + //
props.onAddVariable(type)} + // type="radio" + // > + // {mapTypeToString[type]} + //

{mapTypeToDescription[type]}

+ //
))} -
+
) } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss index 3565ee5b7c..df5279c25e 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss @@ -3,14 +3,15 @@ .new-variable { background: $color-bg; display: inline-block; - padding: 1em; + padding: 0 1em; font-size: 0.9em; overflow-y: scroll; text-align: left; flex: 1; .new-variable--title { - margin: 0.8em auto; + margin: 1em auto; + padding: auto; } .new-variable--type-list { @@ -29,6 +30,14 @@ &:hover { background-color: lighten($color-action, 50%); } + + input[type='checkbox'] { + display: none; + + &:checked + label:before { + background-color: lighten($color-action, 50%); + } + } } } } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js index cd2ffc9420..5f927ed25b 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js @@ -8,35 +8,87 @@ import VariableList from './variable-list/variable-list' import NewVariable from './new-variable/new-variable' const { SimpleDialog } = Common.components.modal -const { ModalUtil } = Common.util const VariableListModal = props => { const [currSelect, setCurrSelect] = useState(0) const [creatingVariable, setCreatingVariable] = useState(false) - - let variables = [] - if (props.content.variables && props.content.variables.variable) { - variables = props.content.variables.variable - } + const [variables, setVariables] = useState(props.content.variables || []) const onClickVarible = index => { setCreatingVariable(false) setCurrSelect(index) } + const onChange = event => { + const { name, value } = event.target + + const updatedVariables = [...variables] + updatedVariables[currSelect][name] = value + setVariables(updatedVariables) + } + + const onAddVariable = type => { + const nameSet = new Set() + for (const variable of variables) { + nameSet.add(variable.name) + } + + let index = 0 + while (nameSet.has('no_name' + (index === 0 ? '' : index))) { + index++ + } + + setVariables([...variables, { type, name: 'no_name' + (index === 0 ? '' : index) }]) + setCurrSelect(variables.length) + setCreatingVariable(false) + } + + const onDeleteVariable = () => { + const updatedVariables = [...variables] + updatedVariables.splice(currSelect, 1) + setVariables(updatedVariables) + setCurrSelect(0) + } + + const onDuplicateVariable = () => { + const nameSet = new Set() + for (const variable of variables) { + nameSet.add(variable.name) + } + + const duplicateVariable = { ...variables[currSelect] } + + let index = 2 + while (nameSet.has(duplicateVariable.name + index)) { + index++ + } + duplicateVariable.name = duplicateVariable.name + index + + setVariables([...variables, duplicateVariable]) + setCurrSelect(variables.length) + setCreatingVariable(false) + } + return ( - ModalUtil.hide()}> + props.onClose({ variables })}>
setCreatingVariable(true)} + onAddVariable={onAddVariable} /> + {creatingVariable ? ( - + ) : ( - + )}
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js index d40b5e703f..c1124eee58 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js @@ -2,10 +2,13 @@ import './variable-list.scss' import React from 'react' import Common from 'obojobo-document-engine/src/scripts/common' +import { mapTypeToString } from '../constants' const { Button } = Common.components -const VariableList = ({ variables, currSelect, onClickVarible, setCreatingVariable }) => { +const VariableList = props => { + const { variables, currSelect, onClickVarible, setCreatingVariable } = props + return (
{variables.map((variable, index) => ( @@ -13,9 +16,12 @@ const VariableList = ({ variables, currSelect, onClickVarible, setCreatingVariab key={variable.name} className={'single-variable' + (index === currSelect ? ' variable-is-selected' : '')} onClick={() => onClickVarible(index)} + tabIndex="1" >

${variable.name}

-

{variable.type}

+ +

{variable.type}

+
))} + +
- {typeList.map(type => (
- {/* */} + + +

+ Duplicate: +

+
) } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss index 0d971d3f43..02c0852024 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss @@ -1,11 +1,16 @@ @import '~styles/includes'; .variable-properties { - font-size: inherit; + font-size: 0.9em; background-color: $color-bg; padding: 0 1em; flex: 1; + overflow-y: scroll; + text-align: left; + .test { + z-index: 100000; + } .group-item { display: flex; justify-content: center; @@ -20,29 +25,38 @@ } input { - @include text-input(); - flex: 1; - font-size: inherit; - padding: 0.5em 0.5em; margin: 0 0.5em; - border: solid 1px rgba(0, 0, 0, 0.1); + } + + select { + margin-left: 0.5em; } } - .select-item { + input { + @include text-input(); + + font-size: 1em; + padding: 0.5em; + width: 1em; + border: solid 1px rgba(0, 0, 0, 0.1); + box-sizing: border-box; flex: 1; - display: block; + } + + select { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; - box-sizing: content-box; + box-sizing: border-box; - font-size: inherit; + flex: 1; + font-size: 1em; appearance: list-menu; + vertical-align: top; border-radius: $dimension-rounded-radius; background-color: $color-bg; padding: 0.6em 0.5em; - margin-left: 0.5em; appearance: none; border: solid 1px rgba(0, 0, 0, 0.1); @@ -55,4 +69,34 @@ background-size: 0.4em 0.4em, 0.4em 0.4em, 0.1em 1.5em; background-repeat: no-repeat; } + + .variable-properties--delete-button { + button { + color: $color-dangerous; + background-color: $color-bg; + border-color: $color-dangerous; + padding: 0.7em; + + &:hover { + color: $color-bg; + background-color: $color-dangerous; + } + } + } + + .variable-properties--duplicate-button { + margin-bottom: 1em; + + button { + color: $color-action; + background-color: $color-bg; + border-color: $color-action; + padding: 0.5em; + + &:hover { + color: $color-bg; + background-color: $color-action; + } + } + } } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js index 4f0227ca97..982cd96516 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js @@ -1,26 +1,240 @@ import './variable-values.scss' import React from 'react' +import { + STATIC_VALUE, + STATIC_LIST, + RANDOM_NUMBER, + RANDOM_LIST, + RANDOM_SEQUENCE, + PICK_ONE, + PICK_LIST +} from '../constants' -const VariableValues = () => { - return ( -
-
- - -
-
- - -
-
- - - to - -
-
- ) +const VariableValues = props => { + const { variable, onChange } = props + + switch (variable.type) { + case STATIC_VALUE: + return ( +
+
+ + +
+
+ ) + + case STATIC_LIST: + return ( +
+
+ + +
+
+ ) + + case RANDOM_NUMBER: + return ( +
+
+ + +
+
+ + +
+
+ + + to + +
+
+ ) + + case RANDOM_LIST: + return ( +
+
+ + + to + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + to + +
+
+ ) + + case RANDOM_SEQUENCE: + return ( +
+
+ + + to + +
+ +
+ + + to + +
+ +
+ + +
+ +
+ + +
+
+ ) + + case PICK_ONE: + return ( +
+
+ + +
+
+ ) + + case PICK_LIST: + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ ) + + default: + return null + } } export default VariableValues diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss index d4b2ec8bb3..8fa75a87c8 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss @@ -20,16 +20,7 @@ } span { - margin: 0 0.5em; - } - - input { - @include text-input(); - flex: 1 1 auto; - font-size: inherit; - padding: 0.5em 0; - width: 1em; - border: solid 1px rgba(0, 0, 0, 0.1); + margin: 0 0.3em; } } } From cdd30a8c00da8262e43fe4a90d8ca155187303eb Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Thu, 13 Feb 2020 17:01:16 -0500 Subject: [PATCH 03/20] Add example text for variable modal --- .../variable-list-modal.test.js.snap | 21 ++ .../variables/variable-list-modal.test.js | 297 ++++++++++++++++++ .../components/navigation/more-info-box.js | 10 +- .../variables/new-variable/new-variable.js | 51 ++- .../variables/new-variable/new-variable.scss | 12 +- .../variables/variable-list-modal.js | 165 ++++++++-- .../variables/variable-list-modal.scss | 56 ++++ .../variables/variable-list/variable-list.js | 30 +- .../variable-list/variable-list.scss | 11 + .../variable-properties.js | 4 + .../variable-properties.scss | 87 ++++- .../variable-properties/variable-values.js | 35 ++- .../variable-properties/variable-values.scss | 4 + 13 files changed, 714 insertions(+), 69 deletions(-) create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap new file mode 100644 index 0000000000..dba4ad943f --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VariableListModal VariableListModal call onAddVariable 1`] = `"

Variables

$mockName1

static-value

$mockName2

static-value

$var

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

static-value

$var2

random-number

$var3

static-list

Alphanumeric plus underscore only

to

Duplicate:

"`; + +exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

static-value

$var2

static-value

New Variable...

What type of variable do you want to create?
"`; + +exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

static-value

$mock

static-value

$var2

static-value

$var3

static-value

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; + +exports[`VariableListModal VariableListModal node 1`] = `"

Variables

$var1

mock

$var2

mock

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

random-number

$var2

static-value

Alphanumeric plus underscore only

to

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js new file mode 100644 index 0000000000..6045d2c2e5 --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js @@ -0,0 +1,297 @@ +import React from 'react' +import { shallow, mount } from 'enzyme' + +import VariableListModal from '../../../../src/scripts/oboeditor/components/variables/variable-list-modal' + +describe('VariableListModal', () => { + test('VariableListModal node', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'mock' + }, + { + name: 'var2', + type: 'mock' + } + ] + } + const component = shallow() + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableListModal handle invalid variables', () => { + const content = { + variables: null + } + const component = shallow() + + expect(component.find('.single-variable').length).toEqual(0) + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal calls onClickVarible', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'static-value' + }, + { + name: 'var2', + type: 'random-number' + }, + { + name: 'var3', + type: 'static-list' + } + ] + } + const component = mount() + + component + .find('.single-variable') + .at(1) + .simulate('click') + + expect( + component + .find('.single-variable') + .at(1) + .hasClass('variable-is-selected') + ).toEqual(true) + + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableListModal clicks on "+ Create Variable" button', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'static-value' + }, + { + name: 'var2', + type: 'static-value' + } + ] + } + const component = mount() + + component + .find('button') + .at(0) + .simulate('click') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal calls "onClose" when click "OK"', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'static-value' + }, + { + name: 'var2', + type: 'static-value' + } + ] + } + const onClose = jest.fn() + const component = mount() + + component + .find('button') + .at(3) + .simulate('click') + + expect(onClose).toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal duplicates variable correct', () => { + const content = { + variables: [ + { + name: 'var', + type: 'static-value' + }, + { + name: 'mock', + type: 'static-value' + } + ] + } + const component = mount() + + // Click duplicate button + component + .find('button') + .at(2) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(3) + // Duplicate element is selected + expect( + component + .find('.single-variable') + .at(2) + .hasClass('variable-is-selected') + ).toEqual(true) + + expect( + component + .find('.single-variable') + .at(2) + .html() + ).toMatchInlineSnapshot( + `"

$var2

static-value

"` + ) + + // Click duplicate button + component + .find('button') + .at(2) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(4) + // Duplicate element is selected + expect( + component + .find('.single-variable') + .at(3) + .html() + ).toMatchInlineSnapshot( + `"

$var3

static-value

"` + ) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal calls onChange', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'static-value' + }, + { + name: 'var2', + type: 'static-value' + } + ] + } + const component = mount() + + // Simulate input changes + component + .find('.input-item') + .at(0) + .simulate('change', { target: { name: 'name', value: 'mockNewName' } }) + + expect(content.variables[0].name).toEqual('mockNewName') + expect(component.html()).toMatchSnapshot() + }) + + test('onChange resets properties if type is changed', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'static-value', + value: '4' + }, + { + name: 'var2', + type: 'static-value' + } + ] + } + const component = mount() + + // Simulate input changes + component + .find('.input-item') + .at(0) + .simulate('change', { target: { name: 'type', value: 'random-number' } }) + + expect(content.variables[0].type).toEqual('random-number') + expect(content.variables[0].value).toBeUndefined() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal call onAddVariable', () => { + const content = { + variables: [ + { + name: 'mockName1', + type: 'static-value' + }, + { + name: 'mockName2', + type: 'static-value' + } + ] + } + const component = mount() + + // Click create new variable and select a type + component + .find('button') + .at(0) + .simulate('click') + component + .find('.new-variable--type-list--single-item') + .at(0) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(3) + + // Click create new variable and select a type + component + .find('button') + .at(0) + .simulate('click') + component + .find('.new-variable--type-list--single-item') + .at(0) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(4) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableListModal call onDeleteVariable', () => { + global.confirm = () => true + + const content = { + variables: [ + { + name: 'mockName1', + type: 'static-value' + }, + { + name: 'mockName2', + type: 'static-value' + } + ] + } + const component = mount() + + // Click create new variable and select a type + component + .find('button') + .at(1) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(1) + expect(component.html()).toMatchSnapshot() + }) +}) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js index 4a8fcf43e1..13dfe4ac4f 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/navigation/more-info-box.js @@ -202,7 +202,7 @@ class MoreInfoBox extends React.Component { } renderInfoBox() { - const triggers = this.state.content.triggers + const { triggers, variables } = this.state.content return (
@@ -247,12 +247,8 @@ class MoreInfoBox extends React.Component {
Variables: - {triggers && triggers.length > 0 ? ( - - {triggers - .map(trigger => trigger.type) - .reduce((accum, trigger) => accum + ', ' + trigger)} - + {Array.isArray(variables) ? ( + {variables.map(variable => '$' + variable.name).join(', ')} ) : null} + )} +
{creatingVariable ? ( diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss index 9d3bbdd322..e9338e6b79 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss @@ -8,4 +8,60 @@ border-radius: $dimension-rounded-radius; border: solid 1px rgba(0, 0, 0, 0.1); display: flex; + + .variable-list { + $variable-selected: #285aa4; + + overflow-y: scroll; + width: 12em; + + .single-variable { + background-color: $color-bg; + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + border-right: solid 1px rgba(0, 0, 0, 0.1); + padding: 0.5em; + text-align: left; + padding-left: 1em; + + h4, + p { + padding: 0; + margin: 0; + } + } + + .variable-holder { + background-color: $color-bg; + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + border-right: solid 1px rgba(0, 0, 0, 0.1); + padding: 0.2em 0; + text-align: left; + padding-left: 1em; + color: rgba(0, 0, 0, 0.5); + border-right: none; + } + + .variable-is-selected { + border-right: none; + color: $variable-selected; + } + + .create-variable-button { + margin: 0.5rem; + + .button { + padding: 0.2em 0.5em; + color: $color-action; + background-color: $color-bg; + border-color: $color-action; + border-width: 1px; + height: 2.5em; + + &:hover { + color: $color-bg; + background-color: $color-action; + } + } + } + } } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js index c1124eee58..5fb46d8295 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.js @@ -2,21 +2,31 @@ import './variable-list.scss' import React from 'react' import Common from 'obojobo-document-engine/src/scripts/common' -import { mapTypeToString } from '../constants' const { Button } = Common.components const VariableList = props => { - const { variables, currSelect, onClickVarible, setCreatingVariable } = props + const { + firstRef, + variables, + currSelect, + onClickVarible, + creatingVariable, + setCreatingVariable + } = props return (
{variables.map((variable, index) => (
onClickVarible(index)} - tabIndex="1" + tabIndex="0" + ref={index === 0 ? firstRef : null} >

${variable.name}

@@ -24,9 +34,15 @@ const VariableList = props => {
))} - + {!creatingVariable ? ( + + ) : ( +
+

New Variable...

+
+ )}
) } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss index 2772db5526..8fca12498d 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list/variable-list.scss @@ -21,6 +21,17 @@ } } + .variable-holder { + background-color: $color-bg; + border-bottom: solid 1px rgba(0, 0, 0, 0.1); + border-right: solid 1px rgba(0, 0, 0, 0.1); + padding: 0.2em 0; + text-align: left; + padding-left: 1em; + color: rgba(0, 0, 0, 0.5); + border-right: none; + } + .variable-is-selected { border-right: none; color: $variable-selected; diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js index de1691f619..ffac6547b8 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js @@ -9,6 +9,7 @@ const { Button } = Common.components const VariableProperties = props => { const { variable } = props + if (!variable) return null const showDeleteModal = () => { if (confirm('Are you sure you want to delete this variable?')) { @@ -23,6 +24,9 @@ const VariableProperties = props => { Name: +
+

Alphanumeric plus underscore only

+
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss index 02c0852024..fdc10926ff 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.scss @@ -8,9 +8,6 @@ overflow-y: scroll; text-align: left; - .test { - z-index: 100000; - } .group-item { display: flex; justify-content: center; @@ -99,4 +96,88 @@ } } } + + .help-tip { + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border-radius: 50%; + width: 24px; + height: 24px; + font-size: 14px; + line-height: 26px; + cursor: default; + margin-right: 1em; + + &::before { + content: '?'; + font-weight: bold; + color: $color-action; + } + + &:hover p { + display: block; + transform-origin: 100% 0%; + + -webkit-animation: fadeIn 0.3s ease-in-out; + animation: fadeIn 0.3s ease-in-out; + } + + p { + display: none; + font-size: 1em; + padding: 0.7em; + position: relative; + width: 17em; + left: -16.5em; + + background-color: #1e2021; + color: #fff; + + border-radius: 0.1em; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); + + &::before { + position: absolute; + content: ''; + width: 0; + height: 0; + border: 6px solid transparent; + border-bottom-color: #1e2021; + right: 10px; + top: -12px; + } + + &::after { + width: 100%; + height: 40px; + content: ''; + position: absolute; + top: -40px; + left: 0; + } + } + } + + /* CSS animation */ + + @-webkit-keyframes fadeIn { + 0% { + opacity: 0; + transform: scale(0.6); + } + + 100% { + opacity: 100%; + transform: scale(1); + } + } + + @keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 100%; + } + } } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js index 982cd96516..58711c1c57 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.js @@ -32,6 +32,9 @@ const VariableValues = props => {
+

+ {"Enter values, separating each value with a comma (eg. '1, 2, 3')"} +

) @@ -99,7 +102,8 @@ const VariableValues = props => {
@@ -161,10 +165,22 @@ const VariableValues = props => {
- - - to - + + +
+
+ +
@@ -192,6 +208,9 @@ const VariableValues = props => {
+

+ {"Enter values, separating each value with a comma (eg. '1, 2, 3')"} +

) @@ -202,6 +221,9 @@ const VariableValues = props => { +

+ {"Enter values, separating each value with a comma (eg. '1, 2, 3')"} +

{
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss index 8fa75a87c8..33265e9521 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss @@ -6,6 +6,10 @@ border: solid 1px rgba(0, 0, 0, 0.1); padding: 0.5em; + .variable-values--example-text { + margin: 0.6em; + color: rgba(0, 0, 0, 0.6); + } .variable-values--group { display: flex; justify-content: center; From 5b2919e71f4a9cafadb29fcbec2326c4c28c925e Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Tue, 18 Feb 2020 16:33:08 -0500 Subject: [PATCH 04/20] Add unit test for variable-property and variable-value --- .../__snapshots__/more-info-box.test.js.snap | 24 +- .../__snapshots__/variable-block.test.js.snap | 31 ++ .../variable-list-modal.test.js.snap | 20 +- .../variables/variable-block.test.js | 337 ++++++++++++++ .../variables/variable-list-modal.test.js | 27 +- .../variable-property.test.js.snap | 9 + .../__snapshots__/variable-value.test.js.snap | 33 ++ .../variable-property.test.js | 85 ++++ .../variable-property/variable-value.test.js | 423 ++++++++++++++++++ .../components/variables/variable-block.js | 94 ++++ .../variables/variable-list-modal.js | 104 +---- .../variable-property.js} | 11 +- .../variable-property.scss} | 0 .../variable-value.js} | 109 ++++- .../variable-value.scss} | 0 15 files changed, 1173 insertions(+), 134 deletions(-) create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js create mode 100644 packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js rename packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/{variable-properties/variable-properties.js => variable-property/variable-property.js} (87%) rename packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/{variable-properties/variable-properties.scss => variable-property/variable-property.scss} (100%) rename packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/{variable-properties/variable-values.js => variable-property/variable-value.js} (73%) rename packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/{variable-properties/variable-values.scss => variable-property/variable-value.scss} (100%) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap index f077ec221a..578775d852 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MoreInfoBox More Info Box edits values 1`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 1`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box edits values 2`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 2`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box edits values 3`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 3`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box edits values 4`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 4`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box edits values 5`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 5`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box edits values 6`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box edits values 6`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; exports[`MoreInfoBox More Info Box handles clicks 1`] = `"
"`; @@ -20,18 +20,18 @@ exports[`MoreInfoBox More Info Box handles clicks 3`] = `"
"`; -exports[`MoreInfoBox More Info Box opens and closes 1`] = `"
Triggers:
"`; +exports[`MoreInfoBox More Info Box opens and closes 1`] = `"
Triggers:
Variables:
"`; exports[`MoreInfoBox More Info Box opens and closes 2`] = `"
"`; exports[`MoreInfoBox More Info Box renders properly 1`] = `"
"`; -exports[`MoreInfoBox More Info Box tries to save with error 1`] = `"
Triggers:

A simple Error

"`; +exports[`MoreInfoBox More Info Box tries to save with error 1`] = `"
Triggers:
Variables:

A simple Error

"`; -exports[`MoreInfoBox More Info Box with contentDescriptions 1`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
"`; +exports[`MoreInfoBox More Info Box with contentDescriptions 1`] = `"
Mock Toggle
Mock Abstract Toggle
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box with no button bar 1`] = `"
Triggers:
"`; +exports[`MoreInfoBox More Info Box with no button bar 1`] = `"
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box with no move buttons 1`] = `"
Triggers:
"`; +exports[`MoreInfoBox More Info Box with no move buttons 1`] = `"
Triggers:
Variables:
"`; -exports[`MoreInfoBox More Info Box with triggers 1`] = `"
Triggers:mockTrigger, mockSecondTrigger
"`; +exports[`MoreInfoBox More Info Box with triggers 1`] = `"
Triggers:mockTrigger, mockSecondTrigger
Variables:
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap new file mode 100644 index 0000000000..d547731248 --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VariableBlock VariableBlock component is selected" 1`] = `"

$mock_var

3
"`; + +exports[`VariableBlock VariableBlock with type "pick-list" 1`] = `"

$g

5-40 items from [33, 3, 4, 55, 23, 444]
"`; + +exports[`VariableBlock VariableBlock with type "pick-list" with no default value 1`] = `"

$g

"`; + +exports[`VariableBlock VariableBlock with type "pick-one" 1`] = `"

$f

Pick from [3, 4, 5, 3, 5]
"`; + +exports[`VariableBlock VariableBlock with type "pick-one" with no default value 1`] = `"

$f

"`; + +exports[`VariableBlock VariableBlock with type "random-list" 1`] = `"

$d

Random list (3-5 items of 3-10)
"`; + +exports[`VariableBlock VariableBlock with type "random-list" with no default value 1`] = `"

$d

Random list (- items of -)
"`; + +exports[`VariableBlock VariableBlock with type "random-number" 1`] = `"

$b

Random number (3-10)
"`; + +exports[`VariableBlock VariableBlock with type "random-number" with no default value 1`] = `"

$b

Random number (-)
"`; + +exports[`VariableBlock VariableBlock with type "random-sequence" 1`] = `"

$e

Random seq (3-10 items starting from 1)
"`; + +exports[`VariableBlock VariableBlock with type "random-sequence" with no default value 1`] = `"

$e

Random seq (- items starting from )
"`; + +exports[`VariableBlock VariableBlock with type "static-list" 1`] = `"

$c

[4, 5, 6]
"`; + +exports[`VariableBlock VariableBlock with type "static-list" with no default value 1`] = `"

$c

"`; + +exports[`VariableBlock VariableBlock with type "static-value" 1`] = `"

$mock_var

3
"`; + +exports[`VariableBlock VariableBlock with type "static-value" and no default value 1`] = `"

$mock_var

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap index dba4ad943f..85f07d444a 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap @@ -1,21 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableListModal VariableListModal call onAddVariable 1`] = `"

Variables

$mockName1

static-value

$mockName2

static-value

$var

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal call onAddVariable 1`] = `"

Variables

$mockName1

$mockName2

$var

$var2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

static-value

$var2

static-value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

$var2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

static-value

$var2

random-number

$var3

static-list

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

$var2

Random number (-)

$var3

Alphanumeric plus underscore only

to

Duplicate:

"`; -exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

static-value

$var2

static-value

New Variable...

What type of variable do you want to create?
"`; +exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

$var2

New Variable...

What type of variable do you want to create?
"`; -exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

static-value

$mock

static-value

$var2

static-value

$var3

static-value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

$mock

$var2

$var3

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; -exports[`VariableListModal VariableListModal node 1`] = `"

Variables

$var1

mock

$var2

mock

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal node 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

random-number

$var2

static-value

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

Random number (-)

$var2

Alphanumeric plus underscore only

to

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js new file mode 100644 index 0000000000..825f313f1c --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js @@ -0,0 +1,337 @@ +import React from 'react' +import { shallow } from 'enzyme' + +import VariableBlock from '../../../../src/scripts/oboeditor/components/variables/variable-block' + +describe('VariableBlock', () => { + test('VariableBlock component is selected"', () => { + const variable = { + name: 'mock_var', + type: 'static-value', + value: '3' + } + + const component = shallow( + + ) + + expect(component.find('.single-variable').hasClass('variable-is-selected')).toEqual(true) + + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "static-value"', () => { + const variable = { + name: 'mock_var', + type: 'static-value', + value: '3' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "static-value" and no default value', () => { + const variable = { + name: 'mock_var', + type: 'static-value' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-number"', () => { + const variable = { + name: 'b', + type: 'random-number', + start: '9', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '4', + decimalPlacesMin: '4' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-number" with no default value', () => { + const variable = { + name: 'b', + type: 'random-number' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "static-list"', () => { + const variable = { + name: 'c', + type: 'static-list', + value: '4, 5, 6' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "static-list" with no default value', () => { + const variable = { + name: 'c', + type: 'static-list' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-list"', () => { + const variable = { + name: 'd', + type: 'random-list', + unique: 'false', + sizeMax: '5', + sizeMin: '3', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '1', + decimalPlacesMin: '1' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-list" with no default value', () => { + const variable = { + name: 'd', + type: 'random-list' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-sequence"', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMax: '10', + sizeMin: '3', + valueMax: '100', + valueMin: '1', + seriesType: 'geometric' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-sequence" with no default value', () => { + const variable = { + name: 'e', + type: 'random-sequence' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "pick-one"', () => { + const variable = { + name: 'f', + type: 'pick-one', + value: '3, 4, 5, 3, 5' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "pick-one" with no default value', () => { + const variable = { + name: 'f', + type: 'pick-one' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "pick-list"', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: 'false', + valueMax: '40', + valueMin: '5' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "pick-list" with no default value', () => { + let variable = { + name: 'g', + type: 'pick-list' + } + + let component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + + variable = { + name: 'g', + type: 'pick-list', + value: '3' + } + + component = shallow( + + ) + }) +}) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js index 6045d2c2e5..4061e47ad2 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js @@ -22,6 +22,29 @@ describe('VariableListModal', () => { expect(tree).toMatchSnapshot() }) + test('VariableListModal focus on first-tab when tab', () => { + const content = { + variables: [ + { + name: 'var1', + type: 'mock' + }, + { + name: 'var2', + type: 'mock' + } + ] + } + const component = mount() + component + .find('.first-tab') + .at(0) + .simulate('focus') + + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + test('VariableListModal handle invalid variables', () => { const content = { variables: null @@ -151,7 +174,7 @@ describe('VariableListModal', () => { .at(2) .html() ).toMatchInlineSnapshot( - `"

$var2

static-value

"` + `"

$var2

"` ) // Click duplicate button @@ -168,7 +191,7 @@ describe('VariableListModal', () => { .at(3) .html() ).toMatchInlineSnapshot( - `"

$var3

static-value

"` + `"

$var3

"` ) expect(component.html()).toMatchSnapshot() diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap new file mode 100644 index 0000000000..3ecb1ca56a --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Variable Properties VariableProperties calls onChange when input changes 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`Variable Properties VariableProperties clicks "delete" will call "onDeleteVariable" 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`Variable Properties VariableProperties does not call "onDeleteVariable" when user cancels 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`Variable Properties VariableProperties node 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap new file mode 100644 index 0000000000..1a0e43daab --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VariableValue VariableValue 1`] = `"
"`; + +exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component type "pick-one" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component type "pick-one" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; + +exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
to
to
"`; + +exports[`VariableValue VariableValue component type "random-number" 1`] = `"
to
"`; + +exports[`VariableValue VariableValue component type "random-number" without default value 1`] = `"
to
"`; + +exports[`VariableValue VariableValue component type "random-sequence" 1`] = `"
to
"`; + +exports[`VariableValue VariableValue component type "random-sequence" without default value 1`] = `"
to
"`; + +exports[`VariableValue VariableValue component type "static-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component type "static-value" 1`] = `"
"`; + +exports[`VariableValue VariableValue component type "static-value" without default value 1`] = `"
"`; + +exports[`VariableValue VariableValue component type "static-value" without default value 2`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; + +exports[`VariableValue VariableValue component without valid type 1`] = `null`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js new file mode 100644 index 0000000000..989666eb60 --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js @@ -0,0 +1,85 @@ +import React from 'react' +import { shallow, mount } from 'enzyme' + +import VariableProperties from '../../../../../src/scripts/oboeditor/components/variables/variable-property/variable-property' + +describe('Variable Properties', () => { + test('VariableProperties node', () => { + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const onDeleteVariable = jest.fn() + const component = shallow( + + ) + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties clicks "delete" will call "onDeleteVariable"', () => { + global.confirm = () => true + + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const onDeleteVariable = jest.fn() + const component = mount( + + ) + + component + .find('button') + .at(0) + .simulate('click') + + expect(onDeleteVariable).toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties does not call "onDeleteVariable" when user cancels', () => { + global.confirm = () => false + + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const onDeleteVariable = jest.fn() + const component = mount( + + ) + + component + .find('button') + .at(0) + .simulate('click') + + expect(onDeleteVariable).not.toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties calls onChange when input changes', () => { + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const onChange = jest.fn() + const component = mount() + + component + .find('input') + .at(0) + .simulate('change', { target: { value: '333' } }) + + expect(onChange).toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) +}) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js new file mode 100644 index 0000000000..1755509533 --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js @@ -0,0 +1,423 @@ +import React from 'react' +import { shallow } from 'enzyme' + +import VariableValue from '../../../../../src/scripts/oboeditor/components/variables/variable-property/variable-value' + +describe('VariableValue', () => { + test('VariableValue', () => { + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const component = shallow() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component without valid type', () => { + const variable = { + name: 'g', + type: 'mock-type' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.length).toEqual(0) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "static-value"', () => { + const variable = { + name: 'static_var', + type: 'static-value', + value: '3' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('3') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "static-value" without default value', () => { + const variable = { + name: 'static_var', + type: 'static-value' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "static-list"', () => { + const variable = { + name: 'c', + type: 'static-list', + value: '4, 5, 6' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('4, 5, 6') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "static-value" without default value', () => { + const variable = { + name: 'c', + type: 'static-list' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-number"', () => { + const variable = { + name: 'b', + type: 'random-number', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '4', + decimalPlacesMin: '4' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('3') + expect(inputs.at(1).props().value).toEqual('10') + expect(inputs.at(2).props().value).toEqual('4') + expect(inputs.at(3).props().value).toEqual('4') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-number" without default value', () => { + const variable = { + name: 'b', + type: 'random-number' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + expect(inputs.at(1).props().value).toEqual('') + expect(inputs.at(2).props().value).toEqual('') + expect(inputs.at(3).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-list"', () => { + const variable = { + name: 'd', + type: 'random-list', + unique: true, + sizeMax: '5', + sizeMin: '3', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '1', + decimalPlacesMin: '1' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual(variable.sizeMin) + expect(inputs.at(1).props().value).toEqual(variable.sizeMax) + expect(inputs.at(3).props().value).toEqual(variable.valueMin) + expect(inputs.at(4).props().value).toEqual(variable.valueMax) + expect(inputs.at(5).props().value).toEqual(variable.decimalPlacesMin) + expect(inputs.at(6).props().value).toEqual(variable.decimalPlacesMax) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-list" without default value', () => { + const variable = { + name: 'd', + type: 'random-list' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + expect(inputs.at(1).props().value).toEqual('') + expect(inputs.at(3).props().value).toEqual('') + expect(inputs.at(4).props().value).toEqual('') + expect(inputs.at(5).props().value).toEqual('') + expect(inputs.at(6).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-sequence"', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMax: '10', + sizeMin: '3', + valueMax: '100', + valueMin: '1', + seriesType: 'geometric' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual(variable.sizeMin) + expect(inputs.at(1).props().value).toEqual(variable.sizeMax) + expect(inputs.at(2).props().value).toEqual(variable.valueMin) + expect(inputs.at(3).props().value).toEqual(variable.valueMax) + expect(inputs.at(4).props().value).toEqual(variable.step) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "random-sequence" without default value', () => { + const variable = { + name: 'e', + type: 'random-sequence' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + expect(inputs.at(1).props().value).toEqual('') + expect(inputs.at(2).props().value).toEqual('') + expect(inputs.at(3).props().value).toEqual('') + expect(inputs.at(4).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "pick-one"', () => { + const variable = { + name: 'f', + type: 'pick-one', + value: '3, 4, 5, 3, 5' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual(variable.value) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "pick-one" without default value', () => { + const variable = { + name: 'f', + type: 'pick-one' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "pick-list"', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: false, + valueMax: '40', + valueMin: '5' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual(variable.value) + expect(inputs.at(1).props().value).toEqual(variable.valueMin) + expect(inputs.at(2).props().value).toEqual(variable.valueMax) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableValue component type "pick-list" without default value', () => { + const variable = { + name: 'g', + type: 'pick-list' + } + + const component = shallow() + + const inputs = component.find('input') + expect(inputs.at(0).props().value).toEqual('') + expect(inputs.at(1).props().value).toEqual('') + expect(inputs.at(2).props().value).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('onChangeMin (valueMin, valueMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + const variable = { + name: 'g', + type: 'random-number', + valueMax: '5', + valueMin: '5' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(0).simulate('change', { target: { name: 'valueMin', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMin', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMax', value: '10' } }) + }) + + test('onChangeMin (decimalPlacesMin, decimalPlacesMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + const variable = { + name: 'b', + type: 'random-number', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '4', + decimalPlacesMin: '4' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(2).simulate('change', { target: { name: 'decimalPlacesMin', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMin', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMax', value: '10' } }) + }) + + test('onChangeMin (sizeMin, sizeMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMax: '3', + sizeMin: '3', + valueMax: '100', + valueMin: '1', + seriesType: 'geometric' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '0' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '0' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '0' } }) + + inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '7' } }) + }) + + test('onChangeMin - if second value does not exist, it should match the first', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMin: '3', + valueMax: '100', + valueMin: '1', + seriesType: 'geometric' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '7' } }) + }) + + test('onChangeMax (valueMin, valueMax) - when both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + const variable = { + name: 'g', + type: 'random-number', + valueMax: '15', + valueMin: '15' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(1).simulate('change', { target: { name: 'sizeMax', value: '40' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '40' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '40' } }) + + inputs.at(1).simulate('change', { target: { name: 'valueMax', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMin', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMax', value: '1' } }) + }) + + test('onChangeMax (decimalPlacesMin, decimalPlacesMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + const variable = { + name: 'b', + type: 'random-number', + decimalPlacesMax: '4', + decimalPlacesMin: '4' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '30' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '30' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '30' } }) + + inputs.at(3).simulate('change', { target: { name: 'decimalPlacesMax', value: '2' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMax', value: '2' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMin', value: '2' } }) + }) + + test('onChangeMax (sizeMin, sizeMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + const variable = { + name: 'e', + type: 'random-sequence', + sizeMax: '3', + sizeMin: '3' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '10' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '10' } }) + + inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '' } }) + }) +}) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js new file mode 100644 index 0000000000..8f8768862a --- /dev/null +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js @@ -0,0 +1,94 @@ +import React from 'react' +import { + STATIC_VALUE, + RANDOM_NUMBER, + STATIC_LIST, + RANDOM_LIST, + RANDOM_SEQUENCE, + PICK_ONE, + PICK_LIST +} from './constants' + +const VariableBlock = props => { + const { variable, isSelected, creatingVariable, firstRef, onClick } = props + + return ( +
+

${variable.name}

+ {(() => { + switch (variable.type) { + case STATIC_VALUE: + return ( + + {variable.value || ''} + + ) + case RANDOM_NUMBER: + return ( + + Random number{' '} + + ({variable.valueMin || ''}-{variable.valueMax || ''}) + + + ) + case STATIC_LIST: + if (!variable.value) return null + return ( + + {'[' + variable.value.split(',').join(', ') + ']'} + + ) + case RANDOM_LIST: + return ( + + Random list + + {` (${variable.sizeMin || ''}-${variable.sizeMax || + ''} items of ${variable.valueMin || ''}-${variable.valueMax || ''})`} + + + ) + case RANDOM_SEQUENCE: + return ( + + Random seq + + {` (${variable.sizeMin || ''}-${variable.sizeMax || + ''} items starting from ${variable.valueMin || ''})`} + + + ) + case PICK_ONE: + if (!variable.value) return null + return ( + + {'Pick from '} + {'[' + variable.value.split(',').join(', ') + ']'} + + ) + case PICK_LIST: + if (!variable.value) return null + + return ( + + {variable.valueMin || ''}-{variable.valueMax || ''} item + {variable.value.split(',').length >= 2 ? 's' : ''} from{' '} + {'[' + variable.value.split(',').join(', ') + ']'} + + ) + } + })()} +
+ ) +} + +export default VariableBlock diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js index 2830c8642e..dc7fcfa7a6 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js @@ -3,17 +3,10 @@ import './variable-list-modal.scss' import React from 'react' import Common from 'obojobo-document-engine/src/scripts/common' -import VariableProperties from './variable-properties/variable-properties' +import VariableProperties from './variable-property/variable-property' import NewVariable from './new-variable/new-variable' -import { - STATIC_VALUE, - RANDOM_NUMBER, - STATIC_LIST, - RANDOM_LIST, - RANDOM_SEQUENCE, - PICK_ONE, - PICK_LIST -} from './constants' +import VariableBlock from './variable-block' +import { RANDOM_NUMBER, RANDOM_LIST } from './constants' const { Button } = Common.components const { SimpleDialog } = Common.components.modal @@ -59,7 +52,12 @@ const VariableListModal = props => { index++ } - const updatedVariables = [...variables, { type, name: 'var' + (index === 1 ? '' : index) }] + const newVariable = { type, name: 'var' + (index === 1 ? '' : index) } + if (type === RANDOM_NUMBER || type === RANDOM_LIST) { + newVariable['decimalPlacesMin'] = 0 + newVariable['decimalPlacesMax'] = 0 + } + const updatedVariables = [...variables, newVariable] setVariables(updatedVariables) setCurrSelect(variables.length) setCreatingVariable(false) @@ -113,83 +111,17 @@ const VariableListModal = props => {
{variables.map((variable, index) => ( -
onClickVarible(index)} - tabIndex="0" - ref={index === 0 ? firstRef : null} - > -

${variable.name}

- {(() => { - switch (variable.type) { - case STATIC_VALUE: - return ( - - {variable.value || ''} - - ) - case RANDOM_NUMBER: - return ( - - Random number{' '} - - ({variable.valueMin || ''}-{variable.valueMax || ''}) - - - ) - case STATIC_LIST: - if (!variable.value) return null - return ( - - {'[' + variable.value.split(',').join(', ') + ']'} - - ) - case RANDOM_LIST: - return ( - - Random list - - {` (${variable.sizeMin || ''}-${variable.valueMax || - ''} items of ${variable.decimalPlacesMin || - ''}-${variable.decimalPlacesMax || ''})`} - - - ) - case RANDOM_SEQUENCE: - return ( - - Random seq - - {` (${variable.sizeMin || ''}-${variable.sizeMax || - ''} items starting from ${variable.valueMin || ''})`} - - - ) - case PICK_ONE: - if (!variable.value) return null - return ( - - {'Pick from '} - {'[' + variable.value.split(',').join(', ') + ']'} - - ) - case PICK_LIST: - if (!variable.value) return null - - return ( - - {variable.valueMin || ''}-{variable.valueMax || ''} item - {variable.value.split(',') >= 1 ? 's' : ''} from{' '} - {'[' + variable.value.split(',').join(', ') + ']'} - - ) - } - })()} -
+ /> ))} {creatingVariable ? ( diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js similarity index 87% rename from packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js rename to packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js index ffac6547b8..8ac222fe21 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-properties.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js @@ -1,8 +1,8 @@ -import './variable-properties.scss' +import './variable-property.scss' import React from 'react' import Common from 'obojobo-document-engine/src/scripts/common' -import VariableValue from './variable-values' +import VariableValue from './variable-value' import { typeList, mapTypeToString } from '../constants' const { Button } = Common.components @@ -36,7 +36,12 @@ const VariableProperties = props => { - {typeList.map(type => (
@@ -87,14 +152,14 @@ const VariableValues = props => { type="number" name="sizeMin" value={variable.sizeMin || ''} - onChange={onChange} + onChange={onChangeMin} /> to
@@ -113,7 +178,7 @@ const VariableValues = props => { type="number" name="valueMin" value={variable.valueMin || ''} - onChange={onChange} + onChange={onChangeMin} />
@@ -122,7 +187,7 @@ const VariableValues = props => { type="number" name="valueMax" value={variable.valueMax || ''} - onChange={onChange} + onChange={onChangeMax} />
@@ -131,14 +196,14 @@ const VariableValues = props => { type="number" name="decimalPlacesMin" value={variable.decimalPlacesMin || ''} - onChange={onChange} + onChange={onChangeMin} /> to
@@ -153,14 +218,14 @@ const VariableValues = props => { type="number" name="sizeMin" value={variable.sizeMin || ''} - onChange={onChange} + onChange={onChangeMin} /> to @@ -170,7 +235,7 @@ const VariableValues = props => { type="number" name="valueMin" value={variable.valueMin || ''} - onChange={onChange} + onChange={onChangeMin} />
@@ -179,7 +244,7 @@ const VariableValues = props => { type="number" name="valueMax" value={variable.valueMax || ''} - onChange={onChange} + onChange={onChangeMax} />
@@ -230,7 +295,7 @@ const VariableValues = props => { type="number" name="valueMin" value={variable.valueMin || ''} - onChange={onChange} + onChange={onChangeMin} />
@@ -239,7 +304,7 @@ const VariableValues = props => { type="number" name="valueMax" value={variable.valueMax || ''} - onChange={onChange} + onChange={onChangeMax} />
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.scss similarity index 100% rename from packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-properties/variable-values.scss rename to packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.scss From 6a00df940d9f883597cdfbce6d2c42c152d4f65e Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Thu, 20 Feb 2020 16:59:24 -0500 Subject: [PATCH 05/20] [WIP] more unit test for variable modal --- .../__snapshots__/more-info-box.test.js.snap | 2 + .../navigation/more-info-box.test.js | 51 ++++++++- .../__snapshots__/variable-block.test.js.snap | 30 ++--- .../variable-list-modal.test.js.snap | 18 +-- .../__snapshots__/new-variable.test.js.snap | 15 +++ .../new-variable/new-variable.test.js | 107 ++++++++++++++++++ .../variables/variable-block.test.js | 6 +- .../variables/variable-list-modal.test.js | 60 +++++++++- .../__snapshots__/variable-value.test.js.snap | 6 +- .../variable-property.test.js | 10 +- .../variable-property/variable-value.test.js | 54 ++++++++- .../variables/new-variable/new-variable.js | 40 +++++-- .../variables/new-variable/new-variable.scss | 3 +- .../components/variables/variable-block.js | 62 ++++++---- .../variables/variable-list-modal.js | 9 +- .../variables/variable-list-modal.scss | 7 +- .../variable-property/variable-property.js | 1 + .../variable-property/variable-value.js | 24 ++-- 18 files changed, 411 insertions(+), 94 deletions(-) create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap create mode 100644 packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap index 578775d852..b440d5a134 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/__snapshots__/more-info-box.test.js.snap @@ -35,3 +35,5 @@ exports[`MoreInfoBox More Info Box with no button bar 1`] = `"
Triggers:
Variables:
"`; exports[`MoreInfoBox More Info Box with triggers 1`] = `"
Triggers:mockTrigger, mockSecondTrigger
Variables:
"`; + +exports[`MoreInfoBox More Info Box with variables 1`] = `"
Triggers:
Variables:$mockVar1, $mockVar2
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/more-info-box.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/more-info-box.test.js index 8ad56b0365..348a8f9c64 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/more-info-box.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/navigation/more-info-box.test.js @@ -99,6 +99,28 @@ describe('MoreInfoBox', () => { expect(component.html()).toMatchSnapshot() }) + test('More Info Box with variables', () => { + const component = mount( + + ) + + component + .find('button') + .at(0) + .simulate('click') + + expect(component.html()).toMatchSnapshot() + }) + test('More Info Box with contentDescriptions', () => { const component = mount( { component .find('button') - .at(5) + .at(6) .simulate('click') component .find('button') - .at(6) + .at(7) .simulate('click') expect(moveNode).toHaveBeenCalledTimes(2) @@ -457,6 +479,31 @@ describe('MoreInfoBox', () => { expect(ModalUtil.show).toHaveBeenCalled() }) + test('More Info Box opens the showVariablesModal', () => { + const component = mount( + + ) + + component + .find('button') + .at(0) + .simulate('click') + + component + .find('button') + .at(3) + .simulate('click') + + expect(ModalUtil.show).toHaveBeenCalled() + }) + test('More Info Box closes the TriggersModal', () => { const component = mount(

$mock_var

3
"`; +exports[`VariableBlock VariableBlock component is selected" 1`] = `"

$mock_var

Static value 3
"`; -exports[`VariableBlock VariableBlock with type "pick-list" 1`] = `"

$g

5-40 items from [33, 3, 4, 55, 23, 444]
"`; +exports[`VariableBlock VariableBlock with type "pick-list" 1`] = `"

$g

5-40 items from [33, 3, 4, 55, 23, 444]
"`; -exports[`VariableBlock VariableBlock with type "pick-list" with no default value 1`] = `"

$g

"`; +exports[`VariableBlock VariableBlock with type "pick-list" with no default value 1`] = `"

$g

Pick list
"`; -exports[`VariableBlock VariableBlock with type "pick-one" 1`] = `"

$f

Pick from [3, 4, 5, 3, 5]
"`; +exports[`VariableBlock VariableBlock with type "pick-list" with no default value 2`] = `"

$g

"`; -exports[`VariableBlock VariableBlock with type "pick-one" with no default value 1`] = `"

$f

"`; +exports[`VariableBlock VariableBlock with type "pick-one" 1`] = `"

$f

Pick from [3, 4, 5, 3, 5]
"`; -exports[`VariableBlock VariableBlock with type "random-list" 1`] = `"

$d

Random list (3-5 items of 3-10)
"`; +exports[`VariableBlock VariableBlock with type "pick-one" with no default value 1`] = `"

$f

Pick from []
"`; -exports[`VariableBlock VariableBlock with type "random-list" with no default value 1`] = `"

$d

Random list (- items of -)
"`; +exports[`VariableBlock VariableBlock with type "random-list" 1`] = `"

$d

Random list 3-5 items of 3-10
"`; -exports[`VariableBlock VariableBlock with type "random-number" 1`] = `"

$b

Random number (3-10)
"`; +exports[`VariableBlock VariableBlock with type "random-list" with no default value 1`] = `"

$d

Random list
"`; -exports[`VariableBlock VariableBlock with type "random-number" with no default value 1`] = `"

$b

Random number (-)
"`; +exports[`VariableBlock VariableBlock with type "random-number" 1`] = `"

$b

Random number (3-10)
"`; -exports[`VariableBlock VariableBlock with type "random-sequence" 1`] = `"

$e

Random seq (3-10 items starting from 1)
"`; +exports[`VariableBlock VariableBlock with type "random-number" with no default value 1`] = `"

$b

Random number
"`; -exports[`VariableBlock VariableBlock with type "random-sequence" with no default value 1`] = `"

$e

Random seq (- items starting from )
"`; +exports[`VariableBlock VariableBlock with type "random-sequence" 1`] = `"

$e

Random seq 3-10 items starting from 1
"`; + +exports[`VariableBlock VariableBlock with type "random-sequence" with no default value 1`] = `"

$e

Random seq
"`; exports[`VariableBlock VariableBlock with type "static-list" 1`] = `"

$c

[4, 5, 6]
"`; -exports[`VariableBlock VariableBlock with type "static-list" with no default value 1`] = `"

$c

"`; +exports[`VariableBlock VariableBlock with type "static-list" with no default value 1`] = `"

$c

[]
"`; -exports[`VariableBlock VariableBlock with type "static-value" 1`] = `"

$mock_var

3
"`; +exports[`VariableBlock VariableBlock with type "static-value" 1`] = `"

$mock_var

Static value 3
"`; -exports[`VariableBlock VariableBlock with type "static-value" and no default value 1`] = `"

$mock_var

"`; +exports[`VariableBlock VariableBlock with type "static-value" and no default value 1`] = `"

$mock_var

Static value
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap index 85f07d444a..bb178ddc23 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap @@ -1,18 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableListModal VariableListModal call onAddVariable 1`] = `"

Variables

$mockName1

$mockName2

$var

$var2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

Static value

$var2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onAddVariable - decimalPlacesMin and decimalPlacesMax are default o 0 1`] = `"

Variables

$mockName1

Random number

$mockName2

Random list

$var

Random number

Alphanumeric plus underscore only

to

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

$var2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onAddVariable 1`] = `"

Variables

$mockName1

Static value

$mockName2

Static value

$var

Static value

$var2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

$var2

Random number (-)

$var3

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

Random list

$var2

Static value

Alphanumeric plus underscore only

to
to

Duplicate:

"`; -exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

$var2

New Variable...

What type of variable do you want to create?
"`; +exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

Static value

$var2

Random number

$var3

[]

Alphanumeric plus underscore only

to

Duplicate:

"`; -exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

$mock

$var2

$var3

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

Static value

$var2

Static value

New Variable...

What type of variable do you want to create?
"`; + +exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

Static value

$mock

Static value

$var2

Static value

$var3

Static value

Alphanumeric plus underscore only

Duplicate:

"`; exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; @@ -20,4 +22,4 @@ exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

Random number (-)

$var2

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

Random number

$var2

Static value

Alphanumeric plus underscore only

to

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap new file mode 100644 index 0000000000..7b8daf29fe --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Variable Properties VariableProperties calls "onAddVariable" on mouse click 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties component 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties does not call "onAddVariable" radio list keyboard click 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties does not submit for every key other than "enter" 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties handles "onChange" 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties selects item on "hover" 1`] = `"
What type of variable do you want to create?
"`; + +exports[`Variable Properties VariableProperties submits for "enter" key 1`] = `"
What type of variable do you want to create?
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js new file mode 100644 index 0000000000..0d768f5a84 --- /dev/null +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js @@ -0,0 +1,107 @@ +import React from 'react' +import { shallow, mount } from 'enzyme' + +import NewVariable from '../../../../../src/scripts/oboeditor/components/variables/new-variable/new-variable' + +describe('Variable Properties', () => { + test('VariableProperties component', () => { + const component = shallow() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties submits for "enter" key', () => { + const onAddVariable = jest.fn() + const component = shallow() + + component + .find('.new-variable--type-list') + .at(0) + .simulate('keyDown', { + key: 'Enter' + }) + + expect(onAddVariable).toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties does not submit for every key other than "enter"', () => { + const onAddVariable = jest.fn() + const component = shallow() + + component + .find('.new-variable--type-list') + .at(0) + .simulate('keyDown', { + key: 'i' + }) + + expect(onAddVariable).not.toHaveBeenCalled() + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties handles "onChange"', () => { + const onAddVariable = jest.fn() + const component = mount() + + component + .find('input') + .at(1) + .simulate('change', { target: { value: 'random-number' } }) + + expect( + component + .find('input') + .at(1) + .props().checked + ).toEqual(true) + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties calls "onAddVariable" on mouse click', () => { + const onAddVariable = jest.fn() + const component = mount() + + component + .find('.new-variable--type-list--single-item') + .at(2) + .simulate('click', { type: 'click', clientX: 3, clienty: 3 }) + + expect(onAddVariable).toHaveBeenCalled() + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties does not call "onAddVariable" radio list keyboard click', () => { + const onAddVariable = jest.fn() + const component = mount() + + component + .find('.new-variable--type-list--single-item') + .at(2) + .simulate('click', { type: 'click', clientX: 0, clienty: 0 }) + + expect(onAddVariable).not.toHaveBeenCalled() + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperties selects item on "hover"', () => { + const onAddVariable = jest.fn() + const component = mount() + + component + .find('.new-variable--type-list--single-item') + .at(2) + .simulate('mouseEnter') + + expect( + component + .find('input') + .at(2) + .props().checked + ).toEqual(true) + + expect(component.html()).toMatchSnapshot() + }) +}) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js index 825f313f1c..1d9cf43313 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js @@ -283,8 +283,8 @@ describe('VariableBlock', () => { type: 'pick-list', value: '33, 3, 4, 55, 23, 444', ordered: 'false', - valueMax: '40', - valueMin: '5' + chooseMax: '40', + chooseMin: '5' } const component = shallow( @@ -333,5 +333,7 @@ describe('VariableBlock', () => { onClickVarible={jest.fn()} /> ) + + expect(component.html()).toMatchSnapshot() }) }) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js index 4061e47ad2..bc59aeb1b5 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js @@ -174,7 +174,7 @@ describe('VariableListModal', () => { .at(2) .html() ).toMatchInlineSnapshot( - `"

$var2

"` + `"

$var2

Static value
"` ) // Click duplicate button @@ -191,7 +191,7 @@ describe('VariableListModal', () => { .at(3) .html() ).toMatchInlineSnapshot( - `"

$var3

"` + `"

$var3

Static value
"` ) expect(component.html()).toMatchSnapshot() @@ -202,7 +202,7 @@ describe('VariableListModal', () => { variables: [ { name: 'var1', - type: 'static-value' + type: 'random-list' }, { name: 'var2', @@ -219,6 +219,15 @@ describe('VariableListModal', () => { .simulate('change', { target: { name: 'name', value: 'mockNewName' } }) expect(content.variables[0].name).toEqual('mockNewName') + + // Simulate checkbox changes + component + .find('input') + .at(3) + .simulate('change', { target: { name: 'unique', type: 'checkbox', checked: true } }) + + expect(content.variables[0].unique).toEqual(true) + expect(component.html()).toMatchSnapshot() }) @@ -249,7 +258,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal call onAddVariable', () => { + test('VariableListModal calls onAddVariable', () => { const content = { variables: [ { @@ -291,6 +300,49 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) + test('VariableListModal calls onAddVariable - decimalPlacesMin and decimalPlacesMax are default o 0', () => { + const content = { + variables: [ + { + name: 'mockName1', + type: 'random-number' + }, + { + name: 'mockName2', + type: 'random-list' + } + ] + } + const component = mount() + + // Click create new variable and select "random-number" type + component + .find('button') + .at(0) + .simulate('click') + component + .find('.new-variable--type-list--single-item') + .at(1) + .simulate('click') + + expect(component.find('.single-variable').length).toEqual(3) + + expect( + component + .find('input') + .at(4) + .props().value + ).toEqual('0') + expect( + component + .find('input') + .at(5) + .props().value + ).toEqual('0') + + expect(component.html()).toMatchSnapshot() + }) + test('VariableListModal call onDeleteVariable', () => { global.confirm = () => true diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap index 1a0e43daab..0e2e3c5459 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap @@ -2,15 +2,15 @@ exports[`VariableValue VariableValue 1`] = `"
"`; -exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; -exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; exports[`VariableValue VariableValue component type "pick-one" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; exports[`VariableValue VariableValue component type "pick-one" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; -exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; +exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
to
to
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js index 989666eb60..086c41b86e 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js @@ -1,7 +1,7 @@ import React from 'react' import { shallow, mount } from 'enzyme' -import VariableProperties from '../../../../../src/scripts/oboeditor/components/variables/variable-property/variable-property' +import VariableProperty from '../../../../../src/scripts/oboeditor/components/variables/variable-property/variable-property' describe('Variable Properties', () => { test('VariableProperties node', () => { @@ -13,7 +13,7 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = shallow( - + ) expect(component.html()).toMatchSnapshot() }) @@ -29,7 +29,7 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = mount( - + ) component @@ -52,7 +52,7 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = mount( - + ) component @@ -72,7 +72,7 @@ describe('Variable Properties', () => { } const onChange = jest.fn() - const component = mount() + const component = mount() component .find('input') diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js index 1755509533..2643175f35 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js @@ -247,16 +247,16 @@ describe('VariableValue', () => { type: 'pick-list', value: '33, 3, 4, 55, 23, 444', ordered: false, - valueMax: '40', - valueMin: '5' + chooseMax: '40', + chooseMin: '5' } const component = shallow() const inputs = component.find('input') expect(inputs.at(0).props().value).toEqual(variable.value) - expect(inputs.at(1).props().value).toEqual(variable.valueMin) - expect(inputs.at(2).props().value).toEqual(variable.valueMax) + expect(inputs.at(1).props().value).toEqual(variable.chooseMin) + expect(inputs.at(2).props().value).toEqual(variable.chooseMax) expect(component.html()).toMatchSnapshot() }) @@ -338,6 +338,29 @@ describe('VariableValue', () => { expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '7' } }) }) + test('onChangeMin (chooseMin, chooseMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: 'false', + chooseMax: '5', + chooseMin: '5' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(1).simulate('change', { target: { name: 'chooseMin', value: '0' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '0' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '0' } }) + + inputs.at(1).simulate('change', { target: { name: 'chooseMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '7' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '7' } }) + }) + test('onChangeMin - if second value does not exist, it should match the first', () => { const variable = { name: 'e', @@ -420,4 +443,27 @@ describe('VariableValue', () => { expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '' } }) }) + + test('onChangeMax (chooseMin, chooseMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: 'false', + chooseMax: '5', + chooseMin: '5' + } + + const onChange = jest.fn() + const component = shallow() + const inputs = component.find('input') + + inputs.at(2).simulate('change', { target: { name: 'chooseMax', value: '10' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '10' } }) + expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '10' } }) + + inputs.at(2).simulate('change', { target: { name: 'chooseMax', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '1' } }) + }) }) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js index 44ff8cb581..8a376bf9d2 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js @@ -9,16 +9,26 @@ const NewVarible = props => { useEffect(() => { firstRef.current.focus() - }) - - const onKeyPress = event => { - props.onAddVariable(event.target.value) - } + }, []) const onChange = event => { setCurrSelectType(event.target.value) } + const handleKeyDown = event => { + if (event.key === 'Enter') { + props.onAddVariable(currSelectType) + } + } + + const onClick = (e, type) => { + // In Chrome browser, use arrow keys in radio list will trigger onClick() + // The following if statement will prevent it from happening + if (e.type === 'click' && e.clientX !== 0 && e.clientY !== 0) { + props.onAddVariable(type) + } + } + return (
@@ -27,9 +37,8 @@ const NewVarible = props => {
{typeList.map(type => (
{ (type === currSelectType ? ' is-selected' : '') } key={type} + tabIndex="0" + value={type} + onClick={e => onClick(e, type)} onMouseEnter={() => setCurrSelectType(type)} - onClick={() => props.onAddVariable(type)} > -
@@ -290,29 +293,28 @@ const VariableValues = props => { {"Enter values, separating each value with a comma (eg. '1, 2, 3')"}

- + -
-
- + to
+
From f1b49ca274a80e7d445bb48c480e8d7b0cd522ca Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Mon, 24 Feb 2020 16:52:35 -0500 Subject: [PATCH 06/20] [WIP] add more unit tests for variables modal --- .../__snapshots__/variable-block.test.js.snap | 44 +++-- .../variable-list-modal.test.js.snap | 24 +-- .../__snapshots__/new-variable.test.js.snap | 14 +- .../new-variable/new-variable.test.js | 16 +- .../variables/variable-block.test.js | 144 +++++++++++++- .../variables/variable-list-modal.test.js | 32 ++-- .../variable-property.test.js.snap | 12 +- .../__snapshots__/variable-value.test.js.snap | 16 +- .../variable-property.test.js | 66 ++++++- .../variable-property/variable-value.test.js | 72 +++---- .../variables/new-variable/new-variable.js | 7 +- .../variables/new-variable/new-variable.scss | 12 ++ .../components/variables/variable-block.js | 181 ++++++++++-------- .../variables/variable-list-modal.js | 15 +- .../variables/variable-list-modal.scss | 8 + .../variable-property/variable-property.js | 18 +- .../variable-property/variable-value.js | 89 +++++---- 17 files changed, 524 insertions(+), 246 deletions(-) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap index f4f2b5516d..7242e1808d 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-block.test.js.snap @@ -1,33 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableBlock VariableBlock component is selected" 1`] = `"

$mock_var

Static value 3
"`; +exports[`VariableBlock VariableBlock component is selected" 1`] = `""`; -exports[`VariableBlock VariableBlock with type "pick-list" 1`] = `"

$g

5-40 items from [33, 3, 4, 55, 23, 444]
"`; +exports[`VariableBlock VariableBlock with type "pick-list" - when choose > 1, item should be plural 1`] = `""`; -exports[`VariableBlock VariableBlock with type "pick-list" with no default value 1`] = `"

$g

Pick list
"`; +exports[`VariableBlock VariableBlock with type "pick-list" - when chooseMax = choseMin = 1, item should be singular 1`] = `""`; -exports[`VariableBlock VariableBlock with type "pick-list" with no default value 2`] = `"

$g

"`; +exports[`VariableBlock VariableBlock with type "pick-list" 1`] = `""`; -exports[`VariableBlock VariableBlock with type "pick-one" 1`] = `"

$f

Pick from [3, 4, 5, 3, 5]
"`; +exports[`VariableBlock VariableBlock with type "pick-list" with no default value 1`] = `""`; -exports[`VariableBlock VariableBlock with type "pick-one" with no default value 1`] = `"

$f

Pick from []
"`; +exports[`VariableBlock VariableBlock with type "pick-list" with no default value 2`] = `""`; -exports[`VariableBlock VariableBlock with type "random-list" 1`] = `"

$d

Random list 3-5 items of 3-10
"`; +exports[`VariableBlock VariableBlock with type "pick-one" 1`] = `""`; -exports[`VariableBlock VariableBlock with type "random-list" with no default value 1`] = `"

$d

Random list
"`; +exports[`VariableBlock VariableBlock with type "pick-one" with no default value 1`] = `""`; -exports[`VariableBlock VariableBlock with type "random-number" 1`] = `"

$b

Random number (3-10)
"`; +exports[`VariableBlock VariableBlock with type "random-list" - when sizeMin = sizeMax = 1, item should be singular 1`] = `""`; -exports[`VariableBlock VariableBlock with type "random-number" with no default value 1`] = `"

$b

Random number
"`; +exports[`VariableBlock VariableBlock with type "random-list" - when sizeMin > 1, item should be plural 1`] = `""`; -exports[`VariableBlock VariableBlock with type "random-sequence" 1`] = `"

$e

Random seq 3-10 items starting from 1
"`; +exports[`VariableBlock VariableBlock with type "random-list" 1`] = `""`; -exports[`VariableBlock VariableBlock with type "random-sequence" with no default value 1`] = `"

$e

Random seq
"`; +exports[`VariableBlock VariableBlock with type "random-list" with no default value 1`] = `""`; -exports[`VariableBlock VariableBlock with type "static-list" 1`] = `"

$c

[4, 5, 6]
"`; +exports[`VariableBlock VariableBlock with type "random-number" 1`] = `""`; -exports[`VariableBlock VariableBlock with type "static-list" with no default value 1`] = `"

$c

[]
"`; +exports[`VariableBlock VariableBlock with type "random-number" with no default value 1`] = `""`; -exports[`VariableBlock VariableBlock with type "static-value" 1`] = `"

$mock_var

Static value 3
"`; +exports[`VariableBlock VariableBlock with type "random-sequence" - when size > 1, item should be plural 1`] = `""`; -exports[`VariableBlock VariableBlock with type "static-value" and no default value 1`] = `"

$mock_var

Static value
"`; +exports[`VariableBlock VariableBlock with type "random-sequence" - when sizeMin = sizeMax = 1, item should be singular 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "random-sequence" 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "random-sequence" with no default value 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "static-list" 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "static-list" with no default value 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "static-value" 1`] = `""`; + +exports[`VariableBlock VariableBlock with type "static-value" and no default value 1`] = `""`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap index bb178ddc23..30b8b73ee3 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap @@ -1,25 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableListModal VariableListModal call onDeleteVariable 1`] = `"

Variables

$mockName2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal call "onDeleteVariable" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

$var1

Static value

$var2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onAddVariable" - decimalPlacesMin and decimalPlacesMax are default to 0 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onAddVariable - decimalPlacesMin and decimalPlacesMax are default o 0 1`] = `"

Variables

$mockName1

Random number

$mockName2

Random list

$var

Random number

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onAddVariable" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onAddVariable 1`] = `"

Variables

$mockName1

Static value

$mockName2

Static value

$var

Static value

$var2

Static value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onChange" 1`] = `"

Variables

Alphanumeric plus underscore only

to
to

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onChange 1`] = `"

Variables

$mockNewName

Random list

$var2

Static value

Alphanumeric plus underscore only

to
to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

$var1

Static value

$var2

Random number

$var3

[]

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; -exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

$var1

Static value

$var2

Static value

New Variable...

What type of variable do you want to create?
"`; +exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal duplicates variable correct 3`] = `"

Variables

$var

Static value

$mock

Static value

$var2

Static value

$var3

Static value

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal duplicates variable 3`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; +exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; -exports[`VariableListModal VariableListModal node 1`] = `"

Variables

$var1

$var2

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal node 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

$var1

Random number

$var2

Static value

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap index 7b8daf29fe..a2053f2fa4 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Variable Properties VariableProperties calls "onAddVariable" on mouse click 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue calls "onAddVariable" on mouse click 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties component 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue component 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties does not call "onAddVariable" radio list keyboard click 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue does not call "onAddVariable" radio list keyboard click 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties does not submit for every key other than "enter" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue does not submit for every key other than "enter" 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties handles "onChange" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue handles "onChange" 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties selects item on "hover" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue selects item on "hover" 1`] = `"
What type of variable do you want to create?
"`; -exports[`Variable Properties VariableProperties submits for "enter" key 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue submits for "enter" key 1`] = `"
What type of variable do you want to create?
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js index 0d768f5a84..0b46b4474b 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js @@ -3,13 +3,13 @@ import { shallow, mount } from 'enzyme' import NewVariable from '../../../../../src/scripts/oboeditor/components/variables/new-variable/new-variable' -describe('Variable Properties', () => { - test('VariableProperties component', () => { +describe('VariableValue', () => { + test('VariableValue component', () => { const component = shallow() expect(component.html()).toMatchSnapshot() }) - test('VariableProperties submits for "enter" key', () => { + test('VariableValue submits for "enter" key', () => { const onAddVariable = jest.fn() const component = shallow() @@ -24,7 +24,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties does not submit for every key other than "enter"', () => { + test('VariableValue does not submit for every key other than "enter"', () => { const onAddVariable = jest.fn() const component = shallow() @@ -39,7 +39,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties handles "onChange"', () => { + test('VariableValue handles "onChange"', () => { const onAddVariable = jest.fn() const component = mount() @@ -58,7 +58,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties calls "onAddVariable" on mouse click', () => { + test('VariableValue calls "onAddVariable" on mouse click', () => { const onAddVariable = jest.fn() const component = mount() @@ -72,7 +72,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties does not call "onAddVariable" radio list keyboard click', () => { + test('VariableValue does not call "onAddVariable" radio list keyboard click', () => { const onAddVariable = jest.fn() const component = mount() @@ -86,7 +86,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties selects item on "hover"', () => { + test('VariableValue selects item on "hover"', () => { const onAddVariable = jest.fn() const component = mount() diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js index 1d9cf43313..4a5a1327ed 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-block.test.js @@ -194,6 +194,50 @@ describe('VariableBlock', () => { expect(tree).toMatchSnapshot() }) + test('VariableBlock with type "random-list" - when sizeMin = sizeMax = 1, item should be singular', () => { + const variable = { + name: 'd', + type: 'random-list', + sizeMin: '1', + sizeMax: '1', + valueMin: '3', + valueMax: '33' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-list" - when sizeMin > 1, item should be plural', () => { + const variable = { + name: 'd', + type: 'random-list', + sizeMin: '4', + sizeMax: '4' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + test('VariableBlock with type "random-sequence"', () => { const variable = { name: 'e', @@ -201,8 +245,7 @@ describe('VariableBlock', () => { type: 'random-sequence', sizeMax: '10', sizeMin: '3', - valueMax: '100', - valueMin: '1', + start: '3', seriesType: 'geometric' } @@ -258,6 +301,54 @@ describe('VariableBlock', () => { expect(tree).toMatchSnapshot() }) + test('VariableBlock with type "random-sequence" - when sizeMin = sizeMax = 1, item should be singular', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMax: '1', + sizeMin: '1', + start: '3', + seriesType: 'geometric' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "random-sequence" - when size > 1, item should be plural', () => { + const variable = { + name: 'e', + step: '1.1', + type: 'random-sequence', + sizeMax: '4', + sizeMin: '4', + start: '3', + seriesType: 'geometric' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + test('VariableBlock with type "pick-one" with no default value', () => { const variable = { name: 'f', @@ -321,7 +412,8 @@ describe('VariableBlock', () => { variable = { name: 'g', type: 'pick-list', - value: '3' + chooseMax: '40', + chooseMin: '5' } component = shallow( @@ -336,4 +428,50 @@ describe('VariableBlock', () => { expect(component.html()).toMatchSnapshot() }) + + test('VariableBlock with type "pick-list" - when chooseMax = choseMin = 1, item should be singular', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: 'false', + chooseMax: '1', + chooseMin: '1' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) + + test('VariableBlock with type "pick-list" - when choose > 1, item should be plural', () => { + const variable = { + name: 'g', + type: 'pick-list', + value: '33, 3, 4, 55, 23, 444', + ordered: 'false', + chooseMax: '4', + chooseMin: '4' + } + + const component = shallow( + + ) + const tree = component.html() + expect(tree).toMatchSnapshot() + }) }) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js index bc59aeb1b5..6c21403a8d 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js @@ -130,7 +130,7 @@ describe('VariableListModal', () => { const component = mount() component - .find('button') + .find('.button') .at(3) .simulate('click') @@ -138,7 +138,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal duplicates variable correct', () => { + test('VariableListModal duplicates variable', () => { const content = { variables: [ { @@ -155,12 +155,12 @@ describe('VariableListModal', () => { // Click duplicate button component - .find('button') + .find('.button') .at(2) .simulate('click') expect(component.find('.single-variable').length).toEqual(3) - // Duplicate element is selected + // Check if duplicated element is selected expect( component .find('.single-variable') @@ -174,30 +174,30 @@ describe('VariableListModal', () => { .at(2) .html() ).toMatchInlineSnapshot( - `"

$var2

Static value
"` + `""` ) // Click duplicate button component - .find('button') + .find('.button') .at(2) .simulate('click') expect(component.find('.single-variable').length).toEqual(4) - // Duplicate element is selected + // check if duplicated element is selected expect( component .find('.single-variable') .at(3) .html() ).toMatchInlineSnapshot( - `"

$var3

Static value
"` + `""` ) expect(component.html()).toMatchSnapshot() }) - test('VariableListModal calls onChange', () => { + test('VariableListModal calls "onChange"', () => { const content = { variables: [ { @@ -258,7 +258,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal calls onAddVariable', () => { + test('VariableListModal calls "onAddVariable"', () => { const content = { variables: [ { @@ -275,7 +275,7 @@ describe('VariableListModal', () => { // Click create new variable and select a type component - .find('button') + .find('.button') .at(0) .simulate('click') component @@ -287,7 +287,7 @@ describe('VariableListModal', () => { // Click create new variable and select a type component - .find('button') + .find('.button') .at(0) .simulate('click') component @@ -300,7 +300,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal calls onAddVariable - decimalPlacesMin and decimalPlacesMax are default o 0', () => { + test('VariableListModal calls "onAddVariable" - decimalPlacesMin and decimalPlacesMax are default to 0', () => { const content = { variables: [ { @@ -317,7 +317,7 @@ describe('VariableListModal', () => { // Click create new variable and select "random-number" type component - .find('button') + .find('.button') .at(0) .simulate('click') component @@ -343,7 +343,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal call onDeleteVariable', () => { + test('VariableListModal call "onDeleteVariable"', () => { global.confirm = () => true const content = { @@ -362,7 +362,7 @@ describe('VariableListModal', () => { // Click create new variable and select a type component - .find('button') + .find('.button') .at(1) .simulate('click') diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap index 3ecb1ca56a..e3cf576079 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap @@ -1,9 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Variable Properties VariableProperties calls onChange when input changes 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty calls onChange when input changes 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`Variable Properties VariableProperties clicks "delete" will call "onDeleteVariable" 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty clicks "delete" will call "onDeleteVariable" 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`Variable Properties VariableProperties does not call "onDeleteVariable" when user cancels 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty does not call "onDeleteVariable" when user cancels 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; -exports[`Variable Properties VariableProperties node 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty node 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; + +exports[`Variable Properties VariableProperty node with invalid variable 1`] = `"
"`; + +exports[`Variable Properties VariableProperty node without default name or type 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap index 0e2e3c5459..5e012c9574 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap @@ -2,25 +2,25 @@ exports[`VariableValue VariableValue 1`] = `"
"`; -exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; +exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; -exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; +exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; exports[`VariableValue VariableValue component type "pick-one" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; exports[`VariableValue VariableValue component type "pick-one" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; -exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; +exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; -exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
to
to
"`; +exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
to
to
"`; -exports[`VariableValue VariableValue component type "random-number" 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-number" 1`] = `"
to
"`; -exports[`VariableValue VariableValue component type "random-number" without default value 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-number" without default value 1`] = `"
to
"`; -exports[`VariableValue VariableValue component type "random-sequence" 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-sequence" 1`] = `"
to
"`; -exports[`VariableValue VariableValue component type "random-sequence" without default value 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-sequence" without default value 1`] = `"
to
"`; exports[`VariableValue VariableValue component type "static-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js index 086c41b86e..bec00f5fa8 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js @@ -4,7 +4,7 @@ import { shallow, mount } from 'enzyme' import VariableProperty from '../../../../../src/scripts/oboeditor/components/variables/variable-property/variable-property' describe('Variable Properties', () => { - test('VariableProperties node', () => { + test('VariableProperty node', () => { const variable = { name: 'static_var', type: 'static-value', @@ -13,12 +13,56 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = shallow( - + ) expect(component.html()).toMatchSnapshot() }) - test('VariableProperties clicks "delete" will call "onDeleteVariable"', () => { + test('VariableProperty node with invalid variable', () => { + const variable = null + + const onDeleteVariable = jest.fn() + const component = shallow( + + ) + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperty node without default name or type', () => { + const variable = {} + const onDeleteVariable = jest.fn() + const component = shallow( + + ) + expect( + component + .find('input') + .at(0) + .props().value + ).toEqual('') + expect( + component + .find('select') + .at(0) + .props().value + ).toEqual('') + + expect(component.html()).toMatchSnapshot() + }) + + test('VariableProperty clicks "delete" will call "onDeleteVariable"', () => { global.confirm = () => true const variable = { @@ -29,7 +73,11 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = mount( - + ) component @@ -41,7 +89,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties does not call "onDeleteVariable" when user cancels', () => { + test('VariableProperty does not call "onDeleteVariable" when user cancels', () => { global.confirm = () => false const variable = { @@ -52,7 +100,11 @@ describe('Variable Properties', () => { const onDeleteVariable = jest.fn() const component = mount( - + ) component @@ -64,7 +116,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperties calls onChange when input changes', () => { + test('VariableProperty calls onChange when input changes', () => { const variable = { name: 'static_var', type: 'static-value', diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js index 2643175f35..8ac711db41 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-value.test.js @@ -175,10 +175,9 @@ describe('VariableValue', () => { name: 'e', step: '1.1', type: 'random-sequence', + sizeMin: '1', sizeMax: '10', - sizeMin: '3', - valueMax: '100', - valueMin: '1', + start: '10', seriesType: 'geometric' } @@ -187,9 +186,8 @@ describe('VariableValue', () => { const inputs = component.find('input') expect(inputs.at(0).props().value).toEqual(variable.sizeMin) expect(inputs.at(1).props().value).toEqual(variable.sizeMax) - expect(inputs.at(2).props().value).toEqual(variable.valueMin) - expect(inputs.at(3).props().value).toEqual(variable.valueMax) - expect(inputs.at(4).props().value).toEqual(variable.step) + expect(inputs.at(2).props().value).toEqual(variable.start) + expect(inputs.at(3).props().value).toEqual(variable.step) expect(component.html()).toMatchSnapshot() }) @@ -207,7 +205,6 @@ describe('VariableValue', () => { expect(inputs.at(1).props().value).toEqual('') expect(inputs.at(2).props().value).toEqual('') expect(inputs.at(3).props().value).toEqual('') - expect(inputs.at(4).props().value).toEqual('') expect(component.html()).toMatchSnapshot() }) @@ -277,7 +274,7 @@ describe('VariableValue', () => { expect(component.html()).toMatchSnapshot() }) - test('onChangeMin (valueMin, valueMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + test('onBlurMin (valueMin, valueMax) - when both values are equal and the first value is changed then the second value should match the first', () => { const variable = { name: 'g', type: 'random-number', @@ -289,12 +286,12 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(0).simulate('change', { target: { name: 'valueMin', value: '10' } }) + inputs.at(0).simulate('blur', { target: { name: 'valueMin', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMin', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMax', value: '10' } }) }) - test('onChangeMin (decimalPlacesMin, decimalPlacesMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + test('onBlurMin (decimalPlacesMin, decimalPlacesMax) - when both values are equal and the first value is changed then the second value should match the first', () => { const variable = { name: 'b', type: 'random-number', @@ -308,12 +305,12 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(2).simulate('change', { target: { name: 'decimalPlacesMin', value: '10' } }) + inputs.at(2).simulate('blur', { target: { name: 'decimalPlacesMin', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMin', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMax', value: '10' } }) }) - test('onChangeMin (sizeMin, sizeMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + test('onBlurMin (sizeMin, sizeMax) - when both values are equal and the first value is changed then the second value should match the first', () => { const variable = { name: 'e', step: '1.1', @@ -329,16 +326,16 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '0' } }) + inputs.at(2).simulate('blur', { target: { name: 'sizeMin', value: '0' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '0' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '0' } }) - inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '7' } }) + inputs.at(2).simulate('blur', { target: { name: 'sizeMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '7' } }) }) - test('onChangeMin (chooseMin, chooseMax) - when both values are equal and the first value is changed then the second value should match the first', () => { + test('onBlurMin (chooseMin, chooseMax) - when both values are equal and the first value is changed then the second value should match the first', () => { const variable = { name: 'g', type: 'pick-list', @@ -352,11 +349,11 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(1).simulate('change', { target: { name: 'chooseMin', value: '0' } }) + inputs.at(1).simulate('blur', { target: { name: 'chooseMin', value: '0' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '0' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '0' } }) - inputs.at(1).simulate('change', { target: { name: 'chooseMin', value: '7' } }) + inputs.at(1).simulate('blur', { target: { name: 'chooseMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '7' } }) }) @@ -376,12 +373,12 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(2).simulate('change', { target: { name: 'sizeMin', value: '7' } }) + inputs.at(2).simulate('blur', { target: { name: 'sizeMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '7' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '7' } }) }) - test('onChangeMax (valueMin, valueMax) - when both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + test('onBlurMax (valueMin, valueMax) - when both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { const variable = { name: 'g', type: 'random-number', @@ -393,16 +390,16 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(1).simulate('change', { target: { name: 'sizeMax', value: '40' } }) + inputs.at(1).simulate('blur', { target: { name: 'sizeMax', value: '40' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '40' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '40' } }) - inputs.at(1).simulate('change', { target: { name: 'valueMax', value: '1' } }) + inputs.at(1).simulate('blur', { target: { name: 'valueMax', value: '1' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMin', value: '1' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'valueMax', value: '1' } }) }) - test('onChangeMax (decimalPlacesMin, decimalPlacesMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + test('onBlurMax (decimalPlacesMin, decimalPlacesMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { const variable = { name: 'b', type: 'random-number', @@ -414,37 +411,42 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '30' } }) + inputs.at(3).simulate('blur', { target: { name: 'sizeMax', value: '30' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '30' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '30' } }) - inputs.at(3).simulate('change', { target: { name: 'decimalPlacesMax', value: '2' } }) + inputs.at(3).simulate('blur', { target: { name: 'decimalPlacesMax', value: '2' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMax', value: '2' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'decimalPlacesMin', value: '2' } }) }) - test('onChangeMax (sizeMin, sizeMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + test('onBlurMax (sizeMin, sizeMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { const variable = { - name: 'e', - type: 'random-sequence', + name: 'd', + type: 'random-list', + unique: true, sizeMax: '3', - sizeMin: '3' + sizeMin: '3', + valueMax: '10', + valueMin: '3', + decimalPlacesMax: '1', + decimalPlacesMin: '1' } const onChange = jest.fn() const component = shallow() const inputs = component.find('input') - inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '10' } }) + inputs.at(1).simulate('blur', { target: { name: 'sizeMax', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '10' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '10' } }) - inputs.at(3).simulate('change', { target: { name: 'sizeMax', value: '' } }) - expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '' } }) - expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '' } }) + inputs.at(1).simulate('blur', { target: { name: 'sizeMax', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMin', value: '1' } }) + expect(onChange).toHaveBeenCalledWith({ target: { name: 'sizeMax', value: '1' } }) }) - test('onChangeMax (chooseMin, chooseMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { + test('onBlurMax (chooseMin, chooseMax) - When both values are equal and the second value is decreased the first value should match the second. Increasing the second value should not update the first', () => { const variable = { name: 'g', type: 'pick-list', @@ -458,11 +460,11 @@ describe('VariableValue', () => { const component = shallow() const inputs = component.find('input') - inputs.at(2).simulate('change', { target: { name: 'chooseMax', value: '10' } }) + inputs.at(2).simulate('blur', { target: { name: 'chooseMax', value: '10' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '10' } }) expect(onChange).not.toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '10' } }) - inputs.at(2).simulate('change', { target: { name: 'chooseMax', value: '1' } }) + inputs.at(2).simulate('blur', { target: { name: 'chooseMax', value: '1' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMin', value: '1' } }) expect(onChange).toHaveBeenCalledWith({ target: { name: 'chooseMax', value: '1' } }) }) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js index 8a376bf9d2..60559f098f 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js @@ -41,7 +41,7 @@ const NewVarible = props => { role="radiogroup" > {typeList.map(type => ( -
{ value={type} onClick={e => onClick(e, type)} onMouseEnter={() => setCurrSelectType(type)} + ref={type === currSelectType ? firstRef : null} > -
+ ))}
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss index aeed0ec0c2..3d62a9fdcf 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.scss @@ -9,6 +9,18 @@ text-align: left; flex: 1; + button { + border: none; + background: transparent; + font-family: 'Libre Franklin', Arial, sans-serif; + width: 100%; + cursor: pointer; + margin: 0; + color: inherit; + font-size: 1em; + text-align: left; + } + .new-variable--title { margin: 1em auto; padding: auto; diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js index 38fd0205e0..9e73b4a9df 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-block.js @@ -13,7 +13,7 @@ const VariableBlock = props => { const { variable, isSelected, creatingVariable, firstRef, onClick } = props return ( -
{ onClick={onClick} tabIndex="0" ref={firstRef} + aria-label={'Jump to variable ' + variable.name} >

${variable.name}

- {(() => { - switch (variable.type) { - case STATIC_VALUE: - return ( - - Static value - {variable.value || ''} - - ) - case RANDOM_NUMBER: - return ( - - Random number - {variable.valueMin && variable.valueMax ? ( - - ({variable.valueMin}-{variable.valueMax}) - - ) : null} - - ) - case STATIC_LIST: - return ( - - [{(variable.value || '').split(',').join(', ')}] - - ) - case RANDOM_LIST: - return ( - - Random list - {variable.sizeMin && variable.sizeMax && variable.valueMin && variable.valueMax ? ( - - {variable.sizeMin === variable.sizeMax - ? variable.sizeMin - : `${variable.sizeMin}-${variable.sizeMax}`} + + {(() => { + switch (variable.type) { + case STATIC_VALUE: + return ( + <> + Static value + {variable.value || ''} + + ) + case RANDOM_NUMBER: + return ( + <> + Random number + {variable.valueMin && variable.valueMax ? ( + + ({variable.valueMin}-{variable.valueMax}) + + ) : null} + + ) + case STATIC_LIST: + return ( + <> + [{(variable.value || '').split(',').join(', ')}] + + ) + case RANDOM_LIST: + return ( + <> + Random list + {variable.sizeMin && + variable.sizeMax && + variable.valueMin && + variable.valueMax ? ( + + {variable.sizeMin === variable.sizeMax + ? variable.sizeMin + : `${variable.sizeMin}-${variable.sizeMax}`} - {` items of ${variable.valueMin}-${variable.valueMax}`} - - ) : null} - - ) - case RANDOM_SEQUENCE: - return ( - - Random seq - {variable.sizeMin && variable.sizeMax && variable.valueMin && variable.valueMax ? ( - - {variable.sizeMin === variable.sizeMax - ? variable.sizeMin - : `${variable.sizeMin}-${variable.sizeMax}`} - {` items starting from ${variable.valueMin}`} - - ) : null} - - ) - case PICK_ONE: - return ( - - Pick from - [{(variable.value || '').split(',').join(', ')}] - - ) - case PICK_LIST: - if (!variable.value) return Pick list + {` item${ + variable.sizeMin === variable.sizeMax && + parseInt(variable.sizeMin, 10) === 1 + ? '' + : 's' + } of ${variable.valueMin}-${variable.valueMax}`} + + ) : null} + + ) + case RANDOM_SEQUENCE: + return ( + <> + Random seq + {variable.sizeMin && variable.sizeMax && variable.start ? ( + + {variable.sizeMin === variable.sizeMax + ? variable.sizeMin + : `${variable.sizeMin}-${variable.sizeMax}`} + {` item${ + variable.sizeMin === variable.sizeMax && + parseInt(variable.sizeMin, 10) === 1 + ? '' + : 's' + } starting from ${variable.start}`} + + ) : null} + + ) + case PICK_ONE: + return ( + <> + Pick from + [{(variable.value || '').split(',').join(', ')}] + + ) + case PICK_LIST: + return ( + <> + {variable.chooseMin && variable.chooseMax ? ( + + {variable.chooseMin === variable.chooseMax + ? variable.chooseMin + : `${variable.chooseMin}-${variable.chooseMax}`} - return ( - - {variable.chooseMin && variable.chooseMax && variable.value ? ( - - {variable.chooseMin === variable.chooseMax - ? variable.chooseMin - : `${variable.chooseMin}-${variable.chooseMax}`} - - {` items from [${(variable.value || '').split(',').join(', ')}]`} - - ) : null} - - ) - } - })()} -
+ {` item${ + variable.chooseMin === variable.chooseMax && + parseInt(variable.chooseMin, 10) === 1 + ? '' + : 's' + } from [${(variable.value || '').split(',').join(', ')}]`} + + ) : ( + Pick List + )} + + ) + } + })()} + + ) } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js index ccb4f3d615..ad04fd0bc0 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js @@ -1,9 +1,9 @@ import './variable-list-modal.scss' -import React from 'react' +import React, { useRef } from 'react' import Common from 'obojobo-document-engine/src/scripts/common' -import VariableProperties from './variable-property/variable-property' +import VariableProperty from './variable-property/variable-property' import NewVariable from './new-variable/new-variable' import VariableBlock from './variable-block' import { RANDOM_NUMBER, RANDOM_LIST } from './constants' @@ -12,7 +12,8 @@ const { Button } = Common.components const { SimpleDialog } = Common.components.modal const VariableListModal = props => { - const firstRef = React.createRef() + const firstRef = useRef() + const tabRef = useRef() const [currSelect, setCurrSelect] = React.useState(0) const [creatingVariable, setCreatingVariable] = React.useState(false) @@ -21,6 +22,7 @@ const VariableListModal = props => { const onClickVarible = index => { setCreatingVariable(false) setCurrSelect(index) + tabRef.current.focus() } const onChange = event => { @@ -110,7 +112,7 @@ const VariableListModal = props => { focusOnFirstElement={focusOnFirstElement} >
-
+
+ {creatingVariable ? ( ) : ( - )}
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss index 8d676e79c2..2c0019b5b2 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.scss @@ -16,6 +16,14 @@ width: 12em; .single-variable { + border: none; + background: transparent; + font-family: 'Libre Franklin', Arial, sans-serif; + width: 100%; + cursor: pointer; + margin: 0; + color: inherit; + font-size: 1em; background-color: $color-bg; border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-right: solid 1px rgba(0, 0, 0, 0.1); diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js index 79b381cc6d..f905d320f1 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-property.js @@ -5,11 +5,11 @@ import Common from 'obojobo-document-engine/src/scripts/common' import VariableValue from './variable-value' import { typeList, mapTypeToString } from '../constants' -const { Button } = Common.components +const { Button, MoreInfoButton } = Common.components -const VariableProperties = props => { - const { variable } = props - if (!variable) return null +const VariableProperty = props => { + const { variable, tabRef } = props + if (!variable) return
const showDeleteModal = () => { // eslint-disable-next-line no-alert, no-undef @@ -24,7 +24,13 @@ const VariableProperties = props => { - +

Alphanumeric plus underscore only

@@ -63,4 +69,4 @@ const VariableProperties = props => { ) } -export default VariableProperties +export default VariableProperty diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.js index 31f6b7369d..a997a683bd 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-property/variable-value.js @@ -14,7 +14,10 @@ import { const VariableValues = props => { const { variable, onChange } = props - const onChangeMin = e => { + const onBlurMin = e => { + if (e.target.name === 'decimalPlacesMin' || e.target.name === 'sizeMin') { + e.target.value = '' + parseInt(e.target.value, 10) + } props.onChange(e) const minName = e.target.name @@ -36,6 +39,7 @@ const VariableValues = props => { } const maxValue = variable[maxName] + if (!maxValue) { return props.onChange({ target: { name: maxName, value: minValue } }) } @@ -48,7 +52,10 @@ const VariableValues = props => { } } - const onChangeMax = e => { + const onBurMax = e => { + if (e.target.name === 'decimalPlacesMax' || e.target.name === 'sizeMax') { + e.target.value = '' + parseInt(e.target.value, 10) + } props.onChange(e) const maxName = e.target.name @@ -69,10 +76,6 @@ const VariableValues = props => { minName = 'chooseMin' } - if (!maxValue) { - props.onChange({ target: { name: minName, value: maxValue } }) - } - const minValue = variable[minName] const minValueInt = parseInt(minValue, 10) @@ -116,7 +119,8 @@ const VariableValues = props => { type="number" name="valueMin" value={variable.valueMin || ''} - onChange={onChangeMin} + onChange={onChange} + onBlur={onBlurMin} />
@@ -125,23 +129,28 @@ const VariableValues = props => { type="number" name="valueMax" value={variable.valueMax || ''} - onChange={onChangeMax} + onChange={onChange} + onBlur={onBurMax} />
to
@@ -154,16 +163,20 @@ const VariableValues = props => { to
@@ -181,7 +194,8 @@ const VariableValues = props => { type="number" name="valueMin" value={variable.valueMin || ''} - onChange={onChangeMin} + onChange={onChange} + onBlur={onBlurMin} />
@@ -190,23 +204,28 @@ const VariableValues = props => { type="number" name="valueMax" value={variable.valueMax || ''} - onChange={onChangeMax} + onChange={onChange} + onBlur={onBlurMin} />
to
@@ -219,35 +238,31 @@ const VariableValues = props => { to
- - -
-
- +
@@ -257,8 +272,8 @@ const VariableValues = props => { - - + + @@ -296,16 +311,20 @@ const VariableValues = props => { to From d5e9b414cf8ab80f6594c1a80946a2a2cc514578 Mon Sep 17 00:00:00 2001 From: Toan Vu Date: Tue, 25 Feb 2020 16:22:34 -0500 Subject: [PATCH 07/20] [WIP] Add accessibility features and unit tests for variables modal --- .../variable-list-modal.test.js.snap | 24 +-- .../__snapshots__/new-variable.test.js.snap | 14 +- .../new-variable/new-variable.test.js | 38 ++--- .../variables/variable-list-modal.test.js | 12 +- .../variable-property.test.js.snap | 12 +- .../__snapshots__/variable-value.test.js.snap | 30 ++-- .../variable-property.test.js | 52 ++---- .../variables/new-variable/new-variable.js | 10 +- .../variables/variable-list-modal.js | 43 ++--- .../variable-property/variable-property.js | 32 ++-- .../variable-property/variable-property.scss | 155 +++++------------ .../variable-property/variable-value.js | 157 ++++++++++++------ .../variable-property/variable-value.scss | 8 +- 13 files changed, 285 insertions(+), 302 deletions(-) diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap index 30b8b73ee3..40b139610e 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/__snapshots__/variable-list-modal.test.js.snap @@ -1,25 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableListModal VariableListModal call "onDeleteVariable" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal call "deleteVariable" 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onAddVariable" - decimalPlacesMin and decimalPlacesMax are default to 0 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "addVariable" - decimalPlacesMin and decimalPlacesMax are default to 0 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onAddVariable" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "addVariable" 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onChange" 1`] = `"

Variables

Alphanumeric plus underscore only

to
to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onChange" 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls "onClose" when click "OK" 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal VariableListModal calls onClickVarible 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal clicks on "+ Create Variable" button 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal duplicates variable 3`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal duplicates variable 3`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal focus on first-tab when tab 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; +exports[`VariableListModal VariableListModal handle invalid variables 1`] = `"

Variables

"`; -exports[`VariableListModal VariableListModal node 1`] = `"

Variables

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`VariableListModal VariableListModal node 1`] = `"

Variables

Duplicate:

"`; -exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

Alphanumeric plus underscore only

to

Duplicate:

"`; +exports[`VariableListModal onChange resets properties if type is changed 1`] = `"

Variables

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap index a2053f2fa4..2779c0ecf9 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/__snapshots__/new-variable.test.js.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableValue VariableValue calls "onAddVariable" on mouse click 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue calls "addVariable" on mouse click 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue component 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue component 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue does not call "onAddVariable" radio list keyboard click 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue does not call "addVariable" radio list keyboard click 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue does not submit for every key other than "enter" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue does not submit for every key other than "enter" 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue handles "onChange" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue handles "onChange" 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue selects item on "hover" 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue selects item on "hover" 1`] = `"
What type of variable do you want to create?
"`; -exports[`VariableValue VariableValue submits for "enter" key 1`] = `"
What type of variable do you want to create?
"`; +exports[`VariableValue VariableValue submits for "enter" key 1`] = `"
What type of variable do you want to create?
"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js index 0b46b4474b..46396ba0b6 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/new-variable/new-variable.test.js @@ -5,13 +5,13 @@ import NewVariable from '../../../../../src/scripts/oboeditor/components/variabl describe('VariableValue', () => { test('VariableValue component', () => { - const component = shallow() + const component = shallow() expect(component.html()).toMatchSnapshot() }) test('VariableValue submits for "enter" key', () => { - const onAddVariable = jest.fn() - const component = shallow() + const addVariable = jest.fn() + const component = shallow() component .find('.new-variable--type-list') @@ -20,13 +20,13 @@ describe('VariableValue', () => { key: 'Enter' }) - expect(onAddVariable).toHaveBeenCalled() + expect(addVariable).toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) test('VariableValue does not submit for every key other than "enter"', () => { - const onAddVariable = jest.fn() - const component = shallow() + const addVariable = jest.fn() + const component = shallow() component .find('.new-variable--type-list') @@ -35,13 +35,13 @@ describe('VariableValue', () => { key: 'i' }) - expect(onAddVariable).not.toHaveBeenCalled() + expect(addVariable).not.toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) test('VariableValue handles "onChange"', () => { - const onAddVariable = jest.fn() - const component = mount() + const addVariable = jest.fn() + const component = mount() component .find('input') @@ -58,37 +58,37 @@ describe('VariableValue', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableValue calls "onAddVariable" on mouse click', () => { - const onAddVariable = jest.fn() - const component = mount() + test('VariableValue calls "addVariable" on mouse click', () => { + const addVariable = jest.fn() + const component = mount() component .find('.new-variable--type-list--single-item') .at(2) .simulate('click', { type: 'click', clientX: 3, clienty: 3 }) - expect(onAddVariable).toHaveBeenCalled() + expect(addVariable).toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) - test('VariableValue does not call "onAddVariable" radio list keyboard click', () => { - const onAddVariable = jest.fn() - const component = mount() + test('VariableValue does not call "addVariable" radio list keyboard click', () => { + const addVariable = jest.fn() + const component = mount() component .find('.new-variable--type-list--single-item') .at(2) .simulate('click', { type: 'click', clientX: 0, clienty: 0 }) - expect(onAddVariable).not.toHaveBeenCalled() + expect(addVariable).not.toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) test('VariableValue selects item on "hover"', () => { - const onAddVariable = jest.fn() - const component = mount() + const addVariable = jest.fn() + const component = mount() component .find('.new-variable--type-list--single-item') diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js index 6c21403a8d..50a675e85d 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-list-modal.test.js @@ -214,7 +214,7 @@ describe('VariableListModal', () => { // Simulate input changes component - .find('.input-item') + .find('.variable-property--input-item') .at(0) .simulate('change', { target: { name: 'name', value: 'mockNewName' } }) @@ -249,7 +249,7 @@ describe('VariableListModal', () => { // Simulate input changes component - .find('.input-item') + .find('.variable-property--input-item') .at(0) .simulate('change', { target: { name: 'type', value: 'random-number' } }) @@ -258,7 +258,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal calls "onAddVariable"', () => { + test('VariableListModal calls "addVariable"', () => { const content = { variables: [ { @@ -273,7 +273,7 @@ describe('VariableListModal', () => { } const component = mount() - // Click create new variable and select a type + // Click "create new variable" and select a type component .find('.button') .at(0) @@ -300,7 +300,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal calls "onAddVariable" - decimalPlacesMin and decimalPlacesMax are default to 0', () => { + test('VariableListModal calls "addVariable" - decimalPlacesMin and decimalPlacesMax are default to 0', () => { const content = { variables: [ { @@ -343,7 +343,7 @@ describe('VariableListModal', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableListModal call "onDeleteVariable"', () => { + test('VariableListModal call "deleteVariable"', () => { global.confirm = () => true const content = { diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap index e3cf576079..117ab17e49 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-property.test.js.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Variable Properties VariableProperty calls onChange when input changes 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty calls onChange when input changes 1`] = `"

Duplicate:

"`; -exports[`Variable Properties VariableProperty clicks "delete" will call "onDeleteVariable" 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty clicks "delete" will call "deleteVariable" 1`] = `"

Duplicate:

"`; -exports[`Variable Properties VariableProperty does not call "onDeleteVariable" when user cancels 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty does not call "deleteVariable" when user cancels 1`] = `"

Duplicate:

"`; -exports[`Variable Properties VariableProperty node 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty node 1`] = `"

Duplicate:

"`; -exports[`Variable Properties VariableProperty node with invalid variable 1`] = `"
"`; +exports[`Variable Properties VariableProperty node with invalid variable 1`] = `"
"`; -exports[`Variable Properties VariableProperty node without default name or type 1`] = `"

Alphanumeric plus underscore only

Duplicate:

"`; +exports[`Variable Properties VariableProperty node without default name or type 1`] = `"

Duplicate:

"`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap index 5e012c9574..64b72ba0da 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/__snapshots__/variable-value.test.js.snap @@ -1,33 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VariableValue VariableValue 1`] = `"
"`; +exports[`VariableValue VariableValue 1`] = `"
"`; -exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; +exports[`VariableValue VariableValue component type "pick-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; -exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; +exports[`VariableValue VariableValue component type "pick-list" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

to
"`; -exports[`VariableValue VariableValue component type "pick-one" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "pick-one" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; -exports[`VariableValue VariableValue component type "pick-one" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "pick-one" without default value 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; -exports[`VariableValue VariableValue component type "random-list" 1`] = `"
to
to
"`; +exports[`VariableValue VariableValue component type "random-list" 1`] = `"
"`; -exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
to
to
"`; +exports[`VariableValue VariableValue component type "random-list" without default value 1`] = `"
"`; -exports[`VariableValue VariableValue component type "random-number" 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-number" 1`] = `"
"`; -exports[`VariableValue VariableValue component type "random-number" without default value 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-number" without default value 1`] = `"
"`; -exports[`VariableValue VariableValue component type "random-sequence" 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-sequence" 1`] = `"
"`; -exports[`VariableValue VariableValue component type "random-sequence" without default value 1`] = `"
to
"`; +exports[`VariableValue VariableValue component type "random-sequence" without default value 1`] = `"
"`; -exports[`VariableValue VariableValue component type "static-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "static-list" 1`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; -exports[`VariableValue VariableValue component type "static-value" 1`] = `"
"`; +exports[`VariableValue VariableValue component type "static-value" 1`] = `"
"`; -exports[`VariableValue VariableValue component type "static-value" without default value 1`] = `"
"`; +exports[`VariableValue VariableValue component type "static-value" without default value 1`] = `"
"`; -exports[`VariableValue VariableValue component type "static-value" without default value 2`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; +exports[`VariableValue VariableValue component type "static-value" without default value 2`] = `"

Enter values, separating each value with a comma (eg. '1, 2, 3')

"`; exports[`VariableValue VariableValue component without valid type 1`] = `null`; diff --git a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js index bec00f5fa8..fb2ff8d439 100644 --- a/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js +++ b/packages/app/obojobo-document-engine/__tests__/oboeditor/components/variables/variable-property/variable-property.test.js @@ -11,13 +11,9 @@ describe('Variable Properties', () => { value: '3' } - const onDeleteVariable = jest.fn() + const deleteVariable = jest.fn() const component = shallow( - + ) expect(component.html()).toMatchSnapshot() }) @@ -25,26 +21,18 @@ describe('Variable Properties', () => { test('VariableProperty node with invalid variable', () => { const variable = null - const onDeleteVariable = jest.fn() + const deleteVariable = jest.fn() const component = shallow( - + ) expect(component.html()).toMatchSnapshot() }) test('VariableProperty node without default name or type', () => { const variable = {} - const onDeleteVariable = jest.fn() + const deleteVariable = jest.fn() const component = shallow( - + ) expect( component @@ -62,7 +50,7 @@ describe('Variable Properties', () => { expect(component.html()).toMatchSnapshot() }) - test('VariableProperty clicks "delete" will call "onDeleteVariable"', () => { + test('VariableProperty clicks "delete" will call "deleteVariable"', () => { global.confirm = () => true const variable = { @@ -71,25 +59,21 @@ describe('Variable Properties', () => { value: '3' } - const onDeleteVariable = jest.fn() + const deleteVariable = jest.fn() const component = mount( - + ) component .find('button') - .at(0) + .at(1) .simulate('click') - expect(onDeleteVariable).toHaveBeenCalled() + expect(deleteVariable).toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) - test('VariableProperty does not call "onDeleteVariable" when user cancels', () => { + test('VariableProperty does not call "deleteVariable" when user cancels', () => { global.confirm = () => false const variable = { @@ -98,21 +82,17 @@ describe('Variable Properties', () => { value: '3' } - const onDeleteVariable = jest.fn() + const deleteVariable = jest.fn() const component = mount( - + ) component .find('button') - .at(0) + .at(1) .simulate('click') - expect(onDeleteVariable).not.toHaveBeenCalled() + expect(deleteVariable).not.toHaveBeenCalled() expect(component.html()).toMatchSnapshot() }) diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js index 60559f098f..5c97e73a80 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/new-variable/new-variable.js @@ -17,7 +17,7 @@ const NewVarible = props => { const handleKeyDown = event => { if (event.key === 'Enter') { - props.onAddVariable(currSelectType) + props.addVariable(currSelectType) } } @@ -25,7 +25,7 @@ const NewVarible = props => { // In Chrome browser, use arrow keys in radio list will trigger onClick() // The following if statement will prevent it from happening if (e.type === 'click' && e.clientX !== 0 && e.clientY !== 0) { - props.onAddVariable(type) + props.addVariable(type) } } @@ -34,7 +34,7 @@ const NewVarible = props => {
What type of variable do you want to create?
-
{ value={type} onClick={e => onClick(e, type)} onMouseEnter={() => setCurrSelectType(type)} - ref={type === currSelectType ? firstRef : null} > ))} -
+ ) } diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js index ad04fd0bc0..0b6da592c0 100644 --- a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js +++ b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/variables/variable-list-modal.js @@ -1,6 +1,6 @@ import './variable-list-modal.scss' -import React, { useRef } from 'react' +import React, { useState, useRef } from 'react' import Common from 'obojobo-document-engine/src/scripts/common' import VariableProperty from './variable-property/variable-property' @@ -12,17 +12,17 @@ const { Button } = Common.components const { SimpleDialog } = Common.components.modal const VariableListModal = props => { - const firstRef = useRef() - const tabRef = useRef() + const firstRef = useRef() // First element to fucus on when open the modal + const tabRef = useRef() // First element to focus on when open a variable - const [currSelect, setCurrSelect] = React.useState(0) - const [creatingVariable, setCreatingVariable] = React.useState(false) - const [variables, setVariables] = React.useState([...(props.content.variables || [])]) + const [currSelect, setCurrSelect] = useState(0) + const [creatingVariable, setCreatingVariable] = useState(false) + const [variables, setVariables] = useState([...(props.content.variables || [])]) const onClickVarible = index => { setCreatingVariable(false) setCurrSelect(index) - tabRef.current.focus() + tabRef.current.focus() // Tab focus on the first element } const onChange = event => { @@ -44,7 +44,7 @@ const VariableListModal = props => { setVariables(updatedVariables) } - const onAddVariable = type => { + const addVariable = type => { const nameSet = new Set() for (const variable of variables) { nameSet.add(variable.name) @@ -66,14 +66,15 @@ const VariableListModal = props => { setCreatingVariable(false) } - const onDeleteVariable = () => { + const deleteVariable = () => { const updatedVariables = [...variables] updatedVariables.splice(currSelect, 1) setVariables(updatedVariables) setCurrSelect(0) } - const onDuplicateVariable = () => { + const duplicateVariable = () => { + // Find suffix number for duplicate variable const nameSet = new Set() for (const variable of variables) { nameSet.add(variable.name) @@ -82,18 +83,18 @@ const VariableListModal = props => { const duplicateVariable = { ...variables[currSelect] } const suffixNumList = duplicateVariable.name.match(/\d+$/) - let newName = duplicateVariable.name + let prefixName = duplicateVariable.name - let siffixNum = 2 + let suffixNum = 2 if (suffixNumList) { - siffixNum = suffixNumList[0] - newName = newName.substring(0, newName.length - (siffixNum + '').length) + suffixNum = suffixNumList[0] + prefixName = prefixName.substring(0, prefixName.length - (suffixNum + '').length) } - while (nameSet.has(newName + siffixNum)) { - siffixNum++ + while (nameSet.has(prefixName + suffixNum)) { + suffixNum++ } - duplicateVariable.name = newName + siffixNum + duplicateVariable.name = prefixName + suffixNum setVariables([...variables, duplicateVariable]) setCurrSelect(variables.length) @@ -112,7 +113,7 @@ const VariableListModal = props => { focusOnFirstElement={focusOnFirstElement} >
-