diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx index d439b5cf8e91f391dceabca0146cda3b69f4de59..9bb147f130f4c1f74e2d91bff34bc3a80c949f07 100644 --- a/src/components/cards/cards.jsx +++ b/src/components/cards/cards.jsx @@ -288,6 +288,7 @@ const Cards = props => { onShowAll, onNextStep, onPrevStep, + showVideos, step, expanded, ...posProps @@ -356,11 +357,18 @@ const Cards = props => { /> ) : ( steps[step].video ? ( - <VideoStep - dragging={dragging} - expanded={expanded} - video={translateVideo(steps[step].video, locale)} - /> + showVideos ? ( + <VideoStep + dragging={dragging} + expanded={expanded} + video={translateVideo(steps[step].video, locale)} + /> + ) : ( // Else show the deck image and title + <ImageStep + image={content[activeDeckId].img} + title={content[activeDeckId].name} + /> + ) ) : ( <ImageStep image={translateImage(steps[step].image, locale)} @@ -410,9 +418,19 @@ Cards.propTypes = { onShowAll: PropTypes.func, onShrinkExpandCards: PropTypes.func.isRequired, onStartDrag: PropTypes.func, + showVideos: PropTypes.bool, step: PropTypes.number.isRequired, x: PropTypes.number, y: PropTypes.number }; -export default Cards; +Cards.defaultProps = { + showVideos: true +}; + +export { + Cards as default, + // Others exported for testability + ImageStep, + VideoStep +}; diff --git a/src/containers/cards.jsx b/src/containers/cards.jsx index 751d523f7153e1711cda00894a12b7dd0092a2ca..9777a5a9509d540b92e2f95e4f51c68889361299 100644 --- a/src/containers/cards.jsx +++ b/src/containers/cards.jsx @@ -19,6 +19,7 @@ import { import CardsComponent from '../components/cards/cards.jsx'; import {loadImageData} from '../lib/libraries/decks/translate-image.js'; +import {notScratchDesktop} from '../lib/isScratchDesktop'; class Cards extends React.Component { componentDidMount () { @@ -52,7 +53,8 @@ const mapStateToProps = state => ({ y: state.scratchGui.cards.y, isRtl: state.locales.isRtl, locale: state.locales.locale, - dragging: state.scratchGui.cards.dragging + dragging: state.scratchGui.cards.dragging, + showVideos: notScratchDesktop() }); const mapDispatchToProps = dispatch => ({ diff --git a/test/unit/components/cards.test.jsx b/test/unit/components/cards.test.jsx new file mode 100644 index 0000000000000000000000000000000000000000..617891e020149bb88f4c9446babc17f2118f9caa --- /dev/null +++ b/test/unit/components/cards.test.jsx @@ -0,0 +1,62 @@ +import React from 'react'; +import {mountWithIntl} from '../../helpers/intl-helpers.jsx'; + +// Mock this utility because it uses dynamic imports that do not work with jest +jest.mock('../../../src/lib/libraries/decks/translate-image.js', () => {}); + +import Cards, {ImageStep, VideoStep} from '../../../src/components/cards/cards.jsx'; + +describe('Cards component', () => { + const defaultProps = () => ({ + activeDeckId: 'id1', + content: { + id1: { + name: 'id1 - name', + img: 'id1 - img', + steps: [{video: 'videoUrl'}] + } + }, + dragging: false, + expanded: true, + isRtl: false, + locale: 'en', + onActivateDeckFactory: jest.fn(), + onCloseCards: jest.fn(), + onDrag: jest.fn(), + onEndDrag: jest.fn(), + onNextStep: jest.fn(), + onPrevStep: jest.fn(), + onShowAll: jest.fn(), + onShrinkExpandCards: jest.fn(), + onStartDrag: jest.fn(), + showVideos: true, + step: 0, + x: 0, + y: 0 + }); + + test('showVideos=true shows the video step', () => { + const component = mountWithIntl( + <Cards + {...defaultProps()} + showVideos + /> + ); + expect(component.find(ImageStep).exists()).toEqual(false); + expect(component.find(VideoStep).exists()).toEqual(true); + }); + + test('showVideos=false shows the title image/name instead of video step', () => { + const component = mountWithIntl( + <Cards + {...defaultProps()} + showVideos={false} + /> + ); + expect(component.find(VideoStep).exists()).toEqual(false); + + const imageStep = component.find(ImageStep); + expect(imageStep.props().image).toEqual('id1 - img'); + expect(imageStep.props().title).toEqual('id1 - name'); + }); +});