From 8bf73ed3fad0526b2d32e8e06a651fddaa7bf921 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Mon, 2 Apr 2018 10:37:39 -0400
Subject: [PATCH] Show the costume/sound number similar to Scratch 2.
Add a jest unit test for making sure the number is rendered out when
provided and not when not provided.
---
src/components/asset-panel/selector.jsx | 1 +
.../sprite-selector-item.css | 8 ++
.../sprite-selector-item.jsx | 4 +
.../sprite-selector-item.test.jsx.snap | 79 +++++++++++++++++++
.../components/sprite-selector-item.test.jsx | 10 +++
5 files changed, 102 insertions(+)
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
index cc5abed4d..ff818415a 100644
--- a/src/components/asset-panel/selector.jsx
+++ b/src/components/asset-panel/selector.jsx
@@ -45,6 +45,7 @@ const Selector = props => {
id={index}
key={`asset-${index}`}
name={item.name}
+ number={index + 1 /* 1-indexed */}
selected={index === selectedItemIndex}
onClick={onItemClick}
onDeleteButtonClick={onDeleteClick}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 60f839356..a0880a518 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -56,3 +56,11 @@
right: 0.125rem;
z-index: 2;
}
+
+.number {
+ position: absolute;
+ top: 0.125rem;
+ left: 0.125rem;
+ font-size: 0.625rem;
+ z-index: 2;
+}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index abb47bb54..35eeebe00 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -31,6 +31,9 @@ const SpriteSelectorItem = props => (
onClick={props.onDeleteButtonClick}
/>
) : null }
+ {typeof props.number === 'undefined' ? null : (
+ <div className={styles.number}>{props.number}</div>
+ )}
{props.costumeURL ? (
<CostumeCanvas
className={styles.spriteImage}
@@ -69,6 +72,7 @@ SpriteSelectorItem.propTypes = {
className: PropTypes.string,
costumeURL: PropTypes.string,
name: PropTypes.string.isRequired,
+ number: PropTypes.number,
onClick: PropTypes.func,
onDeleteButtonClick: PropTypes.func,
onDuplicateButtonClick: PropTypes.func,
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index 4ecf19565..eaca8d936 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -1,5 +1,84 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`SpriteSelectorItemComponent matches snapshot when given a number to show 1`] = `
+<div
+ className="react-contextmenu-wrapper ponies undefined"
+ onClick={[Function]}
+ onContextMenu={[Function]}
+ onMouseDown={[Function]}
+ onMouseEnter={undefined}
+ onMouseLeave={undefined}
+ onMouseOut={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchStart={[Function]}
+>
+ <div
+ aria-label="Close"
+ className=""
+ onClick={[Function]}
+ role="button"
+ tabIndex="0"
+ >
+ <img
+ className={undefined}
+ src="test-file-stub"
+ />
+ </div>
+ <div
+ className={undefined}
+ >
+ 5
+ </div>
+ <canvas
+ className={undefined}
+ height={32}
+ style={
+ Object {
+ "height": "32px",
+ "width": "32px",
+ }
+ }
+ width={32}
+ />
+ <div
+ className={undefined}
+ >
+ Pony sprite
+ </div>
+ <nav
+ className="react-contextmenu"
+ onContextMenu={[Function]}
+ onMouseLeave={[Function]}
+ role="menu"
+ style={
+ Object {
+ "opacity": 0,
+ "pointerEvents": "none",
+ "position": "fixed",
+ }
+ }
+ tabIndex="-1"
+ >
+ <div
+ aria-disabled="false"
+ aria-orientation={null}
+ className="react-contextmenu-item"
+ onClick={[Function]}
+ onMouseLeave={[Function]}
+ onMouseMove={[Function]}
+ onTouchEnd={[Function]}
+ role="menuitem"
+ tabIndex="-1"
+ >
+ <span>
+ delete
+ </span>
+ </div>
+ </nav>
+</div>
+`;
+
exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
<div
className="react-contextmenu-wrapper ponies undefined"
diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
index e1d7ac7bb..5848e0ca9 100644
--- a/test/unit/components/sprite-selector-item.test.jsx
+++ b/test/unit/components/sprite-selector-item.test.jsx
@@ -11,6 +11,7 @@ describe('SpriteSelectorItemComponent', () => {
let onClick;
let onDeleteButtonClick;
let selected;
+ let number;
// Wrap this in a function so it gets test specific states and can be reused.
const getComponent = function () {
@@ -19,6 +20,7 @@ describe('SpriteSelectorItemComponent', () => {
className={className}
costumeURL={costumeURL}
name={name}
+ number={number}
selected={selected}
onClick={onClick}
onDeleteButtonClick={onDeleteButtonClick}
@@ -33,6 +35,8 @@ describe('SpriteSelectorItemComponent', () => {
onClick = jest.fn();
onDeleteButtonClick = jest.fn();
selected = true;
+ // Reset number to undefined since it is an optional prop
+ number = undefined; // eslint-disable-line no-undefined
});
test('matches snapshot when selected', () => {
@@ -40,6 +44,12 @@ describe('SpriteSelectorItemComponent', () => {
expect(component.toJSON()).toMatchSnapshot();
});
+ test('matches snapshot when given a number to show', () => {
+ number = 5;
+ const component = componentWithIntl(getComponent());
+ expect(component.toJSON()).toMatchSnapshot();
+ });
+
test('does not have a close box when not selected', () => {
selected = false;
const wrapper = shallowWithIntl(getComponent());
--
GitLab