secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Standard import for state; Updating GridItem which needs support for useDrag hook (render only, not actual dnd UX tests)

Browse Source
This commit is contained in:
James Barnsley
2022-02-03 20:34:54 +13:00
parent 276663c990
commit e2eed1e79c
4 changed files with 221 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
__tests__/components/GridItem.test.js
View File

@ -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();
});
});
});

388
__tests__/components/__snapshots__/GridItem.test.js.snap
View File

@ -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>
`;

2
__tests__/state.js
View File

@ -259,4 +259,4 @@ state.core.items['jest:track:three'] = {
]
};
module.exports = state;
export default state;

3
__tests__/views/Album.test.js
View File

@ -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(),