CW-202 Update Engage forms (#100)

* CW-202 Update form selection in the Engage page This was to implement the new wireframe. * CW-202 Fix form required asterisk placement The asterisk is now added through :after CSS rather than as a <span>. * CW-202 Put arrow next to the SEND button This is in accordance with the wireframe. * CW-202 Update Cypress tests Since Cypress can't test the :after CSS decorator natively, I'm testing for the precense of the required class instead. I also changed the way forms a switched on Cypress and added all necessary data-cy attributes to tags.
csesoc · Aug 26, 2020 · cbed21f · cbed21f
1 parent 517a14c
commit cbed21f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/frontend/cypress/integration/components/mailingForm.spec.js b/frontend/cypress/integration/components/mailingForm.spec.js
@@ -6,11 +6,11 @@ describe('Mailing forms', () => {
     cy.get('[data-cy=mailing-form]');
     // By referencing general-tab items we are ensuring that it is selected by default
     // Check if name label exists and is required
-    cy.get('[data-cy=general-name-label]').contains('Name *');
+    cy.get('[data-cy=general-name-label]').contains('Name').should('have.class', 'required');
     // Check if email label exists and is required
-    cy.get('[data-cy=general-email-label]').contains('Email *');
+    cy.get('[data-cy=general-email-label]').contains('Email').should('have.class', 'required');
     // Check if message label exists and is required
-    cy.get('[data-cy=general-message-label]').contains('Message *');
+    cy.get('[data-cy=general-message-label]').contains('Message').should('have.class', 'required');
     // Ensure send button is disabled
     cy.get('[data-cy=general-send-button]').should('be.disabled');
     // Fill in valid name
@@ -34,18 +34,18 @@ describe('Mailing forms', () => {
     // Ensure the mailing form exists in the Sponsors page
     cy.get('[data-cy=mailing-form]');
     // Check if name label changed to the sponsorship form version
-    cy.get('[data-cy=sponsorship-name-label]').contains('Company Name *');
+    cy.get('[data-cy=sponsorship-name-label]').contains('Company Name').should('have.class', 'required');
   });
 
   it('checks labels and validation of a feedback form', () => {
     // Visit engage page
     cy.visit('/#/engage');
     // Select feedback form tab
-    cy.get('[data-cy=feedback-form-tab]').click();
+    cy.get('[data-cy=feedback-form-selector]').click();
     // Check if name label is not required (marked with *)
-    cy.get('[data-cy=feedback-name-label]').should('not.contain', '*');
+    cy.get('[data-cy=feedback-name-label]').should('not.have.class', 'required');
     /// Check if email label is not required (marked with *)
-    cy.get('[data-cy=feedback-email-label]').should('not.contain', '*');
+    cy.get('[data-cy=feedback-email-label]').should('not.have.class', 'required');
     // Ensure send button is disabled
     cy.get('[data-cy=feedback-send-button]').should('be.disabled');
     // Fill in valid message

diff --git a/frontend/src/components/MailingForm.vue b/frontend/src/components/MailingForm.vue
@@ -12,26 +12,23 @@
     <v-col class="form-box" data-cy="mailing-form">
       <v-form ref="form" v-model="valid">
         <!-- Name -->
-        <label class="text-body-1 input-label" :data-cy="`${this.type}-name-label`">
+        <label :class="getLabelClass(!isType('feedback'))" :data-cy="`${this.type}-name-label`">
           {{ isType('sponsorship') ? "Company Name" : "Name" }}
-          <span v-if="!isType('feedback')" class="required">*</span>
         </label>
         <v-text-field class="input" placeholder="John Smith" v-model="name" :data-cy="`${this.type}-name-field`"
           :rules="[ !isType('feedback') ? rules.required : true ]"></v-text-field>
         <!-- Email -->
-        <label class="text-body-1 input-label" :data-cy="`${this.type}-email-label`"> Email
-          <span v-if="!isType('feedback')" class="required">*</span>
+        <label :class="getLabelClass(!isType('feedback'))" :data-cy="`${this.type}-email-label`"> Email
         </label>
         <v-text-field class="input" placeholder="[email protected]" v-model="email" :data-cy="`${this.type}-email-field`"
           :rules="[ rules.email, !isType('feedback') ? rules.required : true ]"></v-text-field>
         <!-- Message -->
-        <label class="text-body-1 input-label" :data-cy="`${this.type}-message-label`"> Message
-          <span class="required">*</span>
+        <label :class="getLabelClass(true)" :data-cy="`${this.type}-message-label`"> Message
         </label>
         <v-textarea class="input" placeholder="Message" v-model="body" :data-cy="`${this.type}-message-field`"
           :rules="[ rules.required ]"></v-textarea>
         <!-- Send button -->
-        <v-btn text style="margin-left:60%" :disabled="!valid" @click="send" :data-cy="`${this.type}-send-button`">Send</v-btn>
+        <v-btn text style="margin-left:60%" :disabled="!valid" @click="send" :data-cy="`${this.type}-send-button`">Send ></v-btn>
       </v-form>
     </v-col>
   </v-row>
@@ -60,6 +57,11 @@ export default {
     isType(name) {
       return this.type === name;
     },
+    getLabelClass(isRequired) {
+      const lc = 'text-body-1 input-label';
+      if (isRequired) return lc.concat(' required');
+      return lc;
+    },
     send() {
       APIClient.mailingAPI(MAILING_URL[this.type], this.name, this.email, this.body)
         .then((res) => {
@@ -97,8 +99,8 @@ export default {
   float:left;
 }
 
-.required
-{
+.required:after {
+  content:" *";
   color: red;
-}
+  }
 </style>
diff --git a/frontend/src/views/Engage.vue b/frontend/src/views/Engage.vue
@@ -72,30 +72,24 @@
     </v-container>
 
     <!-- Forms -->
-    <v-tabs
-      class="elevation-2"
-      vertical
-      dark
-    >
-      <v-tabs-slider></v-tabs-slider>
+    <v-container ref="content-start" style="padding: 20px 30px 10px 30px">
+      <h2>Still have some questions?</h2>
+      <br>
 
-      <!-- Enquiry tab -->
-      <v-tab data-cy="general-form-tab">Enquiry</v-tab>
-      <v-tab-item>
-        <v-card flat tile>
-          <MailingForm type="general"></MailingForm>
-        </v-card>
-      </v-tab-item>
+      <v-btn-toggle v-model="activeForm">
+        <v-btn value="general" data-cy="general-form-selector">
+          Enquiry
+        </v-btn>
+        <v-btn value="feedback" data-cy="feedback-form-selector">
+          Feedback
+        </v-btn>
+      </v-btn-toggle>
 
-      <!-- Feedback tab -->
-      <v-tab data-cy="feedback-form-tab">Feedback</v-tab>
-      <v-tab-item>
-        <v-card flat tile>
-          <MailingForm type="feedback"></MailingForm>
-        </v-card>
-      </v-tab-item>
+      <v-card flat tile>
+        <MailingForm :type="this.activeForm"></MailingForm>
+      </v-card>
 
-    </v-tabs>
+    </v-container>
   </v-app>
 </template>
 
@@ -109,6 +103,7 @@ import APIClient from '../utils/APIClient';
 export default {
   name: 'Engage',
   data: () => ({
+    activeForm: 'general',
     socialLinks: [],
     faqLinks: []
   }),