feat: cypress testing for validation

.gitignore

@@ -31,3 +31,6 @@ cypress/videos
 
 # jetbrains
 .idea
+
+#yarn lock
+yarn.lock

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3001"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/SignInValidation.spec.js

@@ -0,0 +1,15 @@
+import { EMAIL_SIGN_IN_FIELD_ID } from '../../src/config/selectors';
+import { SIGN_IN_PATH } from '../../src/config/paths';
+import { checkErrorTextField, fillSignInLayout, submitSignIn } from './util';
+
+describe('Name and Email Validation', () => {
+  it('Sign In', () => {
+    cy.visit(SIGN_IN_PATH);
+    fillSignInLayout('ekfekfekf');
+    submitSignIn();
+    checkErrorTextField(EMAIL_SIGN_IN_FIELD_ID, true);
+    fillSignInLayout('[email protected]');
+    checkErrorTextField(EMAIL_SIGN_IN_FIELD_ID, false);
+    submitSignIn();
+  });
+});

cypress/integration/SignUpValidation.spec.js

@@ -0,0 +1,26 @@
+import {
+  EMAIL_SIGN_IN_FIELD_ID,
+  EMAIL_SIGN_UP_FIELD_ID,
+  NAME_SIGN_UP_FIELD_ID,
+} from '../../src/config/selectors';
+import { SIGN_UP_PATH } from '../../src/config/paths';
+import {
+  checkErrorTextField,
+  fillSignInLayout,
+  fillSignUpLayout,
+  submitSignIn,
+  submitSignUp,
+} from './util';
+
+describe('Name and Email Validation', () => {
+  it('Sign In', () => {
+    cy.visit(SIGN_UP_PATH);
+    fillSignUpLayout({ name: 'e', email: 'jasjasjd' });
+    submitSignUp();
+    checkErrorTextField(EMAIL_SIGN_UP_FIELD_ID, true);
+    checkErrorTextField(NAME_SIGN_UP_FIELD_ID, true);
+    fillSignUpLayout({ name: 'graasp', email: '[email protected]' });
+    checkErrorTextField(EMAIL_SIGN_UP_FIELD_ID, false);
+    checkErrorTextField(NAME_SIGN_UP_FIELD_ID, false);
+  });
+});

cypress/integration/util.js

@@ -0,0 +1,28 @@
+import {
+  EMAIL_SIGN_IN_FIELD_ID,
+  EMAIL_SIGN_UP_FIELD_ID,
+  NAME_SIGN_UP_FIELD_ID,
+  SIGN_IN_BUTTON_ID,
+  SIGN_UP_BUTTON_ID,
+} from '../../src/config/selectors';
+
+export const fillSignUpLayout = ({ name, email }) => {
+  cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).clear().type(name);
+  cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear().type(email);
+};
+
+export const fillSignInLayout = (email) => {
+  cy.get(`#${EMAIL_SIGN_IN_FIELD_ID}`).clear().type(email);
+};
+
+export const submitSignIn = () => {
+  cy.get(`#${SIGN_IN_BUTTON_ID}`).click();
+};
+
+export const submitSignUp = () => {
+  cy.get(`#${SIGN_UP_BUTTON_ID}`).click();
+};
+export const checkErrorTextField = (id, flag) => {
+  const existence = flag ? 'exist' : 'not.exist';
+  cy.get(`#${id}-helper-text`).should(existence);
+};

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

src/components/SignIn.js

@@ -14,6 +14,7 @@ import { SIGN_UP_PATH } from '../config/paths';
 import { getCurrentMember, signIn } from '../actions/authentication';
 import { GRAASP_COMPOSE_HOST } from '../config/constants';
 import { emailValidator } from '../utils/validation';
+import { EMAIL_SIGN_IN_FIELD_ID, SIGN_IN_BUTTON_ID } from '../config/selectors';
 
 const styles = (theme) => ({
   fullScreen: {
@@ -121,8 +122,14 @@ class SignIn extends Component {
             error={emailError !== ''}
             helperText={emailError}
             onChange={this.handleOnChange}
+            id={EMAIL_SIGN_IN_FIELD_ID}
           />
-          <Button variant="contained" color="primary" onClick={this.signIn}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={this.signIn}
+            id={SIGN_IN_BUTTON_ID}
+          >
             {t('Sign In')}
           </Button>
         </FormControl>

src/components/SignUp.js

@@ -13,6 +13,11 @@ import { buildSignInPath } from '../config/paths';
 import { getCurrentMember, signUp } from '../actions/authentication';
 import { GRAASP_COMPOSE_HOST } from '../config/constants';
 import { emailValidator, nameValidator } from '../utils/validation';
+import {
+  EMAIL_SIGN_UP_FIELD_ID,
+  NAME_SIGN_UP_FIELD_ID,
+  SIGN_UP_BUTTON_ID,
+} from '../config/selectors';
 
 const styles = (theme) => ({
   fullScreen: {
@@ -126,6 +131,7 @@ class SignUp extends Component {
             error={nameError !== ''}
             helperText={nameError}
             onChange={this.handleNameOnChange}
+            id={NAME_SIGN_UP_FIELD_ID}
           />
         </Grid>
         <Grid item xs={12}>
@@ -138,10 +144,16 @@ class SignUp extends Component {
             error={emailError !== ''}
             helperText={emailError}
             onChange={this.handleEmailOnChange}
+            id={EMAIL_SIGN_UP_FIELD_ID}
           />
         </Grid>
         <Grid item xs={12}>
-          <Button variant="contained" color="primary" onClick={this.register}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={this.register}
+            id={SIGN_UP_BUTTON_ID}
+          >
             {t('Sign Up')}
           </Button>
         </Grid>

src/config/paths.js

@@ -4,3 +4,4 @@ export const buildSignInPath = (to) =>
   `/signin${qs.stringify({ to }, { addQueryPrefix: true })}`;
 export const SIGN_UP_PATH = '/signup';
 export const HOME_PATH = '/';
+export const SIGN_IN_PATH = '/signin';

src/config/selectors.js

@@ -0,0 +1,5 @@
+export const NAME_SIGN_UP_FIELD_ID = 'nameSignUpFieldId';
+export const EMAIL_SIGN_UP_FIELD_ID = 'emailSignUpFieldId';
+export const EMAIL_SIGN_IN_FIELD_ID = 'emailSignInFieldId';
+export const SIGN_IN_BUTTON_ID = 'signInButtonId';
+export const SIGN_UP_BUTTON_ID = 'signUpButtonId';