Sign up to event

cypress/fixtures/dummyEventResponses.json

@@ -0,0 +1,14 @@
+{
+    "data": [
+        {
+            "action_id": 25,
+            "response_date": "2021-01-21T18:30:00+00:00",
+            "organization_id": 1,
+            "person": {
+                "name": "Dummy User",
+                "id": 2
+            },
+            "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: [],
@@ -49,6 +54,56 @@ describe('/o/[orgId]/events', () => {
         cy.visit('/o/1/events');
         cy.get('[data-test="no-events-placeholder"]').should('be.visible');
     });
+
+    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.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.
+        });
+    });
 });
 
 // Hack to flag for typescript as module

cypress/integration/reocurring_functionality.spec.ts

@@ -1,4 +1,5 @@
 describe('Reocurring functionality', () => {
+
     it('contains a clickable org logo which leads to org page', () => {
         cy.visit('/o/1/events');
         cy.get('[data-test="org-avatar"]')

src/components/EventList.spec.tsx

@@ -1,11 +1,13 @@
 import EventList from './EventList';
 import { mountWithProviders } from '../utils/testing';
 import { ZetkinEvent } from '../interfaces/ZetkinEvent';
+import { ZetkinEventResponse } from '../types/zetkin';
 import { ZetkinOrganization } from '../interfaces/ZetkinOrganization';
 
 describe('EventList', () => {
     let dummyOrg : ZetkinOrganization;
     let dummyEvents : ZetkinEvent[];
+    let dummyEventResponses : ZetkinEventResponse[];
 
     beforeEach(()=> {
         cy.fixture('dummyOrg.json')
@@ -16,11 +18,20 @@ describe('EventList', () => {
             .then((data : {data: ZetkinEvent[]}) => {
                 dummyEvents = data.data;
             });
+        cy.fixture('dummyEventResponses.json')
+            .then((data : {data: ZetkinEventResponse[]}) => {
+                dummyEventResponses = data.data;
+            });
     });
 
     it('contains data for each event', () => {
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ () => null }
+                org={ dummyOrg }
+            />,
         );
 
         cy.get('[data-test="event"]').each((item) => {
@@ -36,8 +47,14 @@ describe('EventList', () => {
 
     it('contains an activity title instead of missing event title', () => {
         dummyEvents[0].title = undefined;
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ () => null }
+                org={ dummyOrg }
+            />,
         );
 
         cy.get('[data-test="event"]')
@@ -46,33 +63,61 @@ describe('EventList', () => {
     });
 
     it('contains a sign-up button for each event', () => {
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
-        cy.contains('misc.eventList.signup');
+        cy.findByText('misc.eventList.signup')
+            .eq(0)
+            .click()
+            .then(() => {
+                expect(spyOnSubmit).to.be.calledOnce;
+            });
     });
 
     it('contains a button for more info on each event', () => {
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ () => null  }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.moreInfo');
     });
 
     it('shows a placeholder when the list is empty', () => {
         dummyEvents = [];
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ () => null }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.placeholder');
     });
 
     it('shows a placeholder when the list is undefined', () => {
         mountWithProviders(
-            <EventList events={ undefined } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ undefined }
+                onEventResponse={ () => null }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.placeholder');