Skip to content

Commit cbed21f

Browse files
sergiomercado19sergiomercado19
authored
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.
1 parent 517a14c commit cbed21f

File tree

3 files changed

+35
-38
lines changed

3 files changed

+35
-38
lines changed

‎frontend/cypress/integration/components/mailingForm.spec.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ describe('Mailing forms', () => {
66
cy.get('[data-cy=mailing-form]');
77
// By referencing general-tab items we are ensuring that it is selected by default
88
// Check if name label exists and is required
9-
cy.get('[data-cy=general-name-label]').contains('Name *');
9+
cy.get('[data-cy=general-name-label]').contains('Name').should('have.class', 'required');
1010
// Check if email label exists and is required
11-
cy.get('[data-cy=general-email-label]').contains('Email *');
11+
cy.get('[data-cy=general-email-label]').contains('Email').should('have.class', 'required');
1212
// Check if message label exists and is required
13-
cy.get('[data-cy=general-message-label]').contains('Message *');
13+
cy.get('[data-cy=general-message-label]').contains('Message').should('have.class', 'required');
1414
// Ensure send button is disabled
1515
cy.get('[data-cy=general-send-button]').should('be.disabled');
1616
// Fill in valid name
@@ -34,18 +34,18 @@ describe('Mailing forms', () => {
3434
// Ensure the mailing form exists in the Sponsors page
3535
cy.get('[data-cy=mailing-form]');
3636
// Check if name label changed to the sponsorship form version
37-
cy.get('[data-cy=sponsorship-name-label]').contains('Company Name *');
37+
cy.get('[data-cy=sponsorship-name-label]').contains('Company Name').should('have.class', 'required');
3838
});
3939

4040
it('checks labels and validation of a feedback form', () => {
4141
// Visit engage page
4242
cy.visit('/#/engage');
4343
// Select feedback form tab
44-
cy.get('[data-cy=feedback-form-tab]').click();
44+
cy.get('[data-cy=feedback-form-selector]').click();
4545
// Check if name label is not required (marked with *)
46-
cy.get('[data-cy=feedback-name-label]').should('not.contain', '*');
46+
cy.get('[data-cy=feedback-name-label]').should('not.have.class', 'required');
4747
/// Check if email label is not required (marked with *)
48-
cy.get('[data-cy=feedback-email-label]').should('not.contain', '*');
48+
cy.get('[data-cy=feedback-email-label]').should('not.have.class', 'required');
4949
// Ensure send button is disabled
5050
cy.get('[data-cy=feedback-send-button]').should('be.disabled');
5151
// Fill in valid message

‎frontend/src/components/MailingForm.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,23 @@
1212
<v-col class="form-box" data-cy="mailing-form">
1313
<v-form ref="form" v-model="valid">
1414
<!-- Name -->
15-
<label class="text-body-1 input-label" :data-cy="`${this.type}-name-label`">
15+
<label :class="getLabelClass(!isType('feedback'))" :data-cy="`${this.type}-name-label`">
1616
{{ isType('sponsorship') ? "Company Name" : "Name" }}
17-
<span v-if="!isType('feedback')" class="required">*</span>
1817
</label>
1918
<v-text-field class="input" placeholder="John Smith" v-model="name" :data-cy="`${this.type}-name-field`"
2019
:rules="[ !isType('feedback') ? rules.required : true ]"></v-text-field>
2120
<!-- Email -->
22-
<label class="text-body-1 input-label" :data-cy="`${this.type}-email-label`"> Email
23-
<span v-if="!isType('feedback')" class="required">*</span>
21+
<label :class="getLabelClass(!isType('feedback'))" :data-cy="`${this.type}-email-label`"> Email
2422
</label>
2523
<v-text-field class="input" placeholder="[email protected]" v-model="email" :data-cy="`${this.type}-email-field`"
2624
:rules="[ rules.email, !isType('feedback') ? rules.required : true ]"></v-text-field>
2725
<!-- Message -->
28-
<label class="text-body-1 input-label" :data-cy="`${this.type}-message-label`"> Message
29-
<span class="required">*</span>
26+
<label :class="getLabelClass(true)" :data-cy="`${this.type}-message-label`"> Message
3027
</label>
3128
<v-textarea class="input" placeholder="Message" v-model="body" :data-cy="`${this.type}-message-field`"
3229
:rules="[ rules.required ]"></v-textarea>
3330
<!-- Send button -->
34-
<v-btn text style="margin-left:60%" :disabled="!valid" @click="send" :data-cy="`${this.type}-send-button`">Send</v-btn>
31+
<v-btn text style="margin-left:60%" :disabled="!valid" @click="send" :data-cy="`${this.type}-send-button`">Send ></v-btn>
3532
</v-form>
3633
</v-col>
3734
</v-row>
@@ -60,6 +57,11 @@ export default {
6057
isType(name) {
6158
return this.type === name;
6259
},
60+
getLabelClass(isRequired) {
61+
const lc = 'text-body-1 input-label';
62+
if (isRequired) return lc.concat(' required');
63+
return lc;
64+
},
6365
send() {
6466
APIClient.mailingAPI(MAILING_URL[this.type], this.name, this.email, this.body)
6567
.then((res) => {
@@ -97,8 +99,8 @@ export default {
9799
float:left;
98100
}
99101

100-
.required
101-
{
102+
.required:after {
103+
content:" *";
102104
color: red;
103-
}
105+
}
104106
</style>

‎frontend/src/views/Engage.vue

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -72,30 +72,24 @@
7272
</v-container>
7373

7474
<!-- Forms -->
75-
<v-tabs
76-
class="elevation-2"
77-
vertical
78-
dark
79-
>
80-
<v-tabs-slider></v-tabs-slider>
75+
<v-container ref="content-start" style="padding: 20px 30px 10px 30px">
76+
<h2>Still have some questions?</h2>
77+
<br>
8178

82-
<!-- Enquiry tab -->
83-
<v-tab data-cy="general-form-tab">Enquiry</v-tab>
84-
<v-tab-item>
85-
<v-card flat tile>
86-
<MailingForm type="general"></MailingForm>
87-
</v-card>
88-
</v-tab-item>
79+
<v-btn-toggle v-model="activeForm">
80+
<v-btn value="general" data-cy="general-form-selector">
81+
Enquiry
82+
</v-btn>
83+
<v-btn value="feedback" data-cy="feedback-form-selector">
84+
Feedback
85+
</v-btn>
86+
</v-btn-toggle>
8987

90-
<!-- Feedback tab -->
91-
<v-tab data-cy="feedback-form-tab">Feedback</v-tab>
92-
<v-tab-item>
93-
<v-card flat tile>
94-
<MailingForm type="feedback"></MailingForm>
95-
</v-card>
96-
</v-tab-item>
88+
<v-card flat tile>
89+
<MailingForm :type="this.activeForm"></MailingForm>
90+
</v-card>
9791

98-
</v-tabs>
92+
</v-container>
9993
</v-app>
10094
</template>
10195

@@ -109,6 +103,7 @@ import APIClient from '../utils/APIClient';
109103
export default {
110104
name: 'Engage',
111105
data: () => ({
106+
activeForm: 'general',
112107
socialLinks: [],
113108
faqLinks: []
114109
}),

0 commit comments

Comments
 (0)