@@ -646,7 +582,7 @@ import { IReport } from "../../types/report.model";
import { CREATE_REPORT } from "../../graphql/report";
import EventMixin from "../../mixins/event";
import IdentityPicker from "../Account/IdentityPicker.vue";
-import ParticipationButton from "../../components/Event/ParticipationButton.vue";
+import ParticipationSection from "../../components/Participation/ParticipationSection.vue";
import RouteName from "../../router/name";
import { Address } from "../../types/address.model";
import CommentTree from "../../components/Comment/CommentTree.vue";
@@ -676,7 +612,7 @@ import { IParticipant } from "../../types/participant.model";
DateCalendarIcon,
ReportModal,
IdentityPicker,
- ParticipationButton,
+ ParticipationSection,
CommentTree,
Tag,
ActorCard,
diff --git a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
new file mode 100644
index 00000000..ff033962
--- /dev/null
+++ b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
@@ -0,0 +1,145 @@
+import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
+import Buefy from "buefy";
+import VueRouter from "vue-router";
+import { routes } from "@/router";
+import { CommentModeration } from "@/types/enums";
+import {
+ createMockClient,
+ MockApolloClient,
+ RequestHandler,
+} from "mock-apollo-client";
+import buildCurrentUserResolver from "@/apollo/user";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { CONFIG } from "@/graphql/config";
+import VueApollo from "vue-apollo";
+import { configMock } from "../../mocks/config";
+
+const localVue = createLocalVue();
+localVue.use(Buefy);
+localVue.use(VueRouter);
+const router = new VueRouter({ routes, mode: "history" });
+config.mocks.$t = (key: string): string => key;
+
+const eventData = {
+ id: "1",
+ uuid: "e37910ea-fd5a-4756-7634-00971f3f4107",
+ options: {
+ commentModeration: CommentModeration.ALLOW_ALL,
+ },
+ beginsOn: new Date("2089-12-04T09:21:25Z"),
+ endsOn: new Date("2089-12-04T11:21:25Z"),
+};
+
+describe("ParticipationSection", () => {
+ let wrapper: Wrapper;
+ let mockClient: MockApolloClient;
+ let apolloProvider;
+ let requestHandlers: Record;
+
+ const generateWrapper = (
+ handlers: Record = {},
+ customProps: Record = {},
+ baseData: Record = {}
+ ) => {
+ const cache = new InMemoryCache({ addTypename: false });
+
+ mockClient = createMockClient({
+ cache,
+ resolvers: buildCurrentUserResolver(cache),
+ });
+ requestHandlers = {
+ configQueryHandler: jest.fn().mockResolvedValue(configMock),
+ ...handlers,
+ };
+ mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
+
+ apolloProvider = new VueApollo({
+ defaultClient: mockClient,
+ });
+
+ wrapper = mount(ParticipationSection, {
+ localVue,
+ router,
+ apolloProvider,
+ propsData: {
+ participation: null,
+ event: eventData,
+ anonymousParticipation: null,
+ ...customProps,
+ },
+ data() {
+ return {
+ currentActor: {
+ id: "76",
+ },
+ ...baseData,
+ };
+ },
+ });
+ };
+
+ it("renders the participation section with minimal data", async () => {
+ generateWrapper();
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.exists()).toBe(true);
+ expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
+ expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
+
+ 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`
+ );
+
+ expect(participationButton.text()).toBe("Participate");
+ });
+
+ it("renders the participation section with existing confimed anonymous participation", async () => {
+ generateWrapper({}, { anonymousParticipation: true });
+
+ expect(wrapper.find(".event-participation > small").text()).toContain(
+ "You are participating in this event anonymously"
+ );
+
+ const cancelAnonymousParticipationButton = wrapper.find(
+ ".event-participation > button.button.is-text"
+ );
+ expect(cancelAnonymousParticipationButton.text()).toBe(
+ "Cancel anonymous participation"
+ );
+ cancelAnonymousParticipationButton.trigger("click");
+ await wrapper.vm.$nextTick();
+ expect(wrapper.emitted("cancel-anonymous-participation")).toBeTruthy();
+ });
+
+ it("renders the participation section with existing unconfirmed anonymous participation", async () => {
+ generateWrapper({}, { anonymousParticipation: false });
+
+ expect(wrapper.find(".event-participation > small").text()).toContain(
+ "You are participating in this event anonymously but didn't confirm participation"
+ );
+ });
+
+ it("renders the participation section but the event is already passed", async () => {
+ generateWrapper(
+ {},
+ {
+ event: {
+ ...eventData,
+ beginsOn: "2020-12-02T10:52:56Z",
+ endsOn: "2020-12-03T10:52:56Z",
+ },
+ }
+ );
+
+ expect(wrapper.find(".event-participation").exists()).toBeFalsy();
+ expect(wrapper.find("button.button.is-primary").text()).toBe(
+ "Event already passed"
+ );
+ });
+});