Skip to content

Commit 2df312c

Browse files
gokulakannantgokulakannant
committed
Simplified demo example added
Signed-off-by: gokulakannant <[email protected]>
1 parent 4a8afaf commit 2df312c

28 files changed

+6384
-277
lines changed

‎demo/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
dist

‎example/src/Form.css renamed to ‎demo/app/Form.css

File renamed without changes.

‎example/src/Form.js renamed to ‎demo/app/Form.js

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ class ValidationForm extends React.Component {
99
fields: {
1010
customer_name: "",
1111
email_address: "",
12+
password: "",
13+
password_confirmation: "",
1214
phone_number: "",
1315
pickup_time: "",
1416
taxi: "",
@@ -23,6 +25,8 @@ class ValidationForm extends React.Component {
2325
this.form.useRules({
2426
customer_name: "required|username_available",
2527
email_address: "required|email",
28+
password: "required|confirmed",
29+
password_confirmation: "required|same:password",
2630
phone_number: "required|numeric|digits_between:10,12",
2731
pickup_time: "required|date",
2832
taxi: "required",
@@ -119,6 +123,42 @@ class ValidationForm extends React.Component {
119123
</label>
120124
</p>
121125

126+
<p>
127+
<label>
128+
Password
129+
<input
130+
type="text"
131+
name="password"
132+
onBlur={this.form.handleBlurEvent}
133+
onChange={this.form.handleChangeEvent}
134+
value={this.state.fields.password}
135+
/>
136+
</label>
137+
<label className="error">
138+
{this.state.errors.password
139+
? this.state.errors.password
140+
: ""}
141+
</label>
142+
</p>
143+
144+
<p>
145+
<label>
146+
Confirm Password
147+
<input
148+
type="text"
149+
name="password_confirmation"
150+
onBlur={this.form.handleBlurEvent}
151+
onChange={this.form.handleChangeEvent}
152+
value={this.state.fields.password_confirmation}
153+
/>
154+
</label>
155+
<label className="error">
156+
{this.state.errors.password_confirmation
157+
? this.state.errors.password_confirmation
158+
: ""}
159+
</label>
160+
</p>
161+
122162
<fieldset>
123163
<legend>Which taxi do you require?</legend>
124164
<p>
@@ -216,7 +256,7 @@ class ValidationForm extends React.Component {
216256
type="date"
217257
name="pickup_time"
218258
onChange={this.form.handleChangeEvent}
219-
onBlur={this.form.handleBlurEvent}
259+
// onBlur={this.form.handleBlurEvent}
220260
value={this.state.fields.pickup_time}
221261
/>
222262
</label>

‎demo/app/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head><title>
4+
React Form Input Validation
5+
</title></head>
6+
<body>
7+
<div id="app"></div>
8+
</body>
9+
</html>

‎demo/app/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import Form from "./Form";
5+
6+
ReactDOM.render(<Form />, document.getElementById('app'))

‎example/cypress.json renamed to ‎demo/cypress.json

File renamed without changes.

‎demo/cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎example/cypress/integration/form.spec.js renamed to ‎demo/cypress/integration/integration/form.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
describe('The Home Page', function() {
22
it('Successfull rendering', function() {
3-
cy.visit('http://localhost:3000/')
3+
cy.visit('http://localhost:8080/')
44
})
55

66
it('Check Submit Button', function() {
7-
cy.visit('http://localhost:3000/')
7+
cy.visit('http://localhost:8080/')
88
cy.contains('Submit Booking').click()
99
});
1010
});
1111

1212
describe("Test blur events", () => {
1313
it('Successfull rendering', function() {
14-
cy.visit('http://localhost:3000/')
14+
cy.visit('http://localhost:8080/')
1515
})
1616

1717
it("Customer Name blur (Text field)", () => {
@@ -52,7 +52,7 @@ describe("Test blur events", () => {
5252

5353
describe("Test change event", () => {
5454
it('Successfull rendering', function() {
55-
cy.visit('http://localhost:3000/')
55+
cy.visit('http://localhost:8080/')
5656
});
5757

5858
it("Customer Name change event (Text field)", () => {
@@ -100,7 +100,7 @@ describe("Test change event", () => {
100100

101101
describe("Fill form fields", () => {
102102
it('Successfull rendering', function() {
103-
cy.visit('http://localhost:3000/')
103+
cy.visit('http://localhost:8080/')
104104
});
105105

106106
it("Type customer name (Text field)", () => {
@@ -143,7 +143,7 @@ describe("Fill form fields", () => {
143143

144144
describe("Test validation rules in form fields", () => {
145145
beforeEach("Render home page", () => {
146-
cy.visit('http://localhost:3000/');
146+
cy.visit('http://localhost:8080/');
147147
})
148148
describe("Customer name (required)", () => {
149149
it("Empty fields should display error message", () => {

‎example/cypress/plugins/index.js renamed to ‎demo/cypress/plugins/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/// <reference types="cypress" />
12
// ***********************************************************
23
// This example plugins/index.js can be used to load plugins
34
//
@@ -11,6 +12,9 @@
1112
// This function is called when a project is opened or re-opened (e.g. due to
1213
// the project's config changing)
1314

15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
1418
module.exports = (on, config) => {
1519
// `on` is used to hook into various events Cypress emits
1620
// `config` is the resolved Cypress config

‎example/cypress/support/commands.js renamed to ‎demo/cypress/support/commands.js

File renamed without changes.

0 commit comments

Comments
 (0)