Merge pull request #42 from nongrata081/develop

Develop

src/components/form/test/e2e/form.feature

@@ -0,0 +1,8 @@
+Feature: Form feature
+  In order to test form functionality
+  As a user
+  I want to test whether form is submittable when provided valid input
+
+  Scenario: Make form submittable
+    Given a valid input of multiple input component
+    Then remove attribute disabled from submit button

src/components/form/test/unit/form.unit.ts

@@ -0,0 +1,16 @@
+import { validatorsFactory } from '../../../../utils/input-validators';
+
+let validator = validatorsFactory('form');
+
+let multipleInputValueMock = {
+  postCode: { value: "1231as", valid: true },
+  licensePlate: { value: "1231as", valid: true },
+  moneyAmount: { value: "123.00", valid: true }
+};
+
+
+describe('form input validator', function () {
+  it('should return true when given object with valid input values', function () {
+    expect(validator.validate(multipleInputValueMock)).toBe(true);
+  });
+});

src/components/license-plate-input/license-plate-input.tsx

@@ -34,7 +34,7 @@ export class LicensePlateInputComponent {
   render() {
     return (
       <div>
-        <div class={'text-input-container' + (this.isLicensePlateValid ? ' valid' : '')}>
+        <div class={'text-input-container license-plate-input-container' + (this.isLicensePlateValid ? ' valid' : '')}>
           <input id="license-input" type="text" maxlength="6" class="text-input" onInput={(ev) => this.handleChange(ev)}/>
           <label htmlFor="license-input" class={'text-input-label' + (this.value ? ' active' : '')}>License plate</label>
         </div>

src/components/license-plate-input/test/e2e/license-plate.feature

@@ -0,0 +1,8 @@
+Feature: License plate input feature
+  In order to test license plate input functionality
+  As a user
+  I want to test whether proper styles are applied for a valid input value
+
+  Scenario: Apply proper styles to license plate input
+    Given a valid license plate value
+    Then class .valid is attached to license plate input container

src/components/license-plate-input/test/unit/license-plate-input.unit.ts

@@ -0,0 +1,19 @@
+import { validatorsFactory } from '../../../../utils/input-validators';
+
+let validator = validatorsFactory('license-plate');
+
+
+describe('license-plate validator', function() {
+  it('should return true when given license plate of dutch format', function() {
+    expect(validator.validate('XX9999')).toBe(true);
+    expect(validator.validate('99XX99')).toBe(true);
+    expect(validator.validate('XX99XX')).toBe(true);
+    expect(validator.validate('XXXX99')).toBe(true);
+    expect(validator.validate('99XXXX')).toBe(true);
+    expect(validator.validate('99XXX9')).toBe(true);
+    expect(validator.validate('9XXX99')).toBe(true);
+    expect(validator.validate('XX999X')).toBe(true);
+    expect(validator.validate('X999XX')).toBe(true);
+    expect(validator.validate('XXX99X')).toBe(true);
+  });
+});

src/components/money-input/test/e2e/money-input.feature

@@ -0,0 +1,8 @@
+Feature: Money input feature
+  In order to test money input functionality
+  As a user
+  I want to test whether proper styles are applied for a valid input value
+
+  Scenario: Apply proper styles to money input
+    Given a valid money amount value
+    Then class .valid is attached to money input container

src/components/money-input/test/unit/money-input.unit.ts

@@ -0,0 +1,14 @@
+import { validatorsFactory } from '../../../../utils/input-validators';
+
+let validator = validatorsFactory('money-input');
+
+
+describe('money-input validator', function() {
+  it('should return false when given amount of money >= 1000', function() {
+    expect(validator.validate('1000')).toBe(false);
+  });
+
+  it('should return true when given amount of money < 1000', function() {
+    expect(validator.validate('999')).toBe(true);
+  });
+});

src/components/postcode-input/postcode-input.tsx

@@ -34,8 +34,8 @@ export class PostalCodeInputComponent {
   render() {
     return (
       <div>
-        <div class={'text-input-container' + (this.isPostCodeValid ? ' valid' : '')}>
-          <input id="postcode-input" type="text" maxlength="6" class="text-input" onInput={(ev) => this.handleChange(ev)} />
+        <div class={'text-input-container postcode-input-container' + (this.isPostCodeValid ? ' valid' : '')}>
+          <input id="postcode-input" type="text" maxlength="6" class="text-input postcode-input" onInput={(ev) => this.handleChange(ev)} />
           <label htmlFor="postcode-input" class={'text-input-label' + (this.value ? ' active' : '')}>Postcode</label>
         </div>
         { this.value && !this.isPostCodeValid ? <span class="validation-error">{this._validator.errorMessage}</span> : null }

src/components/postcode-input/test/e2e/postcode-input.feature

@@ -0,0 +1,8 @@
+Feature: Postcode input feature
+  In order to test postcode input functionality
+  As a user
+  I want to test whether proper styles are applied for a valid input value
+
+  Scenario: Apply proper styles to postcode input
+    Given a valid postcode value
+    Then class .valid is attached to postcode input container

src/components/postcode-input/test/unit/postcode-input.unit.ts

@@ -0,0 +1,14 @@
+import { validatorsFactory } from '../../../../utils/input-validators';
+
+let validator = validatorsFactory('postcode');
+
+
+describe('postcode validator', function() {
+  it('should return true when given postcode of format 1234ab', function() {
+    expect(validator.validate('1234ab')).toBe(true);
+  });
+
+  it('should return false when given postcode of format ab4231', function() {
+    expect(validator.validate('ab4231')).toBe(false);
+  });
+});

src/components/shared/e2e.steps.js

@@ -1,11 +1,52 @@
 
 const { expect } = require('chai');
-const { Given, Then, When, setWorldConstructor } = require('cucumber');
+const { Given, Then } = require('cucumber');
 
-Given('a running stencil app', function() {
-	return browser.url(`/`);
+Given('a valid postcode value', function() {
+  $('.postcode-input').waitForVisible();
+  $('.postcode-input').setValue('1234ab');
+  return;
 });
 
-Then('I see the {string} header', function(title) {
-	return expect($('h1').getText()).to.equal(title);
-});
+Then('class .valid is attached to postcode input container', function() {
+  return expect($('.postcode-input-container').getAttribute('class')).includes('valid');
+});
+
+
+Given('a valid money amount value', function() {
+  $('.money-input').waitForVisible();
+  $('.money-input').setValue('123');
+  $('body').click();
+  return;
+});
+
+Then('class .valid is attached to money input container', function() {
+  return expect($('.money-input-container').getAttribute('class')).includes('valid');
+});
+
+Given('a valid license plate value', function() {
+  $('#license-input').waitForVisible();
+  $('#license-input').setValue('XX99XX');
+  return;
+});
+
+Then('class .valid is attached to license plate input container', function() {
+  return expect($('.license-plate-input-container').getAttribute('class')).includes('valid');
+});
+
+Given('a valid input of multiple input component', function() {
+
+  $('.postcode-input').waitForVisible();
+  $('#license-input').waitForVisible();
+  $('.money-input').waitForVisible();
+
+  $('.postcode-input').setValue('1234ab');
+  $('#license-input').setValue('XX99XX');
+  $('.money-input').setValue('123');
+  $('body').click();
+  return;
+});
+
+Then('remove attribute disabled from submit button', function() {
+  return expect($('.form-submit').getAttribute('disabled')).equal(null);
+});

wdio.conf.js

@@ -7,20 +7,35 @@ exports.config = {
 	],
 
 	capabilities: [{
+    maxInstances: 5,
 		browserName: 'chrome',
 	}],
+  waitforTimeout: 5000,
 
 	framework: 'cucumber',
 	logLevel: 'error',
 	reporters: ['spec'],
 	services: ['selenium-standalone'],
 
 	cucumberOpts: {
+    failFast: true,
 		require: [
 			`${ process.cwd() }/src/components/shared/e2e.steps.js`,
 			`${ process.cwd() }/src/components/**/test/e2e/*.steps.js`,
 		],
 		snippets: true,
 		source: true,
+    timeout: 20000
 	},
+  before: function before() {
+    browser.url(`/`);
+    /**
+     * Setup the Chai assertion framework
+     */
+    // const chai = require('chai');
+
+    // global.expect = chai.expect;
+    // global.assert = chai.assert;
+    // global.should = chai.should();
+  },
 };