From 957aeb75f2e0bd83e4133c495f67435f4ea73500 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Wed, 13 Jan 2021 21:56:16 +0200
Subject: [PATCH] Add Event creation test

---
 src/pages/admin/events/index.tsx          |  2 +-
 src/views/admin/AdminCreateCommon.tsx     |  2 +-
 tests/testcafe/admin/create-event.test.ts | 72 +++++++++++++++++++++++
 tests/testcafe/utils.ts                   |  6 +-
 4 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 tests/testcafe/admin/create-event.test.ts

diff --git a/src/pages/admin/events/index.tsx b/src/pages/admin/events/index.tsx
index 583de74..f7f753a 100644
--- a/src/pages/admin/events/index.tsx
+++ b/src/pages/admin/events/index.tsx
@@ -48,7 +48,7 @@ const AdminEventPage: React.FC = () => {
         <link rel="canonical" href={`https://sik.ayy.fi/${URL}`} />
       </Helmet>
       <h1>Events</h1>
-      <AddLink text="Create event" to={`${URL}/create`} />
+      <AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
       {renderData(events)}
     </AdminListCommon>
   );
diff --git a/src/views/admin/AdminCreateCommon.tsx b/src/views/admin/AdminCreateCommon.tsx
index 2ebd2ec..45d5193 100644
--- a/src/views/admin/AdminCreateCommon.tsx
+++ b/src/views/admin/AdminCreateCommon.tsx
@@ -74,7 +74,7 @@ const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
     <Common>
       <h1>{title}</h1>
       {statusMessage && (
-        <SuccessMsg>{statusMessage}</SuccessMsg>
+        <SuccessMsg data-e2e="admin-form-status-message">{statusMessage}</SuccessMsg>
       )}
       <FormWrapper
         schema={schema}
diff --git a/tests/testcafe/admin/create-event.test.ts b/tests/testcafe/admin/create-event.test.ts
new file mode 100644
index 0000000..90d8c55
--- /dev/null
+++ b/tests/testcafe/admin/create-event.test.ts
@@ -0,0 +1,72 @@
+import { Selector } from "testcafe";
+import { getSiteRoot, getPageUrl } from "../utils";
+import { doLogin } from "./common/login";
+
+fixture`Admin can create events`.page(`${getSiteRoot()}/admin/events`);
+
+test("Logged in user can create event", async t => {
+  const loginForm = Selector("form.admin-login-form");
+  await t.expect(loginForm.exists).ok();
+  await doLogin(t);
+
+  await t.expect(await getPageUrl() === "/admin/events").ok();
+
+  const newButton = Selector("[data-e2e=\"create-event\"]");
+  await t.click(newButton);
+  await t.expect(await getPageUrl() === "/admin/events/create").ok();
+
+  const titleFi = Selector("#rjsf_title_fi");
+  const titleEn = Selector("#rjsf_title_en");
+  const descFi = Selector("#rjsf_description_fi");
+  const descEn = Selector("#rjsf_description_en");
+  const contentFi = Selector("[data-testid=\"text-area\"]").nth(0);
+  const contentEn = Selector("[data-testid=\"text-area\"]").nth(1);
+  const locationFi = Selector("#rjsf_location_fi");
+  const locationEn = Selector("#rjsf_location_en");
+
+
+  const tagSelect = Selector("#rjsf_tags");
+  const signupSelect = Selector("#rjsf_signupForm");
+  // const tagOption = tagSelect.find("option").withExactText("Testi");
+  // const signupOption = signupSelect.find("option").withExactText("Testi");
+
+  // TODO: Testcafe bug https://github.com/DevExpress/testcafe/issues/5339
+  // https://stackoverflow.com/questions/62932588/unable-to-select-drop-down-list-in-testcafe
+  // so use keyboard for selection...
+  await t
+    .click(tagSelect)
+    .pressKey("down")
+    .pressKey("down")
+    .pressKey("space")
+    // .pressKey("tab");
+
+  // .click(tagOption, { modifiers: { ctrl: true } });
+  await t
+    .click(signupSelect)
+    .pressKey("down")
+    .pressKey("down")
+    .pressKey("space")
+    // .pressKey("tab");
+  // .click(signupOption, { modifiers: { ctrl: true } });
+
+
+  await t.typeText(titleFi, "title_fi");
+  await t.typeText(descFi, "desc_fi");
+  await t.typeText(contentFi, "content_fi");
+  await t.typeText(locationFi, "location_fi");
+  await t.typeText(titleEn, "title_en");
+  await t.typeText(descEn, "desc_en");
+  await t.typeText(contentEn, "content_en");
+  await t.typeText(locationEn, "location_en");
+
+  const submit = Selector("button[type=\"submit\"]");
+
+  await t.click(submit);
+
+  const statusMessage = Selector("[data-e2e=\"admin-form-status-message\"]");
+  await t
+    .hover(statusMessage)
+    .expect(
+      statusMessage.innerText
+    ).eql("Event created successfully");
+})
diff --git a/tests/testcafe/utils.ts b/tests/testcafe/utils.ts
index 78335df..718a431 100644
--- a/tests/testcafe/utils.ts
+++ b/tests/testcafe/utils.ts
@@ -1 +1,5 @@
-export const getSiteRoot = (): string => process.env.SITE_URL || "http://localhost:3000";
\ No newline at end of file
+import { ClientFunction } from "testcafe";
+
+export const getSiteRoot = (): string => process.env.SITE_URL || "http://localhost:3000";
+// export const getPageUrl = ClientFunction(() => window.location.href.toString());
+export const getPageUrl = ClientFunction(() => window.location.pathname);