Sign up to event

cypress/fixtures/dummyEventResponses.json

@@ -1,8 +1,9 @@
 {
     "data": [
         {
-            "action_id": 22,
-            "response_date": "1111 11 11, 11:11",
+            "action_id": 25,
+            "response_date": "2021-01-21T18:30:00+00:00",
+            "organization_id": 1,
             "person": {
                 "name": "Dummy User",
                 "id": 2

cypress/integration/org_event_page.spec.ts

@@ -1,28 +1,79 @@
 describe('/o/[orgId]/events/[eventId]', () => {
+    beforeEach(() => {
+        cy.request('delete', 'http://localhost:8001/_mocks');
+    });
+
+    after(() => {
+        cy.request('delete', 'http://localhost:8001/_mocks');
+    });
+
     it('contains non-interactive event content', () => {
-        cy.visit('/o/1/events/22');
+        cy.visit('/o/1/events/25');
         cy.get('[data-test="event-title"]').should('be.visible');
         cy.get('[data-test="duration"]').should('be.visible');
         cy.get('[data-test="location"]').should('be.visible');
     });
 
     it('contains clickable org name that leads to org page', () => {
-        cy.visit('/o/1/events/22');
+        cy.visit('/o/1/events/25');
         cy.waitUntilReactRendered();
         cy.findByText('My Organization').click();
         cy.url().should('match', /\/o\/1$/);
     });
 
     it('contains clickable campaign name that leads to campaign page', () => {
-        cy.visit('/o/1/events/22');
+        cy.visit('/o/1/events/25');
         cy.waitUntilReactRendered();
         cy.findByText('Second campaign').click();
         cy.url().should('match', /\/o\/1\/campaigns\/2$/);
     });
 
-    it('contains a sign-up button', () => {
-        cy.visit('/o/1/events/22');
-        cy.findByText('Sign-up').should('be.visible');
+    it('shows a sign-up button if user is not signed up to the event', () => {
+        cy.request('put', 'http://localhost:8001/v1/users/me/action_responses/_mocks/get', {
+            response: {
+                data: {
+                    data: [],
+                },
+            },
+        });
+
+        cy.visit('/login');
+        cy.get('input[aria-label="E-mail address"]').type('testadmin@example.com');
+        cy.get('input[aria-label="Password"]').type('password');
+        cy.get('input[aria-label="Log in"]')
+            .click();
+
+        cy.visit('/o/1/events/25');
+        cy.waitUntilReactRendered();
+        cy.findByText('Sign-up').click();
+        //TODO: Verify that API request is done corrently.
+    });
+
+    it('shows an undo sign-up button if user is signed up to the event', () => {
+        cy.fixture('dummyEventResponses').then(json => {
+            cy.request('put', 'http://localhost:8001/v1/users/me/action_responses/_mocks/get', {
+                response: {
+                    data: json,
+                },
+            });
+
+            cy.request('put', 'http://localhost:8001/v1/orgs/1/actions/25/responses/2/_mocks/delete', {
+                response: {
+                    status: 204,
+                },
+            });
+
+            cy.visit('/login');
+            cy.get('input[aria-label="E-mail address"]').type('testadmin@example.com');
+            cy.get('input[aria-label="Password"]').type('password');
+            cy.get('input[aria-label="Log in"]')
+                .click();
+
+            cy.visit('/o/1/events/25');
+            cy.waitUntilReactRendered();
+            cy.findByText('Undo sign-up').click();
+            //TODO: Verify that API request is done corrently.
+        });
     });
 });
 

cypress/integration/org_events_page.spec.ts

@@ -3,12 +3,17 @@ describe('/o/[orgId]/events', () => {
         cy.request('delete', 'http://localhost:8001/_mocks');
     });
 
+    after(() => {
+        cy.request('delete', 'http://localhost:8001/_mocks');
+    });
+
     it('contains name of organization', () => {
         cy.visit('/o/1/events');
+        cy.waitUntilReactRendered();
         cy.contains('My Organization');
     });
 
-    it.only('contains events which are linked to event pages', () => {
+    it('contains events which are linked to event pages', () => {
         cy.request('put', 'http://localhost:8001/v1/orgs/1/campaigns/_mocks/get', {
             response: {
                 data: {
@@ -38,7 +43,7 @@ describe('/o/[orgId]/events', () => {
     });
 
     it('contains a placeholder if there are no events', () => {
-        cy.request('put', 'http://localhost:8001/v1/orgs/1/campaigns/1/actions/_mocks/get', {
+        cy.request('put', 'http://localhost:8001/v1/orgs/1/campaigns/_mocks/get', {
             response: {
                 data: {
                     data: [],
@@ -50,18 +55,54 @@ describe('/o/[orgId]/events', () => {
         cy.get('[data-test="no-events-placeholder"]').should('be.visible');
     });
 
-    it('contains conditional functionality for sign-up button', () => {
+    it('shows a sign-up button if user is not signed up to an event', () => {
+        cy.request('put', 'http://localhost:8001/v1/users/me/action_responses/_mocks/get', {
+            response: {
+                data: {
+                    data: [],
+                },
+            },
+        });
+
         cy.visit('/login');
         cy.get('input[aria-label="E-mail address"]').type('testadmin@example.com');
         cy.get('input[aria-label="Password"]').type('password');
         cy.get('input[aria-label="Log in"]')
             .click();
+
         cy.visit('/o/1/events');
-        cy.get('[data-test="sign-up-button"]')
-            .eq(5)
-            .contains('Sign-up')
-            .click()
-            .contains('Undo sign-up');
+        cy.waitUntilReactRendered();
+        cy.get('[data-test="event-response-button"]')
+            .eq(4)
+            .click();
+        //TODO: Verify that API request is done corrently.
+    });
+
+    it('shows an undo sign-up button if user is signed up to an event', () => {
+        cy.fixture('dummyEventResponses').then(json => {
+            cy.request('put', 'http://localhost:8001/v1/users/me/action_responses/_mocks/get', {
+                response: {
+                    data: json,
+                },
+            });
+
+            cy.request('put', 'http://localhost:8001/v1/orgs/1/actions/25/responses/2/_mocks/delete', {
+                response: {
+                    status: 204,
+                },
+            });
+
+            cy.visit('/login');
+            cy.get('input[aria-label="E-mail address"]').type('testadmin@example.com');
+            cy.get('input[aria-label="Password"]').type('password');
+            cy.get('input[aria-label="Log in"]')
+                .click();
+
+            cy.visit('/o/1/events');
+            cy.waitUntilReactRendered();
+            cy.findByText('Undo sign-up').click();
+            //TODO: Verify that API request is done corrently.
+        });
     });
 });
 

src/components/EventList.spec.tsx

@@ -74,10 +74,6 @@ describe('EventList', () => {
             />,
         );
 
-        //Checks for buttons on all events
-        cy.findByText('misc.eventList.signup');
-
-        //Tests button on a single event
         cy.findByText('misc.eventList.signup')
             .eq(0)
             .click()
@@ -87,13 +83,11 @@ describe('EventList', () => {
     });
 
     it('contains a button for more info on each event', () => {
-        const spyOnSubmit = cy.spy();
-
         mountWithProviders(
             <EventList
                 eventResponses={ dummyEventResponses }
                 events={ dummyEvents }
-                onEventResponse={ spyOnSubmit }
+                onEventResponse={ () => null  }
                 org={ dummyOrg }
             />,
         );

src/components/EventList.tsx

@@ -67,15 +67,15 @@ const EventList = ({ eventResponses, events, onEventResponse, org } : EventListP
                             <View data-test="location-title">{ e.location.title }</View>
                             { response ? (
                                 <Button
-                                    data-test="undo-sign-up-button"
+                                    data-test="event-response-button"
                                     marginTop="size-50"
                                     onPress={ () => onEventResponse(e.id, org.id, true) }
                                     variant="cta">
                                     <Msg id="misc.eventList.undoSignup"/>
                                 </Button>
                             ) : (
                                 <Button
-                                    data-test="sign-up-button"
+                                    data-test="event-response-button"
                                     marginTop="size-50"
                                     onPress={ () => onEventResponse(e.id, org.id, false) }
                                     variant="cta">

src/fetching/deleteEventResponse.ts

@@ -1,17 +1,29 @@
 import apiUrl from '../utils/apiUrl';
 
-import { ZetkinEventSignup, ZetkinMembership } from '../types/zetkin';
+import { ZetkinMembership } from '../types/zetkin';
 
-export default async function deleteEventResponse({ eventId, orgId } : ZetkinEventSignup) : Promise<void> {
-    const mUrl = apiUrl('/users/me/memberships');
-    const mRes = await fetch(mUrl);
-    const mData = await mRes.json();
-    const orgMembership = mData.data.find((m : ZetkinMembership) => m.organization.id === orgId);
+function defaultFetch(path : string, init? : RequestInit) {
+    const url = apiUrl(path);
+    return fetch(url, init);
+}
 
-    if (orgMembership) {
-        const url = apiUrl(`/orgs/${orgId}/actions/${eventId}/responses/${orgMembership.profile.id}`);
-        await fetch(url, {
-            method: 'DELETE',
-        });
-    }
+interface MutationVariables {
+    eventId: number;
+    orgId: number;
 }
+
+export default function deleteEventResponse(fetch = defaultFetch) {
+    return async ({ eventId, orgId } : MutationVariables) : Promise<void> => {
+        const mRes = await fetch('/users/me/memberships');
+        const mData = await mRes.json();
+        //TODO: Memberships should be cached.
+        const orgMembership = mData.data.find((m : ZetkinMembership ) => m.organization.id === orgId);
+
+        if (orgMembership) {
+            await fetch(`/orgs/${orgId}/actions/${eventId}/responses/${orgMembership.profile.id}`, {
+                method: 'DELETE',
+            });
+        }
+    };
+
+}

src/fetching/getEvent.ts

@@ -1,13 +1,18 @@
 import apiUrl from '../utils/apiUrl';
 import { ZetkinEvent } from '../interfaces/ZetkinEvent';
 
-export default function getEvent(orgId : string, eventId : string) {
+function defaultFetch(path : string, init? : RequestInit) {
+    const url = apiUrl(path);
+    return fetch(url, init);
+}
+
+export default function getEvent(orgId : string, eventId : string, fetch = defaultFetch) {
     return async () : Promise<ZetkinEvent> => {
-        const cRes = await fetch(apiUrl(`/orgs/${orgId}/campaigns`));
+        const cRes = await fetch(`/orgs/${orgId}/campaigns`);
         const cData = await cRes.json();
 
         for (const obj of cData.data) {
-            const eventsRes = await fetch(apiUrl(`/orgs/${orgId}/campaigns/${obj.id}/actions`));
+            const eventsRes = await fetch(`/orgs/${orgId}/campaigns/${obj.id}/actions`);
             const campaignEvents = await eventsRes.json();
             const eventData = campaignEvents.data.find((event : ZetkinEvent) => event.id.toString() === eventId);
             if (eventData) {

src/fetching/getEventResponses.ts

@@ -2,9 +2,15 @@ import apiUrl from '../utils/apiUrl';
 
 import { ZetkinEventResponse } from '../types/zetkin';
 
-export default async function getEventResponses() : Promise<ZetkinEventResponse[]> {
-    const rUrl = apiUrl('/users/me/action_responses');
-    const rRes = await fetch(rUrl);
-    const rData = await rRes.json();
-    return rData.data;
+function defaultFetch(path : string, init? : RequestInit) {
+    const url = apiUrl(path);
+    return fetch(url, init);
+}
+
+export default function getEventResponses(fetch = defaultFetch) {
+    return async () : Promise<ZetkinEventResponse[]> => {
+        const rRes = await fetch('/users/me/action_responses');
+        const rData = await rRes.json();
+        return rData.data;
+    };
 }

src/fetching/getEvents.ts

@@ -1,15 +1,20 @@
 import apiUrl from '../utils/apiUrl';
 import { ZetkinEvent } from '../interfaces/ZetkinEvent';
 
-export default function getEvents(orgId : string) {
+function defaultFetch(path : string, init? : RequestInit) {
+    const url = apiUrl(path);
+    return fetch(url, init);
+}
+
+export default function getEvents(orgId : string, fetch = defaultFetch) {
     return async () : Promise<ZetkinEvent[]> => {
-        const cRes = await fetch(apiUrl(`/orgs/${orgId}/campaigns`));
+        const cRes = await fetch(`/orgs/${orgId}/campaigns`);
         const cData = await cRes.json();
 
         let allEventsData : ZetkinEvent[] = [];
 
         for (const obj of cData.data) {
-            const eventsRes = await fetch(apiUrl(`/orgs/${orgId}/campaigns/${obj.id}/actions`));
+            const eventsRes = await fetch(`/orgs/${orgId}/campaigns/${obj.id}/actions`);
             const campaignEvents = await eventsRes.json();
             allEventsData = allEventsData.concat(campaignEvents.data);
         }

src/fetching/getOrg.ts

@@ -2,10 +2,14 @@ import apiUrl from '../utils/apiUrl';
 
 import { ZetkinOrganization } from '../interfaces/ZetkinOrganization';
 
-export default function getOrg(orgId : string) {
+function defaultFetch(path : string, init? : RequestInit) {
+    const url = apiUrl(path);
+    return fetch(url, init);
+}
+
+export default function getOrg(orgId : string, fetch = defaultFetch) {
     return async () : Promise<ZetkinOrganization> => {
-        const url = apiUrl(`/orgs/${orgId}`);
-        const oRes = await fetch(url);
+        const oRes = await fetch(`/orgs/${orgId}`);
         const oData = await oRes.json();
         return oData.data;
     };