From 51106841ab3a3e3e8131b54c9e1799ba5a1e87da Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 4 Jun 2021 20:24:43 +0200 Subject: [PATCH] Fix Vue unit tests Signed-off-by: Thomas Citharel --- js/src/components/Comment/CommentTree.vue | 5 +- .../ParticipationWithoutAccount.vue | 21 ++-- js/src/views/User/PasswordReset.vue | 4 +- js/src/vue-apollo.ts | 1 + js/tests/unit/specs/common.ts | 19 ++++ .../components/Comment/CommentTree.spec.ts | 37 +++--- .../__snapshots__/CommentTree.spec.ts.snap | 4 +- .../ParticipationSection.spec.ts | 27 ++--- .../ParticipationWithoutAccount.spec.ts | 13 +-- .../components/Post/PostListItem.spec.ts | 4 + .../components/Report/ReportModal.spec.ts | 2 +- .../components/User/PasswordReset.spec.ts | 105 ++++++++++++++++++ .../__snapshots__/PasswordReset.spec.ts.snap | 74 ++++++++++++ .../unit/specs/components/User/login.spec.ts | 2 +- js/tests/unit/specs/components/navbar.spec.ts | 2 +- js/tests/unit/specs/mocks/auth.ts | 14 +++ js/tests/unit/specs/mocks/config.ts | 5 + js/tests/unit/specs/mocks/event.ts | 10 ++ 18 files changed, 283 insertions(+), 66 deletions(-) create mode 100644 js/tests/unit/specs/common.ts create mode 100644 js/tests/unit/specs/components/User/PasswordReset.spec.ts create mode 100644 js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue index 547674867..2c51b6732 100644 --- a/js/src/components/Comment/CommentTree.vue +++ b/js/src/components/Comment/CommentTree.vue @@ -99,9 +99,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core"; @Component({ apollo: { - currentActor: { - query: CURRENT_ACTOR_CLIENT, - }, + currentActor: CURRENT_ACTOR_CLIENT, comments: { query: COMMENTS_THREADS_WITH_REPLIES, variables() { @@ -152,7 +150,6 @@ export default class CommentTree extends Vue { } async createCommentForEvent(comment: IComment): Promise { - console.log("creating comment", comment); this.emptyCommentError = ["", "

"].includes(comment.text); if (this.emptyCommentError) return; try { diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue index 1b86c7a4e..e7ec23932 100644 --- a/js/src/components/Participation/ParticipationWithoutAccount.vue +++ b/js/src/components/Participation/ParticipationWithoutAccount.vue @@ -217,25 +217,24 @@ export default class ParticipationWithoutAccount extends Vue { ); return; } - const { event } = cachedData; - if (event === null) { - console.error( - "Cannot update event participant cache, because of null value." - ); - return; - } + const participantStats = { ...cachedData.event.participantStats }; if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) { - event.participantStats.notConfirmed += 1; + participantStats.notConfirmed += 1; } else { - event.participantStats.going += 1; - event.participantStats.participant += 1; + participantStats.going += 1; + participantStats.participant += 1; } store.writeQuery({ query: FETCH_EVENT_BASIC, variables: { uuid: this.event.uuid }, - data: { event }, + data: { + event: { + ...cachedData.event, + participantStats, + }, + }, }); }, }); diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue index 9243ca6af..5b142932e 100644 --- a/js/src/views/User/PasswordReset.vue +++ b/js/src/views/User/PasswordReset.vue @@ -93,9 +93,9 @@ export default class PasswordReset extends Vue { } saveUserData(data.resetPassword); - await this.$router.push({ name: RouteName.HOME }); + this.$router.push({ name: RouteName.HOME }); + return; } catch (err) { - console.error(err); err.graphQLErrors.forEach(({ message }: { message: any }) => { this.errors.push(message); }); diff --git a/js/src/vue-apollo.ts b/js/src/vue-apollo.ts index 65a23ac43..f3c4d93d1 100644 --- a/js/src/vue-apollo.ts +++ b/js/src/vue-apollo.ts @@ -136,6 +136,7 @@ const errorLink = onError( const fullLink = authMiddleware.concat(errorLink).concat(link); const cache = new InMemoryCache({ + addTypename: true, typePolicies, possibleTypes, dataIdFromObject: (object: any) => { diff --git a/js/tests/unit/specs/common.ts b/js/tests/unit/specs/common.ts new file mode 100644 index 000000000..2fa8f83af --- /dev/null +++ b/js/tests/unit/specs/common.ts @@ -0,0 +1,19 @@ +import { ICurrentUserRole } from "@/types/enums"; + +export const defaultResolvers = { + Query: { + currentUser: (): Record => ({ + email: "user@mail.com", + id: "2", + role: ICurrentUserRole.USER, + isLoggedIn: true, + __typename: "CurrentUser", + }), + currentActor: (): Record => ({ + id: "67", + preferredUsername: "someone", + name: "Personne", + __typename: "CurrentActor", + }), + }, +}; diff --git a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts index 004158bcd..6c0568aa2 100644 --- a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts +++ b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts @@ -6,9 +6,11 @@ import { MockApolloClient, RequestHandler, } from "mock-apollo-client"; -import buildCurrentUserResolver from "@/apollo/user"; import VueApollo from "vue-apollo"; -import { COMMENTS_THREADS, CREATE_COMMENT_FROM_EVENT } from "@/graphql/comment"; +import { + COMMENTS_THREADS_WITH_REPLIES, + CREATE_COMMENT_FROM_EVENT, +} from "@/graphql/comment"; import { CommentModeration } from "@/types/enums"; import { IEvent } from "@/types/event.model"; import { @@ -16,8 +18,9 @@ import { newCommentForEventMock, newCommentForEventResponse, } from "../../mocks/event"; -import { InMemoryCache } from "@apollo/client/cache"; - +import flushPromises from "flush-promises"; +import { InMemoryCache } from "@apollo/client/core"; +import { defaultResolvers } from "../../common"; const localVue = createLocalVue(); localVue.use(Buefy); localVue.use(VueApollo); @@ -35,13 +38,12 @@ describe("CommentTree", () => { let mockClient: MockApolloClient; let apolloProvider; let requestHandlers: Record; + const cache = new InMemoryCache({ addTypename: false }); const generateWrapper = (handlers = {}, baseData = {}) => { - const cache = new InMemoryCache({ addTypename: true }); - mockClient = createMockClient({ cache, - resolvers: buildCurrentUserResolver(cache), + resolvers: defaultResolvers, }); requestHandlers = { @@ -55,14 +57,13 @@ describe("CommentTree", () => { }; mockClient.setRequestHandler( - COMMENTS_THREADS, + COMMENTS_THREADS_WITH_REPLIES, requestHandlers.eventCommentThreadsQueryHandler ); mockClient.setRequestHandler( CREATE_COMMENT_FROM_EVENT, requestHandlers.createCommentForEventMutationHandler ); - apolloProvider = new VueApollo({ defaultClient: mockClient, }); @@ -76,16 +77,13 @@ describe("CommentTree", () => { stubs: ["editor"], data() { return { - currentActor: { - id: "76", - }, ...baseData, }; }, }); }; - it("renders a comment tree", async () => { + it("renders an empty comment tree", async () => { generateWrapper(); expect(wrapper.exists()).toBe(true); @@ -98,7 +96,7 @@ describe("CommentTree", () => { expect(wrapper.html()).toMatchSnapshot(); }); - it("renders a comment tree", async () => { + it("renders a comment tree with comments", async () => { generateWrapper(); await wrapper.vm.$nextTick(); @@ -124,14 +122,7 @@ describe("CommentTree", () => { } ); - wrapper.setData({ - currentActor: { - id: "67", - }, - }); - - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); // because of the + await flushPromises(); expect(wrapper.find("form.new-comment").isVisible()).toBe(true); expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2); @@ -147,7 +138,7 @@ describe("CommentTree", () => { if (mockClient) { const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({ - query: COMMENTS_THREADS, + query: COMMENTS_THREADS_WITH_REPLIES, variables: { eventUUID: eventData.uuid, }, diff --git a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap index f00005715..e8311c62a 100644 --- a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap +++ b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CommentTree renders a comment tree 1`] = ` +exports[`CommentTree renders a comment tree with comments 1`] = `
@@ -13,7 +13,7 @@ exports[`CommentTree renders a comment tree 1`] = `
`; -exports[`CommentTree renders a comment tree 2`] = ` +exports[`CommentTree renders an empty comment tree 1`] = `
diff --git a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts index 7bf400179..e9e137b13 100644 --- a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts +++ b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts @@ -9,11 +9,11 @@ import { MockApolloClient, RequestHandler, } from "mock-apollo-client"; -import buildCurrentUserResolver from "@/apollo/user"; import { CONFIG } from "@/graphql/config"; import VueApollo from "vue-apollo"; import { configMock } from "../../mocks/config"; import { InMemoryCache } from "@apollo/client/cache"; +import { defaultResolvers } from "../../common"; const localVue = createLocalVue(); localVue.use(Buefy); @@ -42,11 +42,11 @@ describe("ParticipationSection", () => { customProps: Record = {}, baseData: Record = {} ) => { - const cache = new InMemoryCache({ addTypename: true }); + const cache = new InMemoryCache({ addTypename: false }); mockClient = createMockClient({ cache, - resolvers: buildCurrentUserResolver(cache), + resolvers: defaultResolvers, }); requestHandlers = { configQueryHandler: jest.fn().mockResolvedValue(configMock), @@ -62,6 +62,9 @@ describe("ParticipationSection", () => { localVue, router, apolloProvider, + stubs: { + ParticipationButton: true, + }, propsData: { participation: null, event: eventData, @@ -70,9 +73,6 @@ describe("ParticipationSection", () => { }, data() { return { - currentActor: { - id: "76", - }, ...baseData, }; }, @@ -89,14 +89,15 @@ describe("ParticipationSection", () => { expect(wrapper.find(".event-participation").exists()).toBeTruthy(); - const participationButton = wrapper.find( - ".event-participation .participation-button a.button.is-large.is-primary" - ); - expect(participationButton.attributes("href")).toBe( - `/events/${eventData.uuid}/participate/with-account` - ); + // TODO: Move to participation button test + // const participationButton = wrapper.find( + // ".event-participation .participation-button a.button.is-large.is-primary" + // ); + // expect(participationButton.attributes("href")).toBe( + // `/events/${eventData.uuid}/participate/with-account` + // ); - expect(participationButton.text()).toBe("Participate"); + // expect(participationButton.text()).toBe("Participate"); }); it("renders the participation section with existing confimed anonymous participation", async () => { diff --git a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts index 047cb595b..bbda6f500 100644 --- a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts +++ b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts @@ -13,7 +13,6 @@ import { MockApolloClient, RequestHandler, } from "mock-apollo-client"; -import buildCurrentUserResolver from "@/apollo/user"; import { CONFIG } from "@/graphql/config"; import VueApollo from "vue-apollo"; import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event"; @@ -26,6 +25,8 @@ import { joinEventResponseMock, } from "../../mocks/event"; import { InMemoryCache } from "@apollo/client/cache"; +import { defaultResolvers } from "../../common"; +import flushPromises from "flush-promises"; const localVue = createLocalVue(); localVue.use(Buefy); @@ -65,11 +66,11 @@ describe("ParticipationWithoutAccount", () => { customProps: Record = {}, baseData: Record = {} ) => { - const cache = new InMemoryCache({ addTypename: true }); + const cache = new InMemoryCache({ addTypename: false }); mockClient = createMockClient({ cache, - resolvers: buildCurrentUserResolver(cache), + resolvers: defaultResolvers, }); requestHandlers = { configQueryHandler: jest.fn().mockResolvedValue(configMock), @@ -155,11 +156,7 @@ describe("ParticipationWithoutAccount", () => { eventData.participantStats.participant + 1 ); } - // lots of things to await - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); + await flushPromises(); expect(wrapper.find("form").exists()).toBeFalsy(); expect(wrapper.find("h1.title").text()).toBe( "Request for participation confirmation sent" diff --git a/js/tests/unit/specs/components/Post/PostListItem.spec.ts b/js/tests/unit/specs/components/Post/PostListItem.spec.ts index 60397d598..cf52cb295 100644 --- a/js/tests/unit/specs/components/Post/PostListItem.spec.ts +++ b/js/tests/unit/specs/components/Post/PostListItem.spec.ts @@ -3,10 +3,14 @@ import PostListItem from "@/components/Post/PostListItem.vue"; import Buefy from "buefy"; import VueRouter from "vue-router"; import { routes } from "@/router"; +import { enUS } from "date-fns/locale"; const localVue = createLocalVue(); localVue.use(Buefy); localVue.use(VueRouter); +localVue.use((vue) => { + vue.prototype.$dateFnsLocale = enUS; +}); const router = new VueRouter({ routes, mode: "history" }); config.mocks.$t = (key: string): string => key; diff --git a/js/tests/unit/specs/components/Report/ReportModal.spec.ts b/js/tests/unit/specs/components/Report/ReportModal.spec.ts index 0f3944b80..75f6846ca 100644 --- a/js/tests/unit/specs/components/Report/ReportModal.spec.ts +++ b/js/tests/unit/specs/components/Report/ReportModal.spec.ts @@ -98,7 +98,7 @@ describe("ReportModal", () => { ); const switchButton = wrapper.find('input[type="checkbox"]'); - switchButton.trigger("click"); + switchButton.setChecked(); const submit = wrapper.find("footer.modal-card-foot button.is-primary"); submit.trigger("click"); diff --git a/js/tests/unit/specs/components/User/PasswordReset.spec.ts b/js/tests/unit/specs/components/User/PasswordReset.spec.ts new file mode 100644 index 000000000..d6b24689b --- /dev/null +++ b/js/tests/unit/specs/components/User/PasswordReset.spec.ts @@ -0,0 +1,105 @@ +import { config, createLocalVue, mount } from "@vue/test-utils"; +import PasswordReset from "@/views/User/PasswordReset.vue"; +import Buefy from "buefy"; +import { createMockClient, RequestHandler } from "mock-apollo-client"; +import { RESET_PASSWORD } from "@/graphql/auth"; +import VueApollo from "vue-apollo"; +import { resetPasswordResponseMock } from "../../mocks/auth"; +import RouteName from "@/router/name"; +import flushPromises from "flush-promises"; + +const localVue = createLocalVue(); +localVue.use(Buefy); +config.mocks.$t = (key: string): string => key; +const $router = { push: jest.fn() }; + +let requestHandlers: Record; + +const generateWrapper = ( + customRequestHandlers: Record = {}, + customMocks = {} +) => { + const mockClient = createMockClient(); + + requestHandlers = { + resetPasswordMutationHandler: jest + .fn() + .mockResolvedValue(resetPasswordResponseMock), + ...customRequestHandlers, + }; + + mockClient.setRequestHandler( + RESET_PASSWORD, + requestHandlers.resetPasswordMutationHandler + ); + + const apolloProvider = new VueApollo({ + defaultClient: mockClient, + }); + + return mount(PasswordReset, { + localVue, + mocks: { + $route: { query: {} }, + $router, + ...customMocks, + }, + apolloProvider, + propsData: { + token: "some-token", + }, + }); +}; + +describe("Reset page", () => { + it("renders correctly", () => { + const wrapper = generateWrapper(); + expect(wrapper.findAll('input[type="password"').length).toBe(2); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it("shows error if token is invalid", async () => { + const wrapper = generateWrapper({ + resetPasswordMutationHandler: jest.fn().mockResolvedValue({ + errors: [{ message: "The token you provided is invalid." }], + }), + }); + + wrapper.findAll('input[type="password"').setValue("my password"); + wrapper.find("form").trigger("submit"); + + await wrapper.vm.$nextTick(); + + expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1); + expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({ + password: "my password", + token: "some-token", + }); + + await wrapper.vm.$nextTick(); + await wrapper.vm.$nextTick(); + + expect(wrapper.find("article.message.is-danger").text()).toContain( + "The token you provided is invalid" + ); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it("redirects to homepage if token is valid", async () => { + const wrapper = generateWrapper(); + + wrapper.findAll('input[type="password"').setValue("my password"); + wrapper.find("form").trigger("submit"); + + await wrapper.vm.$nextTick(); + + expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1); + expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({ + password: "my password", + token: "some-token", + }); + expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true); + await flushPromises(); + expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME }); + }); +}); diff --git a/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap b/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap new file mode 100644 index 000000000..c9657457d --- /dev/null +++ b/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Reset page renders correctly 1`] = ` +
+
+
+

+ Password reset +

+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+`; + +exports[`Reset page shows error if token is invalid 1`] = ` +
+
+
+

+ Password reset +

+ +
+
+

Error

+
+
+
+ +
The token you provided is invalid.
+
+
+
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+`; diff --git a/js/tests/unit/specs/components/User/login.spec.ts b/js/tests/unit/specs/components/User/login.spec.ts index 600d14841..13a6e8e5b 100644 --- a/js/tests/unit/specs/components/User/login.spec.ts +++ b/js/tests/unit/specs/components/User/login.spec.ts @@ -36,7 +36,7 @@ describe("Render login form", () => { baseData: Record = {}, customMocks: Record = {} ) => { - const cache = new InMemoryCache({ addTypename: true }); + const cache = new InMemoryCache({ addTypename: false }); mockClient = createMockClient({ cache, diff --git a/js/tests/unit/specs/components/navbar.spec.ts b/js/tests/unit/specs/components/navbar.spec.ts index cd7297495..54cd4d366 100644 --- a/js/tests/unit/specs/components/navbar.spec.ts +++ b/js/tests/unit/specs/components/navbar.spec.ts @@ -25,7 +25,7 @@ describe("App component", () => { let requestHandlers: Record; const createComponent = (handlers = {}, baseData = {}) => { - const cache = new InMemoryCache({ addTypename: true }); + const cache = new InMemoryCache({ addTypename: false }); mockClient = createMockClient({ cache, diff --git a/js/tests/unit/specs/mocks/auth.ts b/js/tests/unit/specs/mocks/auth.ts index 3caba2803..53a604e87 100644 --- a/js/tests/unit/specs/mocks/auth.ts +++ b/js/tests/unit/specs/mocks/auth.ts @@ -18,3 +18,17 @@ export const loginResponseMock = { }, }, }; + +export const resetPasswordResponseMock = { + data: { + resetPassword: { + __typename: "Login", + accessToken: "some access token", + refreshToken: "some refresh token", + user: { + __typename: "User", + id: "1", + }, + }, + }, +}; diff --git a/js/tests/unit/specs/mocks/config.ts b/js/tests/unit/specs/mocks/config.ts index 8c581e6cf..3a174d34e 100644 --- a/js/tests/unit/specs/mocks/config.ts +++ b/js/tests/unit/specs/mocks/config.ts @@ -113,6 +113,11 @@ export const configMock = { __typename: "InstanceFeeds", enabled: false, }, + webPush: { + __typename: "WebPush", + enabled: true, + publicKey: "", + }, }, }, }; diff --git a/js/tests/unit/specs/mocks/event.ts b/js/tests/unit/specs/mocks/event.ts index abe00d4a4..55c3dc429 100644 --- a/js/tests/unit/specs/mocks/event.ts +++ b/js/tests/unit/specs/mocks/event.ts @@ -80,6 +80,9 @@ export const eventCommentThreadsMock = { visibility: "PUBLIC", totalReplies: 5, updatedAt: "2020-12-03T09:02:00Z", + inReplyToComment: null, + originComment: null, + replies: [], actor: { __typename: "Person", avatar: { @@ -94,6 +97,7 @@ export const eventCommentThreadsMock = { summary: "I am the senate", }, deletedAt: null, + isAnnouncement: false, }, { __typename: "Comment", @@ -105,6 +109,9 @@ export const eventCommentThreadsMock = { visibility: "PUBLIC", totalReplies: 0, updatedAt: "2020-12-03T11:02:00Z", + inReplyToComment: null, + originComment: null, + replies: [], actor: { __typename: "Person", avatar: { @@ -119,6 +126,7 @@ export const eventCommentThreadsMock = { summary: "I am the senate", }, deletedAt: null, + isAnnouncement: false, }, ], }, @@ -129,6 +137,7 @@ export const newCommentForEventMock = { eventId: "1", text: "my new comment", inReplyToCommentId: null, + isAnnouncement: false, }; export const newCommentForEventResponse: DataMock = { @@ -160,6 +169,7 @@ export const newCommentForEventResponse: DataMock = { summary: "I am the senate", }, deletedAt: null, + isAnnouncement: false, }, }, };