packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Album view container should display an album 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="album_view_container"
>
<div
class="dimmable"
>
<div
class="ui dimmer"
>
<div
class="content"
>
<div
class="ui loader"
/>
</div>
</div>
<div
class="album"
>
<div
class="album_info_box"
>
<span
class="nuclear small loader"
>
<span />
<span />
<span />
<span />
</span>
<div
class="album_details"
>
<div
class="album_title"
>
<div
class="album_text"
>
test album
</div>
<a
class="album_favorites_button_wrap"
data-testid="add-remove-favorite"
href="#"
>
<i
aria-hidden="true"
class="star outline big icon"
/>
</a>
</div>
<div
class="album_artist"
>
by
<a
href="#"
>
test artist
</a>
</div>
<div
class="album_genre"
>
<label>
Genre:
</label>
genre 1, genre 2
</div>
<div
class="album_year"
>
<label>
Year:
</label>
2001
</div>
<div
class="album_tracks"
>
<label>
Tracks:
</label>
3
</div>
<div
class="album_buttons"
>
<a
class="play_button"
href="#"
>
<i
aria-hidden="true"
class="play icon"
/>
Play
</a>
<a
class="more_button"
data-testid="more-button"
href="#"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</a>
</div>
</div>
</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"
>
</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"
>
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="test 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="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"
>
test 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"
>
02:00
</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="test 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="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"
>
test 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"
>
01:03
</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="test track 3 2"
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"
>
3
</span>
</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"
>
test track 3
</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"
>
00:07
</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
class="nuclear player_bar"
>
<div
class="nuclear seekbar"
data-testid="seekbar"
>
<div
class="nuclear seekbar_progress"
data-testid="seekbar-fill"
style="width: 0%;"
/>
</div>
<div
class="player_bar_bottom"
>
<div
class="track_info"
>
<div
class="nuclear cover_container"
>
<img
src="test-file-stub"
/>
</div>
</div>
<div
class="player_controls"
>
<button
class="player_button disabled"
data-testid="player-controls-back"
>
<i
aria-hidden="true"
class="step backward large inverted icon"
/>
</button>
<button
class="player_button disabled"
data-testid="player-controls-play"
>
<i
aria-hidden="true"
class="play big inverted icon"
/>
</button>
<button
class="player_button disabled"
data-testid="player-controls-forward"
>
<i
aria-hidden="true"
class="step forward large inverted icon"
/>
</button>
</div>
<div
class="volume_controls_container"
>
<div
class="play_options"
>
<i
aria-hidden="true"
class="heartbeat large icon play_option_icon"
data-testid="rate-play-option"
/>
<i
aria-hidden="true"
class="repeat large icon play_option_icon"
data-testid="loop-play-option"
/>
<i
aria-hidden="true"
class="random large icon play_option_icon"
data-testid="shuffle-play-option"
/>
<i
aria-hidden="true"
class="magic large icon play_option_icon"
data-testid="autoradio-play-option"
/>
<i
aria-hidden="true"
class="compress large icon play_option_icon"
data-testid="mini-player-play-option"
/>
</div>
<div
class="volume_controls"
>
<div
class="volume_icon"
>
<i
aria-hidden="true"
class="volume up large icon"
/>
</div>
<div
class="volume_slider"
>
<div
class="range"
style="width: 100%;"
>
<div
class="baseDiv"
style="height: 12px;"
>
<div
class="track"
style="border-radius: 4px; background: rgb(68, 71, 90); top: 4px; height: 4px;"
/>
<div
class="fill"
style="border-radius: 4px; background: rgb(248, 248, 242); width: calc(100% * 0.5 + 6px); top: 4px; height: 4px;"
/>
<div
class="thumb"
style="width: 12px; height: 12px; border-radius: 12px; background: rgb(248, 248, 242);"
/>
<input
class="range_input"
max="100"
min="0"
style="top: 4px; height: 12px; width: calc(100% - 12px); margin-left: 6px; margin-right: 6px;"
type="range"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Album view container should show that an album is still loading 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="album_view_container"
>
<div
class="dimmable"
>
<div
class="ui active transition visible dimmer"
style="display: flex;"
>
<div
class="content"
>
<div
class="ui loader"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="nuclear player_bar"
>
<div
class="nuclear seekbar"
data-testid="seekbar"
>
<div
class="nuclear seekbar_progress"
data-testid="seekbar-fill"
style="width: 0%;"
/>
</div>
<div
class="player_bar_bottom"
>
<div
class="track_info"
>
<div
class="nuclear cover_container"
>
<img
src="test-file-stub"
/>
</div>
</div>
<div
class="player_controls"
>
<button
class="player_button disabled"
data-testid="player-controls-back"
>
<i
aria-hidden="true"
class="step backward large inverted icon"
/>
</button>
<button
class="player_button disabled"
data-testid="player-controls-play"
>
<i
aria-hidden="true"
class="play big inverted icon"
/>
</button>
<button
class="player_button disabled"
data-testid="player-controls-forward"
>
<i
aria-hidden="true"
class="step forward large inverted icon"
/>
</button>
</div>
<div
class="volume_controls_container"
>
<div
class="play_options"
>
<i
aria-hidden="true"
class="heartbeat large icon play_option_icon"
data-testid="rate-play-option"
/>
<i
aria-hidden="true"
class="repeat large icon play_option_icon"
data-testid="loop-play-option"
/>
<i
aria-hidden="true"
class="random large icon play_option_icon"
data-testid="shuffle-play-option"
/>
<i
aria-hidden="true"
class="magic large icon play_option_icon"
data-testid="autoradio-play-option"
/>
<i
aria-hidden="true"
class="compress large icon play_option_icon"
data-testid="mini-player-play-option"
/>
</div>
<div
class="volume_controls"
>
<div
class="volume_icon"
>
<i
aria-hidden="true"
class="volume up large icon"
/>
</div>
<div
class="volume_slider"
>
<div
class="range"
style="width: 100%;"
>
<div
class="baseDiv"
style="height: 12px;"
>
<div
class="track"
style="border-radius: 4px; background: rgb(68, 71, 90); top: 4px; height: 4px;"
/>
<div
class="fill"
style="border-radius: 4px; background: rgb(248, 248, 242); width: calc(100% * 0.5 + 6px); top: 4px; height: 4px;"
/>
<div
class="thumb"
style="width: 12px; height: 12px; border-radius: 12px; background: rgb(248, 248, 242);"
/>
<input
class="range_input"
max="100"
min="0"
style="top: 4px; height: 12px; width: calc(100% - 12px); margin-left: 6px; margin-right: 6px;"
type="range"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;