Signup creation and submit tests

src/components/Card.tsx

@@ -14,14 +14,6 @@ interface WrappedCardProps {
   buttonOnClick?: () => void;
 }
 
-interface CardProps {
-  title: string;
-  start_time: string;
-  text: string;
-  img: JSX.Element;
-  button: JSX.Element;
-}
-
 const StyledCard = styled.article`
   color: ${colors.black};
   margin: 1rem;
@@ -73,17 +65,7 @@ const StyledCard = styled.article`
   }
 `;
 
-const Card: React.FC<CardProps> = ({ title, start_time, text, img, button }) => (
-  <StyledCard>
-    {img}
-    <p>{start_time}</p>
-    <h3>{title}</h3>
-    <p>{text}</p>
-    {button}
-  </StyledCard>
-);
-
-const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick }) => {
+const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick, ...props }) => {
   const options = {
     day: "numeric",
     month: "numeric",
@@ -105,13 +87,13 @@ const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, ima
   );
 
   return (
-    <Card
-      title={title}
-      start_time={datetime}
-      text={text}
-      img={img}
-      button={button}
-    />
+    <StyledCard {...props}>
+      {img}
+      <p>{datetime}</p>
+      <h3>{title}</h3>
+      <p>{text}</p>
+      {button}
+    </StyledCard>
   );
 }
 

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -77,7 +77,7 @@ class QuestionList extends React.Component<QuestionListProps, QuestionListState>
     const { placeholder, innerRef } = this.props;
 
     return (
-      <div ref={innerRef}>
+      <div ref={innerRef} data-e2e="admin-signup-question">
         {this.renderQuestions()}
         {placeholder}
       </div>

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -87,7 +87,7 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
           )}
         </Droppable>
       </DragDropContext>
-      <AddQuestionButton type="button" onClick={handleNewRowClick(questions)}>
+      <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
         <img src={AddIcon} />
         New Question
       </AddQuestionButton>

src/pages/admin/signups/index.tsx

@@ -53,7 +53,7 @@ const AdminSignupPage: React.FC = () => {
         <link rel="canonical" href={`https://sik.ayy.fi/${URL}`} />
       </Helmet>
       <h1>Sign-up forms</h1>
-      <AddLink text="Create signup form" to={`${URL}/create`} />
+      <AddLink text="Create signup form" to={`${URL}/create`} data-e2e="create-signup" />
       {renderData(forms)}
     </AdminListCommon>
   );

src/views/FrontPage/FrontPageView.tsx

@@ -71,6 +71,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             link={`/events/${event.id}`}
             image={event.image || event.tags[0].icon}
             buttonOnClick={noop}
+            data-e2e="event-card"
           />
         ))}
         <aside>

tests/testcafe/admin/create-event.test.ts

@@ -2,13 +2,12 @@ import { Selector } from "testcafe";
 import { getSiteRoot, getPageUrl } from "../utils";
 import { doLogin } from "./common/login";
 
-fixture`Admin can create events`.page(`${getSiteRoot()}/admin/events`);
+fixture`Admin 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\"]");
@@ -50,14 +49,15 @@ test("Logged in user can create event", async t => {
   // .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");
+  await t
+    .typeText(titleFi, "title_fi")
+    .typeText(descFi, "desc_fi")
+    .typeText(contentFi, "content_fi")
+    .typeText(locationFi, "location_fi")
+    .typeText(titleEn, "title_en")
+    .typeText(descEn, "desc_en")
+    .typeText(contentEn, "content_en")
+    .typeText(locationEn, "location_en");
 
   const submit = Selector("button[type=\"submit\"]");
 

tests/testcafe/admin/create-signup.test.ts

@@ -0,0 +1,81 @@
+import { Selector } from "testcafe";
+import { getSiteRoot, getPageUrl } from "../utils";
+import { doLogin } from "./common/login";
+
+fixture`Admin events`.page(`${getSiteRoot()}/admin/signups`);
+
+test("Logged in user can create signup", async t => {
+  const loginForm = Selector("form.admin-login-form");
+  await t.expect(loginForm.exists).ok();
+  await doLogin(t);
+  await t.expect(await getPageUrl() === "/admin/signups").ok();
+
+  const newButton = Selector("[data-e2e=\"create-signup\"]");
+  await t.click(newButton);
+  await t.expect(await getPageUrl() === "/admin/signups/create").ok();
+
+  const titleFi = Selector("#rjsf_title_fi");
+  const titleEn = Selector("#rjsf_title_en");
+  const visible = Selector("#rjsf_visible");
+
+  await t
+    .typeText(titleFi, "Testi Ilmo")
+    .typeText(titleEn, "Test Signup")
+    .click(visible);
+
+  const newQuestionButton = Selector("[data-e2e=\"admin-signup-new-question\"]");
+  const lastQuestion = () => Selector("[data-e2e=\"admin-signup-question\"]").child("div").child("div").nth(-1);
+
+  await t.click(newQuestionButton);
+  let question = lastQuestion();
+  let questionName = question.child("input");
+  let questionTypeSelect = question.child("select");
+  let requiredBox = question.child("label")
+
+  await t
+    .selectText(questionName)
+    .pressKey("delete")
+    .typeText(questionName, "Nimi")
+    .click(questionTypeSelect)
+    .click(questionTypeSelect.find("option").withExactText("name"))
+    .click(requiredBox);
+
+  await t.click(newQuestionButton);
+  question = lastQuestion();
+  questionName = question.child("input");
+  questionTypeSelect = question.child("select");
+  requiredBox = question.child("label");
+
+  await t
+    .selectText(questionName)
+    .pressKey("delete")
+    .typeText(questionName, "S-Posti")
+    .click(questionTypeSelect)
+    .click(questionTypeSelect.find("option").withExactText("email"))
+    .click(requiredBox);
+
+  await t.click(newQuestionButton);
+  question = lastQuestion();
+  questionName = question.child("input");
+  questionTypeSelect = question.child("select");
+  const radioOptions = question.child("input").nth(-1);
+
+  await t
+    .selectText(questionName)
+    .pressKey("delete")
+    .typeText(questionName, "Olen")
+    .click(questionTypeSelect)
+    .click(questionTypeSelect.find("option").withExactText("radiobutton"))
+    .typeText(radioOptions, "Nuori,Vanha,Testaaja");
+
+  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("Sign-up created successfully");
+})

tests/testcafe/signupToEvent.test.ts

@@ -0,0 +1,39 @@
+import { Selector } from "testcafe";
+import { getSiteRoot, getPageUrl } from "./utils";
+
+fixture`Event signup`.page(getSiteRoot());
+
+test("User signups to event from front page", async t => {
+  const CardSelector = Selector("[data-e2e=\"event-card\"]").withText("title_fi").nth(0);
+
+  await t
+    .click(CardSelector.child("a"));
+
+  let url = await getPageUrl();
+  await t.expect(url).match(/\/events\/\d{1,4}/, "URL isn't /events/<id>");
+
+  const SignupButton = Selector("button");
+  await t
+    .click(SignupButton);
+
+  url = await getPageUrl();
+  await t.expect(url).match(/\/signup\/\d{1,4}/, "URL isn't /signup/<id>");
+
+  const nameField = Selector("input").nth(0);
+  const emailField = Selector("input").nth(1);
+  const typeField = Selector("fieldset").child(-1).child("div").child("div").child("label").nth(-1);
+
+  await t
+    .typeText(nameField, "Testi Testeri")
+    .typeText(emailField, "e2e@sahkoinsinoorikilta.fi")
+    .click(typeField);
+
+  await t.click(Selector("button").nth(-1));
+
+  const statusMessage = Selector(".sign-up-statusmessage");
+  await t
+    .hover(statusMessage)
+    .expect(
+      statusMessage.innerText
+    ).eql("Sign-up submitted successfully");
+});