Standard import for state; Updating GridItem which needs support for useDrag hook (render only, not actual dnd UX tests)
This commit is contained in:
James Barnsley
@ -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,7 +49,9 @@ 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();
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -259,4 +259,4 @@ state.core.items['jest:track:three'] = {
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = state;
|
||||
export default state;
|
||||
|
||||
@ -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(),
|
||||
|
||||
Reference in New Issue
Block a user