From e2eed1e79ccc45946aa87f97f7ce8b168e15d62e Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Thu, 3 Feb 2022 20:34:54 +1300
Subject: [PATCH] Standard import for state; Updating GridItem which needs
 support for useDrag hook (render only, not actual dnd UX tests)

---
 __tests__/components/GridItem.test.js         |  21 +-
 .../__snapshots__/GridItem.test.js.snap       | 388 +++++++++---------
 __tests__/state.js                            |   2 +-
 __tests__/views/Album.test.js                 |   3 +-
 4 files changed, 221 insertions(+), 193 deletions(-)

diff --git a/__tests__/components/GridItem.test.js b/__tests__/components/GridItem.test.js
index 0cf824e8..30fa3ae3 100755
--- a/__tests__/components/GridItem.test.js
+++ b/__tests__/components/GridItem.test.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import TestRenderer from 'react-test-renderer';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { GridItem } from '../../src/js/components/GridItem';
-import { core } from '../state';
+import state from '../state';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
   useDispatch: () => jest.fn(),
+  useDrag: jest.fn(),
 }));
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -21,10 +24,14 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('<GridItem />', () => {
+  const { core: { items } } = state;
+
   it('should handle album', () => {
     const result = TestRenderer.create(
       <BrowserRouter>
-        <GridItem item={core.items['local:album:md5:66fbea3593ba96a15a9d4188bebab50b']} />
+        <DndProvider backend={HTML5Backend}>
+          <GridItem item={items['local:album:md5:66fbea3593ba96a15a9d4188bebab50b']} />
+        </DndProvider>
       </BrowserRouter>
     ).toJSON();
     expect(result).toMatchSnapshot();
@@ -32,7 +39,9 @@ describe('<GridItem />', () => {
   it('should handle artist', () => {
     const result = TestRenderer.create(
       <BrowserRouter>
-        <GridItem item={core.items['local:artist:md5:4f6e4f979e2c40c5e6ad1735804c29bc']} />
+        <DndProvider backend={HTML5Backend}>
+          <GridItem item={items['local:artist:md5:4f6e4f979e2c40c5e6ad1735804c29bc']} />
+        </DndProvider>
       </BrowserRouter>
     ).toJSON();
     expect(result).toMatchSnapshot();
@@ -40,9 +49,11 @@ describe('<GridItem />', () => {
   it('should handle playlist', () => {
     const result = TestRenderer.create(
       <BrowserRouter>
-        <GridItem item={core.items['m3u:Local%20tester.m3u8']} />
+        <DndProvider backend={HTML5Backend}>
+          <GridItem item={items['m3u:Local%20tester.m3u8']} />
+        </DndProvider>
       </BrowserRouter>
     ).toJSON();
     expect(result).toMatchSnapshot();
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/components/__snapshots__/GridItem.test.js.snap b/__tests__/components/__snapshots__/GridItem.test.js.snap
index 32abf510..50ed0ad5 100644
--- a/__tests__/components/__snapshots__/GridItem.test.js.snap
+++ b/__tests__/components/__snapshots__/GridItem.test.js.snap
@@ -1,76 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GridItem /> should handle album 1`] = `
-<a
-  className="grid__item grid__item--album "
-  data-qa-file="Link"
-  data-qa-node="RouterLink"
-  href="/album/bG9jYWw6YWxidW06bWQ1OjY2ZmJlYTM1OTNiYTk2YTE1YTlkNDE4OGJlYmFiNTBi/Sirens of the Sea"
-  onClick={[Function]}
-  onContextMenu={[Function]}
+<div
+  className="grid__item grid__item--album"
+  data-qa-file="GridItem"
+  data-qa-node="div"
 >
-  <div
-    className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
-    data-qa-file="Thumbnail"
-    data-qa-node="div"
+  <a
+    className=" "
+    data-qa-file="Link"
+    data-qa-node="RouterLink"
+    href="/album/bG9jYWw6YWxidW06bWQ1OjY2ZmJlYTM1OTNiYTk2YTE1YTlkNDE4OGJlYmFiNTBi/Sirens of the Sea"
+    onClick={[Function]}
+    onContextMenu={[Function]}
   >
-    <i
-      className="icon icon--material thumbnail__placeholder"
-      data-qa-file="Icon"
-      data-qa-node="i"
-    >
-      album
-    </i>
     <div
-      className="thumbnail__image"
+      className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
       data-qa-file="Thumbnail"
       data-qa-node="div"
-      style={
-        Object {
-          "backgroundImage": "url(\\"/local/17338e740316f18dbb5e3331ac6be6c1-500x500.jpeg\\")",
-        }
-      }
-    />
-    <div
-      className="thumbnail__actions"
-      data-qa-file="Thumbnail"
-      data-qa-node="div"
-    />
-  </div>
-  <div
-    className="grid__item__name"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    Sirens of the Sea
-  </div>
-  <div
-    className="grid__item__secondary"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    <ul
-      className="grid__item__secondary__content details"
-      data-qa-file="GridItem"
-      data-qa-node="ul"
     >
-      <span
-        aria-hidden={true}
-        className="fa fa-folder icon icon--fontawesome source"
+      <i
+        className="icon icon--material thumbnail__placeholder"
         data-qa-file="Icon"
-        data-qa-node="FontAwesome"
-        type="fontawesome"
+        data-qa-node="i"
+      >
+        album
+      </i>
+      <div
+        className="thumbnail__image"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+        style={
+          Object {
+            "backgroundImage": "url(\\"/local/17338e740316f18dbb5e3331ac6be6c1-500x500.jpeg\\")",
+          }
+        }
       />
-      <li
+      <div
+        className="thumbnail__actions"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+      />
+    </div>
+    <div
+      className="grid__item__name"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      Sirens of the Sea
+    </div>
+    <div
+      className="grid__item__secondary"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      <ul
+        className="grid__item__secondary__content details"
         data-qa-file="GridItem"
-        data-qa-node="li"
+        data-qa-node="ul"
       >
         <span
-          className="undefined links-sentence"
-          data-qa-file="LinksSentence"
-          data-qa-node="span"
+          aria-hidden={true}
+          className="fa fa-folder icon icon--fontawesome source"
+          data-qa-file="Icon"
+          data-qa-node="FontAwesome"
+          type="fontawesome"
+        />
+        <li
+          data-qa-file="GridItem"
+          data-qa-node="li"
         >
           <span
+            className="undefined links-sentence"
             data-qa-file="LinksSentence"
             data-qa-node="span"
           >
@@ -78,156 +79,173 @@ exports[`<GridItem /> should handle album 1`] = `
               data-qa-file="LinksSentence"
               data-qa-node="span"
             >
-              Above & Beyond
+              <span
+                data-qa-file="LinksSentence"
+                data-qa-node="span"
+              >
+                Above & Beyond
+              </span>
             </span>
           </span>
-        </span>
-      </li>
-    </ul>
-  </div>
-</a>
+        </li>
+      </ul>
+    </div>
+  </a>
+</div>
 `;
 
 exports[`<GridItem /> should handle artist 1`] = `
-<a
-  className="grid__item grid__item--artist "
-  data-qa-file="Link"
-  data-qa-node="RouterLink"
-  href="/artist/bG9jYWw6YXJ0aXN0Om1kNTo0ZjZlNGY5NzllMmM0MGM1ZTZhZDE3MzU4MDRjMjliYw=="
-  onClick={[Function]}
-  onContextMenu={[Function]}
+<div
+  className="grid__item grid__item--artist"
+  data-qa-file="GridItem"
+  data-qa-node="div"
 >
-  <div
-    className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
-    data-qa-file="Thumbnail"
-    data-qa-node="div"
+  <a
+    className=" "
+    data-qa-file="Link"
+    data-qa-node="RouterLink"
+    href="/artist/bG9jYWw6YXJ0aXN0Om1kNTo0ZjZlNGY5NzllMmM0MGM1ZTZhZDE3MzU4MDRjMjliYw=="
+    onClick={[Function]}
+    onContextMenu={[Function]}
   >
-    <i
-      className="icon icon--material thumbnail__placeholder"
-      data-qa-file="Icon"
-      data-qa-node="i"
-    >
-      perm_identity
-    </i>
     <div
-      className="thumbnail__image"
+      className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
       data-qa-file="Thumbnail"
       data-qa-node="div"
-      style={
-        Object {
-          "backgroundImage": "url(\\"https://i.scdn.co/image/4dc7080ef509c36203a131a0eab8dd5e4800d7c2\\")",
-        }
-      }
-    />
-    <div
-      className="thumbnail__actions"
-      data-qa-file="Thumbnail"
-      data-qa-node="div"
-    />
-  </div>
-  <div
-    className="grid__item__name"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    Above & Beyond
-  </div>
-  <div
-    className="grid__item__secondary"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    <ul
-      className="grid__item__secondary__content details"
-      data-qa-file="GridItem"
-      data-qa-node="ul"
     >
-      <span
-        aria-hidden={true}
-        className="fa fa-folder icon icon--fontawesome source"
+      <i
+        className="icon icon--material thumbnail__placeholder"
         data-qa-file="Icon"
-        data-qa-node="FontAwesome"
-        type="fontawesome"
-      />
-      <li
-        data-qa-file="GridItem"
-        data-qa-node="li"
+        data-qa-node="i"
       >
-        2 albums
-      </li>
-    </ul>
-  </div>
-</a>
+        perm_identity
+      </i>
+      <div
+        className="thumbnail__image"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+        style={
+          Object {
+            "backgroundImage": "url(\\"https://i.scdn.co/image/4dc7080ef509c36203a131a0eab8dd5e4800d7c2\\")",
+          }
+        }
+      />
+      <div
+        className="thumbnail__actions"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+      />
+    </div>
+    <div
+      className="grid__item__name"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      Above & Beyond
+    </div>
+    <div
+      className="grid__item__secondary"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      <ul
+        className="grid__item__secondary__content details"
+        data-qa-file="GridItem"
+        data-qa-node="ul"
+      >
+        <span
+          aria-hidden={true}
+          className="fa fa-folder icon icon--fontawesome source"
+          data-qa-file="Icon"
+          data-qa-node="FontAwesome"
+          type="fontawesome"
+        />
+        <li
+          data-qa-file="GridItem"
+          data-qa-node="li"
+        >
+          2 albums
+        </li>
+      </ul>
+    </div>
+  </a>
+</div>
 `;
 
 exports[`<GridItem /> should handle playlist 1`] = `
-<a
-  className="grid__item grid__item--playlist "
-  data-qa-file="Link"
-  data-qa-node="RouterLink"
-  href="/playlist/bTN1OkxvY2FsJTIwdGVzdGVyLm0zdTg=/Local tester"
-  onClick={[Function]}
-  onContextMenu={[Function]}
+<div
+  className="grid__item grid__item--playlist"
+  data-qa-file="GridItem"
+  data-qa-node="div"
 >
-  <div
-    className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
-    data-qa-file="Thumbnail"
-    data-qa-node="div"
+  <a
+    className=" "
+    data-qa-file="Link"
+    data-qa-node="RouterLink"
+    href="/playlist/bTN1OkxvY2FsJTIwdGVzdGVyLm0zdTg=/Local tester"
+    onClick={[Function]}
+    onContextMenu={[Function]}
   >
-    <i
-      className="icon icon--material thumbnail__placeholder"
-      data-qa-file="Icon"
-      data-qa-node="i"
-    >
-      queue_music
-    </i>
     <div
-      className="thumbnail__image"
+      className="thumbnail thumbnail--loaded thumbnail--medium grid__item__thumbnail"
       data-qa-file="Thumbnail"
       data-qa-node="div"
-      style={
-        Object {
-          "backgroundImage": "url(\\"null\\")",
-        }
-      }
-    />
-    <div
-      className="thumbnail__actions"
-      data-qa-file="Thumbnail"
-      data-qa-node="div"
-    />
-  </div>
-  <div
-    className="grid__item__name"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    Local tester
-  </div>
-  <div
-    className="grid__item__secondary"
-    data-qa-file="GridItem"
-    data-qa-node="div"
-  >
-    <ul
-      className="grid__item__secondary__content details"
-      data-qa-file="GridItem"
-      data-qa-node="ul"
     >
-      <span
-        aria-hidden={true}
-        className="fa fa-folder icon icon--fontawesome source"
+      <i
+        className="icon icon--material thumbnail__placeholder"
         data-qa-file="Icon"
-        data-qa-node="FontAwesome"
-        type="fontawesome"
-      />
-      <li
-        data-qa-file="GridItem"
-        data-qa-node="li"
+        data-qa-node="i"
       >
-        13 tracks
-      </li>
-    </ul>
-  </div>
-</a>
+        queue_music
+      </i>
+      <div
+        className="thumbnail__image"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+        style={
+          Object {
+            "backgroundImage": "url(\\"null\\")",
+          }
+        }
+      />
+      <div
+        className="thumbnail__actions"
+        data-qa-file="Thumbnail"
+        data-qa-node="div"
+      />
+    </div>
+    <div
+      className="grid__item__name"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      Local tester
+    </div>
+    <div
+      className="grid__item__secondary"
+      data-qa-file="GridItem"
+      data-qa-node="div"
+    >
+      <ul
+        className="grid__item__secondary__content details"
+        data-qa-file="GridItem"
+        data-qa-node="ul"
+      >
+        <span
+          aria-hidden={true}
+          className="fa fa-folder icon icon--fontawesome source"
+          data-qa-file="Icon"
+          data-qa-node="FontAwesome"
+          type="fontawesome"
+        />
+        <li
+          data-qa-file="GridItem"
+          data-qa-node="li"
+        >
+          13 tracks
+        </li>
+      </ul>
+    </div>
+  </a>
+</div>
 `;
diff --git a/__tests__/state.js b/__tests__/state.js
index f22366ad..3427392e 100755
--- a/__tests__/state.js
+++ b/__tests__/state.js
@@ -259,4 +259,4 @@ state.core.items['jest:track:three'] = {
 	]
 };
 
-module.exports = state;
+export default state;
diff --git a/__tests__/views/Album.test.js b/__tests__/views/Album.test.js
index b7af2475..43061473 100755
--- a/__tests__/views/Album.test.js
+++ b/__tests__/views/Album.test.js
@@ -4,8 +4,7 @@ import TestRenderer from 'react-test-renderer';
 import { Album } from '../../src/js/views/Album';
 import * as uiActions from '../../src/js/services/ui/actions';
 import * as coreActions from '../../src/js/services/core/actions';
-
-const state = require('../state');
+import state from '../state';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),