Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: improve unit test coverage for top-tracks #257

Merged
merged 4 commits into from
Dec 2, 2024
Merged

chore: improve unit test coverage for top-tracks #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d4b746
chore: improve unit test coverage for top-tracks
chrisvogt Dec 2, 2024
3446fc0
SQUASHME: update reducers unit tests
chrisvogt Dec 2, 2024
bdb009e
SQUASHME: ignore re-export files
chrisvogt Dec 2, 2024
52c8fc9
SQUASHME: continue improving coverage
chrisvogt Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions theme/src/components/footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './footer'
1 change: 1 addition & 0 deletions theme/src/components/widgets/github/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './github-widget'
1 change: 1 addition & 0 deletions theme/src/components/widgets/goodreads/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './goodreads-widget'
1 change: 1 addition & 0 deletions theme/src/components/widgets/instagram/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './instagram-widget'
1 change: 1 addition & 0 deletions theme/src/components/widgets/recent-posts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './recent-posts-widget'
316 changes: 316 additions & 0 deletions theme/src/components/widgets/spotify/__snapshots__/top-tracks.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TopTracks Component handles tracks without a 300px image gracefully 1`] = `
<div>
<div
className="css-ccroti"
>
<h3
className="css-1pgqsji"
>
Top Tracks
</h3>
</div>
<p
className="css-1avyp1d"
>
My 12 most-played tracks over the last 4 weeks.
</p>
<div
className="media-item_grid null css-4004kc"
>
<a
className="media-item_media css-1avyp1d"
href="http://spotify.com/track3"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
title="Song Three – Artist Four"
>
<img
alt="cover artwork"
className="css-1yymcx5"
crossOrigin="anonymous"
loading="lazy"
/>
</a>
</div>
</div>
`;

exports[`TopTracks Component renders correctly when loading 1`] = `
<div>
<div
className="css-ccroti"
>
<h3
className="css-1pgqsji"
>
Top Tracks
</h3>
</div>
<p
className="css-1avyp1d"
>
My 12 most-played tracks over the last 4 weeks.
</p>
<div
className="media-item_grid null css-4004kc"
>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
<div
className="show-loading-animation"
>
<div
className="rect-shape css-l29vsk"
style={
{
"backgroundColor": "#efefef",
"height": "100%",
"marginRight": 10,
"width": "100%",
}
}
/>
</div>
</div>
</div>
`;

exports[`TopTracks Component renders correctly with no tracks 1`] = `
<div>
<div
className="css-ccroti"
>
<h3
className="css-1pgqsji"
>
Top Tracks
</h3>
</div>
<p
className="css-1avyp1d"
>
My 12 most-played tracks over the last 4 weeks.
</p>
<div
className="media-item_grid null css-4004kc"
/>
</div>
`;

exports[`TopTracks Component renders correctly with tracks 1`] = `
<div>
<div
className="css-ccroti"
>
<h3
className="css-1pgqsji"
>
Top Tracks
</h3>
</div>
<p
className="css-1avyp1d"
>
My 12 most-played tracks over the last 4 weeks.
</p>
<div
className="media-item_grid null css-4004kc"
>
<a
className="media-item_media css-1avyp1d"
href="http://spotify.com/track1"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
title="Song One – Artist One, Artist Two"
>
<img
alt="cover artwork"
className="css-1yymcx5"
crossOrigin="anonymous"
loading="lazy"
src="http://example.com/medium.jpg"
/>
</a>
<a
className="media-item_media css-1avyp1d"
href="http://spotify.com/track2"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
title="Song Two – Artist Three"
>
<img
alt="cover artwork"
className="css-1yymcx5"
crossOrigin="anonymous"
loading="lazy"
src="http://example.com/medium2.jpg"
/>
</a>
</div>
</div>
`;
1 change: 1 addition & 0 deletions theme/src/components/widgets/spotify/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
/* istanbul ignore file */
export { default } from './spotify-widget'
3 changes: 2 additions & 1 deletion theme/src/components/widgets/spotify/top-tracks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ const TopTracks = ({ isLoading, tracks = [] }) => {
const items = tracks.map(track => {
const { artists = [], albumImages = [], id, name, spotifyURL } = track

const { url: thumbnailURL } = albumImages.find(image => image.width === 300)
const thumbnail = albumImages.find(image => image.width === 300) || {}
const { url: thumbnailURL } = thumbnail

return {
id,
Expand Down
Loading
Loading