packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dashboard container should display genres after going to genres tab 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="dashboard"
>
<div
class="dashboard_tabs"
>
<div
class="ui pointing secondary menu"
>
<a
class="item"
>
Trending
</a>
<a
class="item"
>
Top Tracks
</a>
<a
class="active item"
>
Genres
</a>
</div>
<div
class="ui segment active tab"
>
<div
class="genre_tab_container"
>
<div
class="genre_container"
>
<div
class="genre_overlay"
>
<div
class="smooth_image_wrapper"
>
<img
class="image"
src="https://picsum.photos/256?random=0"
/>
<img
class="placeholder"
src="test-file-stub"
style="opacity: 1;"
/>
</div>
</div>
<div
class="genre_name"
>
<div
class="svg_icon"
>
test-file-stub
</div>
rock
</div>
</div>
<div
class="genre_container"
>
<div
class="genre_overlay"
>
<div
class="smooth_image_wrapper"
>
<img
class="image"
src="https://picsum.photos/256?random=1"
/>
<img
class="placeholder"
src="test-file-stub"
style="opacity: 1;"
/>
</div>
</div>
<div
class="genre_name"
>
<div
class="svg_icon"
>
test-file-stub
</div>
pop
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Dashboard container should display the trending music 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="dashboard"
>
<div
class="dashboard_tabs"
>
<div
class="ui pointing secondary menu"
>
<a
class="active item"
>
Trending
</a>
<a
class="item"
>
Top Tracks
</a>
<a
class="item"
>
Genres
</a>
</div>
<div
class="ui segment active tab editorials_tab"
>
<div
class="row"
>
<div
class="cards_row_container"
>
<div
class="header_row"
>
<h2>
Trending playlists
</h2>
<div
class="scroll_buttons"
>
<div
class="filter_container"
>
<div
class="ui input cards_filter"
>
<input
placeholder="Filter..."
type="text"
value=""
/>
</div>
<button
class="ui blue icon button nuclear button borderless filter_button"
>
<i
aria-hidden="true"
class="filter icon"
/>
</button>
</div>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron left icon"
/>
</button>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron right icon"
/>
</button>
</div>
</div>
<div
class="cards_row"
>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
playlist 1
</h4>
</div>
</div>
</div>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
playlist 2
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="promoted_artist_row"
>
<div
class="promoted_artist"
style="background-image: url(https://nuclear.js.org/background.jpg);"
>
<div
class="promoted_artist_info"
>
<div
class="name"
>
Promoted artist 1
</div>
<div
class="description"
>
Promoted artist 1 description
</div>
<div
class="spacer"
/>
<div
class="button_row"
>
<button
class="ui pink circular button nuclear button promoted_artist_button"
>
<i
aria-hidden="true"
class="itunes note icon"
/>
Check out
</button>
<button
class="ui button nuclear button text promoted_artist_button external_link"
>
<i
aria-hidden="true"
class="external icon"
/>
External link
</button>
</div>
</div>
<div
class="promoted_artist_image"
>
<div
class="image"
style="background-image: url(https://promoted-artist-1.example/picture.jpg); mask-image: url(test-file-stub);"
/>
<img
class="mask_shadow"
src="test-file-stub"
/>
</div>
</div>
</div>
<div
class="row"
>
<div
class="cards_row_container"
>
<div
class="header_row"
>
<h2>
Trending artists
</h2>
<div
class="scroll_buttons"
>
<div
class="filter_container"
>
<div
class="ui input cards_filter"
>
<input
placeholder="Filter..."
type="text"
value=""
/>
</div>
<button
class="ui blue icon button nuclear button borderless filter_button"
>
<i
aria-hidden="true"
class="filter icon"
/>
</button>
</div>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron left icon"
/>
</button>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron right icon"
/>
</button>
</div>
</div>
<div
class="cards_row"
>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
artist 1
</h4>
</div>
</div>
</div>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
artist 2
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="row"
>
<div
class="cards_row_container"
>
<div
class="header_row"
>
<h2>
Trending albums
</h2>
<div
class="scroll_buttons"
>
<div
class="filter_container"
>
<div
class="ui input cards_filter"
>
<input
placeholder="Filter..."
type="text"
value=""
/>
</div>
<button
class="ui blue icon button nuclear button borderless filter_button"
>
<i
aria-hidden="true"
class="filter icon"
/>
</button>
</div>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron left icon"
/>
</button>
<button
class="ui blue tiny circular icon button nuclear button borderless scroll_button"
>
<i
aria-hidden="true"
class="chevron right icon"
/>
</button>
</div>
</div>
<div
class="cards_row"
>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
album 1
</h4>
</div>
</div>
</div>
<div
class="nuclear card_container row_card"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
album 2
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Dashboard container should display top tracks after going to top tracks tab 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="dashboard"
>
<div
class="dashboard_tabs"
>
<div
class="ui pointing secondary menu"
>
<a
class="item"
>
Trending
</a>
<a
class="active item"
>
Top Tracks
</a>
<a
class="item"
>
Genres
</a>
</div>
<div
class="ui segment active tab"
>
<div
class="popular_tracks_container"
>
<div
class="popular_tracks_header"
>
<h2>
Top Tracks from Deezer
</h2>
</div>
<table
class="track_table"
role="table"
>
<thead>
<tr
role="row"
>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
data-testid="position-header"
>
<i
aria-hidden="true"
class="hashtag icon"
/>
<i
aria-hidden="true"
class="sort content ascending icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="center_aligned"
>
<i
aria-hidden="true"
class="image icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
>
Title
<i
aria-hidden="true"
class="sort content ascending disabled icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
>
Artist
<i
aria-hidden="true"
class="sort content ascending disabled icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
Length
</th>
<th
colspan="1"
role="columnheader"
>
<span
class="select_header"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle All Rows Selected"
type="checkbox"
value=""
/>
<label />
</div>
</span>
</th>
</tr>
</thead>
<tbody
data-rbd-droppable-context-id="0"
data-rbd-droppable-id="track_table"
role="rowgroup"
>
<tr
class=""
data-rbd-draggable-context-id="0"
data-rbd-draggable-id="top track 1 0"
data-testid="track-table-row"
role="row"
>
<td
class="position_cell narrow"
data-testid="position-cell"
role="cell"
>
<button
class="ui pink tiny circular icon button nuclear button add_button"
data-testid="play-now"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
<span
class="position_cell_value"
>
1
</span>
</td>
<td
class="thumbnail_cell narrow"
role="cell"
>
<img
class="thumbnail"
src="top track album cover 1"
/>
</td>
<td
class="favorite_cell narrow"
role="cell"
>
<button
class="ui tiny basic circular icon button nuclear button borderless"
>
<i
aria-hidden="true"
class="heart outline icon"
/>
</button>
</td>
<td
class="title_cell"
data-testid="title-cell"
role="cell"
>
<span
class="title_cell_content"
>
<span
class="title_cell_value"
>
top track 1
</span>
<span
class="title_cell_buttons"
>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="add-to-queue"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="track-popup-trigger"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</button>
</span>
</span>
</td>
<td
role="cell"
>
top track artist 1
</td>
<td
role="cell"
>
01:40
</td>
<td
class="select_cell narrow"
role="cell"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle Row Selected"
type="checkbox"
value=""
/>
<label />
</div>
</td>
</tr>
<tr
class=""
data-rbd-draggable-context-id="0"
data-rbd-draggable-id="top track 2 1"
data-testid="track-table-row"
role="row"
>
<td
class="position_cell narrow"
data-testid="position-cell"
role="cell"
>
<button
class="ui pink tiny circular icon button nuclear button add_button"
data-testid="play-now"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
<span
class="position_cell_value"
>
2
</span>
</td>
<td
class="thumbnail_cell narrow"
role="cell"
>
<img
class="thumbnail"
src="top track album cover 2"
/>
</td>
<td
class="favorite_cell narrow"
role="cell"
>
<button
class="ui tiny basic circular icon button nuclear button borderless"
>
<i
aria-hidden="true"
class="heart outline icon"
/>
</button>
</td>
<td
class="title_cell"
data-testid="title-cell"
role="cell"
>
<span
class="title_cell_content"
>
<span
class="title_cell_value"
>
top track 2
</span>
<span
class="title_cell_buttons"
>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="add-to-queue"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="track-popup-trigger"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</button>
</span>
</span>
</td>
<td
role="cell"
>
top track artist 2
</td>
<td
role="cell"
>
01:18
</td>
<td
class="select_cell narrow"
role="cell"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle Row Selected"
type="checkbox"
value=""
/>
<label />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;