test: Create initial jasmine tests

karma.conf.js

@@ -0,0 +1,78 @@
+// Karma configuration
+// Generated on Mon Jan 20 2020 15:56:27 GMT+1300 (New Zealand Daylight Time)
+
+module.exports = function(config) {
+    'use strict';
+
+    config.set({
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['jasmine', 'jquery-3.2.1'],
+
+        plugins: ['karma-jquery', 'karma-jasmine', 'karma-chrome-launcher'],
+
+        // list of files / patterns to load in the browser
+        files: [
+            'spec/helpers/*.js',
+            'spec/**/*spec.js',
+            'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+            { pattern: 'spec/fixtures/*.html', included: false, served: true },
+            'src/saveMyForm.jquery.js'
+        ],
+
+        // list of files / patterns to exclude
+        exclude: [],
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {},
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress'],
+
+        // web server port
+        port: 9876,
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: true,
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        browsers: ['Chrome'],
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: false,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity,
+
+        client: {
+            //capture all console output and pipe it to the terminal, true is default
+            captureConsole: true,
+            //if true, Karma clears the context window upon the completion of running the tests, true is default
+            clearContext: true,
+            //run the tests on the same window as the client, without using iframe or a new window, false is default
+            runInParent: false,
+            //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default
+            useIframe: true,
+            jasmine: {
+                //tells jasmine to run specs in semi random order, false is default
+                random: false
+            }
+        }
+    });
+};

package.json

@@ -4,7 +4,8 @@
   "description": "Save form state in the browser's localStorage",
   "main": "src/saveMyForm.jquery.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "karma start --single-run",
+    "karma": "karma start",
     "minify": "node-minify --compressor babel-minify --input src/saveMyForm.jquery.js --output src/saveMyForm.jquery.min.js",
     "replace_version_in_js": "rexreplace \"\\* version: .*\" \"* version: %npm_package_version%\" src/saveMyForm.jquery.js -G",
     "changelog:patch": "changelog -p",
@@ -42,7 +43,18 @@
   "homepage": "https://github.com/pjjonesnz/saveMyForm.jquery#readme",
   "devDependencies": {
     "generate-changelog": "^1.8.0",
+    "jasmine": "^3.5.0",
+    "jasmine-core": "^3.5.0",
+    "jasmine-jquery": "^2.1.1",
+    "jquery": "^3.4.1",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^3.1.0",
+    "karma-jasmine-html-reporter": "^1.5.1",
+    "karma-jquery": "^0.2.4",
+    "karma-spec-reporter": "0.0.32",
     "node-minify": "^3.6.0",
     "rexreplace": "^5.1.5"
-  }
+  },
+  "dependencies": {}
 }

spec/fixtures/form.html

@@ -0,0 +1,6 @@
+<form id="my_form">
+    <label>
+		<input type="text" id="text_input" value="sad" />
+		<textarea id="textarea_field"></textarea>
+	</label>
+</form>

spec/suites/saveMyForm.spec.js

@@ -0,0 +1,82 @@
+describe('saveMyForm', function() {
+    var form_id = 'my_form';
+
+    function getLocalStorage(key) {
+        return JSON.parse(localStorage.getItem(key));
+    }
+
+    beforeAll(function() {
+        localStorage.clear();
+    });
+
+    afterAll(function() {
+    });
+
+    beforeEach(function() {
+        jasmine.getFixtures().fixturesPath = 'base/spec/fixtures';
+        loadFixtures('form.html');
+        $('#' + form_id).saveMyForm();
+    });
+
+    afterEach(function() {
+        $('#' + form_id).remove();
+    });
+
+    it('has text input value equal to sad on first load', function() {
+        expect($('#text_input').val()).toEqual('sad');
+    });
+
+    it('changes localStorage for text_input to happy', function() {
+        $('#text_input')
+            .val('happy')
+            .change();
+        expect(getLocalStorage(form_id + '_text_input')).toEqual('happy');
+    });
+
+    it('automatically loads text_input when page is reloaded', function() {
+        expect($('#text_input').val()).toEqual('happy');
+    });
+
+    it("doesn't update localStorage on programmatic field update if change() isn't triggered", function() {
+        $('#text_input').val('');
+        expect(getLocalStorage(form_id + '_text_input')).toEqual('happy');
+    });
+
+    it("it updates localStorage when keypress is triggered after debounce time", function(done) {
+        var input = $('#text_input');
+        input.val('joyful');
+        var e = $.Event('keyup');
+        e.which = 65;
+        input.trigger(e);
+        expect(getLocalStorage(form_id + '_text_input')).not.toEqual('joyful');
+        setTimeout(function() {
+            expect(getLocalStorage(form_id + '_text_input')).toEqual('joyful');
+            done(); // call this to finish off the it block
+        }, 501);
+    });
+
+    it("saves random characters correctly in localStorage", function() {
+        var string = '~!@#$%^&*X#123456;&"';
+        $('#text_input').val(string).change();
+        expect(getLocalStorage(form_id + '_text_input')).toEqual(string);
+    });
+
+    it('loads random characters correctly after page reload', function() {
+        var string = '~!@#$%^&*X#123456;&"';
+        expect($('#text_input').val()).toEqual(string);
+    });
+
+    it("doesn't save linebreaks in text input fields", function() {
+        var test = "Sad\nand\nLonely";
+        var expect_save = 'SadandLonely';
+        $('#text_input').val(test).change();
+        expect(getLocalStorage(form_id + '_text_input')).toEqual(expect_save);
+    })
+
+    it('saves linebreaks correctly in textareas', function() {
+        var test = "Sad\nand\nLonely";
+        $('#textarea_field').val(test).change();
+        expect(getLocalStorage(form_id + '_textarea_field')).toEqual(test);
+    })
+
+});