{user && (
+ {statsExplanationModalButton}
)}
+ {statsExplanationModalButton}
diff --git a/frontend/js/src/user/stats/components/UserListeningActivity.tsx b/frontend/js/src/user/stats/components/UserListeningActivity.tsx
index 50071c6a47..b5a6fd6600 100644
--- a/frontend/js/src/user/stats/components/UserListeningActivity.tsx
+++ b/frontend/js/src/user/stats/components/UserListeningActivity.tsx
@@ -228,6 +228,28 @@ export default function UserListeningActivity(
const lastMonthDay = lastMonth[i] || null;
const thisMonthDay = thisMonth[i] || null;
+ if (!lastMonthDay && !thisMonthDay) {
+ const daysInMilliseconds = 24 * 60 * 60 * 1000;
+
+ // Determine the date based on which month has more days
+ const dateTS =
+ numOfDaysInLastMonth > numOfDaysInThisMonth
+ ? new Date(startOfLastMonth.getTime() + i * daysInMilliseconds)
+ : new Date(
+ startOfLastMonth.getTime() +
+ numOfDaysInLastMonth * daysInMilliseconds +
+ i * daysInMilliseconds
+ );
+
+ result.push({
+ id: dateTS.toLocaleString("en-us", dateFormat),
+ lastRangeCount: 0,
+ thisRangeCount: 0,
+ });
+ // eslint-disable-next-line no-continue
+ continue;
+ }
+
let thisMonthData = {};
let lastMonthData = {};
if (thisMonthDay) {
diff --git a/frontend/js/src/utils/utils.tsx b/frontend/js/src/utils/utils.tsx
index 3288c4f17b..45dc2b441e 100644
--- a/frontend/js/src/utils/utils.tsx
+++ b/frontend/js/src/utils/utils.tsx
@@ -839,6 +839,30 @@ const getAlbumArtFromSpotifyTrackID = async (
return undefined;
};
+const getAlbumArtFromListenMetadataKey = (
+ listen: BaseListenFormat,
+ spotifyUser?: SpotifyUser
+): string | undefined => {
+ if (
+ SpotifyPlayer.isListenFromThisService(listen) &&
+ SpotifyPlayer.hasPermissions(spotifyUser)
+ ) {
+ return `spotify:${SpotifyPlayer.getSpotifyTrackIDFromListen(listen)}`;
+ }
+ if (YoutubePlayer.isListenFromThisService(listen)) {
+ return `youtube:${YoutubePlayer.getVideoIDFromListen(listen)}`;
+ }
+ const userSubmittedReleaseMBID =
+ listen.track_metadata?.release_mbid ??
+ listen.track_metadata?.additional_info?.release_mbid;
+ const caaId = listen.track_metadata?.mbid_mapping?.caa_id;
+ const caaReleaseMbid = listen.track_metadata?.mbid_mapping?.caa_release_mbid;
+
+ return `ca:${userSubmittedReleaseMBID ?? ""}:${caaId ?? ""}:${
+ caaReleaseMbid ?? ""
+ }`;
+};
+
const getAlbumArtFromListenMetadata = async (
listen: BaseListenFormat,
spotifyUser?: SpotifyUser,
@@ -1110,6 +1134,7 @@ export {
pinnedRecordingToListen,
getAlbumArtFromReleaseMBID,
getAlbumArtFromReleaseGroupMBID,
+ getAlbumArtFromListenMetadataKey,
getAlbumArtFromListenMetadata,
getAverageRGBOfImage,
getAdditionalContent,
diff --git a/frontend/js/tests/common/brainzplayer/BrainzPlayer.test.tsx b/frontend/js/tests/common/brainzplayer/BrainzPlayer.test.tsx
index 88da2a54ec..363327cfb7 100644
--- a/frontend/js/tests/common/brainzplayer/BrainzPlayer.test.tsx
+++ b/frontend/js/tests/common/brainzplayer/BrainzPlayer.test.tsx
@@ -17,6 +17,7 @@ import {
} from "../../../src/common/brainzplayer/BrainzPlayerContext";
import { renderWithProviders } from "../../test-utils/rtl-test-utils";
import { listenOrJSPFTrackToQueueItem } from "../../../src/common/brainzplayer/utils";
+import { ReactQueryWrapper } from "../../test-react-query";
// Font Awesome generates a random hash ID for each icon everytime.
// Mocking Math.random() fixes this
@@ -175,7 +176,9 @@ describe("BrainzPlayer", () => {
...GlobalContextMock.context,
spotifyAuth: spotifyAccountWithPermissions,
},
- {}
+ {
+ wrapper: ReactQueryWrapper,
+ }
);
const playButton = screen.getByTestId("bp-play-button");
@@ -201,7 +204,9 @@ describe("BrainzPlayer", () => {
...GlobalContextMock.context,
spotifyAuth: spotifyAccountWithPermissions,
},
- {}
+ {
+ wrapper: ReactQueryWrapper,
+ }
);
const queueList = screen.getByTestId("queue");
@@ -224,7 +229,9 @@ describe("BrainzPlayer", () => {
...GlobalContextMock.context,
spotifyAuth: spotifyAccountWithPermissions,
},
- {}
+ {
+ wrapper: ReactQueryWrapper,
+ }
);
const playButton = screen.getByTestId("bp-play-button");
@@ -256,7 +263,9 @@ describe("BrainzPlayer", () => {
...GlobalContextMock.context,
spotifyAuth: spotifyAccountWithPermissions,
},
- {}
+ {
+ wrapper: ReactQueryWrapper,
+ }
);
const playButton = screen.getByTestId("bp-play-button");
@@ -287,7 +296,9 @@ describe("BrainzPlayer", () => {
...GlobalContextMock.context,
spotifyAuth: spotifyAccountWithPermissions,
},
- {}
+ {
+ wrapper: ReactQueryWrapper,
+ }
);
const playButton = screen.getByTestId("bp-play-button");
diff --git a/frontend/js/tests/common/listens/ListenCard.test.tsx b/frontend/js/tests/common/listens/ListenCard.test.tsx
index 3f846c2442..1dd5b094cb 100644
--- a/frontend/js/tests/common/listens/ListenCard.test.tsx
+++ b/frontend/js/tests/common/listens/ListenCard.test.tsx
@@ -20,12 +20,23 @@ import { waitForComponentToPaint } from "../../test-utils";
import CBReviewModal from "../../../src/cb-review/CBReviewModal";
import RecordingFeedbackManager from "../../../src/utils/RecordingFeedbackManager";
import Card from "../../../src/components/Card";
+import { ReactQueryWrapper } from "../../test-react-query";
// Font Awesome generates a random hash ID for each icon everytime.
// Mocking Math.random() fixes this
// https://github.com/FortAwesome/react-fontawesome/issues/194#issuecomment-627235075
jest.spyOn(global.Math, "random").mockImplementation(() => 0);
+function ListenCardWithWrappers(props: ListenCardProps) {
+ return (
+
+
+
+
+
+ );
+}
+
const listen: Listen = {
listened_at: 0,
playing_now: false,
@@ -63,11 +74,7 @@ const globalProps: GlobalAppContextT = {
describe("ListenCard", () => {
it("renders correctly", () => {
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount(
);
const card = wrapper.find(Card);
expect(card).toHaveLength(1);
expect(card.getDOMNode()).toHaveClass("listen-card");
@@ -92,9 +99,7 @@ describe("ListenCard", () => {
};
const wrapper = mount
(
-
-
-
+
);
@@ -105,11 +110,7 @@ describe("ListenCard", () => {
it("should render timestamp using preciseTimestamp", () => {
const preciseTimestamp = jest.spyOn(utils, "preciseTimestamp");
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount();
expect(preciseTimestamp).toHaveBeenCalledTimes(1);
});
@@ -136,9 +137,7 @@ describe("ListenCard", () => {
user_name: "test",
};
const wrapper = mount(
-
-
-
+
);
expect(
wrapper.find('[href="https://musicbrainz.org/recording/bar"]')
@@ -157,11 +156,7 @@ describe("ListenCard", () => {
});
it("should render a play button", () => {
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount();
const instance = wrapper
.find(ListenCardClass)
.instance() as ListenCardClass;
@@ -171,11 +166,7 @@ describe("ListenCard", () => {
});
it("should send an event to BrainzPlayer when playListen is called", async () => {
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount();
const instance = wrapper
.find(ListenCardClass)
.instance() as ListenCardClass;
@@ -194,11 +185,7 @@ describe("ListenCard", () => {
it("should do nothing when playListen is called on currently playing listen", async () => {
const postMessageSpy = jest.spyOn(window, "postMessage");
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount();
const instance = wrapper
.find(ListenCardClass)
.instance() as ListenCardClass;
@@ -213,11 +200,7 @@ describe("ListenCard", () => {
});
it("should render the formatted duration_ms if present in the listen metadata", () => {
- const wrapper = mount(
-
-
-
- );
+ const wrapper = mount();
const durationElement = wrapper.find('[title="Duration"]');
expect(durationElement).toBeDefined();
expect(durationElement.text()).toEqual("2:03");
@@ -230,9 +213,7 @@ describe("ListenCard", () => {
);
set(listenWithDuration, "track_metadata.additional_info.duration", 142);
const wrapper = mount(
-
-
-
+
);
const durationElement = wrapper.find('[title="Duration"]');
expect(durationElement).toBeDefined();
@@ -243,9 +224,7 @@ describe("ListenCard", () => {
it("calls API, and creates a new alert on success", async () => {
const wrapper = mount(
-
-
-
+
);
const instance = wrapper
@@ -279,9 +258,7 @@ describe("ListenCard", () => {
currentUser: { auth_token: undefined, name: "test" },
}}
>
-
-
-
+
);
const instance = wrapper
@@ -302,9 +279,7 @@ describe("ListenCard", () => {
it("calls handleError if error is returned", async () => {
const wrapper = mount(
-
-
-
+
);
const instance = wrapper
@@ -336,9 +311,7 @@ describe("ListenCard", () => {
const wrapper = mount(
-
-
-
+
);
diff --git a/frontend/js/tests/common/listens/ListenCountCard.test.tsx b/frontend/js/tests/common/listens/ListenCountCard.test.tsx
index 90be8e0a6f..43b73721bd 100644
--- a/frontend/js/tests/common/listens/ListenCountCard.test.tsx
+++ b/frontend/js/tests/common/listens/ListenCountCard.test.tsx
@@ -31,11 +31,15 @@ const globalContext: GlobalAppContextT = {
describe("ListenCountCard", () => {
it("renders correctly when listen count is not zero", () => {
const wrapper = mount();
- expect(wrapper.getDOMNode()).toHaveTextContent("track_listener has listened to100songs so far");
+ expect(wrapper.getDOMNode()).toHaveTextContent(
+ "track_listener has listened to100songs so far"
+ );
});
it("renders correctly when listen count is zero or undefined", () => {
const wrapper = mount();
- expect(wrapper.getDOMNode()).toHaveTextContent("track_listener's listens counttrack_listener hasn't listened to any songs yet.")
+ expect(wrapper.getDOMNode()).toHaveTextContent(
+ "track_listener's listens counttrack_listener hasn't listened to any songs yet."
+ );
});
it("renders user's name instead of 'You' when visiting another user's page", () => {
const wrapper = mount(
@@ -46,7 +50,7 @@ describe("ListenCountCard", () => {
const countCard = wrapper.find("#listen-count-card").first().children();
const cardDiv = countCard.children().first();
expect(cardDiv.html()).toEqual(
- 'track_listener has listened to
100
songs so far'
+ 'track_listener has listened to
100
songs so far'
);
});
it("renders 'You' when on current user's page", () => {
@@ -58,7 +62,7 @@ describe("ListenCountCard", () => {
const countCard = wrapper.find("#listen-count-card").first().children();
const cardDiv = countCard.children().first();
expect(cardDiv.html()).toEqual(
- 'You have listened to
100
songs so far'
+ 'You have listened to
100
songs so far'
);
});
});
diff --git a/frontend/js/tests/explore/huesound/HueSound.test.tsx b/frontend/js/tests/explore/huesound/HueSound.test.tsx
index b1c8df88a5..eb0095e143 100644
--- a/frontend/js/tests/explore/huesound/HueSound.test.tsx
+++ b/frontend/js/tests/explore/huesound/HueSound.test.tsx
@@ -11,6 +11,7 @@ import {
textContentMatcher,
} from "../../test-utils/rtl-test-utils";
import getExploreRoutes from "../../../src/explore/routes";
+import { ReactQueryWrapper } from "../../test-react-query";
const release: ColorReleaseItem = {
artist_name: "Rorcal & Music For The Space",
@@ -96,7 +97,14 @@ describe("HueSound", () => {
messages.push(message)
);
// With initial navigation, see initialEntries when we create memRouter
- render();
+ renderWithProviders(
+ ,
+ {},
+ {
+ wrapper: ReactQueryWrapper,
+ },
+ false
+ );
await waitFor(async () => {
const releaseButton = screen.getByRole("button");
diff --git a/frontend/js/tests/personal-recommendations/PersonalRecommendationsModal.test.tsx b/frontend/js/tests/personal-recommendations/PersonalRecommendationsModal.test.tsx
index d9d0585998..ac4a0d00df 100644
--- a/frontend/js/tests/personal-recommendations/PersonalRecommendationsModal.test.tsx
+++ b/frontend/js/tests/personal-recommendations/PersonalRecommendationsModal.test.tsx
@@ -12,6 +12,7 @@ import GlobalAppContext, {
} from "../../src/utils/GlobalAppContext";
import { waitForComponentToPaint } from "../test-utils";
import RecordingFeedbackManager from "../../src/utils/RecordingFeedbackManager";
+import { ReactQueryWrapper } from "../test-react-query";
const listenToPersonallyRecommend: Listen = {
listened_at: 1605927742,
@@ -76,10 +77,12 @@ describe("PersonalRecommendationModal", () => {
const wrapper = mount(
-
+
+
+
);
@@ -216,10 +219,12 @@ describe("PersonalRecommendationModal", () => {
const wrapper = mount(
-
+
+
+
);
diff --git a/frontend/js/tests/pins/PinnedRecordingCard.test.tsx b/frontend/js/tests/pins/PinnedRecordingCard.test.tsx
index 0d320a16d5..4521fd21fd 100644
--- a/frontend/js/tests/pins/PinnedRecordingCard.test.tsx
+++ b/frontend/js/tests/pins/PinnedRecordingCard.test.tsx
@@ -14,12 +14,21 @@ import GlobalAppContext, {
import { waitForComponentToPaint } from "../test-utils";
import RecordingFeedbackManager from "../../src/utils/RecordingFeedbackManager";
import ListenCard from "../../src/common/listens/ListenCard";
+import { ReactQueryWrapper } from "../test-react-query";
// Font Awesome generates a random hash ID for each icon everytime.
// Mocking Math.random() fixes this
// https://github.com/FortAwesome/react-fontawesome/issues/194#issuecomment-627235075
jest.spyOn(global.Math, "random").mockImplementation(() => 0);
+function PinnedRecordingCardWithWrapper(props: PinnedRecordingCardProps) {
+ return (
+
+
+
+ );
+}
+
const user = {
id: 1,
name: "name",
@@ -64,18 +73,17 @@ const props: PinnedRecordingCardProps = {
describe("PinnedRecordingCard", () => {
it("renders correctly", () => {
- const wrapper = mount(
-
- );
+ const wrapper = mount();
expect(wrapper.find(ListenCard)).toHaveLength(1);
});
describe("determineIfCurrentlyPinned", () => {
it("returns true when pinned_until > now", async () => {
- const wrapper = mount(
-
+ const componentWrapper = mount(
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
let isPlaying;
await act(() => {
@@ -85,12 +93,13 @@ describe("PinnedRecordingCard", () => {
});
it("returns false when pinned_until < now", async () => {
- const wrapper = mount(
-
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
let isPlaying;
await act(() => {
isPlaying = instance.determineIfCurrentlyPinned();
@@ -101,12 +110,13 @@ describe("PinnedRecordingCard", () => {
describe("unpinRecording", () => {
it("calls API, updates currentlyPinned in state", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "unpinRecording");
@@ -126,12 +136,15 @@ describe("PinnedRecordingCard", () => {
});
it("does nothing if isCurrentUser is false", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "unpinRecording");
@@ -148,17 +161,18 @@ describe("PinnedRecordingCard", () => {
});
it("does nothing if CurrentUser.authtoken is not set", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "unpinRecording");
@@ -175,12 +189,13 @@ describe("PinnedRecordingCard", () => {
});
it("doesn't update currentlyPinned in state if status code is not 200", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "unpinRecording");
@@ -197,12 +212,13 @@ describe("PinnedRecordingCard", () => {
});
it("calls handleError if error is returned", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
instance.handleError = jest.fn();
const error = new Error("error");
@@ -226,12 +242,13 @@ describe("PinnedRecordingCard", () => {
describe("deletePin", () => {
it("calls API and updates isDeleted and currentlyPinned in state", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "deletePin");
@@ -260,12 +277,15 @@ describe("PinnedRecordingCard", () => {
});
it("does nothing if isCurrentUser is false", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "deletePin");
@@ -282,17 +302,18 @@ describe("PinnedRecordingCard", () => {
});
it("does nothing if CurrentUser.authtoken is not set", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "deletePin");
@@ -309,12 +330,13 @@ describe("PinnedRecordingCard", () => {
});
it("doesn't update currentlyPinned in state if status code is not 200", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
const { APIService } = instance.context;
const spy = jest.spyOn(APIService, "deletePin");
@@ -331,12 +353,13 @@ describe("PinnedRecordingCard", () => {
});
it("calls handleError if error is returned", async () => {
- const wrapper = mount(
+ const componentWrapper = mount(
-
+
);
- const instance = wrapper.instance();
+ const wrapper = componentWrapper.find(PinnedRecordingCard);
+ const instance = wrapper.instance() as PinnedRecordingCard;
instance.handleError = jest.fn();
const error = new Error("error");
diff --git a/frontend/js/tests/pins/UserPins.test.tsx b/frontend/js/tests/pins/UserPins.test.tsx
index 5afc47af09..a087d49b72 100644
--- a/frontend/js/tests/pins/UserPins.test.tsx
+++ b/frontend/js/tests/pins/UserPins.test.tsx
@@ -16,12 +16,21 @@ import UserPins, {
} from "../../src/user/taste/components/UserPins";
import PinnedRecordingCard from "../../src/user/components/PinnedRecordingCard";
import RecordingFeedbackManager from "../../src/utils/RecordingFeedbackManager";
+import { ReactQueryWrapper } from "../test-react-query";
// Font Awesome generates a random hash ID for each icon everytime.
// Mocking Math.random() fixes this
// https://github.com/FortAwesome/react-fontawesome/issues/194#issuecomment-627235075
jest.spyOn(global.Math, "random").mockImplementation(() => 0);
+function UserPinsWithWrapper(props: UserPinsProps) {
+ return (
+
+
+
+ );
+}
+
// typescript doesn't recognise string literal values
const props = {
...pinsPageProps,
@@ -66,14 +75,14 @@ const mountOptions: { context: GlobalAppContextT } = {
describe("UserPins", () => {
it("renders correctly", () => {
- const wrapper = mount(, mountOptions);
+ const wrapper = mount(, mountOptions);
expect(wrapper.find("#pinned-recordings")).toHaveLength(1);
expect(wrapper.getDOMNode()).toHaveTextContent("Lorde");
expect(wrapper.getDOMNode()).toHaveTextContent("400 Lux");
});
it("renders the correct number of pinned recordings", () => {
- const wrapper = mount(, mountOptions);
+ const wrapper = mount(, mountOptions);
const wrapperElement = wrapper.find("#pinned-recordings");
const pinnedRecordings = wrapperElement.find(PinnedRecordingCard);
@@ -83,26 +92,28 @@ describe("UserPins", () => {
describe("handleLoadMore", () => {
describe("handleClickOlder", () => {
it("does nothing if page >= maxPage", async () => {
- const wrapper = mount(, mountOptions);
- const instance = wrapper.instance();
+ const wrapper = mount(, mountOptions);
+ const userPinWrapper = wrapper.find(UserPins);
+ const instance = userPinWrapper.instance() as UserPins;
const spy = jest.fn().mockImplementation(() => {});
instance.getPinsFromAPI = spy;
await act(() => {
- wrapper.setState({ maxPage: 1 });
+ userPinWrapper.setState({ maxPage: 1 });
});
await act(async () => {
await instance.handleLoadMore();
});
- expect(wrapper.state("loading")).toBeFalsy();
+ expect(userPinWrapper.state("loading")).toBeFalsy();
expect(spy).not.toHaveBeenCalled();
});
it("calls the API to get next page", async () => {
- const wrapper = mount(, mountOptions);
- const instance = wrapper.instance();
+ const wrapper = mount(, mountOptions);
+ const userPinWrapper = wrapper.find(UserPins);
+ const instance = userPinWrapper.instance() as UserPins;
const apiSpy = jest
.fn()
@@ -119,10 +130,10 @@ describe("UserPins", () => {
expect(getPinsFromAPISpy).toHaveBeenCalledWith(2);
expect(apiSpy).toHaveBeenCalledWith(props.user.name, 25, 25);
- expect(wrapper.state("loading")).toBeFalsy();
- expect(wrapper.state("page")).toEqual(2);
+ expect(userPinWrapper.state("loading")).toBeFalsy();
+ expect(userPinWrapper.state("page")).toEqual(2);
// result should be combined previous pins and new pins
- expect(wrapper.state("pins")).toEqual([
+ expect(userPinWrapper.state("pins")).toEqual([
...props.pins,
...APIPinsPageTwo.pinned_recordings,
]);
@@ -132,21 +143,23 @@ describe("UserPins", () => {
describe("removePinFromPinsList", () => {
it("updates the listens state after removing particular pin", async () => {
- const wrapper = mount(, mountOptions);
- const instance = wrapper.instance();
+ const wrapper = mount(, mountOptions);
+ const userPinWrapper = wrapper.find(UserPins);
+ const instance = userPinWrapper.instance() as UserPins;
+
await act(() => {
- wrapper.setState({ pins: props.pins });
+ userPinWrapper.setState({ pins: props.pins });
});
- expect(wrapper.state("pins")).toHaveLength(25);
+ expect(userPinWrapper.state("pins")).toHaveLength(25);
const expectedNewFirstPin = props.pins[1];
await act(() => {
instance.removePinFromPinsList(props.pins[0]);
});
- expect(wrapper.state("pins")).toHaveLength(24);
- expect(wrapper.state("pins")[0].recording_msid).toEqual(
+ expect(userPinWrapper.state("pins")).toHaveLength(24);
+ expect(userPinWrapper.state("pins")[0].recording_msid).toEqual(
expectedNewFirstPin.recording_msid
);
});
diff --git a/frontend/js/tests/playlists/Playlist.test.tsx b/frontend/js/tests/playlists/Playlist.test.tsx
index c30d388e6d..aec2453d28 100644
--- a/frontend/js/tests/playlists/Playlist.test.tsx
+++ b/frontend/js/tests/playlists/Playlist.test.tsx
@@ -8,6 +8,7 @@ import {
renderWithProviders,
textContentMatcher,
} from "../test-utils/rtl-test-utils";
+import { ReactQueryWrapper } from "../test-react-query";
jest.mock("../../src/utils/SearchTrackOrMBID");
@@ -33,7 +34,14 @@ const router = createMemoryRouter(
describe("PlaylistPage", () => {
it("renders correctly", () => {
- renderWithProviders(, {}, {}, false);
+ renderWithProviders(
+ ,
+ {},
+ {
+ wrapper: ReactQueryWrapper,
+ },
+ false
+ );
screen.getByTestId("playlist");
const h1 = screen.getByRole("heading");
expect(h1).toHaveTextContent("1980s flashback jams");
@@ -62,7 +70,9 @@ describe("PlaylistPage", () => {
renderWithProviders(
,
alternativeContextMock,
- {},
+ {
+ wrapper: ReactQueryWrapper,
+ },
false
);
screen.getByText("Export to Spotify", { exact: false });
diff --git a/frontend/js/tests/recent/RecentListens.test.tsx b/frontend/js/tests/recent/RecentListens.test.tsx
index 833d5c5fc4..7ab3d7a4ac 100644
--- a/frontend/js/tests/recent/RecentListens.test.tsx
+++ b/frontend/js/tests/recent/RecentListens.test.tsx
@@ -21,6 +21,7 @@ import RecentListens, {
import { waitForComponentToPaint } from "../test-utils";
import RecordingFeedbackManager from "../../src/utils/RecordingFeedbackManager";
import ListenCard from "../../src/common/listens/ListenCard";
+import { ReactQueryWrapper } from "../test-react-query";
// import Card from "../../src/components/Card";
// import BrainzPlayer from "../../src/brainzplayer/BrainzPlayer";
@@ -99,7 +100,9 @@ describe("Recentlistens", () => {
const wrapper = mount(
-
+
+
+
);
diff --git a/frontend/js/tests/test-react-query.tsx b/frontend/js/tests/test-react-query.tsx
new file mode 100644
index 0000000000..cc608f47b8
--- /dev/null
+++ b/frontend/js/tests/test-react-query.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+export function ReactQueryWrapper({ children }: any) {
+ return (
+ {children}
+ );
+}
diff --git a/frontend/js/tests/user/Dashboard.test.tsx b/frontend/js/tests/user/Dashboard.test.tsx
index 7203c7d2b6..e22d2bfdec 100644
--- a/frontend/js/tests/user/Dashboard.test.tsx
+++ b/frontend/js/tests/user/Dashboard.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable testing-library/no-unnecessary-act */
import * as React from "react";
import {
@@ -8,17 +7,14 @@ import {
waitFor,
waitForElementToBeRemoved,
} from "@testing-library/react";
-import fetchMock from "jest-fetch-mock";
import WS from "jest-websocket-mock";
import { SocketIO as mockSocketIO } from "mock-socket";
import userEvent from "@testing-library/user-event";
-import type { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
-import { BrowserRouter } from "react-router-dom";
-import APIServiceClass from "../../src/utils/APIService";
+import { http, HttpResponse } from "msw";
+import { SetupServerApi, setupServer } from "msw/node";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import * as recentListensProps from "../__mocks__/recentListensProps.json";
-import * as recentListensPropsOneListen from "../__mocks__/recentListensPropsOneListen.json";
-import * as recentListensPropsPlayingNow from "../__mocks__/recentListensPropsPlayingNow.json";
import Listens, { ListensProps } from "../../src/user/Dashboard";
import { renderWithProviders } from "../test-utils/rtl-test-utils";
@@ -33,6 +29,8 @@ jest.unmock("react-toastify");
// https://github.com/FortAwesome/react-fontawesome/issues/194#issuecomment-627235075
jest.spyOn(global.Math, "random").mockImplementation(() => 0);
+const userClickEvent = userEvent.setup();
+
const {
latestListenTs,
listens,
@@ -50,773 +48,747 @@ const props: ListensProps = {
already_reported_user: false,
};
-const APIService = new APIServiceClass("foo");
-const currentUser = { id: 1, name: "iliekcomputers", auth_token: "fnord" };
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
-const propsOneListen = {
- ...recentListensPropsOneListen,
-};
+const queryKey = ["dashboard", {}, {}];
-const getComponent = (componentProps: ListensProps) => (
-
-
-
+const reactQueryWrapper = ({ children }: any) => (
+ {children}
);
-// eslint-disable-next-line jest/no-disabled-tests
-xdescribe("Listens page", () => {
- jest.setTimeout(10000);
+const currentUser = { id: 1, name: "iliekcomputers", auth_token: "fnord" };
+
+let mockSearchParam = {};
+jest.mock("react-router-dom", () => ({
+ ...jest.requireActual("react-router-dom"),
+ useSearchParams: () => {
+ const [params, setParams] = React.useState(
+ new URLSearchParams(mockSearchParam)
+ );
+ return [
+ params,
+ (newParams: typeof mockSearchParam) => {
+ mockSearchParam = newParams;
+ setParams(new URLSearchParams(newParams));
+ },
+ ];
+ },
+}));
- let userEventSession: UserEvent;
+describe("Dashboard page", () => {
+ jest.setTimeout(10000);
+ let server: SetupServerApi;
beforeAll(async () => {
- userEventSession = await userEvent.setup();
- fetchMock.enableMocks();
- fetchMock.mockIf(
- (input) => input.url.endsWith("/listen-count"),
- () => {
- return Promise.resolve(JSON.stringify({ payload: { count: 42 } }));
+ const handlers = [
+ http.post("/", async (path) => HttpResponse.json(props)),
+ http.get("/1/user/*/following", async (path) =>
+ HttpResponse.json({ following: [] })
+ ),
+ http.get("/1/user/*/followers", async (path) =>
+ HttpResponse.json({ followers: [] })
+ ),
+ http.get("/1/user/*/similar-users", async (path) => {
+ HttpResponse.json({ payload: [] });
+ }),
+ http.get("/1/user/*/listen-count", async (path) =>
+ HttpResponse.json({ payload: { count: 42 } })
+ ),
+ http.post("/1/delete-listen", async (path) => HttpResponse.json({})),
+ http.get("/1/user/*/similar-to/*", async (path) =>
+ HttpResponse.json({ payload: [] })
+ ),
+ http.get("/1/stats/user/*/artists", async (path) =>
+ HttpResponse.json({ payload: [] })
+ ),
+ ];
+ server = setupServer(...handlers);
+ server.listen();
+ });
+ afterEach(async () => {
+ await queryClient.cancelQueries();
+ queryClient.clear();
+ });
+ afterAll(() => {
+ server.close();
+ });
+
+ it("renders correctly on the profile page", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ expect(screen.getAllByTestId("listen")).toHaveLength(26);
+ });
+
+ it("shows the user's listen count component", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ // Ensure we show a listen count card component, but don't test the contents
+ // Tests for it are in ListenCountCard.test.tsx
+ screen.getByTestId("listen-count-card");
+ });
+
+ it("calls API and removeListenFromListenList correctly, and updates the state", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
}
);
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ expect(await screen.findAllByTestId("listen")).toHaveLength(26);
+
+ const listensContainer = await screen.findByTestId("listens");
+ const listenCards = await within(listensContainer).findAllByTestId(
+ "listen"
+ );
+ const listenToDelete = listenCards[0];
+
+ const deleteButton = within(listenToDelete).getByRole("menuitem", {
+ name: "Delete Listen",
+ });
+
+ await userEvent.click(deleteButton);
+
+ await waitForElementToBeRemoved(
+ within(listenToDelete!).queryByRole("menuitem", {
+ name: "Delete Listen",
+ })
+ );
+
+ expect(await screen.findAllByTestId("listen")).toHaveLength(25);
+ });
+
+ it("does not render delete button if user is not logged in", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser: {
+ name: "foobar",
+ },
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const deleteButton = screen.queryAllByRole("menuitem", {
+ name: "Delete Listen",
+ });
+ expect(deleteButton).toHaveLength(0);
+ });
+
+ it("does nothing if the user has no auth token", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser: {
+ name: "iliekcomputers",
+ auth_token: undefined,
+ },
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const listensContainer = await screen.findByTestId("listens");
+ const listenCards = await within(listensContainer).findAllByTestId(
+ "listen"
+ );
+ expect(listenCards).toHaveLength(25);
+ const listenToDelete = listenCards[0];
+
+ const deleteButton = within(listenToDelete).getByRole("menuitem", {
+ name: "Delete Listen",
+ });
+ await userEvent.click(deleteButton);
+
+ expect(listenCards).toHaveLength(25);
+ });
+
+ it("doesn't call removeListenFromListenList or update state if status code is not 200", async () => {
+ server.use(
+ http.post("/1/delete-listen", async (path) => {
+ return HttpResponse.json({}, { status: 500 });
+ })
+ );
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const listensContainer = await screen.findByTestId("listens");
+ const listenCards = await within(listensContainer).findAllByTestId(
+ "listen"
+ );
+ expect(listenCards).toHaveLength(25);
+ const listenToDelete = listenCards[0];
+
+ const deleteButton = within(listenToDelete).getByRole("menuitem", {
+ name: "Delete Listen",
+ });
+ await userEvent.click(deleteButton);
+
+ expect(listenCards).toHaveLength(25);
+ });
+
+ describe("websocket features", () => {
+ const mockListen: Listen = {
+ track_metadata: {
+ artist_name: "FNORD",
+ track_name: "Have you seen the FNORDs?",
+ additional_info: {
+ recording_msid: "a6a0d9da-475b-45cb-a5a8-087caa1a121a",
+ },
+ },
+ listened_at: Date.now(),
+ listened_at_iso: "2020-04-10T10:12:04Z",
+ user_name: "mr_monkey",
+ playing_now: true,
+ };
+ let websocketServer: WS;
+
+ beforeEach(() => {
+ websocketServer = new WS("http://localhost");
+ // Leaving these commented out for easier debugging
+ // websocketServer.on("connection", (server) => {
+ // console.log("onconnection", server);
+ // });
+ // websocketServer.on("message", (x) => {
+ // console.log("onmessage", x);
+ // });
+ // websocketServer.on("close", (server) => {
+ // console.log("onclose", server);
+ // });
+ // websocketServer.on("json", (server) => {
+ // console.log("received 'json' type message", server);
+ // });
+ });
+
+ afterEach(() => {
+ WS.clean();
+ });
+
+ it("sets up a websocket connection with correct parameters", async () => {
+ let receivedUserNameMessage = false;
+ // Connection message from the client to the server
+ // Cannot currently test this with "expect(…).toReceiveMessage" with mock-socket
+ // because contrarily to socket.io it does not allow arbitrary types of messages
+ // in our case socket.emit("json",{user:username}) message type
+ const returnPromise = new Promise((resolve, reject) => {
+ // @ts-ignore
+ websocketServer.on("json", (userJson) => {
+ try {
+ expect(userJson).toEqual({ user: "iliekcomputers" });
+ receivedUserNameMessage = true;
+ resolve();
+ } catch (error) {
+ reject(error);
+ }
+ });
+ });
+
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ await websocketServer.connected;
+ await returnPromise; // See at the beginning of this test
+
+ const websocketClients = websocketServer.server.clients();
+ expect(websocketClients.length).toBeGreaterThanOrEqual(1);
+ expect(receivedUserNameMessage).toBeTruthy();
+ });
+
+ it('calls correct handler for "listen" event', async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ await websocketServer.connected;
+
+ expect(screen.queryByTestId("webSocketListens")).not.toBeInTheDocument();
+ expect(screen.queryAllByTestId("listen")).toHaveLength(26);
+ // send the message to the client
+
+ await act(async () => {
+ websocketServer.server.emit("listen", JSON.stringify(mockListen));
+ });
+ const websocketListensContainer = await screen.findByTestId(
+ "webSocketListens",
+ {}
+ );
+ const wsListens = within(websocketListensContainer).queryAllByTestId(
+ "listen"
+ );
+ expect(wsListens).toHaveLength(1);
+ expect(screen.queryAllByTestId("listen")).toHaveLength(27);
+ });
+
+ it('calls correct event for "playing_now" event', async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ await websocketServer.connected;
+ expect(screen.queryAllByTestId("listen")).toHaveLength(26);
+
+ const playingNowListen: Listen = {
+ ...mockListen,
+ listened_at: Date.now(),
+ playing_now: true,
+ };
+
+ await waitFor(() => {
+ websocketServer.server.emit(
+ "playing_now",
+ JSON.stringify(playingNowListen)
+ );
+ });
+ const listenCards = screen.queryAllByTestId("listen");
+ expect(listenCards).toHaveLength(27);
+ await screen.findByTitle(playingNowListen.track_metadata.track_name, {});
+ });
+
+ it("crops the websocket listens array to a maximum of 7", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ await websocketServer.connected;
+
+ // Add 7 new listens
+ await waitFor(async () => {
+ for (let index = 0; index < 8; index += 1) {
+ // Prevent the "Encountered two children with the same key" warning message
+ // by having a different timestamp for each listen
+ websocketServer.server.emit(
+ "listen",
+ JSON.stringify({ ...mockListen, listened_at: Date.now() + index })
+ );
+ }
+ });
+
+ const websocketListensContainer = await screen.findByTestId(
+ "webSocketListens"
+ );
+ const wsListens = within(websocketListensContainer).queryAllByTestId(
+ "listen"
+ );
+ expect(wsListens).toHaveLength(7);
+
+ // Add a few more, the process should crop to 7 max
+ await act(async () => {
+ websocketServer.server.emit(
+ "listen",
+ JSON.stringify({ ...mockListen, listened_at: Date.now() })
+ );
+ });
+ await act(async () => {
+ websocketServer.server.emit(
+ "listen",
+ JSON.stringify({ ...mockListen, listened_at: Date.now() })
+ );
+ });
+ await act(async () => {
+ websocketServer.server.emit(
+ "listen",
+ JSON.stringify({ ...mockListen, listened_at: Date.now() })
+ );
+ });
+
+ // Should still have 7 listens
+ expect(wsListens).toHaveLength(7);
+ });
+ });
+
+ describe("Pagination", () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("handleClickOlder", () => {
+ it("older button should be disabled if there is no older listens timestamp", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ oldestListenTs: listens[listens.length - 1].listened_at,
+ });
+ })
+ );
+
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ // button should be disabled if last listen's listened_at <= oldestListenTs
+ const olderButton = await screen.findByLabelText(
+ "Navigate to older listens"
+ );
+ expect(olderButton).toHaveAttribute("aria-disabled", "true");
+ await userClickEvent.click(olderButton);
+ });
+
+ it("older button should have a link to older listen page", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ oldestListenTs: Math.round(
+ new Date("2019-04-09T10:12:04Z").getTime() / 1000
+ ),
+ });
+ })
+ );
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ },
+ true
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const olderButton = await screen.findByLabelText(
+ "Navigate to older listens"
+ );
+ expect(olderButton).toHaveAttribute("aria-disabled", "false");
+ expect(olderButton).toHaveAttribute("href", "/?max_ts=1586440536");
+ });
+ });
+
+ describe("handleClickNewer", () => {
+ it("newer button should be disabled if there is no newer listens timestamp", async () => {
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ // button should be disabled if last previousListenTs >= earliest timestamp
+ const newerButton = await screen.findByLabelText(
+ "Navigate to more recent listens"
+ );
+ expect(newerButton).toHaveAttribute("aria-disabled", "true");
+ });
+
+ it("newer button should have a link to newer listen page", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ latestListenTs: new Date("2021-09-14T03:16:16.161Z").getTime(),
+ });
+ })
+ );
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const newerButton = await screen.findByLabelText(
+ "Navigate to more recent listens"
+ );
+
+ expect(newerButton).toHaveAttribute("aria-disabled", "false");
+ expect(newerButton).toHaveAttribute("href", "/?min_ts=1586523524");
+ });
+ });
+
+ describe("handleClickOldest", () => {
+ it("does nothing if there is no older listens timestamp", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ oldestListenTs: listens[listens.length - 1].listened_at,
+ });
+ })
+ );
+
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ // button should be disabled if last listen's listened_at <= oldestListenTs
+ const oldestButton = await screen.findByLabelText(
+ "Navigate to oldest listens"
+ );
+ expect(oldestButton).toHaveAttribute("aria-disabled", "true");
+ });
+
+ it("oldest button should have a link to oldest listen page", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ oldestListenTs: Math.round(
+ new Date("2019-04-09T10:12:04Z").getTime() / 1000
+ ),
+ });
+ })
+ );
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const oldestButton = await screen.findByLabelText(
+ "Navigate to oldest listens"
+ );
+ expect(oldestButton).toHaveAttribute("aria-disabled", "false");
+ expect(oldestButton).toHaveAttribute("href", "/?min_ts=1554804723");
+ });
+ });
+ describe("handleClickNewest", () => {
+ it("newest button is disabled if there is no more recent listens timestamp", async () => {
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ latestListenTs: listens[0].listened_at,
+ });
+ })
+ );
+
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ // button should be disabled if last listen's listened_at <= oldestListenTs
+ const newestButton = await screen.findByLabelText(
+ "Navigate to most recent listens"
+ );
+ expect(newestButton).toHaveAttribute("aria-disabled", "true");
+ });
+
+ it("newest button should have a link to newest listen page", async () => {
+ const timestamp = Math.round(
+ new Date("2024-09-14T03:16:16.161Z").getTime() / 1000
+ );
+
+ server.use(
+ http.post("/", async (path) => {
+ return HttpResponse.json({
+ ...props,
+ latestListenTs: timestamp,
+ });
+ })
+ );
+
+ renderWithProviders(
+ ,
+ {
+ currentUser,
+ },
+ {
+ wrapper: reactQueryWrapper,
+ }
+ );
+
+ await waitFor(() => {
+ // Wait for data to be successfully loaded
+ const state = queryClient.getQueryState(queryKey);
+ expect(state?.status === "success").toBeTruthy();
+ });
+
+ const newestButton = await screen.findByLabelText(
+ "Navigate to most recent listens"
+ );
+
+ expect(newestButton).toHaveAttribute("href", "/");
+ expect(newestButton).toHaveAttribute("aria-disabled", "false");
+ });
+ });
});
- it("renders correctly on the profile page", async () => {});
-
- // it("renders correctly on the profile page", async () => {
- // /* eslint-disable testing-library/prefer-screen-queries */
- // const { findByTestId, getAllByTestId } = renderWithProviders(
- // ,
- // { APIService, currentUser }
- // );
- // await findByTestId("listens");
- // // 25 listens + one pinned recording listen
- // expect(getAllByTestId("listen")).toHaveLength(26);
- // /* eslint-enable testing-library/prefer-screen-queries */
- // });
-
- // it("fetches the user's listen count", async () => {
- // const spy = jest.fn().mockImplementation(() => {
- // return Promise.resolve(42);
- // });
- // APIService.getUserListenCount = spy;
-
- // await act(async () => {
- // renderWithProviders(, { APIService, currentUser });
- // });
-
- // const listenCountCard = await screen.findByTestId("listen-count-card");
- // // Due to the rendering of the card, the text representation appears with missing spaces
- // expect(listenCountCard).toHaveTextContent(
- // "You have listened to42songs so far"
- // );
- // expect(spy).toHaveBeenCalledWith(user.name);
- // });
-
- // describe("websocket features", () => {
- // const mockListen: Listen = {
- // track_metadata: {
- // artist_name: "FNORD",
- // track_name: "Have you seen the FNORDs?",
- // additional_info: {
- // recording_msid: "a6a0d9da-475b-45cb-a5a8-087caa1a121a",
- // },
- // },
- // listened_at: Date.now(),
- // listened_at_iso: "2020-04-10T10:12:04Z",
- // user_name: "mr_monkey",
- // playing_now: true,
- // };
- // let websocketServer: WS;
-
- // beforeEach(() => {
- // websocketServer = new WS("http://localhost");
- // // Leaving these commented out for easier debugging
- // // websocketServer.on("connection", (server) => {
- // // console.log("onconnection", server);
- // // });
- // // websocketServer.on("message", (x) => {
- // // console.log("onmessage", x);
- // // });
- // // websocketServer.on("close", (server) => {
- // // console.log("onclose", server);
- // // });
- // // websocketServer.on("json", (server) => {
- // // console.log("received 'json' type message", server);
- // // });
- // });
-
- // afterEach(() => {
- // WS.clean();
- // });
-
- // it("sets up a websocket connection with correct parameters", async () => {
- // let receivedUserNameMessage = false;
- // // Connection message from the client to the server
- // // Cannot currently test this with "expect(…).toReceiveMessage" with mock-socket
- // // because contrarily to socket.io it does not allow arbitrary types of messages
- // // in our case socket.emit("json",{user:username}) message type
- // const returnPromise = new Promise((resolve, reject) => {
- // // @ts-ignore
- // websocketServer.on("json", (userJson) => {
- // try {
- // expect(userJson).toEqual({ user: "iliekcomputers" });
- // receivedUserNameMessage = true;
- // resolve();
- // } catch (error) {
- // reject(error);
- // }
- // });
- // });
- // await act(async () => {
- // renderWithProviders();
- // });
- // await websocketServer.connected;
- // await returnPromise; // See at the beginning of this test
-
- // const websocketClients = websocketServer.server.clients();
- // expect(websocketClients.length).toBeGreaterThanOrEqual(1);
- // expect(receivedUserNameMessage).toBeTruthy();
- // });
-
- // it('calls correct handler for "listen" event', async () => {
- // await act(async () => {
- // renderWithProviders();
- // });
- // await websocketServer.connected;
-
- // expect(screen.queryByTestId("webSocketListens")).not.toBeInTheDocument();
- // expect(screen.queryAllByTestId("listen")).toHaveLength(26);
- // // send the message to the client
-
- // await act(async () => {
- // websocketServer.server.emit("listen", JSON.stringify(mockListen));
- // });
- // const websocketListensContainer = await screen.findByTestId(
- // "webSocketListens",
- // {}
- // );
- // const wsListens = within(websocketListensContainer).queryAllByTestId(
- // "listen"
- // );
- // expect(wsListens).toHaveLength(1);
- // expect(screen.queryAllByTestId("listen")).toHaveLength(27);
- // });
-
- // it('calls correct event for "playing_now" event', async () => {
- // await act(async () => {
- // renderWithProviders();
- // });
- // await websocketServer.connected;
- // expect(screen.queryAllByTestId("listen")).toHaveLength(26);
-
- // const playingNowListen: Listen = {
- // ...mockListen,
- // listened_at: Date.now(),
- // playing_now: true,
- // };
-
- // await act(async () => {
- // websocketServer.server.emit(
- // "playing_now",
- // JSON.stringify(playingNowListen)
- // );
- // });
- // const listenCards = screen.queryAllByTestId("listen");
- // expect(listenCards).toHaveLength(27);
- // await screen.findByTitle(playingNowListen.track_metadata.track_name, {});
- // });
-
- // it("crops the websocket listens array to a maximum of 7", async () => {
- // await act(async () => {
- // renderWithProviders();
- // });
- // await websocketServer.connected;
-
- // // Add 7 new listens
- // await act(async () => {
- // for (let index = 0; index < 8; index += 1) {
- // // Prevent the "Encountered two children with the same key" warning message
- // // by having a different timestamp for each listen
- // websocketServer.server.emit(
- // "listen",
- // JSON.stringify({ ...mockListen, listened_at: Date.now() + index })
- // );
- // }
- // });
-
- // const websocketListensContainer = await screen.findByTestId(
- // "webSocketListens"
- // );
- // const wsListens = within(websocketListensContainer).queryAllByTestId(
- // "listen"
- // );
- // expect(wsListens).toHaveLength(7);
-
- // // Add a few more, the process should crop to 7 max
- // await act(async () => {
- // websocketServer.server.emit(
- // "listen",
- // JSON.stringify({ ...mockListen, listened_at: Date.now() })
- // );
- // });
- // await act(async () => {
- // websocketServer.server.emit(
- // "listen",
- // JSON.stringify({ ...mockListen, listened_at: Date.now() })
- // );
- // });
- // await act(async () => {
- // websocketServer.server.emit(
- // "listen",
- // JSON.stringify({ ...mockListen, listened_at: Date.now() })
- // );
- // });
-
- // // Should still have 7 listens
- // expect(wsListens).toHaveLength(7);
- // });
- // });
-
- // describe("deleteListen", () => {
- // it("calls API and removeListenFromListenList correctly, and updates the state", async () => {
- // const spy = jest
- // .spyOn(APIService, "deleteListen")
- // .mockImplementation(() => Promise.resolve(200));
-
- // await act(async () => {
- // renderWithProviders(, {
- // APIService,
- // currentUser,
- // });
- // });
-
- // expect(await screen.findAllByTestId("listen")).toHaveLength(26);
-
- // const listensContainer = await screen.findByTestId("listens");
- // const listenCards = await within(listensContainer).findAllByTestId(
- // "listen"
- // );
- // const listenToDelete = listenCards[0];
-
- // const deleteButton = within(listenToDelete).getByRole("menuitem", {
- // name: "Delete Listen",
- // });
- // await userEvent.click(deleteButton);
-
- // await waitForElementToBeRemoved(
- // within(listenToDelete!).queryByRole("menuitem", {
- // name: "Delete Listen",
- // })
- // );
-
- // expect(spy).toHaveBeenCalledTimes(1);
- // expect(spy).toHaveBeenCalledWith(
- // "fnord",
- // "973e5620-829d-46dd-89a8-760d87076287",
- // 1586523524
- // );
- // expect(await screen.findAllByTestId("listen")).toHaveLength(25);
- // });
-
- // it("does not render delete button if user is not logged in", async () => {
- // await act(async () => {
- // renderWithProviders(, {
- // currentUser: undefined,
- // });
- // });
-
- // const deleteButton = screen.queryAllByRole("menuitem", {
- // name: "Delete Listen",
- // });
- // expect(deleteButton).toHaveLength(0);
- // });
-
- // it("does nothing if the user has no auth token", async () => {
- // const spy = jest
- // .spyOn(APIService, "deleteListen")
- // .mockImplementation(() => Promise.resolve(200));
-
- // await act(async () => {
- // renderWithProviders(, {
- // APIService,
- // currentUser: { auth_token: undefined, name: "iliekcomputers" },
- // });
- // });
-
- // const listensContainer = await screen.findByTestId("listens");
- // const listenCards = await within(listensContainer).findAllByTestId(
- // "listen"
- // );
- // expect(listenCards).toHaveLength(25);
- // const listenToDelete = listenCards[0];
-
- // const deleteButton = within(listenToDelete).getByRole("menuitem", {
- // name: "Delete Listen",
- // });
- // await userEvent.click(deleteButton);
-
- // expect(listenCards).toHaveLength(25);
-
- // expect(spy).not.toHaveBeenCalled();
- // });
-
- // it("doesn't call removeListenFromListenList or update state if status code is not 200", async () => {
- // const spy = jest.spyOn(APIService, "deleteListen");
- // spy.mockImplementation(() => Promise.resolve(500));
-
- // await act(async () => {
- // renderWithProviders(, {
- // APIService,
- // currentUser,
- // });
- // });
-
- // const listensContainer = await screen.findByTestId("listens");
- // const listenCards = await within(listensContainer).findAllByTestId(
- // "listen"
- // );
- // expect(listenCards).toHaveLength(25);
- // const listenToDelete = listenCards[0];
-
- // const deleteButton = within(listenToDelete).getByRole("menuitem", {
- // name: "Delete Listen",
- // });
- // await userEvent.click(deleteButton);
-
- // expect(listenCards).toHaveLength(25);
-
- // expect(spy).toHaveBeenCalledTimes(1);
- // expect(spy).toHaveBeenCalledWith(
- // "fnord",
- // "973e5620-829d-46dd-89a8-760d87076287",
- // 1586523524
- // );
-
- // await waitFor(
- // () => {
- // expect(listenCards).toHaveLength(25);
- // },
- // { timeout: 1000 }
- // );
- // });
-
- // it("handles error for delete listen", async () => {
- // const spy = jest
- // .spyOn(APIService, "deleteListen")
- // .mockImplementation(() => {
- // throw new Error("My error message");
- // });
-
- // await act(async () => {
- // renderWithProviders(, {
- // APIService,
- // currentUser,
- // });
- // });
- // const listensContainer = await screen.findByTestId("listens");
- // const listenCards = await within(listensContainer).findAllByTestId(
- // "listen"
- // );
- // expect(listenCards).toHaveLength(25);
- // const listenToDelete = listenCards[0];
- // const deleteButton = within(listenToDelete).getByRole("menuitem", {
- // name: "Delete Listen",
- // });
- // await userEvent.click(deleteButton);
- // expect(spy).toHaveBeenCalledTimes(1);
- // expect(spy).toHaveBeenCalledWith(
- // "fnord",
- // "973e5620-829d-46dd-89a8-760d87076287",
- // 1586523524
- // );
- // expect(
- // screen.getByText("Error while deleting listen")
- // ).toBeInTheDocument();
- // expect(screen.getByText("My error message")).toBeInTheDocument();
-
- // await waitFor(
- // () => {
- // expect(listenCards).toHaveLength(25);
- // },
- // { timeout: 1000 }
- // );
- // });
- // });
-
- // describe("Pagination", () => {
- // const pushStateSpy = jest.spyOn(window.history, "pushState");
- // const getListensForUserSpy = jest
- // .spyOn(APIService, "getListensForUser")
- // .mockImplementation(() => Promise.resolve([]));
-
- // const mockListen: Listen = {
- // track_metadata: {
- // artist_name: "FNORD",
- // track_name: "Have you seen the FNORDs?",
- // additional_info: {
- // recording_msid: "a6a089da-475b-45cb-a5a8-087caa1a121a",
- // },
- // },
- // listened_at: 1586440100,
- // user_name: "mr_monkey",
- // };
- // afterEach(() => {
- // jest.clearAllMocks();
- // });
-
- // describe("handleClickOlder", () => {
- // it("does nothing if there is no older listens timestamp", async () => {
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // // button should be disabled if last listen's listened_at <= oldestListenTs
- // const olderButton = await screen.findByLabelText(
- // "Navigate to older listens"
- // );
- // expect(olderButton).toHaveAttribute("aria-disabled", "true");
- // expect(olderButton).not.toHaveAttribute("href");
- // await userEventSession.click(olderButton);
-
- // expect(getListensForUserSpy).not.toHaveBeenCalled();
- // });
-
- // it("calls the API to get older listens", async () => {
- // const expectedListensArray = [
- // {
- // track_metadata: {
- // artist_name: "You mom",
- // track_name: "A unique track name",
- // release_name: "You mom's best of",
- // },
- // listened_at: 1586450001,
- // },
- // ];
- // getListensForUserSpy.mockImplementation(() =>
- // Promise.resolve(expectedListensArray)
- // );
-
- // await act(async () => {
- // renderWithProviders(, { APIService });
- // });
- // const expectedNextListenTimestamp =
- // listens[listens.length - 1].listened_at;
-
- // const olderButton = await screen.findByLabelText(
- // "Navigate to older listens"
- // );
- // await userEventSession.click(olderButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // undefined,
- // expectedNextListenTimestamp
- // );
- // await screen.findByText("A unique track name");
- // });
-
- // it("prevents further navigation if it receives not enough listens from API", async () => {
- // getListensForUserSpy.mockImplementationOnce(() =>
- // Promise.resolve([mockListen])
- // );
- // await act(async () => {
- // renderWithProviders(, { APIService });
- // });
-
- // const olderButton = await screen.findByLabelText(
- // "Navigate to older listens"
- // );
- // expect(olderButton).toHaveAttribute("aria-disabled", "false");
- // await userEventSession.click(olderButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // undefined,
- // 1586440536
- // );
-
- // expect(olderButton).toHaveAttribute("aria-disabled", "true");
- // expect(olderButton).not.toHaveAttribute("href");
- // });
-
- // it("updates the browser history", async () => {
- // getListensForUserSpy.mockImplementationOnce(
- // (username, minTs, maxTs) => {
- // return Promise.resolve([...listens, mockListen]);
- // }
- // );
-
- // await act(async () => {
- // renderWithProviders(, { APIService });
- // });
-
- // const olderButton = await screen.findByLabelText(
- // "Navigate to older listens"
- // );
- // expect(olderButton).toHaveAttribute("aria-disabled", "false");
-
- // await userEventSession.click(olderButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // undefined,
- // 1586440536
- // );
- // expect(pushStateSpy).toHaveBeenCalledWith(
- // null,
- // "",
- // "?max_ts=1586440536"
- // );
-
- // expect(olderButton).toHaveAttribute("href", "?max_ts=1586440100");
- // expect(olderButton).toHaveAttribute("aria-disabled", "false");
- // });
- // });
-
- // describe("handleClickNewer", () => {
- // it("does nothing if there is no newer listens timestamp", async () => {
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // // button should be disabled if last previousListenTs >= earliest timestamp
- // const newerButton = await screen.findByLabelText(
- // "Navigate to more recent listens"
- // );
- // expect(newerButton).toHaveAttribute("aria-disabled", "true");
- // expect(newerButton).not.toHaveAttribute("href");
- // await userEventSession.click(newerButton);
-
- // expect(getListensForUserSpy).not.toHaveBeenCalled();
- // });
-
- // it("calls the API to get newer listens", async () => {
- // const expectedListensArray = [
- // {
- // track_metadata: {
- // artist_name: "You mom",
- // track_name: "Another unique track name",
- // release_name: "You mom's best of",
- // },
- // listened_at: Date.now(),
- // },
- // ];
- // getListensForUserSpy.mockImplementation(() =>
- // Promise.resolve(expectedListensArray)
- // );
-
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
- // const expectedPreviousListenTimestamp = listens[0].listened_at;
-
- // const newerButton = await screen.findByLabelText(
- // "Navigate to more recent listens"
- // );
- // await userEventSession.click(newerButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // expectedPreviousListenTimestamp,
- // undefined
- // );
- // await screen.findByText("Another unique track name");
- // });
-
- // it("prevents further navigation if it receives not enough listens from API", async () => {
- // getListensForUserSpy.mockImplementationOnce(() =>
- // Promise.resolve([mockListen])
- // );
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // const newerButton = await screen.findByLabelText(
- // "Navigate to more recent listens"
- // );
- // expect(newerButton).toHaveAttribute("aria-disabled", "false");
- // await userEventSession.click(newerButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // listens[0].listened_at,
- // undefined
- // );
-
- // expect(newerButton).toHaveAttribute("aria-disabled", "true");
- // expect(newerButton).not.toHaveAttribute("href");
- // });
-
- // it("updates the browser history", async () => {
- // const mostRecentListenTs = listens[0].listened_at;
- // const timestamp = Date.now();
- // getListensForUserSpy.mockImplementationOnce(
- // (username, minTs, maxTs) => {
- // return Promise.resolve([
- // { ...mockListen, listened_at: timestamp },
- // ...listens,
- // ]);
- // }
- // );
-
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // const newerButton = await screen.findByLabelText(
- // "Navigate to more recent listens"
- // );
- // expect(newerButton).toHaveAttribute("aria-disabled", "false");
- // expect(newerButton).toHaveAttribute(
- // "href",
- // `?min_ts=${mostRecentListenTs}`
- // );
-
- // await userEventSession.click(newerButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // mostRecentListenTs,
- // undefined
- // );
- // expect(pushStateSpy).toHaveBeenCalledWith(
- // null,
- // "",
- // `?min_ts=${mostRecentListenTs}`
- // );
-
- // expect(newerButton).toHaveAttribute("href", `?min_ts=${timestamp}`);
- // expect(newerButton).toHaveAttribute("aria-disabled", "false");
- // });
- // });
-
- // describe("handleClickOldest", () => {
- // it("does nothing if there is no older listens timestamp", async () => {
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // // button should be disabled if last listen's listened_at <= oldestListenTs
- // const oldestButton = await screen.findByLabelText(
- // "Navigate to oldest listens"
- // );
- // expect(oldestButton).toHaveAttribute("aria-disabled", "true");
- // expect(oldestButton).not.toHaveAttribute("href");
- // await userEventSession.click(oldestButton);
-
- // expect(getListensForUserSpy).not.toHaveBeenCalled();
- // });
-
- // it("updates the browser history and disables navigation to oldest", async () => {
- // getListensForUserSpy.mockImplementationOnce(
- // (username, minTs, maxTs) => {
- // return Promise.resolve([
- // ...listens,
- // {
- // ...mockListen,
- // listened_at: oldestListenTs,
- // },
- // ]);
- // }
- // );
-
- // await act(async () => {
- // renderWithProviders(, { APIService });
- // });
-
- // const oldestButton = await screen.findByLabelText(
- // "Navigate to oldest listens"
- // );
- // expect(oldestButton).toHaveAttribute("aria-disabled", "false");
-
- // await userEventSession.click(oldestButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(
- // user.name,
- // oldestListenTs - 1
- // );
- // expect(pushStateSpy).toHaveBeenCalledWith(
- // null,
- // "",
- // `?min_ts=${oldestListenTs - 1}`
- // );
-
- // expect(oldestButton).not.toHaveAttribute("href");
- // expect(oldestButton).toHaveAttribute("aria-disabled", "true");
- // });
- // });
- // describe("handleClickNewest", () => {
- // it("does nothing if there is no more recent listens timestamp", async () => {
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // // button should be disabled if last listen's listened_at <= oldestListenTs
- // const newestButton = await screen.findByLabelText(
- // "Navigate to most recent listens"
- // );
- // expect(newestButton).toHaveAttribute("aria-disabled", "true");
- // expect(newestButton).toHaveAttribute("href", "/");
- // await userEventSession.click(newestButton);
-
- // expect(getListensForUserSpy).not.toHaveBeenCalled();
- // });
-
- // it("updates the browser history and disables navigation to newest listens", async () => {
- // const timestamp = Math.round(Date.now() / 1000);
- // await act(async () => {
- // renderWithProviders(
- // ,
- // { APIService }
- // );
- // });
-
- // getListensForUserSpy.mockResolvedValueOnce([
- // { ...mockListen, listened_at: timestamp },
- // ...listens,
- // ]);
-
- // const newestButton = await screen.findByLabelText(
- // "Navigate to most recent listens"
- // );
-
- // expect(newestButton).toHaveAttribute("href", "/");
- // expect(newestButton).toHaveAttribute("aria-disabled", "false");
-
- // await userEventSession.click(newestButton);
-
- // expect(getListensForUserSpy).toHaveBeenCalledWith(user.name);
-
- // expect(pushStateSpy).toHaveBeenCalledWith(null, "", "");
-
- // expect(newestButton).toHaveAttribute("href", "/");
- // expect(newestButton).toHaveAttribute("aria-disabled", "true");
- // });
- // });
- // });
});
diff --git a/frontend/js/tests/user/taste/UserFeedback.test.tsx b/frontend/js/tests/user/taste/UserFeedback.test.tsx
index c89b01f97b..4e788553db 100644
--- a/frontend/js/tests/user/taste/UserFeedback.test.tsx
+++ b/frontend/js/tests/user/taste/UserFeedback.test.tsx
@@ -7,6 +7,7 @@ import UserFeedback, {
} from "../../../src/user/taste/components/UserFeedback";
import * as userFeedbackProps from "../../__mocks__/userFeedbackProps.json";
import * as userFeedbackAPIResponse from "../../__mocks__/userFeedbackAPIResponse.json";
+import { ReactQueryWrapper } from "../../test-react-query";
const { totalCount, user, feedback } = userFeedbackProps;
@@ -33,7 +34,11 @@ describe("UserFeedback", () => {
});
it("renders ListenCard items for each feedback item", async () => {
- render();
+ render(
+
+
+
+ );
const listensContainer = screen.getByTestId("userfeedback-listens");
expect(listensContainer).toBeInTheDocument();
expect(screen.getAllByTestId("listen")).toHaveLength(15);
@@ -67,7 +72,11 @@ describe("UserFeedback", () => {
},
],
};
- render();
+ render(
+
+
+
+ );
const listensContainer = screen.getByTestId("userfeedback-listens");
expect(listensContainer).toBeInTheDocument();
expect(screen.getAllByTestId("listen")).toHaveLength(1);
@@ -75,7 +84,11 @@ describe("UserFeedback", () => {
describe("getFeedbackItemsFromAPI", () => {
it("sets the state and updates browser history", async () => {
- render();
+ render(
+
+
+
+ );
fetchMock.mockResponseOnce(JSON.stringify(userFeedbackAPIResponse));
diff --git a/listenbrainz/webserver/templates/index.html b/listenbrainz/webserver/templates/index.html
index f2fbeac69f..39b35aaf76 100644
--- a/listenbrainz/webserver/templates/index.html
+++ b/listenbrainz/webserver/templates/index.html
@@ -68,6 +68,7 @@
+
diff --git a/listenbrainz/webserver/views/entity_pages.py b/listenbrainz/webserver/views/entity_pages.py
index a913105670..9d6edd813c 100644
--- a/listenbrainz/webserver/views/entity_pages.py
+++ b/listenbrainz/webserver/views/entity_pages.py
@@ -20,17 +20,6 @@
release_group_bp = Blueprint("release-group", __name__)
-def get_release_group_sort_key(release_group):
- """ Return a tuple that sorts release group by total_listen_count and then by date """
- release_date = release_group.get("date")
- if release_date is None:
- release_date = datetime.min
- else:
- release_date = datetime.strptime(release_date, "%Y-%m-%d")
-
- return release_group["total_listen_count"] or 0, release_date
-
-
def get_cover_art_for_artist(release_groups):
""" Get the cover art for an artist using a list of their release groups """
covers = []
@@ -170,8 +159,6 @@ def artist_entity(artist_mbid):
release_group["total_user_count"] = pop["total_user_count"]
release_groups.append(release_group)
- release_groups.sort(key=get_release_group_sort_key, reverse=True)
-
listening_stats = get_entity_listener(db_conn, "artists", artist_mbid, "all_time")
if listening_stats is None:
listening_stats = {
diff --git a/listenbrainz/webserver/views/metadata_api.py b/listenbrainz/webserver/views/metadata_api.py
index 3d237d1a64..540329d028 100644
--- a/listenbrainz/webserver/views/metadata_api.py
+++ b/listenbrainz/webserver/views/metadata_api.py
@@ -242,9 +242,9 @@ def get_mbid_mapping():
:param artist_name: artist name of the listen
:type artist_name: ``str``
:param recording_name: track name of the listen
- :type artist_name: ``str``
- :param recording_name: release name of the listen
- :type artist_name: ``str``
+ :type recording_name: ``str``
+ :param release_name: release name of the listen
+ :type release_name: ``str``
:param metadata: should extra metadata be also returned if a match is found,
see /metadata/recording for details.
:type metadata: ``bool``
diff --git a/package-lock.json b/package-lock.json
index 88f1bb9414..79a0374f63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
"@nivo/network": "^0.81.0",
"@nivo/tooltip": "^0.81.0",
"@react-spring/web": "^9.7.3",
- "@sentry/react": "^8.19.0",
+ "@sentry/react": "^8.33.1",
"@tanstack/react-query": "^5.28.4",
"@tanstack/react-query-devtools": "^5.28.6",
"@types/react-datetime-picker": "^3.4.1",
@@ -72,6 +72,7 @@
"react-sortablejs": "^6.1.4",
"react-toastify": "^8.2.0",
"react-tooltip": "^4.5.1",
+ "react-use-draggable-scroll-safe": "^0.5.4",
"react-youtube": "^7.12.0",
"socket.io-client": "^4.5.4",
"sortablejs": "^1.12.0",
@@ -3840,97 +3841,97 @@
}
},
"node_modules/@sentry-internal/browser-utils": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.19.0.tgz",
- "integrity": "sha512-kM/2KlikKuBR63nFi2q7MGS3V9K9hakjvUknhr/jHZqDVfEuBKmp1ZlHFAdJtglKHHJy07gPj/XqDH7BbYh5yg==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.33.1.tgz",
+ "integrity": "sha512-TW6/r+Gl5jiXv54iK1xZ3mlVgTS/jaBp4vcQ0xGMdgiQ3WchEPcFSeYovL+YHT3tSud0GZqVtDQCz+5i76puqA==",
"dependencies": {
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry-internal/feedback": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.19.0.tgz",
- "integrity": "sha512-Jc77H8fEaGcBhERc2U/o7Q8CZHvlZLT9vAlzq0ZZR20v/1vwYcJW1ysKfTuvmw22hCR6ukhFNl6pqJocXFVhvA==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.33.1.tgz",
+ "integrity": "sha512-qauMRTm3qDaLqZ3ibI03cj4gLF40y0ij65nj+cns6iWxGCtPrO8tjvXFWuQsE7Aye9dGMnBgmv7uN+NTUtC3RA==",
"dependencies": {
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry-internal/replay": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.19.0.tgz",
- "integrity": "sha512-EW9e1J6XbqXUXQST1AfSIzT9O8OwPyeFOkhkn9/gqOQv08TJvQEIBtWJEoJS+XFMEUuB8IqIzVWNVko/DnGt9A==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.33.1.tgz",
+ "integrity": "sha512-fm4coIOjmanU29NOVN9MyaP4fUCOYytbtFqVSKRFNZQ/xAgNeySiBIbUd6IjujMmnOk9bY0WEUMcdm3Uotjdog==",
"dependencies": {
- "@sentry-internal/browser-utils": "8.19.0",
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry-internal/browser-utils": "8.33.1",
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry-internal/replay-canvas": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.19.0.tgz",
- "integrity": "sha512-l4pKJDHrXEctxrK7Xme/+fKToXpGwr/G2t77BzeE1WEw9LwSwADz/hi8HoMdZzuKWriM2BNbz20tpVS84sODxA==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.33.1.tgz",
+ "integrity": "sha512-nsxTFTPCT10Ty/v6+AiST3+yotGP1sUb8xqfKB9fPnS1hZHFryp0NnEls7xFjBsBbZPU1GpFkzrk/E6JFzixDQ==",
"dependencies": {
- "@sentry-internal/replay": "8.19.0",
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry-internal/replay": "8.33.1",
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry/browser": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.19.0.tgz",
- "integrity": "sha512-ZC1HxIFm4TIGONyy9MkPG6Dw8IAhzq43t5mq9PqrB1ehuWj8GX6Vk3E26kuc2sydAm4AXbj0562OmvZHsAJpUA==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.33.1.tgz",
+ "integrity": "sha512-c6zI/igexkLwZuGk+u8Rj26ChjxGgkhe6ZbKFsXCYaKAp5ep5X7HQRkkqgbxApiqlC0LduHdd/ymzh139JLg8w==",
"dependencies": {
- "@sentry-internal/browser-utils": "8.19.0",
- "@sentry-internal/feedback": "8.19.0",
- "@sentry-internal/replay": "8.19.0",
- "@sentry-internal/replay-canvas": "8.19.0",
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry-internal/browser-utils": "8.33.1",
+ "@sentry-internal/feedback": "8.33.1",
+ "@sentry-internal/replay": "8.33.1",
+ "@sentry-internal/replay-canvas": "8.33.1",
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry/core": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.19.0.tgz",
- "integrity": "sha512-MrgjsZCEjOJgQjIznnDSrLEy7qL+4LVpNieAvr49cV1rzBNSwGmWRnt/puVaPsLyCUgupVx/43BPUHB/HtKNUw==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.33.1.tgz",
+ "integrity": "sha512-3SS41suXLFzxL3OQvTMZ6q92ZapELVq2l2SoWlZopcamWhog2Ru0dp2vkunq97kFHb2TzKRTlFH4+4gbT8SJug==",
"dependencies": {
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0"
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1"
},
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry/react": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry/react/-/react-8.19.0.tgz",
- "integrity": "sha512-MzuMy4AEdSuIrBEyp3W7c4+v215+2MiU9ba7Y0KBKcC/Nrf1cGfRFRbjl9OYm/JIuxkaop7kgYs6sPMrVJVlrQ==",
- "dependencies": {
- "@sentry/browser": "8.19.0",
- "@sentry/core": "8.19.0",
- "@sentry/types": "8.19.0",
- "@sentry/utils": "8.19.0",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry/react/-/react-8.33.1.tgz",
+ "integrity": "sha512-SsEX05xfcfOvo7/pK1UyeyTAYWH8iSIsXXlsjvnSRsbuJkjb0c+q6yiZpj3A2PRdbcx43nTVE1n0lSpgaqj2HA==",
+ "dependencies": {
+ "@sentry/browser": "8.33.1",
+ "@sentry/core": "8.33.1",
+ "@sentry/types": "8.33.1",
+ "@sentry/utils": "8.33.1",
"hoist-non-react-statics": "^3.3.2"
},
"engines": {
@@ -3941,19 +3942,19 @@
}
},
"node_modules/@sentry/types": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.19.0.tgz",
- "integrity": "sha512-52C8X5V7mK2KIxMJt8MV5TxXAFHqrQR1RKm1oPTwKVWm8hKr1ZYJXINymNrWvpAc3oVIKLC/sa9WFYgXQh+YlA==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.33.1.tgz",
+ "integrity": "sha512-GjoAMvwtpIemoF/IiwZ7A60g4nQv3qwzR21GvJqDVUoKD0e8pv9OLX+HyXoUat4wEDGSuDUcUyUKD2G+od73QA==",
"engines": {
"node": ">=14.18"
}
},
"node_modules/@sentry/utils": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.19.0.tgz",
- "integrity": "sha512-8dWJJKaUN6Hf92Oxw2TBmHchGua2W3ZmonrZTTwLvl06jcAigbiQD0MGuF5ytZP8PHx860orV+SbTGKFzfU3Pg==",
+ "version": "8.33.1",
+ "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.33.1.tgz",
+ "integrity": "sha512-uzuYpiiJuFY3N4WNHMBWUQX5oNv2t/TbG0OHRp3Rr7yeu+HSfD542TIp9/gMZ+G0Cxd8AmVO3wkKIFbk0TL4Qg==",
"dependencies": {
- "@sentry/types": "8.19.0"
+ "@sentry/types": "8.33.1"
},
"engines": {
"node": ">=14.18"
@@ -15356,6 +15357,17 @@
"react-dom": ">=16.6.0"
}
},
+ "node_modules/react-use-draggable-scroll-safe": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/react-use-draggable-scroll-safe/-/react-use-draggable-scroll-safe-0.5.4.tgz",
+ "integrity": "sha512-T06uKjtzSi82bKKBqr76BnD9Y6CPLEQhqNQ2x7rrR1UrChoQhgt4m0oXRa7b2MZokD1oZA/d1KZ457/tq14itA==",
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": ">=16"
+ }
+ },
"node_modules/react-youtube": {
"version": "7.12.0",
"resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-7.12.0.tgz",
diff --git a/package.json b/package.json
index 8be5341ea4..1eb2de6116 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"@nivo/network": "^0.81.0",
"@nivo/tooltip": "^0.81.0",
"@react-spring/web": "^9.7.3",
- "@sentry/react": "^8.19.0",
+ "@sentry/react": "^8.33.1",
"@tanstack/react-query": "^5.28.4",
"@tanstack/react-query-devtools": "^5.28.6",
"@types/react-datetime-picker": "^3.4.1",
@@ -96,6 +96,7 @@
"react-sortablejs": "^6.1.4",
"react-toastify": "^8.2.0",
"react-tooltip": "^4.5.1",
+ "react-use-draggable-scroll-safe": "^0.5.4",
"react-youtube": "^7.12.0",
"socket.io-client": "^4.5.4",
"sortablejs": "^1.12.0",