Add Event creation test

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>
   );

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}

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");
+})

tests/testcafe/utils.ts

@@ -1 +1,5 @@
-export const getSiteRoot = (): string => process.env.SITE_URL || "http://localhost:3000";
+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);