feat: tests for contact request function

.github/workflows/tests.yml

@@ -44,11 +44,10 @@ jobs:
       - run: supabase start
       - run: npm ci
       - run: npm run build --if-present
-      #  Make sure to run tests in band and force exit to avoid hanging tests
-      # until we know where the open handles are
+      - run: npm run lint
       - run: npm test -- --runInBand --forceExit
       - run: supabase stop
-      - run: npm run lint
+
   release:
     name: semantic-release
     needs: [test]

.gitignore

@@ -61,7 +61,6 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 .rts2_cache_cjs/
 .rts2_cache_es/
 .rts2_cache_umd/
-.env.test
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 # Next.js build output

README.md

@@ -87,6 +87,16 @@ npm test
 
 On CI the Supabase is started automagically. See [.github/workflows/tests.yml](.github/workflows/tests.yml)
 
+To run the tests for the Supabase Edge Functions, execute locally:
+
+```bash
+cd giessdenkiez-de-postgres-api
+docker run -p 1025:1025 mailhog/mailhog
+supabase start
+supabase functions serve --no-verify-jwt --env-file supabase/.env.test
+deno test --allow-all supabase/functions/tests/submit-contact-request-tests.ts --env=supabase/.env.test
+```
+
 ## Supabase
 
 ### Migrations and Types

supabase/.env.test

@@ -0,0 +1,7 @@
+ALLOWED_ORIGIN=http://localhost:5173
+SMTP_HOST=host.docker.internal
+SMTP_USER=""
+SMTP_PASSWORD=""
+SMTP_FROM=giessdenkiez@citylab-berlin.org
+SMTP_PORT=1025
+SMTP_SECURE=false

supabase/functions/submit_contact_request/index.ts

@@ -9,10 +9,11 @@ const SMTP_USER = Deno.env.get("SMTP_USER");
 const SMTP_PASSWORD = Deno.env.get("SMTP_PASSWORD");
 const SMTP_FROM = Deno.env.get("SMTP_FROM");
 const SMTP_PORT = parseInt(Deno.env.get("SMTP_PORT"));
+const SMTP_SECURE = Deno.env.get("SMTP_SECURE") === "true";
 
-const SUPABASE_URL = Deno.env.get("URL");
-const SUPABASE_ANON_KEY = Deno.env.get("ANON_KEY");
-const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get("SERVICE_ROLE_KEY");
+const SUPABASE_URL = Deno.env.get("SUPABASE_URL");
+const SUPABASE_ANON_KEY = Deno.env.get("SUPABASE_ANON_KEY");
+const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY");
 
 const handler = async (_request: Request): Promise<Response> => {
 	if (_request.method === "OPTIONS") {
@@ -38,7 +39,8 @@ const handler = async (_request: Request): Promise<Response> => {
 		await supabaseClient.auth.getUser(token);
 
 	if (senderDataError) {
-		return new Response(undefined, { status: 401 });
+		console.log(senderDataError);
+		return new Response(JSON.stringify({}), { status: 401 });
 	}
 
 	// Lookup the recipient user id
@@ -50,7 +52,11 @@ const handler = async (_request: Request): Promise<Response> => {
 			.single();
 
 	if (recipientDataError) {
-		return new Response(undefined, { status: 404, headers: corsHeaders });
+		console.log(recipientDataError);
+		return new Response(JSON.stringify(recipientDataError), {
+			status: 404,
+			headers: corsHeaders,
+		});
 	}
 
 	// Check if the user has already tried to contact the recipient
@@ -63,7 +69,11 @@ const handler = async (_request: Request): Promise<Response> => {
 			.not("contact_mail_id", "is", null); // only count sent emails
 
 	if (requestsToRecipientError) {
-		return new Response(undefined, { status: 500, headers: corsHeaders });
+		console.log(requestsToRecipientError);
+		return new Response(JSON.stringify(requestsToRecipientError), {
+			status: 500,
+			headers: corsHeaders,
+		});
 	}
 
 	if (requestsToRecipient.length > 0) {
@@ -94,7 +104,10 @@ const handler = async (_request: Request): Promise<Response> => {
 
 	if (requestsOfLast24hError) {
 		console.log(requestsOfLast24hError);
-		return new Response(undefined, { status: 500, headers: corsHeaders });
+		return new Response(JSON.stringify(requestsOfLast24hError), {
+			status: 500,
+			headers: corsHeaders,
+		});
 	}
 
 	if (requestsOfLast24h.length >= 3) {
@@ -122,7 +135,11 @@ const handler = async (_request: Request): Promise<Response> => {
 			.single();
 
 	if (fullRecipientDataError) {
-		return new Response(undefined, { status: 404, headers: corsHeaders });
+		console.log(fullRecipientDataError);
+		return new Response(JSON.stringify(fullRecipientDataError), {
+			status: 404,
+			headers: corsHeaders,
+		});
 	}
 
 	// Save the contact request
@@ -139,7 +156,10 @@ const handler = async (_request: Request): Promise<Response> => {
 
 	if (insertedRequestError) {
 		console.log(insertedRequestError);
-		return new Response(undefined, { status: 500, headers: corsHeaders });
+		return new Response(JSON.stringify(insertedRequestError), {
+			status: 500,
+			headers: corsHeaders,
+		});
 	}
 
 	// Send the email
@@ -148,11 +168,15 @@ const handler = async (_request: Request): Promise<Response> => {
 			host: SMTP_HOST,
 			port: SMTP_PORT,
 			// Use `true` for port 465, `false` for all other ports, see: https://nodemailer.com/
-			secure: true,
-			auth: {
-				user: SMTP_USER,
-				pass: SMTP_PASSWORD,
-			},
+			secure: SMTP_SECURE,
+			// auth must be undefined if no SMTP_PASSWORD is set
+			auth:
+				SMTP_PASSWORD === ""
+					? undefined
+					: {
+							user: SMTP_USER,
+							pass: SMTP_PASSWORD,
+					  },
 		});
 
 		const mailOptions = {
@@ -178,11 +202,18 @@ const handler = async (_request: Request): Promise<Response> => {
 			.eq("id", insertedRequest.id);
 
 		if (updateRequestError) {
-			return new Response(undefined, { status: 500, headers: corsHeaders });
+			console.log(updateRequestError);
+			return new Response(JSON.stringify(updateRequestError), {
+				status: 500,
+				headers: corsHeaders,
+			});
 		}
 	} catch (e) {
 		console.log(e);
-		return new Response(undefined, { status: 500, headers: corsHeaders });
+		return new Response(JSON.stringify(e), {
+			status: 500,
+			headers: corsHeaders,
+		});
 	}
 
 	return new Response(JSON.stringify({ code: "contact_request_sent" }), {

supabase/functions/submit_contact_request/mail-template.ts

@@ -186,47 +186,18 @@ export const mailTemplate = (
 															Um dem Nutzer per E-Mail zu antworten, schreibe bitte an:
 															<div style="margin-top: 25px; margin-bottom: 25px;"><a href="mailto:${email}" >${email}</a></div>
 
-                                                            <i>Sollte die Kontaktanfrage unangemessene Inhalte enthalten, tut uns das sehr leid. Bitte informiere unverzüglich unser Team über <a href="mailto:info@citylab-berlin.org">info@citylab-berlin.org</a>.</i> 
-														</p>
-
-														<p
-															style="
-																margin-top: 0;
-																color: #000;
-																padding: 1rem 0 0 0;
-																font-size: 14px;
-																line-height: 1.5em;
-																font-family: Arial, 'Helvetica Neue', Helvetica,
-																	sans-serif;
-																-webkit-box-sizing: border-box;
-																box-sizing: border-box;
-															"
-														>
-															<i
-																style="
-																	font-family: Arial, 'Helvetica Neue',
-																		Helvetica, sans-serif;
-																	-webkit-box-sizing: border-box;
-																	box-sizing: border-box;
-																"
-															>
-																Gieß den Kiez ist eine Anwendung, die hilft,
-																ehrenamtliches Engagement beim Gießen durstiger
-																Stadtbäume zu koordinieren. Gieß den Kiez ist
-																ein Projekt der
-																<a
-																	style="color: unset"
-																	href="https://www.technologiestiftung-berlin.de/"
-																	>Technologiestiftung Berlin</a
-																>
-																und wird vom
-																<a
-																	style="color: unset"
-																	href="https://citylab-berlin.org/"
-																	>CityLAB Berlin</a
-																>
-																entwickelt.
-															</i>
+                                                            <i style="
+                                                                margin-top: 0;
+                                                                line-height: 1.5em;
+                                                                font-family: Arial, 'Helvetica Neue', Helvetica,
+                                                                    sans-serif;
+                                                                -webkit-box-sizing: border-box;
+                                                                box-sizing: border-box;
+                                                                color: #aeaeae;
+                                                                font-size: 14px;
+                                                                text-align: center;">
+                                                                Sollte die Kontaktanfrage unangemessene Inhalte enthalten, tut uns das sehr leid. Bitte informiere unverzüglich unser Team über info@citylab-berlin.org.
+                                                            </i> 
 														</p>
 
 														<br />
@@ -273,45 +244,16 @@ export const mailTemplate = (
                                                         To reply to the user by e-mail, please write to:
                                                         <div style="margin-top: 25px; margin-bottom: 25px;"><a href="mailto:${email}" >${email}</a></div>
 
-                                                        <i>If the contact request contains inappropriate content, we are very sorry. Please inform our team immediately via <a href="mailto:info@citylab-berlin.org">info@citylab-berlin.org</a>.</i>
-														</p>
-
-														<p
-															style="
-																margin-top: 0;
-																color: #000;
-																padding: 1rem 0 0 0;
-																font-size: 14px;
-																line-height: 1.5em;
-																font-family: Arial, 'Helvetica Neue', Helvetica,
-																	sans-serif;
-																-webkit-box-sizing: border-box;
-																box-sizing: border-box;
-															"
-														>
-															<i
-																style="
-																	font-family: Arial, 'Helvetica Neue',
-																		Helvetica, sans-serif;
-																	-webkit-box-sizing: border-box;
-																	box-sizing: border-box;
-																"
-															>
-																Gieß den Kiez is an application that helps to
-																coordinate volunteer engagement to water thirsty
-																urban trees. Gieß den Kiez is a project of the
-																<a
-																	style="color: unset"
-																	href="https://www.technologiestiftung-berlin.de/"
-																	>Technology Foundation Berlin</a
-																>
-																and is being developed by
-																<a
-																	style="color: unset"
-																	href="https://citylab-berlin.org/"
-																	>CityLAB Berlin</a
-																>.
-															</i>
+                                                        <i style="
+                                                        margin-top: 0;
+                                                        line-height: 1.5em;
+                                                        font-family: Arial, 'Helvetica Neue', Helvetica,
+                                                            sans-serif;
+                                                        -webkit-box-sizing: border-box;
+                                                        box-sizing: border-box;
+                                                        color: #aeaeae;
+                                                        font-size: 14px;
+                                                        text-align: center;">If the contact request contains inappropriate content, we are very sorry. Please inform our team immediately via info@citylab-berlin.org.</i>
 														</p>
 
 														<p
@@ -405,13 +347,31 @@ export const mailTemplate = (
 															"
 															class="sub center"
 														>
-															Du bekommst diese Nachricht, weil Du Dir auf
-															<a
-																style="color: unset"
-																href="https://www.giessdenkiez.de"
-																>giessdenkiez.de</a
-															>
-															mit dieser E-Mail einen Account anlegen wolltest.
+                                                        <i
+                                                        style="
+                                                            font-family: Arial, 'Helvetica Neue',
+                                                                Helvetica, sans-serif;
+                                                            -webkit-box-sizing: border-box;
+                                                            box-sizing: border-box;
+                                                        "
+                                                    >
+                                                        Gieß den Kiez ist eine Anwendung, die hilft,
+                                                        ehrenamtliches Engagement beim Gießen durstiger
+                                                        Stadtbäume zu koordinieren. Gieß den Kiez ist
+                                                        ein Projekt der
+                                                        <a
+                                                            style="color: unset"
+                                                            href="https://www.technologiestiftung-berlin.de/"
+                                                            >Technologiestiftung Berlin</a
+                                                        >
+                                                        und wird vom
+                                                        <a
+                                                            style="color: unset"
+                                                            href="https://citylab-berlin.org/"
+                                                            >CityLAB Berlin</a
+                                                        >
+                                                        entwickelt.
+                                                    </i>
 														</p>
 													</td>
 												</tr>