BVB Source Codes

web-design-standards Show toggle-form-input.spec.js Source code

Return Download web-design-standards: download toggle-form-input.spec.js Source code - Download web-design-standards Source code - Type:.js
  1. var $ = require('jquery');
  2. var should = require('should');
  3. var ToggleFormInput = require('../../../src/js/components/toggle-form-input');
  4. var template = require('./template.js');
  5.  
  6. var CONTROL_SELECTOR = '.usa-show_multipassword';
  7. var PASSWORD_SELECTOR = '#password';
  8. var CONFIRM_SELECTOR = '#confirmPassword';
  9. var SHOW_TEXT = 'Show my typing';
  10. var HIDE_TEXT = 'Hide my typing';
  11.  
  12. describe('ToggleFormInput', function () {
  13.   var $maskControl;
  14.   var $password;
  15.   var $confirmPassword;
  16.  
  17.   beforeEach(function () {
  18.     var $component = $(template);
  19.     $('body').append($component);
  20.  
  21.     $maskControl = $component.find(CONTROL_SELECTOR);
  22.     $password = $component.find(PASSWORD_SELECTOR);
  23.     $confirmPassword = $component.find(CONFIRM_SELECTOR);
  24.  
  25.     ToggleFormInput($maskControl.get(0), SHOW_TEXT, HIDE_TEXT);
  26.   });
  27.  
  28.   afterEach(function () {
  29.     document.body.textContent = '';
  30.   });
  31.  
  32.   it('defaults to masked', function () {
  33.     $password.attr('type').should.equal('password');
  34.     $maskControl.text().should.equal(SHOW_TEXT);
  35.   });
  36.  
  37.   it('switches type of inputs from password to text when true', function () {
  38.     click($maskControl);
  39.     $password.attr('type').should.equal('text');
  40.     $confirmPassword.attr('type').should.equal('text');
  41.   });
  42.  
  43.   it('changes text of mask control element to match show/hide text', function () {
  44.     click($maskControl);
  45.     $maskControl.text().should.equal(HIDE_TEXT);
  46.  
  47.     click($maskControl);
  48.     $maskControl.text().should.equal(SHOW_TEXT);
  49.   });
  50. });
  51.  
  52. /**
  53.  * Fire an addEventListener()-added click event in jsdom
  54.  * See http://stackoverflow.com/a/27557936/9070
  55.  */
  56. function click (jqEl) {
  57.   var el = jqEl.get(0);
  58.   var evt = document.createEvent('HTMLEvents');
  59.   evt.initEvent('click', false, true);
  60.   el.dispatchEvent(evt);
  61. }
  62.  
downloadtoggle-form-input.spec.js Source code - Download web-design-standards Source code
Related Source Codes/Software:
KineticJS - KineticJS is an HTML5 Canvas JavaScript framework ... 2017-01-07
yui3 - A library for building richly interactive web appl... 2017-01-07
TextBlob - Simple, Pythonic, text processing--Sentiment analy... 2017-01-07
monaco-editor - A browser based code editor 2017-01-07
grumpy - Grumpy is a Python to Go source code transcompiler... 2017-01-07
Knuff - The debug application for Apple Push Notification ... 2017-01-07
RoundedImageView - A fast ImageView that supports rounded corners, ov... 2017-01-07
flowchart.js - Draws simple SVG flow chart diagrams from textual ... 2017-01-08
TextFieldEffects - Custom UITextFields effects inspired by Codrops, b... 2017-01-08
glide - Package Management for Golang h... 2017-01-08
react-templates - Light weight templates for react ... 2017-04-28
afterglow-theme - A minimal dark Theme for Sublime Text 2 and 3 2017-04-28
jwt-go - Golang implementation of JSON Web Tokens (JWT) 2017-04-28
DeerResume - Tool MarkDown online resume, online preview, edit,... 2017-04-28
mailgen - A Node.js package that generates clean, responsive... 2017-04-28
desk - A lightweight workspace manager for the shell 2017-04-28
Glimpse - The open source diagnostics platform for the web ... 2017-04-28
xonsh - Python-powered, cross-platform, Unix-gazing shell ... 2017-04-28
react-monocle - A developer tool to visualize a React application'... 2017-04-28

 Back to top