Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ampersand-expanding-textarea-view

Package Overview
Dependencies
Maintainers
2
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ampersand-expanding-textarea-view - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

.travis.yml

23

package.json
{
"name": "ampersand-expanding-textarea-view",
"version": "1.1.3",
"version": "1.2.0",
"description": "A small ampersand.js tool to create an expanding textarea view for an ampersand-form-view",

@@ -9,3 +9,5 @@ "main": "ampersand-expanding-textarea-view.js",

"start": "run-browser test/index.js",
"test": "browserify test/index.js | tape-run | tap-spec"
"test": "browserify test/index.js | tape-run -b phantom | tap-spec",
"lint": "jshint .",
"validate": "npm ls"
},

@@ -23,12 +25,12 @@ "bugs": {

"author": "Mike Engel",
"license": "Apache 2.0",
"license": "Apache-2.0",
"dependencies": {
"ampersand-input-view": "^5.0.0"
"ampersand-input-view": "^6.0.0"
},
"devDependencies": {
"ampersand-view-conventions": "^1.1.6",
"browserify": "^11.2.0",
"browserify": "^13.0.0",
"function-bind": "^1.0.0",
"jshint": "^2.5.6",
"phantomjs": "^1.9.7-15",
"phantomjs": "^2.1.2",
"precommit-hook": "^3.0.0",

@@ -38,5 +40,10 @@ "run-browser": "^2.0.2",

"tape": "^4.2.1",
"tape-run": "^1.1.0",
"tape-run": "^2.1.0",
"tape-suite": "^0.2.1"
}
},
"pre-commit": [
"lint",
"validate",
"test"
]
}

333

test/basic.js

@@ -5,3 +5,2 @@ var test = require('tape'),

InputView = require('../ampersand-expanding-textarea-view'),
customTemplate = '<label class="custominput"><span data-hook="label"></span><textarea data-hook="input-mirror"></textarea><div contenteditable="true" data-hook="input-primary"></div><div data-hook="message-container"><p data-hook="message-text"></p></div></label>',
fieldOptions = {

@@ -18,334 +17,2 @@ name: 'test',

function isHidden(el) {
return el.style.display === 'none';
}
function hasClass(el, klass) {
return el.classList.contains(klass);
}
test('basic initialization', function (t) {
var input = new InputView({
name: 'title'
});
input.render();
t.equal(input.el.tagName, 'LABEL');
t.equal(input.el.querySelectorAll('textarea').length, 2);
t.equal(input.el.querySelector('textarea').getAttribute('name'), 'title');
t.end();
});
test('initialize with value', function (t) {
var input = new InputView({
name: 'title',
value: 'Once upon a time'
});
input.render();
t.equal(input.el.querySelector('textarea').value, 'Once upon a time');
t.end();
});
test('can initialize with template without having to extend', function (t) {
var input = new InputView({
name: 'title',
value: 'Once upon a time',
template: customTemplate
});
input.render();
t.equal(input.el.className, 'custominput');
t.end();
});
test('should be able to extend a template as well', function (t) {
var input = new (InputView.extend({
template: customTemplate
}))({name: 'title',
value: 'Once upon a time',
});
input.render();
t.equal(input.el.className, 'custominput');
t.end();
input.render();
});
test('reset value', function (t) {
var input = new InputView({
name: 'title'
});
input.render();
input.setValue('something');
t.equal(input.input.value, 'something', 'Value should be updated');
input.reset();
t.equal(input.input.value, '', 'Value should be reset');
var input2 = new InputView({
name: 'title',
value: 'start'
});
input2.render();
t.equal(input2.input.value, 'start', 'Value should be set initially');
input2.setValue('somethingelse');
t.equal(input2.input.value, 'somethingelse', 'value should be updated');
input2.reset();
t.equal(input2.input.value, 'start', 'value should have been reset to original');
t.end();
});
test('clear', function (t) {
var input = new InputView({
name: 'title',
value: 'something'
});
input.render();
t.equal(input.input.value, 'something');
input.reset();
t.equal(input.input.value, 'something', 'reset should do nothing');
input.clear();
t.equal(input.input.value, '');
t.equal(input.value, '');
var input2 = new InputView({
name: 'thing'
});
input2.render();
t.equal(input2.value, '');
input2.setValue('thing');
t.equal(input2.input.value, 'thing');
t.equal(input2.value, 'thing');
input2.clear();
t.equal(input2.input.value, '');
t.equal(input2.value, '');
t.end();
});
test('initalize with a value of `0`', function(t) {
var input = new InputView({
name: 'title',
type: 'number',
value: 0
});
input.render();
t.equal(parseFloat(input.el.querySelector('textarea').value), 0);
t.end();
});
test('Tests with required true and false', function (t) {
var inputs = [
new InputView({
name: 'title',
required: true,
tests: [
function (val) {
if (val.length < 5) return 'Must be 5+ characters.';
}
]
}),
new InputView({
name: 'title',
required: false,
tests: [
function (val) {
if (val.length < 5) return 'Must be 5+ characters.';
}
]
}),
];
inputs.forEach(function (input) {
input.render();
var inputElement = input.el.querySelector('textarea');
var messageContainer = input.el.querySelector('[data-hook=message-container]');
//"Trigger change events"
//TODO: this should be real dom events
inputElement.value = 'O';
input.handleInputChanged();
// At this point we are not yet blurred so there should no messages or classes
t.notOk(input.valid, 'Input should be invalid');
t.ok(isHidden(messageContainer), 'Message should not be visible');
t.notOk(hasClass(inputElement, 'input-invalid'), 'Does not have invalid class');
t.notOk(hasClass(inputElement, 'input-valid'), 'Doest not have valid class');
// Another change to an empty state
inputElement.value = '';
input.handleInputChanged();
// should still not show errors
t.notOk(input.valid, 'Input should be invalid');
t.ok(isHidden(messageContainer), 'Message should not be visible');
t.notOk(hasClass(inputElement, 'input-invalid'), 'Does not have invalid class');
t.notOk(hasClass(inputElement, 'input-valid'), 'Doest not have valid class');
// Blur to trigger invalid message/class
inputElement.value = 'O';
input.handleInputChanged();
input.handleBlur();
t.notOk(input.valid, 'Input should be invalid');
t.notOk(isHidden(messageContainer), 'Message should be visible');
t.ok(hasClass(inputElement, 'input-invalid'), 'Has invalid class');
t.notOk(hasClass(inputElement, 'input-valid'), 'Does not have valid class');
//"Trigger change events again"
inputElement.value = 'Once upon a time!';
input.handleInputChanged();
input.handleBlur();
t.ok(input.valid, 'Input should be valid');
t.ok(isHidden(messageContainer), 'Message should not be visible');
t.notOk(hasClass(inputElement, 'input-invalid'), 'Does not have invalid class');
t.ok(hasClass(inputElement, 'input-valid'), 'Has valid class');
});
t.end();
});
test('allow setting root element class', function (t) {
var input = new InputView();
input.render();
t.equal(input.el.className, '');
input = new InputView({
rootElementClass: 'something'
});
input.render();
t.equal(input.el.className, 'something');
input.rootElementClass = 'somethingelse';
t.equal(input.el.className, 'somethingelse');
t.end();
});
test('validityClass is present on submit even if unchanged', function (t) {
[
new InputView({
name: 'title',
required: true
}),
new InputView({
name: 'title',
required: true,
value: ''
})
].forEach(function (input) {
input.render();
var inputElement = input.el.querySelector('textarea');
var messageContainer = input.el.querySelector('[data-hook=message-container]');
// "Trigger submit on the input"
// TODO: should we pull in form-view and do a dom submit event?
input.beforeSubmit();
t.notOk(input.valid, 'Input should be invalid');
t.notOk(isHidden(messageContainer), 'Message should be visible');
t.ok(hasClass(inputElement, 'input-invalid'), 'Has invalid class');
t.notOk(hasClass(inputElement, 'input-valid'), 'Does not have valid class');
});
t.end();
});
test('Required views display message and class after edited', function (t) {
[
new InputView({
name: 'title',
required: true
}),
new InputView({
name: 'title',
required: true,
value: ''
})
].forEach(function (input) {
input.render();
var inputElement = input.el.querySelector('textarea');
var messageContainer = input.el.querySelector('[data-hook=message-container]');
inputElement.value = 'Required string';
input.handleInputChanged();
input.handleBlur();
t.ok(input.valid, 'Input should be valid');
t.ok(isHidden(messageContainer), 'Message should not be visible');
t.notOk(hasClass(inputElement, 'input-invalid'), 'Does not have invalid class');
t.ok(hasClass(inputElement, 'input-valid'), 'Has valid class');
// Changing the value back to an empty string should show invalid
// message and class even though it is technically "unchanged"
inputElement.value = '';
input.handleInputChanged();
input.handleBlur();
t.notOk(input.valid, 'Input should be invalid');
t.notOk(isHidden(messageContainer), 'Message should be visible');
t.ok(hasClass(inputElement, 'input-invalid'), 'Has invalid class');
t.notOk(hasClass(inputElement, 'input-valid'), 'Does not have valid class');
});
t.end();
});
test('value reports changed in cases where it shouldnt', function (t) {
[
new InputView({
name: 'title'
}),
new InputView({
name: 'title',
value: ''
}),
new InputView({
name: 'title',
value: null
})
].forEach(function (input) {
input.render();
var inputElement = input.el.querySelector('textarea');
// Setting the input value directly and trigger input changed
inputElement.value = '0';
input.handleInputChanged();
t.ok(input.changed, 'Input is changed');
inputElement.value = '';
input.handleInputChanged();
t.notOk(input.changed, 'Input is not changed when empty string');
inputElement.value = null;
input.handleInputChanged();
t.notOk(input.changed, 'Input is not changed when null');
// Using the `setValue` method
input.setValue('0');
t.ok(input.changed, 'Input is changed');
input.setValue('');
t.notOk(input.changed, 'Input is not changed when empty string');
input.setValue(null);
t.notOk(input.changed, 'Input is not changed when null');
});
t.end();
});
test('textarea grows in height as the text wraps', function (t) {

@@ -352,0 +19,0 @@ var input = new InputView(),

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc