square · hursey013 · Aug 20, 2016
diff --git a/src/index.js b/src/index.js
@@ -14,6 +14,7 @@ import PhoneFormatter from './phone_formatter';
 import SocialSecurityNumberFormatter from './social_security_number_formatter';
 import TextField from './text_field';
 import UndoManager from './undo_manager';
+import ZipCodeFormatter from './zip_code_formatter';
 
 /**
  * @namespace FieldKit
@@ -43,5 +44,6 @@ module.exports = {
   PhoneFormatter: PhoneFormatter,
   SocialSecurityNumberFormatter: SocialSecurityNumberFormatter,
   TextField: TextField,
-  UndoManager: UndoManager
+  UndoManager: UndoManager,
+  ZipCodeFormatter: ZipCodeFormatter
 };
diff --git a/src/zip_code_formatter.js b/src/zip_code_formatter.js
@@ -0,0 +1,43 @@
+import DelimitedTextFormatter from './delimited_text_formatter';
+
+/**
+ * @const
+ * @private
+ */
+const DIGITS_PATTERN = /^\d*$/;
+
+/**
+ * @extends DelimitedTextFormatter
+ */
+class ZipCodeFormatter extends DelimitedTextFormatter {
+  constructor() {
+    super('-', true);
+    this.maximumLength = 9 + 1;
+  }
+
+  /**
+   * @param {number} index
+   * @returns {boolean}
+   */
+  hasDelimiterAtIndex(index) {
+    return index === 5;
+  }
+
+  /**
+   * Determines whether the given change should be allowed and, if so, whether
+   * it should be altered.
+   *
+   * @param {TextFieldStateChange} change
+   * @param {function(string)} error
+   * @returns {boolean}
+   */
+  isChangeValid(change, error) {
+    if (DIGITS_PATTERN.test(change.inserted.text)) {
+      return super.isChangeValid(change, error);
+    } else {
+      return false;
+    }
+  }
+}
+
+export default ZipCodeFormatter;
diff --git a/test/selenium/server/test_pages/zip_code_formatter.html b/test/selenium/server/test_pages/zip_code_formatter.html
@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <script src="/jquery-caret/jquery.caret.js"></script>
+    <script src="/field-kit.js"></script>
+  </head>
+
+  <body>
+    <input id="field" />
+    <script>
+      window.installFieldKit = function() {
+        window.testField = new FieldKit.TextField(document.getElementById('field'), new FieldKit.ZipCodeFormatter());
+      };
+    </script>
+  </body>
+</html>
diff --git a/test/selenium/zip_code_formatter_test.js b/test/selenium/zip_code_formatter_test.js
@@ -0,0 +1,61 @@
+var By = require('selenium-webdriver').By;
+var Key = require('selenium-webdriver').Key;
+var until = require('selenium-webdriver').until;
+var test = require('selenium-webdriver/testing');
+var expect = require('chai').expect;
+var server = require('./server');
+var helpers = require('./helpers');
+
+module.exports = function() {
+  test.describe('FieldKit.ZipCodeFormatter', function() {
+    var input;
+    test.beforeEach(function() {
+      server.goTo('zip_code_formatter.html');
+      input = driver.findElement(By.tagName('input'));
+    });
+
+    test.it('places dashes in the right places', function() {
+      helpers.setInput('|', input);
+
+      input.sendKeys('123456789');
+
+      return helpers.getFieldKitValues()
+        .then(function(values) {
+          expect(values.raw).to.equal('12345-6789');
+        });
+    });
+
+    test.it('prevents extra digits from being entered', function() {
+      helpers.setInput('12345-6789|', input);
+
+      input.sendKeys('0');
+
+      return helpers.getFieldKitValues()
+        .then(function(values) {
+          expect(values.raw).to.equal('12345-6789');
+        });
+    });
+
+    test.it('prevents entering non-digit characters', function() {
+      helpers.setInput('|', input);
+
+      input.sendKeys('f');
+
+      return helpers.getFieldKitValues()
+        .then(function(values) {
+          expect(values.raw).to.equal('');
+        });
+    });
+
+    test.it('backspaces words correctly', function() {
+      helpers.setInput('12345-6789|', input);
+
+      input.sendKeys(Key.chord(Key.ALT, Key.BACK_SPACE));
+
+      return helpers.getFieldKitValues()
+        .then(function(values) {
+          expect(values.raw).to.equal('12345-');
+        });
+    });
+  });
+};
diff --git a/test/unit/zip_code_formatter_test.js b/test/unit/zip_code_formatter_test.js
@@ -0,0 +1,28 @@
+import { expectThatTyping } from './helpers/expectations';
+import { buildField } from './helpers/builders';
+import FieldKit from '../../src';
+
+testsWithAllKeyboards('FieldKit.ZipCodeFormatter', function() {
+  var field;
+
+  beforeEach(function() {
+    field = buildField();
+    field.setFormatter(new FieldKit.ZipCodeFormatter());
+  });
+
+  it('places dashes in the right places', function() {
+    expectThatTyping('123456789').into(field).willChange('|').to('12345-6789|');
+  });
+
+  it('prevents extra digits from being entered', function() {
+    expectThatTyping('0').into(field).willNotChange('12345-6789|');
+  });
+
+  it('prevents entering non-digit characters', function() {
+    expectThatTyping('f').into(field).willNotChange('|');
+  });
+
+  it('backspaces words correctly', function() {
+    expectThatTyping('alt+backspace').into(field).willChange('12345-6789|').to('12345-|');
+  });
+});