From 13e324b52d48a517afd9c9d72a8f8566c8da6d7d Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 5 Jun 2019 12:53:32 -0400
Subject: [PATCH] Use title card instead of video if using scratchDesktop flag
---
src/components/cards/cards.jsx | 30 +++++++++++---
src/containers/cards.jsx | 4 +-
test/unit/components/cards.test.jsx | 62 +++++++++++++++++++++++++++++
3 files changed, 89 insertions(+), 7 deletions(-)
create mode 100644 test/unit/components/cards.test.jsx
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index d439b5cf8..9bb147f13 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 751d523f7..9777a5a95 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 000000000..617891e02
--- /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');
+ });
+});
--
GitLab