diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index 7d4c29cead22d64ff2bbf8aae686ded056bac3d0..11971c87f28fffda658921ffec8f0e9a822abc7c 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -4,7 +4,7 @@ import React from 'react'; import VM from 'scratch-vm'; import SpriteLibrary from '../../containers/sprite-library.jsx'; - +import BackdropLibrary from '../../containers/backdrop-library.jsx'; import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx'; import StageSelector from '../../containers/stage-selector.jsx'; @@ -17,6 +17,7 @@ import styles from './target-pane.css'; * @returns {React.Component} rendered component */ const TargetPane = ({ + backdropLibraryVisible, editingTarget, spriteLibraryVisible, onChangeSpriteDirection, @@ -29,6 +30,7 @@ const TargetPane = ({ onDuplicateSprite, onNewSpriteClick, onRequestCloseSpriteLibrary, + onRequestCloseBackdropLibrary, onSelectSprite, stage, sprites, @@ -72,6 +74,12 @@ const TargetPane = ({ onRequestClose={onRequestCloseSpriteLibrary} /> ) : null} + {backdropLibraryVisible ? ( + <BackdropLibrary + vm={vm} + onRequestClose={onRequestCloseBackdropLibrary} + /> + ) : null} </div> </div> </div> @@ -96,6 +104,7 @@ const spriteShape = PropTypes.shape({ }); TargetPane.propTypes = { + backdropLibraryVisible: PropTypes.bool, editingTarget: PropTypes.string, extensionLibraryVisible: PropTypes.bool, onChangeSpriteDirection: PropTypes.func, @@ -107,6 +116,7 @@ TargetPane.propTypes = { onDeleteSprite: PropTypes.func, onDuplicateSprite: PropTypes.func, onNewSpriteClick: PropTypes.func, + onRequestCloseBackdropLibrary: PropTypes.func, onRequestCloseExtensionLibrary: PropTypes.func, onRequestCloseSpriteLibrary: PropTypes.func, onSelectSprite: PropTypes.func, diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx index 1438a9b71abd2f67e09699e2fd7ee166716b5c95..07b55f03e258c83fb37a9d722149183f2065f65b 100644 --- a/src/containers/backdrop-library.jsx +++ b/src/containers/backdrop-library.jsx @@ -23,7 +23,9 @@ class BackdropLibrary extends React.Component { skinId: null }; this.props.vm.addBackdrop(item.md5, vmBackdrop).then(() => { - this.props.onNewBackdrop(); + if (this.props.onNewBackdrop) { + this.props.onNewBackdrop(); + } }); } render () { @@ -39,7 +41,7 @@ class BackdropLibrary extends React.Component { } BackdropLibrary.propTypes = { - onNewBackdrop: PropTypes.func.isRequired, + onNewBackdrop: PropTypes.func, onRequestClose: PropTypes.func, vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index 1b069876d98a1a60cb67788ed444d903e8f38aa6..62d16331119ddcb3779b53cc78ee3793b2448052 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -5,6 +5,7 @@ import {connect} from 'react-redux'; import { openSpriteLibrary, + closeBackdropLibrary, closeSpriteLibrary } from '../reducers/modals'; @@ -90,7 +91,8 @@ const mapStateToProps = state => ({ return sprites; }, {}), stage: state.targets.stage, - spriteLibraryVisible: state.modals.spriteLibrary + spriteLibraryVisible: state.modals.spriteLibrary, + backdropLibraryVisible: state.modals.backdropLibrary }); const mapDispatchToProps = dispatch => ({ onNewSpriteClick: e => { @@ -99,6 +101,9 @@ const mapDispatchToProps = dispatch => ({ }, onRequestCloseSpriteLibrary: () => { dispatch(closeSpriteLibrary()); + }, + onRequestCloseBackdropLibrary: () => { + dispatch(closeBackdropLibrary()); } }); diff --git a/test/integration/test.js b/test/integration/test.js index ca54db33788c5d594c547e5755c3422f706dffc0..58b488ecda88325b1991647c3c3ce3dafbae5973 100644 --- a/test/integration/test.js +++ b/test/integration/test.js @@ -74,6 +74,16 @@ describe('costumes, sounds and variables', () => { await expect(logs).toEqual([]); }); + test('Adding a backdrop', async () => { + await loadUri(uri); + await clickText('Add Backdrop'); + const el = await findByXpath("//input[@placeholder='what are you looking for?']"); + await el.sendKeys('blue'); + await clickText('Blue Sky'); // Should close the modal + const logs = await getLogs(errorWhitelist); + await expect(logs).toEqual([]); + }); + test('Adding a sound', async () => { await loadUri(uri); await clickText('Sounds');