Merge pull request #4376 from paulkaplan/fix-delete-button

Fix delete button on sprite tiles

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -26,13 +26,6 @@ const SpriteSelectorItem = props => (
         disable={props.dragging}
         id={`${props.name}-${contextMenuId}`}
     >
-        {(props.selected && props.onDeleteButtonClick) ? (
-            <CloseButton
-                className={styles.deleteButton}
-                size={CloseButton.SIZE_SMALL}
-                onClick={props.onDeleteButtonClick}
-            />
-        ) : null }
         {typeof props.number === 'undefined' ? null : (
             <div className={styles.number}>{props.number}</div>
         )}
@@ -53,6 +46,13 @@ const SpriteSelectorItem = props => (
                 <div className={styles.spriteDetails}>{props.details}</div>
             ) : null}
         </div>
+        {(props.selected && props.onDeleteButtonClick) ? (
+            <CloseButton
+                className={styles.deleteButton}
+                size={CloseButton.SIZE_SMALL}
+                onClick={props.onDeleteButtonClick}
+            />
+        ) : null }
         {props.onDuplicateButtonClick || props.onDeleteButtonClick || props.onExportButtonClick ? (
             <ContextMenu id={`${props.name}-${contextMenuId++}`}>
                 {props.onDuplicateButtonClick ? (

test/integration/sprites.test.js

@@ -76,6 +76,17 @@ describe('Working with sprites', () => {
         await expect(logs).toEqual([]);
     });
 
+    test('Deleting by x button on sprite tile', async () => {
+        await loadUri(uri);
+        await clickXpath('//button[@title="Try It"]');
+        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
+        await clickXpath('//*[@aria-label="Close"]'); // Only visible close button is on the sprite
+        // Confirm that the stage has been switched to
+        await findByText('Stage selected: no motion blocks');
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
     test('Adding a sprite by uploading a png', async () => {
         await loadUri(uri);
         await clickXpath('//button[@title="Try It"]');

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -13,18 +13,6 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
 >
-  <div
-    aria-label="Close"
-    className=""
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <img
-      className=""
-      src="test-file-stub"
-    />
-  </div>
   <div
     className={undefined}
   >
@@ -57,6 +45,18 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
       480 x 360
     </div>
   </div>
+  <div
+    aria-label="Close"
+    className=""
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <img
+      className=""
+      src="test-file-stub"
+    />
+  </div>
   <nav
     className="react-contextmenu"
     onContextMenu={[Function]}
@@ -103,18 +103,6 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
 >
-  <div
-    aria-label="Close"
-    className=""
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <img
-      className=""
-      src="test-file-stub"
-    />
-  </div>
   <div
     className={undefined}
   >
@@ -137,6 +125,18 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
       Pony sprite
     </div>
   </div>
+  <div
+    aria-label="Close"
+    className=""
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <img
+      className=""
+      src="test-file-stub"
+    />
+  </div>
   <nav
     className="react-contextmenu"
     onContextMenu={[Function]}