first commit

This commit is contained in:
Senad Uka
2018-05-07 16:07:00 +02:00
commit 8b4f09f9d5
3368 changed files with 852614 additions and 0 deletions

View File

@@ -0,0 +1,36 @@
{
"name": "seiyria-bootstrap-slider",
"version": "9.1.1",
"homepage": "https://github.com/seiyria/bootstrap-slider",
"authors": [
"Kyle Kemp <kyle@seiyria.com>",
"Rohit Kalkur <rohit.kalkur@gmail.com>"
],
"description": "a slider element for bootstrap 2/3",
"main": [
"dist/bootstrap-slider.js",
"dist/css/bootstrap-slider.css"
],
"keywords": [
"slider",
"bootstrap2",
"bootstrap3",
"bootstrap"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"_release": "9.1.1",
"_resolution": {
"type": "version",
"tag": "v9.1.1",
"commit": "5b9cbda2ffee23365cdf72c49e54db751bc9c6cc"
},
"_source": "https://github.com/seiyria/bootstrap-slider.git",
"_target": "^9.1.1",
"_originalSource": "seiyria-bootstrap-slider",
"_direct": true
}

View File

@@ -0,0 +1,101 @@
9.1.1 / 2016-07-15
==================
* **Bug Fix:** Adds `.npmignore` file to repository. [Resolves this issue](https://github.com/seiyria/bootstrap-slider/issues/601)
9.1.0 / 2016-07-14
==================
* **New Feature:** Always binding to the `$.fn.bootstrapSlider` namespace and printing a console warning when the `$.fn.slider` namespace is already bound. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/575)
9.0.0 / 2016-07-13
==================
* **New Feature:** Wraps all of the ticks within a single container element with the class `.slider-tick-container` as opposed to being within the `.slider-track` element. This enables individual ticks to be more easily targeted with CSS selectors such as `nth-of-type(n)`. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/500)
8.0.0 / 2016-07-13
==================
* **Revert:** Reverting bug fix made in `7.0.4 - 7.0.5` because it breaks UMD module definition and r.js build tool [as reported in this issue](https://github.com/seiyria/bootstrap-slider/issues/589#issuecomment-232429818). Updated README to address how to stub out optional JQuery dependency for Webpack builds.
7.1.0 - 7.1.1 / 2016-05-26
==================
* **New Feature:** Allow LESS/SASS variables to be overridden, but fall back to defaults if needed. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/579). Thanks to [Jonathan Rehm
(jkrehm)](https://github.com/jkrehm)
7.0.4 - 7.0.5 / 2016-05-26
==================
* **Bug Fix:** Changes webpack AMD build error on define() for optional jQuery dependency to be a warning, which allows webpack builds to be completed. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/578). Thanks to [Tomi Saarinen (TomiS)](https://github.com/TomiS)
7.0.2 / 2016-04-05
==================
* **Bug Fix:** Fixes overlap issue with range slider. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/435). Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
7.0.0 / 2016-04-05
==================
* **Breaking Change:** Restructured and refactored SASS source files to eliminate compass dependency and be more organized. Thanks to [Jacob van Mourik
(jcbvm)](https://github.com/jcbvm)
6.1.7 / 2016-04-03
==================
* **Bug Fix:** Fixes issue where slider accidently scrolls when user taps on mobile device. Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
6.1.5 / 2016-03-12
==================
* **Bug Fix:** Call resize() before layout() within relayout() method, which enables intially hidden sliders to be revealed and behave appropriately. Thanks to [Peter (MaZderMind)](https://github.com/MaZderMind)
6.1.3 / 2016-03-07
==================
* **Bug Fix:** Fixed horizontal centering issue with labels. Thanks to [Josh Guffey](https://github.com/jguffey)
6.1.0 / 2016-02-28
==================
* **New Feature:** Auto-registering/intializing slider via `data-provide="slider"` attribute. Thanks to [MaZderMind](https://github.com/MaZderMind)
* Adding Github Templates for Issues, Pull Requeusts, and Contributions
6.0.16 / 2016-02-04
==================
* **Bug Fix:** Attempted Bug fix from 6.0.11 was refined to ensure so side effects.
6.0.15 / 2016-02-04
==================
* **Bug Fix:** _setText() defaults to `.textContent` vs `.innerHTML`. Thanks to [gio-js](https://github.com/gio-js)
6.0.13 / 2016-01-31
==================
* Reverted Bug fix from prior release
6.0.11 / 2016-01-31
==================
* **Bug fix:** Slider was not scrolling properly when nested inside of scrollable container. Thanks to [serbiant](https://github.com/serbiant)
6.0.9 / 2016-01-26
==================
* **Bug fix:** Race condition in `setValue()` where slider value was being set after `change` and `slide` events were being triggered. Thanks to [glaszig](https://github.com/glaszig)
6.0.7 / 2016-01-22
==================
* **Bug fix:** When `tooltip_position` option is set to `"bottom"` on a slider with multiple split handles, position both tooltips below the slider. Thanks to [Martin Hesslund](https://github.com/kesse)
6.0.5 / 2016-01-20
==================
* bower.json: changing "main" to reference /dist/bootstrap-slider.js
6.0.2 / 2015-12-31
==================
* package.json: changing "main" to point at proper file path
6.0.0 / 2015-12-30
==================
* Moving all source code to `/src` directory
* Transpiling JS with [Babel](https://babeljs.io/)
* Adding `Other Guidelines` section to CONTRIBUTING.MD
* Updating README with Grunt CLI tasks
* Update postpublish script to reference transpiled code
* Freezing dependency versions (this allows us to ensure the module and grunt tasks always have consistent/repeatable behavior)
* Adding an `.nvmrc` file for Node 5.x.x. This version of node comes with NPM 3.x.x, which creates a flat dependency tree for `node_modules`, which basically eliminates the need for bower as our client-side deps management solution
5.3.6 / 2015-12-27
==================
* Restoring bootstrap depedency to bower.json file (Fixes issue with `grunt prod` task)
5.3.4 / 2015-12-27
==================
* **Bug fix:** Ticks now reposition themselves during window resize - Thanks to [Zachary Siswick](https://github.com/zsiswick)

View File

@@ -0,0 +1,297 @@
/*global module:false*/
module.exports = function(grunt) {
var packageJSON = grunt.file.readJSON('package.json');
var bumpFiles = ["package.json", "bower.json", "composer.json"];
var commitFiles = bumpFiles.concat(["./dist/*"]);
// Project configuration.
grunt.initConfig({
// Metadata
pkg: packageJSON,
// Task configuration.
header: {
dist: {
options: {
text: "/*! =======================================================\n VERSION <%= pkg.version %> \n========================================================= */"
},
files: {
'<%= pkg.gruntConfig.dist.js %>': '<%= pkg.gruntConfig.temp.js %>',
'<%= pkg.gruntConfig.dist.jsMin %>': '<%= pkg.gruntConfig.temp.jsMin %>',
'<%= pkg.gruntConfig.dist.css %>': '<%= pkg.gruntConfig.temp.css %>',
'<%= pkg.gruntConfig.dist.cssMin %>': '<%= pkg.gruntConfig.temp.cssMin %>'
}
}
},
uglify: {
options: {
preserveComments: 'some'
},
dist: {
src: '<%= pkg.gruntConfig.temp.js %>',
dest: '<%= pkg.gruntConfig.temp.jsMin %>'
}
},
babel: {
options: {
presets: ['es2015']
},
dist: {
src: '<%= pkg.gruntConfig.js.slider %>',
dest: '<%= pkg.gruntConfig.temp.js %>'
}
},
jshint: {
ignore_warning: {
options: {
'-W099': true
},
src: '<%= pkg.gruntConfig.js.slider %>'
},
options: {
esnext: true,
curly: true,
eqeqeq: true,
immed: true,
latedef: false,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
$ : true,
Modernizr : true,
console: true,
define: true,
module: true,
require: true
},
"-W099": true
},
gruntfile: {
src: 'Gruntfile.js'
},
js: {
src: '<%= pkg.gruntConfig.js.slider %>'
},
spec : {
src: '<%= pkg.gruntConfig.spec %>',
options : {
globals : {
document: true,
console: false,
Slider: false,
$: false,
jQuery: false,
_: false,
_V_: false,
afterEach: false,
beforeEach: false,
confirm: false,
context: false,
describe: false,
expect: false,
it: false,
jasmine: false,
JSHINT: false,
mostRecentAjaxRequest: false,
qq: false,
runs: false,
spyOn: false,
spyOnEvent: false,
waitsFor: false,
xdescribe: false
}
}
}
},
jasmine : {
src : '<%= pkg.gruntConfig.temp.js %>',
options : {
specs : '<%= pkg.gruntConfig.spec %>',
vendor : ['<%= pkg.gruntConfig.js.jquery %>', '<%= pkg.gruntConfig.js.bindPolyfill %>'],
styles : ['<%= pkg.gruntConfig.css.bootstrap %>', '<%= pkg.gruntConfig.temp.css %>'],
template : '<%= pkg.gruntConfig.tpl.SpecRunner %>'
}
},
template : {
'generate-index-page' : {
options : {
data : {
js : {
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
jquery : '<%= pkg.gruntConfig.js.jquery %>',
slider : '<%= pkg.gruntConfig.temp.js %>'
},
css : {
bootstrap : '<%= pkg.gruntConfig.css.bootstrap %>',
slider : '<%= pkg.gruntConfig.temp.css %>'
}
}
},
files : {
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
}
},
'generate-gh-pages' : {
options : {
data : {
js : {
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
jquery : '<%= pkg.gruntConfig.js.jquery %>',
slider : 'js/bootstrap-slider.js'
},
css : {
bootstrap : '<%= pkg.gruntConfig.css.bootstrap %>',
slider : 'css/bootstrap-slider.css'
}
}
},
files : {
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: '<%= pkg.gruntConfig.js.slider %>',
tasks: ['jshint:js', 'babel', 'jasmine']
},
gruntfile: {
files: '<%= jshint.gruntfile %>',
tasks: ['jshint:gruntfile']
},
spec: {
files: '<%= pkg.gruntConfig.spec %>',
tasks: ['jshint:spec', 'jasmine:src']
},
css: {
files: [
'<%= pkg.gruntConfig.less.slider %>',
'<%= pkg.gruntConfig.less.rules %>',
'<%= pkg.gruntConfig.less.variables %>'
],
tasks: ['less:development']
},
index: {
files: '<%= pkg.gruntConfig.tpl.index %>',
tasks: ['template:generate-index-page']
}
},
connect: {
server: {
options: {
port: "<%= pkg.gruntConfig.devPort %>"
}
}
},
open : {
development : {
path: 'http://localhost:<%= connect.server.options.port %>'
}
},
less: {
options: {
paths: ["bower_components/bootstrap/less"]
},
development: {
files: {
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>'
}
},
production: {
files: {
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>',
}
},
"production-min": {
options: {
yuicompress: true
},
files: {
'<%= pkg.gruntConfig.temp.cssMin %>': '<%= pkg.gruntConfig.less.slider %>'
}
}
},
clean: {
dist: ["dist"],
temp: ["temp"]
},
bump: {
options: {
files: bumpFiles,
updateConfigs: [],
commit: true,
commitMessage: 'Release v%VERSION%',
commitFiles: commitFiles,
createTag: true,
tagName: 'v%VERSION%',
tagMessage: 'Version %VERSION%',
push: false,
pushTo: 'origin'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-template');
grunt.loadNpmTasks('grunt-header');
grunt.loadNpmTasks('grunt-bump');
grunt.loadNpmTasks('grunt-babel');
// Create custom tasks
grunt.registerTask('append-header', ['header', 'clean:temp']);
grunt.registerTask('test', [
'jshint',
'babel',
'less:development',
'jasmine',
'clean:temp'
]);
grunt.registerTask('build', [
'less:development',
'test',
'template:generate-index-page'
]);
grunt.registerTask('build-gh-pages', [
'less:development',
'babel',
'template:generate-gh-pages'
]);
grunt.registerTask('dist', [
'clean:dist',
'less:production',
'less:production-min',
'babel',
'uglify',
'append-header'
]);
grunt.registerTask('development', [
'less:development',
'babel',
'template:generate-index-page',
'connect',
'open:development',
'watch'
]);
grunt.registerTask('production', ['test', 'dist']);
grunt.registerTask('dev', 'development');
grunt.registerTask('prod', 'production');
grunt.registerTask('default', ['build']);
}; // End of module

View File

@@ -0,0 +1,24 @@
----------------------------------------------------------------------
bootstrap-slider is released under the MIT License
Copyright (c) 2015-2016 Kyle Kemp, Rohit Kalkur, and contributors
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,295 @@
bootstrap-slider [![Build Status](https://travis-ci.org/seiyria/bootstrap-slider.png?branch=master)](https://travis-ci.org/seiyria/bootstrap-slider)
================
Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.
Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completly different.
__Please ensure that you are using this library instead of the Petre version before creating issues in the repository Issue tracker!!__
Installation
============
Want to use bower? `bower install seiyria-bootstrap-slider`
Want to use npm? `npm install bootstrap-slider`
Want to get it from a CDN? https://cdnjs.com/libraries/bootstrap-slider
Basic Setup
============
Load the plugin CSS and JavaScript into your web page, and everything should work!
Remember to load the plugin code after loading the Bootstrap CSS and JQuery.
__JQuery is optional and the plugin can operate with or without it.__
Look below to see an example of how to interact with the non-JQuery interface.
Supported Browsers
========
__We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!__
Examples
========
You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/).
Using bootstrap-slider (with JQuery)
======================
### Using `.slider` namespace
Create an input element and call .slider() on it:
```js
// Instantiate a slider
var mySlider = $("input.slider").slider();
// Call a method on the slider
var value = mySlider.slider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.slider('setValue', 5)
.slider('setValue', 7);
```
### Using `.bootstrapSlider` namespace
Create an input element and call .bootstrapSlider() on it:
```js
// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();
// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
```
Using bootstrap-slider (via `data-provide`-API)
======================
Create an input element with the `data-provide="slider"` attribute automatically
turns it into a slider. Options can be supplied via `data-slider-` attributes.
```html
<input
type="text"
name="somename"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>
```
What if there is already a _slider_ plugin bound to the JQuery namespace?
======================
If there is already a JQuery plugin named _slider_ bound to the JQuery namespace, then this plugin will emit a console warning telling you this namespace has already been taken and will encourage you to use the alternate namespace _bootstrapSlider_ instead.
```js
// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();
// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
```
Using bootstrap-slider (without JQuery)
======================
Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.
```js
// Instantiate a slider
var mySlider = new Slider("input.slider", {
// initial options object
});
// Call a method on the slider
var value = mySlider.getValue();
// For non-getter methods, you can chain together commands
mySlider
.setValue(5)
.setValue(7);
```
Using as CommonJS module
=======
bootstrap-slider can be loaded as a CommonJS module via [Browserify](https://github.com/substack/node-browserify), [Webpack](https://github.com/webpack/webpack), or some other build tool.
```js
var Slider = require("bootstrap-slider");
var mySlider = new Slider();
```
How do I exclude the optional JQuery dependency from my build?
=======
### Browserify
__Note that the JQuery dependency is considered to be optional.__ For example, to exclude JQuery from being part of your Browserify build, you would call something like the following (assuming `main.js` is requiring bootstrap-slider as a dependency):
```BASH
browserify -u jquery main.js > bundle.js
```
### Webpack
To exclude JQuery from your Webpack build, you will have to go into the Webpack config file for your specific project and add something like the following to your `resolve.alias` section:
```js
resolve: {
alias: {
"jquery": path.join(__dirname, "./jquery-stub.js");
}
}
```
Then in your project, you will have to create a stub module for jquery that exports a `null` value. Whenever `require("jquery")` is mentioned in your project, it will load this stubbed module.
```js
// Path: ./jquery-stub.js
module.exports = null;
```
### Other
Please see the documentation for the specific module loader you are using to find out how to exclude dependencies.
Options
=======
Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formatter argument - that can not be passed as a data- attribute.
| Name | Type | Default | Description |
| ---- |:----:|:-------:|:----------- |
| id | string | '' | set the id of the slider element when it's created |
| min | float | 0 | minimum possible value |
| max | float | 10 | maximum possible value |
| step | float | 1 | increment step |
| precision | float | number of digits after the decimal of _step_ value | The number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |
| orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal' |
| value | float,array | 5 | initial value. Use array to have a range slider. |
| range | bool | false | make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |
| selection | string | 'before' | selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |
| tooltip | string | 'show' | whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |
| tooltip_split | bool | false | if false show one tootip if true show two tooltips one for each handler |
| tooltip_position | string | null | Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider. |
| handle | string | 'round' | handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |
| reversed | bool | false | whether or not the slider should be reversed |
| enabled | bool | true | whether or not the slider is initially enabled |
| formatter | function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip |
| natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
| ticks | array | [ ] | Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. |
| ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |
| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |
| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |
| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. |
| focus | bool | false | Focus the appropriate slider handle after a value change. |
| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |
Functions
=========
__NOTE:__ Optional parameters are italicized.
| Function | Parameters | Description |
| -------- | ----------- | ----------- |
| getValue | --- | Get the current value from the slider |
| setValue | newValue, _triggerSlideEvent_, _triggerChangeEvent_ | Set a new value for the slider. If optional triggerSlideEvent parameter is _true_, 'slide' events will be triggered. If optional triggerChangeEvent parameter is _true_, 'change' events will be triggered. This function takes `newValue` as either a `Number` or `Array`.|
| getElement | --- | Get the div slider element |
| destroy | --- | Properly clean up and remove the slider instance |
| disable | ---| Disables the slider and prevents the user from changing the value |
| enable | --- | Enables the slider |
| toggle | --- | Toggles the slider between enabled and disabled |
| isEnabled | --- |Returns true if enabled, false if disabled |
| setAttribute | attribute, value | Updates the slider's [attributes](#options) |
| getAttribute | attribute | Get the slider's [attributes](#options) |
| refresh | --- | Refreshes the current slider |
| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked |
| off | eventType, callback | Removes the callback function from the slider event _eventType_ |
| relayout | --- | Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden. |
Events
======
| Event | Description | Value |
| ----- | ----------- | ----- |
| slide | This event fires when the slider is dragged | The new slider value |
| slideStart | This event fires when dragging starts | The new slider value |
| slideStop | This event fires when the dragging stops or has been clicked on | The new slider value |
| change | This event fires when the slider value has changed | An object with 2 properties: "oldValue" and "newValue" |
| slideEnabled | This event fires when the slider is enabled | N/A |
| slideDisabled | This event fires when the slider is disabled | N/A |
How Do I Run This Locally?
======
- Clone the repository
- Run `nvm use` in your Terminal to switch to the proper Node/NPM version
- Once you are on specified Node version, run `npm install`
- Install the Grunt CLI: `npm install grunt-cli -g`
- Type `grunt dev` to launch browser window with Examples page
Grunt Tasks
======
This plugin uses Grunt as its command-line task runner.
To install the Grunt CLI, type `npm install grunt-cli -g`.
To execute any of the commands, type `grunt <task-name>` in your terminal instance.
The following is a list of the commonly-used command line tasks:
* `grunt development`: Generates the `index.html`, compiles the LESS/JS to the `/temp` directory, and launches the index.html in your system's default browser. As changes are made to source code, the
browser window will auto-refresh.
* `grunt production`: Generates the `/dist` directory with minified and unminified assetts.
* `grunt dev`: Alias for `grunt development`
* `grunt prod`: Alias for `grunt production`
* `grunt build`: Transpiles JavaScript source via Babel and compiles LESS source to CSS to `temp` directory.
* `grunt lint`: Runs JSLint on the JavaScript source code.
* `grunt test`: Runs unit tests contained in `/test` directory via Jasmine.
Version Bumping and Publishing (Maintainers Only)
=======
To do the following release tasks:
* bump the version
* publish a new version to NPM
* update the `gh-pages` branch
* push a new `dist` bundle to the `master` branch on the remote `origin`
* push new tags to the remote `origin`
Type the following command:
`npm run release <patch|minor|major>`
If you do not specify a version bump type, the script will automatically defer to a patch bump.
Other Platforms & Libraries
===========================
- [Ruby on Rails](https://github.com/YourCursus/bootstrap-slider-rails)
- [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [#81](https://github.com/seiyria/bootstrap-slider/issues/81))
- [AngularJS](https://github.com/seiyria/angular-bootstrap-slider)
- [EmberJS](https://github.com/lifegadget/ui-slider) ([@ksnyde](https://github.com/ksnyde))
- [ReactJS](https://github.com/brownieboy/react.bootstrap.slidertest)
- [NuGet](https://www.nuget.org/packages/bootstrap-slider/) ([@ChrisMissal](https://github.com/ChrisMissal))
- [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider)
- [Maven](http://mvnrepository.com/artifact/org.webjars.bower/seiyria-bootstrap-slider)
Maintainers
============
- Kyle Kemp
* Twitter: [@seiyria](https://twitter.com/seiyria)
* Github: [seiyria](https://github.com/seiyria)
- Rohit Kalkur
* Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary)
* Github: [rovolution](https://github.com/rovolution)

View File

@@ -0,0 +1,26 @@
{
"name": "seiyria-bootstrap-slider",
"version": "9.1.1",
"homepage": "https://github.com/seiyria/bootstrap-slider",
"authors": [
"Kyle Kemp <kyle@seiyria.com>",
"Rohit Kalkur <rohit.kalkur@gmail.com>"
],
"description": "a slider element for bootstrap 2/3",
"main": [
"dist/bootstrap-slider.js",
"dist/css/bootstrap-slider.css"
],
"keywords": [
"slider",
"bootstrap2",
"bootstrap3",
"bootstrap"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
]
}

View File

@@ -0,0 +1,30 @@
{
"name": "seiyria/bootstrap-slider",
"type": "library",
"version": "9.1.1",
"description": "A less buggy fork of the original bootstrap slider found on http://www.eyecon.ro/ by Stefan Petre. It was forked so we could update the slider since the original wasn't under version control.",
"keywords": ["slider", "css", "bootstrap", "javascript"],
"homepage": "https://github.com/seiyria/bootstrap-slider",
"require": {},
"license": "Apache 2.0",
"authors": [
{
"name": "Kyle Kemp",
"email": "kyle@seiyria.com",
"homepage": "http://seiyria.com",
"role": "Developer"
},
{
"name": "Rohit Kalkur",
"email": "rohit.kalkur@gmail.com",
"homepage": "http://www.rovolutionary.com",
"role": "Developer"
},
{
"name": "Lucas Zardo",
"email": "lucas@deliverymuch.com.br",
"homepage": "https://deliverymuch.com.br",
"role": "Packagist Editor"
}
]
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,94 @@
{
"name": "bootstrap-slider",
"version": "9.1.1",
"description": "Slider view component for Twitter Bootstrap.",
"main": "dist/bootstrap-slider.js",
"style": "dist/css/bootstrap-slider.css",
"scripts": {
"test": "grunt test",
"release": "sh ./scripts/release.sh"
},
"homepage": "http://github.com/seiyria/bootstrap-slider",
"repository": {
"type": "git",
"url": "git://github.com/seiyria/bootstrap-slider.git"
},
"bugs": {
"url": "http://github.com/seiyria/bootstrap-slider/issues"
},
"author": "bootstrap-slider ",
"contributors": [
{
"name": "Kyle Kemp",
"twitter": "@seiyria",
"github": "seiyria"
},
{
"name": "Rohit Kalkur",
"twitter": "@Rovolutionary",
"github": "rovolution"
}
],
"keywords": [
"slider",
"bootstrap",
"twitter",
"slide"
],
"license": "MIT",
"readmeFilename": "README.md",
"gitHead": "67eb8fe3c26205efc94ae95b3ef37a469eef0b81",
"dependencies": {},
"engine": {},
"devDependencies": {
"babel-preset-es2015": "6.3.13",
"bootstrap": "^3.3.6",
"grunt": "0.4.4",
"grunt-babel": "6.0.0",
"grunt-bump": "0.0.16",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-connect": "0.5.0",
"grunt-contrib-jasmine": "0.5.2",
"grunt-contrib-jshint": "0.11.3",
"grunt-contrib-less": "0.7.0",
"grunt-contrib-uglify": "0.2.4",
"grunt-contrib-watch": "0.5.3",
"grunt-header": "1.0.0",
"grunt-open": "0.2.2",
"grunt-template": "0.2.0"
},
"gruntConfig": {
"devPort": 9000,
"js": {
"modernizr": "dependencies/js/modernizr.js",
"jquery": "dependencies/js/jquery.min.js",
"bindPolyfill": "test/phantom_bind_polyfill.js",
"slider": "src/js/bootstrap-slider.js"
},
"less": {
"slider": "src/less/bootstrap-slider.less",
"rules": "src/less/rules.less",
"variables": "src/less/variables.less"
},
"css": {
"bootstrap": "dependencies/css/bootstrap.min.css"
},
"tpl": {
"SpecRunner": "tpl/SpecRunner.tpl",
"index": "tpl/index.tpl"
},
"temp": {
"js": "temp/bootstrap-slider.js",
"jsMin": "temp/bootstrap-slider.min.js",
"css": "temp/bootstrap-slider.css",
"cssMin": "temp/bootstrap-slider.min.css"
},
"dist": {
"js": "dist/bootstrap-slider.js",
"jsMin": "dist/bootstrap-slider.min.js",
"css": "dist/css/bootstrap-slider.css",
"cssMin": "dist/css/bootstrap-slider.min.css"
},
"spec": "test/specs/**/*.js"
}
}

View File

@@ -0,0 +1,72 @@
#!/bin/bash
# Validate arguments
versionBumpType=${1:-patch};
if [ "$versionBumpType" != "major" ] && [ "$versionBumpType" != "minor" ] && [ "$versionBumpType" != "patch" ]; then
echo "Invalid version bump argument: ${versionBumpType}. Option must be one of the following: major, minor, patch"
exit 1
else
echo "Publishing and bumping with ${versionBumpType} version bump"
fi
echo "Running version bump + publish script..."
echo "."
echo "."
echo "Generating /dist and push changes + tags to Github remote 'origin'"
# Checkout master branch
git checkout master
# Version bump
grunt bump-only:"$versionBumpType"
# Generate new dist
grunt prod
# Generate new index.html page
grunt template
# Force add dist contents
git add dist/* --force
# Commit new release tag
grunt bump-commit
# Push commits/tags to master branch on remote 'origin'
git push origin master:master && git push --tags
## Update Github pages
echo "."
echo "."
echo "Updating Github pages"
echo "."
echo "."
# Generate index.html and /temp assetts for GH Pages branch
grunt build-gh-pages
# Create temporary copy of index file
cp index.html index-temp.html
# Checkout to `gh-pages` branch
git checkout -B gh-pages origin/gh-pages
git pull -r origin gh-pages
# Replace current files with temporary files
mv index-temp.html index.html
mv temp/bootstrap-slider.css css/bootstrap-slider.css
mv temp/bootstrap-slider.js js/bootstrap-slider.js
# Remove /temp directory
rm -rf temp
# Stage new files for commit
git add index.html css/bootstrap-slider.css js/bootstrap-slider.js
# Create commit with new files
git commit -m "updates"
# Push new source code to gh-pages branch
git push origin gh-pages:gh-pages -f
# Switch back to master branch
git checkout master
## Publish to NPM
echo "."
echo "."
echo "Publishing to NPM"
echo "."
echo "."
npm publish
# Notify script is complete
echo "."
echo "."
echo "Script complete"
echo ""

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,31 @@
/*! =========================================================
* bootstrap-slider.js
*
* Maintainers:
* Kyle Kemp
* - Twitter: @seiyria
* - Github: seiyria
* Rohit Kalkur
* - Twitter: @Rovolutionary
* - Github: rovolution
*
* =========================================================
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
@import '../../node_modules/bootstrap/less/variables.less'; // Bootstrap variables
@import '../../node_modules/bootstrap/less/mixins.less'; // Bootstrap mixins
@import 'variables.less'; // slider-specific variables
@import 'rules.less'; // slider-specific rules

View File

@@ -0,0 +1,194 @@
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
&.slider-horizontal {
width: @slider-horizontal-width;
height: @slider-line-height;
.slider-track {
height: (@slider-line-height/2);
width: 100%;
margin-top: (-@slider-line-height/4);
top: 50%;
left: 0;
}
.slider-selection, .slider-track-low, .slider-track-high {
height: 100%;
top: 0;
bottom: 0;
}
.slider-tick,
.slider-handle {
margin-left: (-@slider-line-height/2);
&.triangle {
position: relative;
top: 50%;
transform: translateY(-50%);
border-width: 0 (@slider-line-height/2) (@slider-line-height/2) (@slider-line-height/2);
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
}
.slider-tick-container {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.slider-tick-label-container {
white-space: nowrap;
margin-top: @slider-line-height;
.slider-tick-label {
padding-top: @slider-line-height * .2;
display: inline-block;
text-align: center;
}
}
}
&.slider-vertical {
height: @slider-vertical-height;
width: @slider-line-height;
.slider-track {
width: (@slider-line-height/2);
height: 100%;
left: 25%;
top: 0;
}
.slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider-track-low, .slider-track-high {
width: 100%;
left: 0;
right: 0;
}
.slider-tick,
.slider-handle {
margin-top: (-@slider-line-height/2);
&.triangle {
border-width: (@slider-line-height/2) 0 (@slider-line-height/2) (@slider-line-height/2);
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
}
.slider-tick-label-container {
white-space: nowrap;
.slider-tick-label {
padding-left: @slider-line-height * .2;
}
}
}
&.slider-disabled {
.slider-handle {
#gradient > .vertical(#dfdfdf, #bebebe);
}
.slider-track {
#gradient > .vertical(#e5e5e5, #e9e9e9);
cursor: not-allowed;
}
}
input {
display: none;
}
.tooltip {
&.top {
margin-top: -36px;
}
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
.hide {
display: none;
}
}
.slider-track {
position: absolute;
cursor: pointer;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
border-radius: @border-radius-base;
}
.slider-selection {
position: absolute;
#gradient > .vertical(#f9f9f9, #f5f5f5);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
border-radius: @border-radius-base;
}
.slider-selection.tick-slider-selection {
#gradient > .vertical(#89cdef, #81bfde);
}
.slider-track-low, .slider-track-high {
position: absolute;
background: transparent;
.box-sizing(border-box);
border-radius: @border-radius-base;
}
.slider-handle {
position: absolute;
top: 0;
width: @slider-line-height;
height: @slider-line-height;
background-color: #337ab7;
#gradient > .vertical(#149bdf, #0480be);
filter: none;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
border: 0px solid transparent;
&.round {
border-radius: 50%;
}
&.triangle {
background: transparent none;
}
&.custom {
background: transparent none;
&::before{
line-height: @slider-line-height;
font-size: 20px;
content: '\2605'; //unicode star character
color: #726204;
}
}
}
.slider-tick {
position: absolute;
width: @slider-line-height;
height: @slider-line-height;
#gradient.vertical(#f9f9f9, #f5f5f5);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
filter: none;
opacity: 0.8;
border: 0px solid transparent;
&.round {
border-radius: 50%;
}
&.triangle {
background: transparent none;
}
&.custom {
background: transparent none;
&::before{
line-height: @slider-line-height;
font-size: 20px;
content: '\2605'; //unicode star character
color: #726204;
}
}
&.in-selection {
#gradient > .vertical(#89cdef, #81bfde);
opacity: 1;
}
}

View File

@@ -0,0 +1,3 @@
@slider-line-height: @line-height-computed;
@slider-horizontal-width: 210px;
@slider-vertical-height: 210px;

View File

@@ -0,0 +1,25 @@
@mixin slider_background-image ($colorstart:#f5f5f5, $colorend:#f9f9f9, $backcolor: #f7f7f7) {
background-color: $backcolor;
background-image: -moz-linear-gradient(top, $colorstart, $colorend);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($colorstart), to($colorend));
background-image: -webkit-linear-gradient(top, $colorstart, $colorend);
background-image: -o-linear-gradient(top, $colorstart, $colorend);
background-image: linear-gradient(to bottom, $colorstart, $colorend);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$colorstart}', endColorstr='#{$colorend}',GradientType=0);
}
@mixin slider_box-sizing ($value) {
-webkit-box-sizing: $value;
-moz-box-sizing: $value;
box-sizing: $value;
}
@mixin slider_box-shadow ($value...) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
@mixin slider_border-radius ($value) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
border-radius: $value;
}

View File

@@ -0,0 +1,199 @@
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
&.slider-horizontal {
width: $slider-horizontal-width;
height: $slider-line-height;
.slider-track {
height: $slider-line-height/2;
width: 100%;
margin-top: -$slider-line-height/4;
top: 50%;
left: 0;
}
.slider-selection, .slider-track-low, .slider-track-high {
height: 100%;
top: 0;
bottom: 0;
}
.slider-tick,
.slider-handle {
margin-left: -$slider-line-height/2;
&.triangle {
position: relative;
top: 50%;
transform: translateY(-50%);
border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
}
.slider-tick-container {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.slider-tick-label-container {
white-space: nowrap;
.slider-tick-label {
margin-top: $slider-line-height * 1.2;
display: inline-block;
text-align: center;
}
}
}
&.slider-vertical {
height: $slider-vertical-height;
width: $slider-line-height;
.slider-track {
width: $slider-line-height/2;
height: 100%;
margin-left: -$slider-line-height/4;
left: 25%;
top: 0;
}
.slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider-track-low, .slider-track-high {
width: 100%;
left: 0;
right: 0;
}
.slider-tick,
.slider-handle {
margin-top: -$slider-line-height/2;
&.triangle {
border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider-tick-label-container {
white-space: nowrap;
.slider-tick-label {
padding-left: $slider-line-height * .2;
}
}
}
}
&.slider-disabled {
.slider-handle {
@include slider_background-image(#dfdfdf, #bebebe, #f7f7f7);
}
.slider-track {
@include slider_background-image(#e5e5e5, #e9e9e9, #f7f7f7);
cursor: not-allowed;
}
}
input {
display: none;
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
.tooltip {
&.top {
margin-top: -36px;
}
}
.hide {
display: none;
}
}
.slider-track {
position: absolute;
cursor: pointer;
@include slider_background-image(#f5f5f5, #f9f9f9, #f7f7f7);
@include slider_box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
@include slider_border-radius($slider-border-radius);
}
.slider-selection {
position: absolute;
@include slider_background-image(#f9f9f9, #f5f5f5, #f7f7f7);
@include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
@include slider_box-sizing(border-box);
@include slider_border-radius($slider-border-radius);
}
.slider-selection.tick-slider-selection {
@include slider_background-image(#89cdef, #81bfde, #f7f7f7);
}
.slider-track-low, .slider-track-high {
position: absolute;
background: transparent;
@include slider_box-sizing(border-box);
border-radius: slider_border-radius($slider-border-radius);
}
.slider-handle {
position: absolute;
top: 0;
width: $slider-line-height;
height: $slider-line-height;
background-color: #337ab7;
@include slider_background-image(#149bdf, #0480be, #0e90d2);
@include slider_box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
border: 0px solid transparent;
&.round {
@include slider_border-radius($slider-line-height);
}
&.triangle {
background: transparent none;
}
&.custom {
background: transparent none;
&::before{
line-height: $slider-line-height;
font-size: 20px;
content: '\2605'; //unicode star character
color: #726204;
}
}
}
.slider-tick {
position: absolute;
width: $slider-line-height;
height: $slider-line-height;
@include slider_background-image(#f9f9f9, #f5f5f5, #f7f7f7);
@include slider_box-shadow(inset 0 -1px 0 rgba(0,0,0,0.15));
@include slider_box-sizing(border-box);
filter: none;
opacity: 0.8;
border: 0px solid transparent;
&.round {
border-radius: 50%;
}
&.triangle {
background: transparent none;
}
&.custom {
background: transparent none;
&::before{
line-height: $slider-line-height;
font-size: 20px;
content: '\2605'; //unicode star character
color: #726204;
}
}
&.in-selection {
@include slider_background-image(#89cdef, #81bfde, #f7f7f7);
opacity: 1;
}
}

View File

@@ -0,0 +1,4 @@
$slider-line-height: 20px !default;
$slider-border-radius: 4px !default;
$slider-horizontal-width: 210px !default;
$slider-vertical-height: 210px !default;

View File

@@ -0,0 +1,13 @@
/*
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* SCSS File by Detlef Beyer
*/
@import "variables";
@import "mixins";
@import "rules";

View File

@@ -0,0 +1,41 @@
/////////////////////////////////////
// Taken from ariya/phantomjs#10522
//
Function.prototype.bind = function bind(that) { // .length is 1
var target = this;
if (typeof target != "function") {
throw new TypeError("Function.prototype.bind called on incompatible " + target);
}
var args = Array.prototype.slice.call(arguments, 1); // for normal call
var bound = function () {
if (this instanceof bound) {
var result = target.apply(
this,
args.concat(Array.prototype.slice.call(arguments))
);
if (Object(result) === result) {
return result;
}
return this;
} else {
return target.apply(
that,
args.concat(Array.prototype.slice.call(arguments))
);
}
};
function Empty() {};
if(target.prototype) {
Empty.prototype = target.prototype;
bound.prototype = new Empty();
Empty.prototype = null;
}
return bound;
};

View File

@@ -0,0 +1,67 @@
describe("Accessibility Tests", function() {
var sliderA;
var sliderB;
it("Should have the slider role", function() {
sliderA = $('#accessibilitySliderA').slider();
sliderB = $('#accessibilitySliderB').slider();
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('role')).toBe('slider');
expect($sliderElementB.find('.min-slider-handle').attr('role')).toBe('slider');
expect($sliderElementB.find('.max-slider-handle').attr('role')).toBe('slider');
expect($sliderElementA.find('.tooltip-main').attr('role')).toBe('presentation');
expect($sliderElementA.find('.tooltip-min').attr('role')).toBe('presentation');
expect($sliderElementA.find('.tooltip-max').attr('role')).toBe('presentation');
});
it('Should have an aria-labelledby attribute', function() {
sliderA = $('#accessibilitySliderA').slider();
sliderB = $('#accessibilitySliderB').slider();
expect($(sliderA.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
expect($(sliderB.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
expect($(sliderB.slider('getElement')).find('.max-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelB');
});
it('Should have an aria-valuemax and aria-valuemin value', function() {
sliderA = $('#accessibilitySliderA').slider({ min: 5, max: 10 });
sliderB = $('#accessibilitySliderB').slider({ min: 5, max: 10 });
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemin')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemax')).toBe('10');
});
it('Should have an aria-valuenow with the current value', function() {
sliderA = $('#accessibilitySliderA').slider({ min: 5, value: 7 });
sliderB = $('#accessibilitySliderB').slider({ min: 5, value: [2, 8] });
var $sliderElementA = $(sliderA.slider('getElement'));
var $sliderElementB = $(sliderB.slider('getElement'));
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('7');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('8');
// Change the value and check if aria-valuenow is still the same
sliderA.slider('setValue', 1);
sliderB.slider('setValue', [4, 9]);
expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('9');
});
afterEach(function() {
if(sliderA) { sliderA.slider('destroy'); }
if(sliderB) { sliderB.slider('destroy'); }
});
});

View File

@@ -0,0 +1,21 @@
describe("Auto register data-provide Tests", function() {
it("checks that the autoregister Slider was automatically registerd", function() {
var $el = $("#autoregisterSlider");
var sliderInstancesExists = $el.siblings().is(".slider");
expect(sliderInstancesExists).toBeTruthy();
var sliderInstancesCount = $el.siblings(".slider").length;
expect(sliderInstancesCount).toEqual(1);
});
it("checks that the autoregistered Slider can be accessed", function() {
var $el = $("#autoregisterSlider");
expect($el.slider('getValue')).toBe(1);
$el.slider('setValue', 2);
expect($el.slider('getValue')).toBe(2);
});
});

View File

@@ -0,0 +1,73 @@
/*
*************************
Conflicting Options Tests
*************************
This spec has tests for checking if two or more options do not conflict with one another
As option conflicts are reported and resolved, write tests for them here.
This will help ensure that they are accounted for and do not arise again.
*/
describe("Conflicting Options Tests", function() {
var testSlider;
it("Should have the value zero when it is slided to zero", function() {
testSlider = $("#testSlider1").slider({
value: 0,
step: 1
});
var flag = false;
var mouse = document.createEvent('MouseEvents');
testSlider.on('slide', function(slideEvt) {
expect(slideEvt.value).toBe(0);
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("should set the `precision` to be the number of digits after the decimal of the `step` (assuming no `precision` is specified)", function() {
// Create Slider
testSlider = $("#testSlider1").slider({
value: 8.115,
step: 0.01
});
// Retrieve slider value
var value = testSlider.slider("getValue");
// Run tests
expect(value).toBe(8.12);
});
it("should properly allow for a slider that has `range` set to true and `reversed` set to true", function() {
// Create Slider
testSlider = new Slider("#testSlider1", {
reversed: true,
range: true,
min: -5,
max: 20
});
// Set Value
testSlider.setValue([-5, 20]);
// Assert that selection slider section is 100% of slider width
var selectedSectionWidth = testSlider.sliderElem.querySelector(".slider-selection").style.width;
expect(selectedSectionWidth).toBe("100%");
// Cleanup
testSlider.destroy();
testSlider = null;
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});

View File

@@ -0,0 +1,334 @@
describe("'destroy()' Method tests", function() {
var testSlider;
it("removes the extra DOM elements associated with a slider", function() {
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider"
});
testSlider.destroy();
var sliderParentElement = $("#testSlider1").parent('div.slider').length;
var sliderChildrenElements = $("#testSlider1").siblings('div.slider-track, div.tooltip').length;
expect(sliderParentElement).toBe(0);
expect(sliderChildrenElements).toBe(0);
});
describe("unbinds all slider events", function() {
var flag, evtName;
beforeEach(function() {
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider"
});
flag = false;
});
it("unbinds from 'slideStart' event", function() {
evtName = 'slideStart';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slide' event", function() {
evtName = 'slide';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slideStop' event", function() {
evtName = 'slideStop';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
it("unbinds from 'slideChange' event", function() {
evtName = 'slideChange';
$("#destroyMethodTestSlider").on(evtName, function() {
flag = true;
});
testSlider.destroy();
$("#destroyMethodTestSlider").trigger(evtName);
expect(flag).toBeFalsy();
});
});
describe("DOM event listener removal tests", function() {
describe("When tooltips are always hidden for single value sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "hide"
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always shown for single value sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always"
});
});
it("does not try to remove 'focus' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1 when tooltip is always shown for single handle sliders", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider is always shown for single handle slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider is always shown for single handle slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always hidden for range sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always",
value: [2,5]
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'focus' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'blur' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
describe("When tooltips are always shown for range sliders", function() {
beforeEach(function() {
// Create slider
testSlider = new Slider("#testSlider1", {
id: "destroyMethodTestSlider",
tooltip: "always",
value: [2,5]
});
});
it("does not try to remove 'focus' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'focus' event listener from handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("focus", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle1, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle1.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'blur' event listener from handle1 and handle2", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.handle2, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.handle2.removeEventListener).not.toHaveBeenCalledWith("blur", undefined, false);
});
it("does not try to remove 'mouseenter' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseenter", undefined, false);
});
it("does not try to remove 'mouseleave' event listener from slider", function() {
// Set up spy on 'removeEventListener'
spyOn(testSlider.sliderElem, "removeEventListener");
// Destroy slider
testSlider.destroy();
// Assert
expect(testSlider.sliderElem.removeEventListener).not.toHaveBeenCalledWith("mouseleave", undefined, false);
});
});
});
});

View File

@@ -0,0 +1,77 @@
describe("Dragging handles tests", function() {
var testSlider;
describe("Dragging handles over each other", function() {
it("should swap reliably given imprecision", function() {
testSlider = new Slider(document.getElementById("testSlider1"), {
ticks: [0, 1, 2, 3, 4, 5, 6],
value: [4, 5],
step: 1,
range: true,
});
var mouseEventArguments = [
'mousemove', // type
true, // canBubble
true, // cancelable
document, // view,
0, // detail
0, // screenX
0, // screenY
undefined, // clientX
testSlider.sliderElem.offsetTop, // clientY,
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey,
0, // button
null // relatedTarget
];
// Create mouse event with position to the left of problem tick
var mouseLeft = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[4].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseLeft.initMouseEvent.apply(mouseLeft, mouseEventArguments);
// Create mouse event with position on problem tick
var mouseOverlap = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[5].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseOverlap.initMouseEvent.apply(mouseOverlap, mouseEventArguments);
// Create mouse event with position to the right of problem tick
var mouseRight = document.createEvent('MouseEvents');
mouseEventArguments[7] = testSlider.ticks[6].offsetLeft + testSlider.sliderElem.offsetLeft; // clientX
mouseRight.initMouseEvent.apply(mouseRight, mouseEventArguments);
// Simulate drag without swapping
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulate left over right drag with imprecision in reported percentage
testSlider.mousemove(mouseRight);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 6]);
// Simulate handle overlap
testSlider.mousemove(mouseOverlap);
expect(testSlider._state.dragged).toBe(1);
expect(testSlider.getValue()).toEqual([5, 5]);
// Simulator handle overlap with click
testSlider.mousemove(mouseOverlap);
testSlider.mousedown(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// Simulate right over left drag with imprecision in reported percentage
testSlider.mousemove(mouseLeft);
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
// End with mouse up
testSlider.mouseup();
expect(testSlider._state.dragged).toBe(0);
expect(testSlider.getValue()).toEqual([4, 5]);
});
});
afterEach(function() {
if(testSlider) {
if(testSlider instanceof Slider) { testSlider.destroy(); }
testSlider = null;
}
});
});

View File

@@ -0,0 +1,152 @@
describe("Element Data Attributes Tests", function() {
var slider;
it("reads the 'data-slider-min' property and sets it on slider", function() {
slider = $("#minSlider").slider();
slider.slider('setValue', 1);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-max' property and sets it on slider", function() {
slider = $("#maxSlider").slider();
slider.slider('setValue', 10);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-step' property and sets it on slider", function() {
slider = $("#stepSlider").slider();
//TODO How do you test this? Maybe manually trigger a slideChange event?
expect(true).toBeTruthy();
});
it("reads the 'data-slider-precision' property (which is set to 2) and sets it on slider", function() {
slider = $("#precisionSlider").slider();
slider.slider('setValue', 8.115);
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(8.12);
});
it("reads the 'data-slider-orientation' property and sets it on slider", function() {
slider = $("#orientationSlider").slider();
var orientationIsVertical = $("#orientationSlider").data('slider').options.orientation === 'vertical';
expect(orientationIsVertical).toBeTruthy();
});
it("reads the 'data-slider-value' property and sets it on slider", function() {
slider = $("#valueSlider").slider();
var sliderValue = slider.slider('getValue');
expect(sliderValue).toBe(5);
});
it("reads the 'data-slider-ticks-labels' property and sets it on slider", function() {
slider = $("#sliderWithTickMarksAndLabels").slider();
var ticksLabelsAreCorrect = arraysEqual($("#sliderWithTickMarksAndLabels").data('slider').options.ticks_labels, ['$0', '$100', '$200', '$300', '$400']);
expect(ticksLabelsAreCorrect).toBeTruthy();
function arraysEqual(a, b) {
if (a === b) {return true;}
if (a == null || b == null){return false;}
if (a.length !== b.length) {return false;}
for (var i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) {return false;}
}
return true;
}
});
it("reads the 'data-slider-selection' property and sets it on slider", function() {
slider = $("#selectionSlider").slider({
id: "selectionSliderId"
});
slider.slider('setValue', 0);
var newSliderValue = slider.slider('getValue');
expect(newSliderValue).toBe(0);
});
it("reads the 'data-slider-tooltip' property and sets it on slider", function() {
slider = $("#tooltipSlider").slider({
id: "tooltipSliderElem"
});
var tooltipIsHidden = $("#tooltipSliderElem").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
describe("reads the 'data-slider-handle' property and sets it on slider", function() {
it("applies 'triangle' class tag to handle", function() {
slider = $("#handleSlider").slider({
id: "handleSliderElem"
});
var handleIsSetToTriangle = $("#handleSliderElem div.slider-handle").hasClass("triangle");
expect(handleIsSetToTriangle).toBeTruthy();
});
it("applies 'custom' class tag to handle", function() {
slider = $("#customHandleSlider").slider({
id: "customHandleSliderElem"
});
var handleIsSetToCustom = $("#customHandleSliderElem div.slider-handle").hasClass("custom");
expect(handleIsSetToCustom).toBeTruthy();
});
});
it("reads the 'data-slider-reversed' property and sets it on slider", function() {
slider = $("#reversedSlider").slider({
id: "reversedSliderElem"
});
slider.slider('setValue', 10);
var sliderSelectionHeightAtMaxValue = $("#reversedSliderElem div.slider-track").children("div.slider-selection").width();
expect(sliderSelectionHeightAtMaxValue).toBe(0);
});
it("reads the 'data-slider-enabled' property and sets it on slider", function() {
slider = $("#disabledSlider").slider();
var isEnabled = slider.slider('isEnabled');
expect(isEnabled).not.toBeTruthy();
});
it("always sets the 'value' attribute of the original <input> element to be the current slider value", function() {
var $slider = $("#testSliderGeneric");
var val = 7;
slider = $slider.slider({
value: val
});
var sliderValueAttrib = $slider.val();
var valAsString = val.toString();
expect(sliderValueAttrib).toBe(valAsString);
});
it("always sets the 'data-value' attribute of the original <input> element to be the current slider value", function() {
// Setup
var sliderInputElem = document.getElementById("testSliderGeneric");
var val = 7;
slider = new Slider(sliderInputElem, {
value: val
});
// Assert
expect(sliderInputElem.dataset.value).toBe( val.toString() );
// Cleanup
slider.destroy();
slider = null;
});
afterEach(function() {
if(slider) { slider.slider('destroy'); }
});
});

View File

@@ -0,0 +1,347 @@
describe("Event Tests", function() {
var testSlider, flag, mouse;
beforeEach(function() {
flag = false;
mouse = document.createEvent('MouseEvents');
});
describe("JQuery version", function() {
beforeEach(function() {
testSlider = $("#testSlider2").slider({
value: 1
});
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
describe("Mouse Events", function() {
it("'slideStart' event is triggered properly and can be binded to", function() {
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event is triggered properly and can be binded to", function() {
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event sets the right value on the input", function() {
testSlider.on('slide', function() {
flag = true;
expect(isNaN(testSlider.val())).not.toBeTruthy();
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).toBeTruthy();
});
it("'slide' event value and input value properties are synchronous", function() {
testSlider.on('slide', function(e) {
flag = true;
expect(e.value.toString()).toEqual(this.value);
});
testSlider.slider("setValue", 3, true, false);
expect(flag).toBeTruthy();
});
it("'change' event value and input value properties are synchronous", function() {
testSlider.on('change', function(e) {
flag = true;
expect(e.value.newValue.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
it("'slideStop' event is triggered properly and can be binded to", function() {
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup(mouse);
expect(flag).toBeTruthy();
});
it("slider should not have duplicate events after calling 'refresh'", function() {
flag = 0;
testSlider.on('slideStop', function() {
flag += 1;
});
testSlider.slider('refresh');
testSlider.data('slider')._mouseup();
expect(flag).toEqual(1);
});
describe("Disabled Slider Event Tests", function() {
beforeEach(function() {
testSlider.slider('disable');
});
it("should not trigger 'slideStart' event when disabled", function() {
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(mouse);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slide' event when disabled", function() {
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(mouse);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slideStop' event when disabled", function() {
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).not.toBeTruthy();
});
});
});
describe("Touch Events", function() {
var touch;
beforeEach(function() {
touch = document.createEvent('Event');
var dummyTouchEvent = document.createEvent('MouseEvents');
touch.touches = [dummyTouchEvent];
window.ontouchstart = true;
});
afterEach(function() {
window.ontouchstart = null;
});
it("'slideStart' event is triggered properly and can be binded to", function() {
touch.initEvent("touchstart");
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(touch);
expect(flag).toBeTruthy();
});
it("'slide' event is triggered properly and can be binded to", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(touch);
expect(flag).toBeTruthy();
});
it("'slide' event sets the right value on the input", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
expect(isNaN(testSlider.val())).not.toBeTruthy();
});
testSlider.data('slider')._mousemove(touch);
expect(flag).toBeTruthy();
});
it("'slide' event value and input value properties are synchronous", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function(e) {
flag = true;
expect(e.value.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, true, false);
expect(flag).toBeTruthy();
});
it("'change' event value and input value properties are synchronous", function() {
touch.initEvent("touchmove");
testSlider.on('change', function(e) {
flag = true;
expect(e.value.newValue.toString()).toEqual(testSlider.val());
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
it("'slideStop' event is triggered properly and can be binded to", function() {
touch.initEvent("touchstop");
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).toBeTruthy();
});
it("slider should not have duplicate events after calling 'refresh'", function() {
touch.initEvent("touchstop");
flag = 0;
testSlider.on('slideStop', function() {
flag += 1;
});
testSlider.slider('refresh');
testSlider.data('slider')._mouseup();
expect(flag).toEqual(1);
});
it("slider should not bind multiple touchstart events after calling 'refresh'", function() {
touch.initEvent("touchstart", true, true);
flag = 0;
testSlider.on('slideStart', function() {
flag += 1;
});
testSlider.slider('refresh');
$('.slider .slider-handle').get(0).dispatchEvent(touch);
expect(flag).toEqual(1);
});
describe("Disabled Slider Event Tests", function() {
beforeEach(function() {
testSlider.slider('disable');
});
it("should not trigger 'slideStart' event when disabled", function() {
touch.initEvent("touchstart");
testSlider.on('slideStart', function() {
flag = true;
});
testSlider.data('slider')._mousedown(touch);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slide' event when disabled", function() {
touch.initEvent("touchmove");
testSlider.on('slide', function() {
flag = true;
});
testSlider.data('slider')._mousemove(touch);
expect(flag).not.toBeTruthy();
});
it("should not trigger 'slideStop' event when disabled", function() {
touch.initEvent("touchend");
testSlider.on('slideStop', function() {
flag = true;
});
testSlider.data('slider')._mouseup();
expect(flag).not.toBeTruthy();
});
});
});
describe("Enabled/Disabled tests", function() {
it("'slideDisabled' event is triggered properly and can be binded to", function() {
testSlider.on('slideDisabled', function() {
flag = true;
});
testSlider.slider('disable');
expect(flag).toBeTruthy();
});
it("'slideDisabled' event is triggered properly and can be binded to", function() {
testSlider.on('slideEnabled', function() {
flag = true;
});
testSlider.slider('disable');
testSlider.slider('enable');
expect(flag).toBeTruthy();
});
it("'change' event is triggered properly and can be binded to", function() {
testSlider.on('change', function() {
flag = true;
});
testSlider.slider("setValue", 3, false, true);
expect(flag).toBeTruthy();
});
});
}); // End of JQuery version tests
describe("CommonJS version", function() {
describe("Event repetition tests", function() {
var testSlider, numTimesFired;
beforeEach(function() {
testSlider = new Slider("#testSlider2");
numTimesFired = 0;
});
afterEach(function() {
testSlider.destroy();
});
it("'slide' event is triggered only once per slide action", function() {
testSlider.on('slide', function() {
numTimesFired++;
});
testSlider._mousemove(mouse);
expect(numTimesFired).toEqual(1);
});
it("'slideStart' event is triggered only once per slide action", function() {
testSlider.on('slideStart', function() {
numTimesFired++;
});
testSlider._mousedown(mouse);
expect(numTimesFired).toEqual(1);
});
it("'slideStop' event is triggered only once per slide action", function() {
testSlider.on('slideStop', function() {
numTimesFired++;
});
testSlider._mouseup(mouse);
expect(numTimesFired).toEqual(1);
});
it("'change' event is triggered only once per value change action", function() {
testSlider.on('change', function() {
numTimesFired++;
});
testSlider.setValue(3, false, true);
expect(numTimesFired).toEqual(1);
});
});
}); // End of common JS tests
}); // End of spec

View File

@@ -0,0 +1,67 @@
/*
******************
Focus Option Tests
******************
This spec has tests for checking proper behavior of the focus option.
*/
describe("Focus Option Tests", function() {
var testSlider;
var simulateMousedown = function(target, pos) {
var myEvent = document.createEvent("MouseEvents");
myEvent.initEvent("mousedown", true, true);
myEvent.pageX = pos;
myEvent.pageY = pos;
target.dispatchEvent(myEvent);
};
it("handle should not be focused after value change when 'focus' is false", function() {
testSlider = $("#testSlider1").slider({
min : 0,
max : 10,
value: 0,
focus: false,
id : "testSlider"
});
var hasFocus;
$("#testSlider").find(".min-slider-handle").focus(function() {
hasFocus = true;
});
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
expect(hasFocus).toBe(undefined);
});
it("handle should be focused after value change when 'focus' is true", function() {
testSlider = $("#testSlider1").slider({
min : 0,
max : 10,
value: 0,
focus: true,
id : "testSlider"
});
var hasFocus;
$("#testSlider").find(".min-slider-handle").focus(function() {
hasFocus = true;
});
simulateMousedown($("#testSlider").find(".slider-track-high").get(0), 1000);
expect(hasFocus).toBe(true);
});
afterEach(function() {
if (testSlider) {
testSlider.slider("destroy");
testSlider = null;
}
});
});

View File

@@ -0,0 +1,455 @@
describe("Keyboard Support Tests", function() {
var testSlider,
handle1,
handle2,
keyboardEvent,
initialMinVal = 0,
initialMaxVal = 10,
initialStepVal = 1,
initialSliderVal = 5;
describe("Clicking on slider handle automatically gives it focus", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider'
});
handle1 = $("#testSlider").find(".slider-track > .slider-handle:first");
});
it("clicking on handle1 gives focus to handle1", function() {
var focusWasTriggered = false;
handle1.focus(function() {
focusWasTriggered = true;
expect(focusWasTriggered).toBeTruthy();
});
handle1.mousedown();
});
});
describe("When slider handle has TAB focus", function() {
it("should display it's tooltip if 'tooltip' option is set to 'show'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'show'
});
handle1 = $("#testSlider").find(".slider-handle:first");
// Check for no tooltip before focus
var tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeFalsy();
handle1.focus();
// Tooltip should be present after focus
tooltipIsShown = $("#testSlider").find("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
it("should not display it's tooltip if 'tooltip' option is set to 'hide'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'hide'
});
handle1 = $("#testSlider").find(".slider-track > .slider-handle:first");
// Check for hidden tooltip before focus
var tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
handle1.focus();
// Tooltip should remain hidden after focus
tooltipIsHidden = $("#testSlider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
it("should not affect the tooltip display if 'tooltip' option is set to 'always'", function() {
testSlider = $("#testSlider1").slider({
id: 'testSlider',
tooltip: 'always'
});
handle1 = $("#testSlider").find(".slider-track > .slider-handle:first");
var $tooltip = $("#testSlider").children("div.tooltip");
// Check for shown tooltip before focus
var tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
handle1.focus();
// Tooltip should remain present after focus
tooltipIsShown = $tooltip.hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
});
describe("For horizontal sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'horizontal',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider .min-slider-handle");
handle1.focus();
// Create keyboard event
keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = $("#testSlider1").slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For vertical sliders where its handle has focus", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
orientation: 'vertical',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves down by the 'step' value when the LEFT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the RIGHT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves down by the 'step' value when the DOWN arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves up by the 'step' value when the UP arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a reversed slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
reversed: true,
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal
});
// Focus on handle1
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the left by the 'step' value when the LEFT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the RIGHT arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the left by the 'step' value when the DOWN arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 40;
handle1[0].dispatchEvent(keyboardEvent);
});
it("moves to the right by the 'step' value when the UP arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 38;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("For a range slider (regardless of 'orientation')", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: [initialSliderVal, initialSliderVal]
});
});
describe("when handle1 tries to overtake handle2 from the left", function() {
beforeEach(function() {
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("handle2 moves to the right by the step value", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal + initialStepVal;
expect(sliderValue[1]).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
it("handle1's value remains unchanged", function() {
var sliderValue = testSlider.slider('getValue');
handle1.on("keydown", function() {
expect(sliderValue[0]).toBe(initialSliderVal);
});
keyboardEvent.keyCode = keyboardEvent.which = 39;
handle1[0].dispatchEvent(keyboardEvent);
});
});
describe("when handle2 tries to overtake handle1 from the right", function() {
beforeEach(function() {
handle2 = $("#testSlider").find(".slider-track > .slider-handle:eq( 1 )");
handle2.focus();
});
it("handle1 moves to the left by the step value", function() {
handle2.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = initialSliderVal - initialStepVal;
expect(sliderValue[0]).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
it("handle2's value remains unchanged", function() {
var sliderValue = testSlider.slider('getValue');
handle2.on("keydown", function() {
expect(sliderValue[1]).toBe(initialSliderVal);
});
keyboardEvent.keyCode = keyboardEvent.which = 37;
handle1[0].dispatchEvent(keyboardEvent);
});
});
});
describe("For the natural arrow keys", function() {
var testCases = [{
reversed: false,
keyEvent: 37,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: true,
keyEvent: 37,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'left'
}, {
reversed: false,
keyEvent: 39,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: true,
keyEvent: 39,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'horizontal',
key: 'right'
}, {
reversed: false,
keyEvent: 38,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: true,
keyEvent: 38,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'up'
}, {
reversed: false,
keyEvent: 40,
expectedSliderValue: initialSliderVal + initialStepVal,
orientation: 'vertical',
key: 'down'
}, {
reversed: true,
keyEvent: 40,
expectedSliderValue: initialSliderVal - initialStepVal,
orientation: 'vertical',
key: 'down'
}];
testCases.forEach(function(testCase) {
describe("A"+((testCase.reversed)? " reversed" : "")+testCase.orientation+" slider is used for the arrow keys", function() {
beforeEach(function() {
// Initialize the slider
testSlider = $("#testSlider1").slider({
id: 'testSlider',
min: initialMinVal,
max: initialMaxVal,
step: initialStepVal,
value: initialSliderVal,
natural_arrow_keys: true,
reversed: testCase.reversed,
orientation: testCase.orientation
});
handle1 = $("#testSlider").find(".slider-handle:first");
handle1.focus();
});
it("moves to the "+testCase.key+" by the 'step' value when the "+testCase.key+" arrow key is pressed", function() {
handle1.on("keydown", function() {
var sliderValue = testSlider.slider('getValue');
var expectedSliderValue = testCase.expectedSliderValue;
expect(sliderValue).toBe(expectedSliderValue);
});
keyboardEvent.keyCode = keyboardEvent.which = testCase.keyEvent;
handle1[0].dispatchEvent(keyboardEvent);
});
});
});
});
afterEach(function() {
if(testSlider) { testSlider.slider('destroy'); }
});
});

View File

@@ -0,0 +1,101 @@
/*
*************************
Logarithmic Scale Tests
*************************
*/
describe("Slider with logarithmic scale tests", function() {
var testSlider;
it("Should properly position the slider", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 10000,
scale: 'logarithmic',
value: 100 // This should be at 50%
});
var expectedPostition = 210 / 2 + 'px';
var handle = $("#testSlider1").siblings('div.slider').find('.min-slider-handle');
expect(handle.css('left')).toBe(expectedPostition);
});
it("Should properly position the tick marks", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 100,
scale: 'logarithmic',
ticks: [0,10,20,50,100]
});
// Position expected for the '10' tick
var expectedTickOnePosition = 210 / 2 + 'px'; //should be at 50%
var handle = $("#testSlider1").siblings('div.slider').find(".slider-tick").eq(1);
expect(handle.css('left')).toBe(expectedTickOnePosition);
});
it("Should use step size when navigating the keyboard", function() {
testSlider = $("#testSlider1").slider({
min: 0,
max: 10000,
scale: 'logarithmic',
value: 100,
step: 5
});
// Focus on handle1
var handle1 = $("#testSlider1").siblings('div.slider:first').find('.slider-handle');
handle1.focus();
// Create keyboard event
var keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
var keyPresses = 0;
handle1.on("keydown", function() {
keyPresses++;
var value = $("#testSlider1").slider('getValue');
expect(value).toBe(100 + keyPresses*5);
});
keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
for (var i = 0; i < 5; i++) {
handle1[0].dispatchEvent(keyboardEvent);
}
});
it("Step size should be honored with mouse movements", function() {
testSlider = $("#testSlider1").slider({
min: 50,
max: 10000,
scale: 'logarithmic',
value: 100,
step: 100
});
var mouse = document.createEvent('MouseEvents');
var dataSlider = testSlider.data('slider');
var pos = (dataSlider.sliderElem[dataSlider.sizePos] / 2 +
dataSlider._state.offset[dataSlider.stylePos]);
mouse.initMouseEvent(
'mousedown', true, true, window, 1, pos,
dataSlider._state.offset['top'], pos, dataSlider._state.offset['top'],
false, false, false, false, 0, null);
dataSlider._mousedown(mouse);
/* Precise center value would have be 707. It should be rounded to
* 750. */
expect(testSlider.slider('getValue')).toBe(750);
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});

View File

@@ -0,0 +1,224 @@
/*
**********************
Left/Right Track Tests
**********************
This spec has tests for checking that the widths of the left and right
segments are the correct widths and colors, based on their CSS.
*/
describe("Low/High Track Tests", function() {
var unstyledID = "low-high-slider";
var styledID = "low-high-slider-styled";
var testSlider;
describe("Single-value sliders, no styling", function() {
var id = unstyledID;
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: 0,
max: 10,
value: 5
});
});
it("low track width is zero", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
expect($(leftTrack).css("width")).toBe("0px");
});
it("high track width is 50%", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
});
it("high track is transparent", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Single-value sliders, with styling", function() {
var id = styledID;
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: 0,
max: 10,
value: 5
});
});
it("low track width is zero", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
expect($(leftTrack).css("width")).toBe("0px");
});
it("high track width is 50%", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
expect($(rightTrack).css("width")).toBe((trackWidth / 2) + "px");
});
it("high track is red", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
expect(rightColor).toBe("rgb(255, 0, 0)");
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Range sliders, no styling", function() {
var id = unstyledID;
var values = {
min: 0,
max: 10,
values: [ 4, 6 ]
};
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: values.min,
max: values.max,
range: true,
value: values.values
});
});
it("low track width is correct", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var trackWidth = leftTrack.parent().width();
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
});
it("high track width is correct", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
});
it("low track is transparent", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var leftColor = leftTrack.css("background-color");
var isTransparent = leftColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
it("high track is transparent", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
var isTransparent = rightColor.match(/rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, 0\)/);
expect(isTransparent).toBeTruthy();
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
describe("Range sliders, with styling", function() {
var id = styledID;
var values = {
min: 0,
max: 10,
values: [ 4, 6 ]
};
beforeEach(function() {
testSlider = $("#testSlider1").slider({
id: id,
min: values.min,
max: values.max,
range: true,
value: values.values
});
});
it("low track width is correct", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var trackWidth = leftTrack.parent().width();
var expectedWidth = ((values.values[0] - values.min) / (values.max - values.min)) * trackWidth;
expect($(leftTrack).css("width")).toBe(expectedWidth + "px");
});
it("high track width is correct", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var trackWidth = rightTrack.parent().width();
var expectedWidth = ((values.max - values.values[1]) / (values.max - values.min)) * trackWidth;
expect($(rightTrack).css("width")).toBe(expectedWidth + "px");
});
it("low track is green", function()
{
var leftTrack = $("#" + id + " .slider-track-low");
var leftColor = leftTrack.css("background-color");
expect(leftColor).toBe("rgb(0, 255, 0)");
});
it("high track is red", function()
{
var rightTrack = $("#" + id + " .slider-track-high");
var rightColor = rightTrack.css("background-color");
expect(rightColor).toBe("rgb(255, 0, 0)");
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});
});

View File

@@ -0,0 +1,82 @@
describe("Namespace Tests", function() {
var sourceJS = "temp/bootstrap-slider.js";
it("should always set the plugin namespace to 'bootstrapSlider'", function() {
var scriptLoaded;
runs(function() {
$.getScript(sourceJS, function() {
scriptLoaded = true;
});
});
waitsFor(function() {
return scriptLoaded === true;
});
runs(function() {
expect($.fn.bootstrapSlider).toBeDefined();
});
});
it("should set the plugin namespace to 'slider' if the namespace is available", function() {
var scriptLoaded;
runs(function() {
$.getScript(sourceJS, function() {
scriptLoaded = true;
});
});
waitsFor(function() {
return scriptLoaded === true;
});
runs(function() {
expect($.fn.slider).toBeDefined();
});
});
it("should print a console warning if the 'slider' namespace is already bound", function() {
var scriptLoaded;
$.fn.slider = function() {};
spyOn(window.console, "warn");
runs(function() {
$.getScript(sourceJS, function() {
scriptLoaded = true;
});
});
waitsFor(function() {
return scriptLoaded === true;
});
runs(function() {
var expectedWarningMessage = "bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead.";
expect(window.console.warn).toHaveBeenCalledWith(expectedWarningMessage);
});
});
afterEach(function() {
/*
Set the namespaces back to undefined and reload slider
So that namespace is returned to $.fn.slider
*/
var scriptLoaded;
runs(function() {
$.fn.bootstrapSlider = undefined;
$.fn.slider = undefined;
$.getScript(sourceJS, function() {
scriptLoaded = true;
});
});
waitsFor(function() {
return scriptLoaded === true;
});
});
});

View File

@@ -0,0 +1,75 @@
describe("Orientation Tests", function() {
var testSlider;
var sliderHandleTopPos;
var sliderHandleLeftPos;
describe("Vertical", function() {
beforeEach(function() {
testSlider = new Slider("#orientationSlider", {
id: "orientationSliderId",
orientation: "vertical",
min: 0,
max: 10,
value: 5
});
var sliderHandleEl = document.querySelector("#orientationSliderId .slider-handle");
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
});
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
});
it("slides up when handle moves upwards", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos - 100;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toBeLessThan(5);
});
it("slides down when handle moves downwards", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos + 100;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toBeGreaterThan(5);
});
});
}); // End of spec

View File

@@ -0,0 +1,616 @@
describe("Public Method Tests", function() {
var testSlider;
describe("slider constructor", function() {
it("reads and sets the 'id' attribute of the slider instance that is created", function() {
var sliderId = "mySlider";
testSlider = $("#testSlider1").slider({
id : sliderId
});
var sliderInstanceHasExpectedId = $("#testSlider1").siblings("div.slider").is("#" + sliderId);
expect(sliderInstanceHasExpectedId).toBeTruthy();
});
it("generates multiple slider instances from selector", function() {
$(".makeSlider").slider();
var sliderInstancesExists = $(".makeSlider").siblings().is(".slider");
expect(sliderInstancesExists).toBeTruthy();
var sliderInstancesCount = $(".makeSlider").siblings(".slider").length;
expect(sliderInstancesCount).toEqual(2);
});
it("reads and sets the 'min' option properly", function() {
var minVal = -5;
testSlider = $("#testSlider1").slider({
min : minVal
});
testSlider.slider('setValue', minVal);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(minVal);
});
it("reads and sets the 'max' option properly", function() {
var maxVal = 15;
testSlider = $("#testSlider1").slider({
max : maxVal
});
testSlider.slider('setValue', maxVal);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(maxVal);
});
describe("reads and sets the 'step' option properly", function() {
// TODO: Don't really know how to properly test this
expect(true).toBeTruthy();
});
it("reads and sets the 'precision' option properly", function() {
testSlider = $("#testSlider1").slider({
precision: 2
});
testSlider.slider('setValue', 8.115);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(8.12);
});
it("reads and sets the 'orientation' option properly", function() {
var orientationVal = "vertical";
testSlider = $("#testSlider1").slider({
orientation : orientationVal
});
var orientationClassApplied = $("#testSlider1").siblings("div.slider").hasClass("slider-vertical");
expect(orientationClassApplied).toBeTruthy();
});
it("reads and sets the 'value' option properly", function() {
var val = 8;
testSlider = $("#testSlider1").slider({
value : val
});
testSlider.slider('setValue', val);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(val);
});
it("reads and sets the 'selection' option properly", function() {
var selectionVal = "after",
maxSliderVal = 10;
testSlider = $("#testSlider1").slider({
selection : selectionVal
});
testSlider.slider('setValue', maxSliderVal);
var sliderSelectionWidthAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
expect(sliderSelectionWidthAtMaxValue).toBe(0);
});
it("reads and sets the 'handle' option properly", function() {
var handleVal = "triangle";
testSlider = $("#testSlider1").slider({
handle : handleVal
});
var handleIsSetToTriangle = $("#testSlider1").siblings(".slider").children("div.slider-handle").hasClass("triangle");
expect(handleIsSetToTriangle).toBeTruthy();
});
it("reads and sets the 'reversed' option properly", function() {
var reversedVal = true,
maxSliderVal = 10;
testSlider = $("#testSlider1").slider({
reversed : reversedVal
});
testSlider.slider('setValue', maxSliderVal);
var sliderSelectionHeightAtMaxValue = $("#testSlider1").siblings(".slider").children("div.slider-track").children("div.slider-selection").width();
expect(sliderSelectionHeightAtMaxValue).toBe(0);
});
/* TODO: Fix this test! It keeps throwing a weird bug where is says '955' instead of '9' for the value */
// it("reads and sets the 'formatter' option properly", function() {
// var tooltipFormatter = function(value) {
// return 'Current value: ' + value;
// };
// testSlider = $("#testSlider1").slider({
// formatter : tooltipFormatter
// });
// testSlider.slider('setValue', 9);
// var tooltipMessage = $("#testSlider1").siblings(".slider").find("div.tooltip").children("div.tooltip-inner").text();
// var expectedMessage = tooltipFormatter(9);
// expect(tooltipMessage).toBe(expectedMessage);
// });
it("reads and sets the 'enabled' option properly", function() {
testSlider = $("#testSlider1").slider({
enabled: false
});
var isEnabled = testSlider.slider('isEnabled');
expect(isEnabled).not.toBeTruthy();
});
describe("reads and sets the 'tooltip' option properly", function() {
it("tooltip is not shown if set to 'hide'", function() {
testSlider = $("#testSlider1").slider({
tooltip : "hide"
});
var tooltipIsHidden = testSlider.siblings(".slider").children("div.tooltip").hasClass("hide");
expect(tooltipIsHidden).toBeTruthy();
});
it("tooltip is shown during sliding if set to 'show'", function() {
testSlider = $("#testSlider1").slider({
tooltip : "show"
});
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
expect(tooltipIsHidden).toBeTruthy();
// Trigger hover
var mouseenterEvent = document.createEvent("Events");
mouseenterEvent.initEvent("mouseenter", true, true);
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
expect(tooltipIsShownAfterSlide).toBeTruthy();
});
it("tooltip is shown on mouse over and hides correctly after mouse leave", function() {
testSlider = $("#testSlider1").slider({
tooltip : "show"
});
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
expect(tooltipIsHidden).toBeTruthy();
// Trigger hover
var mouseenterEvent = document.createEvent("Events");
mouseenterEvent.initEvent("mouseenter", true, true);
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
var tooltipIsShownAfterSlide = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
expect(tooltipIsShownAfterSlide).toBeTruthy();
// Trigger leave
var mouseleaveEvent = document.createEvent("Events");
mouseleaveEvent.initEvent("mouseleave", true, true);
testSlider.data('slider').sliderElem.dispatchEvent(mouseleaveEvent);
var tooltipIsAgainHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
expect(tooltipIsAgainHidden).toBeTruthy();
});
it("tooltip is always shown if set to 'always'", function() {
testSlider = $("#testSlider1").slider({
tooltip : "always"
});
var tooltipIsShown = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
expect(tooltipIsShown).toBeTruthy();
});
it("defaults to 'show' option if invalid value is passed", function() {
testSlider = $("#testSlider1").slider({
tooltip : "invalid option value"
});
var tooltipIsHidden = !($("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in"));
expect(tooltipIsHidden).toBeTruthy();
// Trigger hover
var mouseenterEvent = document.createEvent("Events");
mouseenterEvent.initEvent("mouseenter", true, true);
testSlider.data('slider').sliderElem.dispatchEvent(mouseenterEvent);
var tooltipIsShownOnHover = $("#testSlider1").siblings(".slider").children("div.tooltip").hasClass("in");
expect(tooltipIsShownOnHover).toBeTruthy();
});
});
});
describe("'setValue()' tests", function() {
var formatInvalidInputMsg = function(invalidValue) { return "Invalid input value '" + invalidValue + "' passed in"; };
describe("if slider is a single value slider", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider();
});
it("properly sets the value of the slider when given a numeric value", function() {
var valueToSet = 5;
testSlider.slider('setValue', valueToSet);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(valueToSet);
});
it("if a value passed in is greater than the max (10), the slider only goes to the max", function() {
var maxValue = 10,
higherThanSliderMaxVal = maxValue + 5;
testSlider.slider('setValue', higherThanSliderMaxVal);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(maxValue);
});
it("if a value passed in is less than the min (0), the slider only goes to the min", function() {
var minValue = 0,
lowerThanSliderMaxVal = minValue - 5;
testSlider.slider('setValue', lowerThanSliderMaxVal);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(minValue);
});
it("sets the 'value' property of the slider <input> element", function() {
var value = 9;
testSlider.slider('setValue', value);
var currentValue = document.querySelector("#testSlider1").value;
currentValue = parseFloat(currentValue);
expect(currentValue).toBe(value);
});
it("sets the 'value' attribute of the slider <input> element", function() {
var value = 9;
testSlider.slider('setValue', value);
var currentValue = document.querySelector("#testSlider1").getAttribute("value");
currentValue = parseFloat(currentValue);
expect(currentValue).toBe(value);
});
describe("when an invalid value type is passed in", function() {
var invalidValue;
beforeEach(function() {
invalidValue = "a";
});
it("throws an error and does not alter the slider value", function() {
var originalSliderValue = testSlider.slider('getValue');
var settingValue = function() {
testSlider.slider('setValue', invalidValue);
};
expect(settingValue).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(originalSliderValue);
});
});
});
describe("if slider is a range slider", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider({
value : [3, 8]
});
});
it("properly sets the values if both within the max and min", function() {
var valuesToSet = [5, 7];
testSlider.slider('setValue', valuesToSet);
var sliderValues = testSlider.slider('getValue');
expect(sliderValues[0]).toBe(valuesToSet[0]);
expect(sliderValues[1]).toBe(valuesToSet[1]);
});
describe("caps values to the min if they are set to be less than the min", function() {
var minValue = -5,
otherValue = 7;
it("first value is capped to min", function() {
testSlider.slider('setValue', [minValue, otherValue]);
var sliderValues = testSlider.slider('getValue');
expect(sliderValues[0]).toBe(0);
});
it("second value is capped to min", function() {
testSlider.slider('setValue', [otherValue, minValue]);
var sliderValues = testSlider.slider('getValue');
expect(sliderValues[1]).toBe(0);
});
});
describe("caps values to the max if they are set to be higher than the max", function() {
var maxValue = 15,
otherValue = 7;
it("first value is capped to max", function() {
testSlider.slider('setValue', [maxValue, otherValue]);
var sliderValues = testSlider.slider('getValue');
expect(sliderValues[0]).toBe(10);
});
it("second value is capped to max", function() {
testSlider.slider('setValue', [otherValue, maxValue]);
var sliderValues = testSlider.slider('getValue');
expect(sliderValues[1]).toBe(10);
});
});
describe("if either value is of invalid type", function() {
var invalidValue = "a",
otherValue = 7;
it("first value is of invalid type", function() {
var setSliderValueFn = function() {
testSlider.slider('setValue', [invalidValue, otherValue]);
};
expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
});
it("second value is of invalid type", function() {
var setSliderValueFn = function() {
testSlider.slider('setValue', [otherValue, invalidValue]);
};
expect(setSliderValueFn).toThrow(new Error( formatInvalidInputMsg(invalidValue) ));
});
});
});
describe("triggerSlideEvent argument", function() {
it("if triggerSlideEvent argument is true, the 'slide' event is triggered", function() {
var testSlider = $("#testSlider1").slider({
value : 3
});
var newSliderVal = 5;
testSlider.on('slide', function(evt) {
expect(newSliderVal).toEqual(evt.value);
});
testSlider.slider('setValue', newSliderVal, true);
});
it("if triggerSlideEvent argument is false, the 'slide' event is not triggered", function() {
var newSliderVal = 5;
var slideEventTriggered = false;
var testSlider = $("#testSlider1").slider({
value : 3
});
testSlider.on('slide', function() {
slideEventTriggered = true;
});
testSlider.slider('setValue', newSliderVal, false);
expect(slideEventTriggered).toEqual(false);
});
});
describe("triggerChangeEvent argument", function() {
it("if triggerChangeEvent argument is true, the 'change' event is triggered", function() {
var testSlider = $("#testSlider1").slider({
value : 3
});
var newSliderVal = 5;
testSlider.on('change', function(evt) {
expect(newSliderVal).toEqual(evt.value.newValue);
});
testSlider.slider('setValue', newSliderVal, true);
});
it("if triggerChangeEvent argument is false, the 'change' event is not triggered", function() {
var changeEventTriggered = false;
var testSlider = $("#testSlider1").slider({
value : 3
});
testSlider.on('change', function() {
changeEventTriggered = true;
});
testSlider.slider('setValue', 5, false);
expect(changeEventTriggered).toEqual(false);
});
});
});
describe("'getValue()' tests", function() {
it("returns the current value of the slider", function() {
testSlider = $("#testSlider1").slider();
var valueToSet = 5;
testSlider.slider('setValue', valueToSet);
var sliderValue = testSlider.slider('getValue');
expect(sliderValue).toBe(valueToSet);
});
});
describe("'enable()' tests", function() {
it("correctly enables a slider", function() {
testSlider = $("#testSlider1").slider({
enabled: false
});
testSlider.slider("enable");
var isEnabled = testSlider.slider("isEnabled");
expect(isEnabled).toBeTruthy();
});
});
describe("'disable()' tests", function() {
it("correctly disable a slider", function() {
testSlider = $("#testSlider1").slider();
testSlider.slider("disable");
var isEnabled = testSlider.slider("isEnabled");
expect(isEnabled).not.toBeTruthy();
});
});
describe("'toggle()' tests", function() {
it("correctly enables a disabled slider", function() {
testSlider = $("#testSlider1").slider({
enabled: false
});
testSlider.slider("toggle");
var isEnabled = testSlider.slider("isEnabled");
expect(isEnabled).toBeTruthy();
});
it("correctly disables an enabled slider", function() {
testSlider = $("#testSlider1").slider();
testSlider.slider("toggle");
var isEnabled = testSlider.slider("isEnabled");
expect(isEnabled).not.toBeTruthy();
});
});
describe("'isEnabled()' tests", function() {
it("returns true for an enabled slider", function() {
testSlider = $("#testSlider1").slider({
id: "enabled",
enabled: true
});
var isEnabled = testSlider.slider("isEnabled");
var $slider = testSlider.siblings("#enabled");
var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("#enabled");
expect(isEnabled).toBeTruthy();
expect(hasDisabledClass).not.toBeTruthy();
});
it("returns false for a disabled slider", function() {
testSlider = $("#testSlider1").slider({
id: "disabled",
enabled: false
});
var isEnabled = testSlider.slider("isEnabled");
var $slider = testSlider.siblings("#disabled");
var hasDisabledClass = $slider.hasClass("slider") && $slider.hasClass("slider-disabled");
expect(isEnabled).not.toBeTruthy();
expect(hasDisabledClass).toBeTruthy();
});
});
it("get attribute", function() {
testSlider = $("#testSlider1").slider();
var sliderMaxValue = testSlider.slider('getAttribute', 'max');
expect(sliderMaxValue).toBe(10);
});
it("changes slider from basic to range", function() {
testSlider = $("#makeRangeSlider").slider();
testSlider.slider('setAttribute', 'range', true).slider('refresh');
var isRangeSlider = $("#changeOrientationSlider").parent("div.slider").find('.slider-handle').last().hasClass('hide');
expect(isRangeSlider).toBeFalsy();
});
it("setAttribute: changes the 'data-slider-orientation' property from horizontal to vertical", function() {
testSlider = $("#changeOrientationSlider").slider({
id: "changeOrientationSliderElem"
});
testSlider.slider('setAttribute', 'orientation', 'vertical').slider('refresh');
var $slider = $("#changeOrientationSliderElem");
var orientationClassApplied = $slider.hasClass("slider-vertical");
expect(orientationClassApplied).toBeTruthy();
});
it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will re-adjust the margin-left of the tooltip", function() {
// Setup
testSlider = new Slider("#relayoutSliderInput", {
id: "relayoutSlider",
min: 0,
max: 10,
value: 5
});
var mainTooltipDOMRef = document.querySelector("#relayoutSlider .tooltip-main");
var relayoutSliderContainerDOMRef = document.querySelector("#relayoutSliderContainer");
var tooltipMarginLeft;
// Main tooltip margin-left offset should be 0 on slider intialization
tooltipMarginLeft = parseFloat(mainTooltipDOMRef.style.marginLeft);
expect(tooltipMarginLeft).toBe(0);
// Show slider and call relayout()
relayoutSliderContainerDOMRef.style.display = "block";
testSlider.relayout();
// Main tooltip margin-left offset should re-adjust to be > 0
tooltipMarginLeft = Math.abs( parseFloat(mainTooltipDOMRef.style.marginLeft) );
expect(tooltipMarginLeft).toBeGreaterThan(0);
});
it("relayout: if slider is not displayed on initialization and then displayed later on, relayout() will re-adjust the tick label width", function() {
// Setup
testSlider = new Slider("#relayoutSliderInputTickLabels", {
id: "relayoutSliderTickLabels",
min: 0,
max: 10,
ticks: [0, 5, 10],
ticks_labels: ['low', 'mid', 'high'],
value: 5
});
var $ticks = $('#relayoutSliderTickLabels').find('.slider-tick-label');
// Tick-Width should be 0 on slider intialization
var i, $tick;
for (i = 0; i < $ticks.length; i++) {
$tick = $($ticks[i]);
expect( parseInt($tick.css('width')) ).toBe(0);
}
// Show slider and call relayout()
$('#relayoutSliderContainerTickLabels').css('display', 'block');
testSlider.relayout();
$('#relayoutSliderContainerTickLabels').css('display', 'none');
// Tick-Width should re-adjust to be > 0
for (i = 0; i < $ticks.length; i++) {
$tick = $($ticks[i]);
expect( parseInt($tick.css('width')) ).toBeGreaterThan(0);
}
});
afterEach(function() {
if(testSlider) {
if(testSlider instanceof jQuery) { testSlider.slider('destroy'); }
if(testSlider instanceof Slider) { testSlider.destroy(); }
testSlider = null;
}
});
});

View File

@@ -0,0 +1,34 @@
describe("refresh() Method Tests", function() {
var testSlider;
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
});
it("does not convert a non-range slider into a range slider when invoked", function() {
// Initialize non-range slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5
});
// Assert that slider is non-range slider
var initialValue = testSlider.getValue();
var sliderIsRangeValue = initialValue instanceof Array;
expect(sliderIsRangeValue).toBeFalsy();
// Invoke refresh() method
testSlider.refresh();
// Assert that slider remains a non-range slider
var afterRefreshValue = testSlider.getValue();
sliderIsRangeValue = afterRefreshValue instanceof Array;
expect(sliderIsRangeValue).toBeFalsy();
});
}); // End of spec

View File

@@ -0,0 +1,70 @@
describe("Resize Tests", function() {
var testSlider, dataSlider;
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
dataSlider = null;
}
});
describe("Tick Labels", function() {
var $el, options;
beforeEach(function() {
var tick = [0, 100, 200, 300, 400];
options = {
ticks: tick,
ticks_labels: ['$0', '$100', '$200', '$300', '$400']
};
});
it("should resize the tick labels when horizontal", function() {
$el = $("#resizeSlider");
testSlider = $el.slider(options);
dataSlider = testSlider.data('slider');
$('.slider').width(210);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(52);
$('.slider').width(120);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(30);
$('.slider').width(900);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(1)').width()).toBe(225);
$('.slider').width(210);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').width()).toBe(52);
});
it('should resize the tick labels when vertical', function() {
var $el = $("#resizeSliderVertical");
testSlider = $el.slider(options);
dataSlider = testSlider.data('slider');
$('.slider').height(210);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(52);
$('.slider').height(120);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(30);
$('.slider').height(900);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(1)').height()).toBe(225);
$('.slider').height(210);
dataSlider._resize();
expect($el.siblings('div.slider').find('.slider-tick-label:eq(0)').height()).toBe(52);
});
});
}); // End of spec

View File

@@ -0,0 +1,83 @@
describe("Scrollable body test", function() {
var testSlider;
var sliderHandleTopPos;
var sliderHandleLeftPos;
describe("Vertical scrolled body", function() {
beforeEach(function() {
testSlider = new Slider("#veryLowPositionedSlider", {
id: "scrollTestSliderId",
orientation: "vertical",
min: 0,
max: 20,
value: 10,
step: 1
});
document.body.scrollTop = 2000;
var sliderHandleEl = document.querySelector("#scrollTestSliderId .slider-handle");
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
});
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
document.body.scrollTop = 0;
});
// The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
// but difference between initial and final slider value is not equal (6 and 4).
// It happens because we don't 'hit' the center of handle but the top left corner.
it("slides up when handle moves upwards after scroll page down", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos - 50;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toEqual(4);
});
it("slides down when handle moves downwards after scroll page down", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos + 50;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toEqual(14);
});
});
});

View File

@@ -0,0 +1,85 @@
describe("Scrollable test", function() {
var testSlider;
var sliderHandleTopPos;
var sliderHandleLeftPos;
var scrollableContainer;
describe("Vertical inside scrollable container", function() {
beforeEach(function() {
testSlider = new Slider("#ex1", {
id: "ex1Slider",
orientation: "vertical",
min: 0,
max: 20,
value: 10,
step: 1
});
scrollableContainer = document.querySelector('#scrollable-div');
scrollableContainer.scrollTop = 145;
var sliderHandleEl = document.querySelector("#ex1Slider .slider-handle");
var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
});
afterEach(function() {
if(testSlider) {
testSlider.destroy();
}
});
// The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
// but difference between initial and final slider value is not equal (6 and 4).
// It happens because we don't 'hit' the center of handle but the top left corner.
it("slides up when handle moves upwards inside scrollable element after scrolling", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos - 50;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toEqual(4);
});
it("slides down when handle moves downwards inside scrollable element after scrolling", function() {
var mousemove = document.createEvent('MouseEvents');
var mousemoveX = sliderHandleLeftPos;
var mousemoveY = sliderHandleTopPos + 50;
var newSliderValue;
mousemove.initMouseEvent(
"mousedown",
true /* bubble */,
true /* cancelable */,
window,
null,
0, 0, mousemoveX, mousemoveY, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/,
null
);
testSlider.sliderElem.dispatchEvent(mousemove);
newSliderValue = testSlider.getValue();
expect(newSliderValue).toEqual(14);
});
});
}); // End of spec

View File

@@ -0,0 +1,107 @@
describe("TickClickingBehavior", function() {
var SLIDER_ID = "testSlider1";
var slider;
var options;
describe('ticks start with 0', function() {
beforeEach(function() {
options = {
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 25, 50, 75, 100],
step: 1,
value: 4
};
slider = new Slider(document.getElementById(SLIDER_ID), options);
});
it("Should set slider to corresponding value when ticks are clicked", function() {
for (var i = 0; i < options.ticks.length; i++) {
clickTickAtIndexAndVerify(slider, i);
}
});
});
describe('ticks start with positive value', function() {
beforeEach(function() {
options = {
ticks: [1, 2, 3, 4, 5],
ticks_positions: [0, 25, 50, 75, 100],
step: 1,
value: 5
};
slider = new Slider(document.getElementById(SLIDER_ID), options);
});
it("Should set slider to corresponding value when ticks are clicked", function() {
for (var i = 0; i < options.ticks.length; i++) {
clickTickAtIndexAndVerify(slider, i);
}
});
});
describe('ticks start with negative value', function() {
beforeEach(function() {
options = {
ticks: [-5, -4, -3, -2, -1],
ticks_positions: [0, 25, 50, 75, 100],
step: 1,
value: -1
};
slider = new Slider(document.getElementById(SLIDER_ID), options);
});
it("Should set slider to corresponding value when ticks are clicked", function() {
for (var i = 0; i < options.ticks.length; i++) {
clickTickAtIndexAndVerify(slider, i);
}
});
});
afterEach(function() { slider.destroy(); });
// helper functions
function clickTickAtIndexAndVerify(slider, tickIndex) {
var sliderLeft = slider.sliderElem.offsetLeft;
var tickLeft = slider.ticks[tickIndex].offsetLeft;
var handleHalfWidth = $('.slider-handle.round').width() / 2;
var offsetX = sliderLeft + tickLeft + handleHalfWidth;
var offsetY = slider.sliderElem.offsetTop;
var mouseEvent = getMouseDownEvent(offsetX, offsetY);
slider.mousedown(mouseEvent);
slider.mouseup();
var expectedValue = slider.options.ticks[tickIndex];
expect(slider.getValue()).toBe(expectedValue);
}
function getMouseDownEvent(offsetXToClick, offsetYToClick) {
var args = [
'mousedown', // type
true, // canBubble
true, // cancelable
document, // view,
0, // detail
0, // screenX
0, // screenY
offsetXToClick, // clientX
offsetYToClick, // clientY,
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey,
0, // button
null // relatedTarget
];
var event = document.createEvent('MouseEvents');
event.initMouseEvent.apply(event, args);
return event;
}
});

View File

@@ -0,0 +1,74 @@
/*
Tick label Render Tests - Tests that labels render in correct positions in both horizontal and vertical orientation
*/
describe("Tick Label Render Tests", function() {
var testSliderH;
var testSliderV;
//setup
beforeEach(function() {
testSliderH = $('#testSlider1').slider({
id: 'slider1',
ticks: [0, 1, 2],
ticks_labels:['x', 'y', 'z'],
orientation:'horizontal'
});
testSliderV = $('#testSlider2').slider({
id: 'slider2',
ticks: [0, 1, 2],
ticks_labels:['x', 'y', 'z'],
orientation:'vertical'
});
});
//cleanup
afterEach(function() {
testSliderH.slider('destroy');
testSliderH = null;
testSliderV.slider('destroy');
testSliderV = null;
});
//e.g. testOrientation('horizontal', 2) will test the horizontal
//code path using control with the id testSlider2
function testOrientation(orientation) {
var sliderIndex = orientation.toLowerCase() === 'horizontal' ? 1 : 2;
var isVertical = orientation.toLowerCase() === 'horizontal' ? false : true;
var sliderId = '#slider' + sliderIndex;
//check elements exist
it("Tick labels are rendered - " + orientation, function() {
expect($(sliderId).length).toBe(1);
var length = $(sliderId + ' .slider-tick-label').length;
expect(length).toBe(3);
});
//check elements exist within the bounds of the slider
it("Tick labels render inside the slider's bounds" + orientation, function() {
expect($(sliderId).length).toBe(1);
var sliderRect = $(sliderId)[0].getBoundingClientRect();
var tickLabels = $(sliderId + ' .slider-tick-label');
for (var i = 0; i < tickLabels.length; i++) {
var labelRect = tickLabels[i].getBoundingClientRect();
if (isVertical) {
expect(labelRect.left).toBeGreaterThan(sliderRect.left);
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
} else {
expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy();
expect(labelRect.width / 2 + labelRect.left >= sliderRect.left).toBeTruthy();
}
}
});
}
//test both horizontal and vertical orientations
testOrientation('horizontal');
testOrientation('vertical');
});

View File

@@ -0,0 +1,194 @@
/*
*************************
Tick Marks Tests
*************************
Verify that the number of tick marks matches what you set
Verify the tick marks are at the correct intervals
*/
describe("Slider with ticks tests", function() {
var testSlider;
it("Should have the number of tick marks you specify", function() {
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500]
});
var numTicks = $("#testSlider1").siblings('div.slider').find('.slider-tick').length;
expect(numTicks).toBe(5);
});
it("Should be at the default positions", function() {
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500]
});
$("#testSlider1").siblings('div.slider').find('.slider-tick').each(function(i) {
expect(this.style.left).toBe(100 * i / 4.0 + '%');
});
});
it("Should be at the positions you specify", function() {
var tickPositions = [0, 10, 20, 30, 100];
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500],
ticks_positions: tickPositions
});
$("#testSlider1").siblings('div.slider').find('.slider-tick').each(function(i) {
expect(this.style.left).toBe(tickPositions[i] + '%');
});
});
it("Should have the tick labels you specify", function() {
var tickLabels = ['$0', '$100', '$200', '$300', '$400'];
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500],
ticks_labels: tickLabels
});
var tickLabelElements = $("#testSlider1").siblings('div.slider').find('.slider-tick-label');
expect(tickLabelElements.length).toBe(tickLabels.length);
tickLabelElements.each(function(i) {
expect(this.innerHTML).toBe(tickLabels[i]);
});
});
it("Should overwrite the min/max values", function() {
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500],
min: 15000,
max: 25000
});
expect(testSlider.slider('getAttribute','min')).toBe(100);
expect(testSlider.slider('getAttribute','max')).toBe(500);
});
it("Should not snap to a tick within tick bounds when using the keyboard navigation", function() {
testSlider = $("#testSlider1").slider({
ticks: [100, 200, 300, 400, 500],
ticks_snap_bounds: 30
});
// Focus on handle1
var handle1 = $("#testSlider1").siblings('div.slider:first').find('.slider-handle');
handle1.focus();
// Create keyboard event
var keyboardEvent = document.createEvent("Events");
keyboardEvent.initEvent("keydown", true, true);
var keyPresses = 0;
handle1.on("keydown", function() {
keyPresses++;
var value = $("#testSlider1").slider('getValue');
expect(value).toBe(100 + keyPresses);
});
keyboardEvent.keyCode = keyboardEvent.which = 39; // RIGHT
for (var i = 0; i < 5; i++) {
handle1[0].dispatchEvent(keyboardEvent);
}
});
it("Should show the correct tick marks as 'in-selection', according to the `selection` property", function() {
var options = {
ticks: [100, 200, 300, 400, 500],
value: 250,
selection: 'after'
},
$el = $("#testSlider1");
testSlider = $el.slider(options);
expect($el.siblings('div.slider').find('.in-selection').length).toBe(3);
testSlider.slider('destroy');
options.selection = 'before';
testSlider = $el.slider(options);
expect($el.siblings('div.slider').find('.in-selection').length).toBe(2);
});
it("Should reverse the tick labels if `reversed` option is set to true", function() {
var ticks = [100, 200, 300, 400, 500];
var ticksLabels = ["$100", "$200", "$300", "$400", "$500"];
// Create reversed slider
testSlider = $("#testSlider1").slider({
id: "testSlider1Ref",
ticks: ticks,
ticks_labels: ticksLabels,
ticks_snap_bounds: 30,
reversed: true
});
// Assert that tick marks are reversed
var tickLabelsFromDOM = $("#testSlider1Ref .slider-tick-label-container")
.children(".slider-tick-label")
.map(function() { return $(this).text(); })
.toArray();
var reversedTickLabels = ticksLabels.reverse();
expect(tickLabelsFromDOM).toEqual(reversedTickLabels);
});
it("Should reverse the tick labels if `reversed` option is set to true and `ticks_positions` is specified", function() {
var ticks = [0, 100, 200, 300, 400];
var ticksLabels = ["$0", "$100", "$200", "$300", "$400"];
// Create reversed slider
testSlider = $("#testSlider1").slider({
id: "testSlider1Ref",
ticks: ticks,
ticks_labels: ticksLabels,
ticks_positions: [0, 30, 70, 90, 100],
ticks_snap_bounds: 20,
value: 200,
reversed: true
});
// Assert that tick marks are reversed
var tickLabelsFromDOM = $("#testSlider1Ref .slider-tick-label-container .slider-tick-label")
.sort(function(tickLabelElemA, tickLabelElemB) {
var leftOffsetA = $(tickLabelElemA).position().left;
var leftOffsetB = $(tickLabelElemB).position().left;
return leftOffsetA - leftOffsetB;
})
.map(function() { return $(this).text(); })
.toArray();
var reversedTickLabels = ticksLabels.reverse();
expect(tickLabelsFromDOM).toEqual(reversedTickLabels);
});
it("should wrap all of the ticks within a div with classname '.slider-tick-container'", function() {
// Create the slider with ticks
var ticks = [0, 100, 200, 300, 400, 600];
var $sliderDOMRef = $("#testSlider1");
// Create reversed slider
testSlider = $sliderDOMRef.slider({
id: "testSlider1Ref",
ticks: ticks,
ticks_positions: [0, 30, 70, 90, 100, 130]
});
// Assert that the ticks are children of the container element
var numTicks = $sliderDOMRef.siblings('div.slider').find('.slider-tick-container > .slider-tick').length;
expect(numTicks).toBe(ticks.length);
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});

View File

@@ -0,0 +1,194 @@
/*
*************************
tooltip_position Option Test
*************************
*/
describe("'tooltip_position' Option tests", function() {
var testSlider;
afterEach(function() {
if(testSlider) {
testSlider.destroy();
testSlider = null;
}
});
describe("vertical slider tests", function() {
it("should be aligned to the left of the handle if set to 'left'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "left",
orientation: "vertical"
});
// Extract needed references/values
var mainTooltipHasClassLeft = testSlider.tooltip.classList.contains("left");
// Assert
expect(mainTooltipHasClassLeft).toBeTruthy();
expect(testSlider.tooltip.style.right).toBe("100%");
});
it("should be aligned to the right of the handle if set to 'right'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "right",
orientation: "vertical"
});
// Extract needed references/values
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
// Assert
expect(mainTooltipHasClassRight).toBeTruthy();
expect(testSlider.tooltip.style.left).toBe("100%");
});
it("should default to 'right' if tooltip_position set to 'top'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "top",
orientation: "vertical"
});
// Extract needed references/values
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
// Assert
expect(mainTooltipHasClassRight).toBeTruthy();
expect(testSlider.tooltip.style.left).toBe("100%");
});
it("should default to 'right' if tooltip_position set to 'bottom'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "bottom",
orientation: "vertical"
});
// Extract needed references/values
var mainTooltipHasClassRight = testSlider.tooltip.classList.contains("right");
// Assert
expect(mainTooltipHasClassRight).toBeTruthy();
expect(testSlider.tooltip.style.left).toBe("100%");
});
});
describe("horizontal slider tests", function() {
it("should be aligned above the handle if set to 'top'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "top",
orientation: "horizontal"
});
// Extract needed references/values
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
// Assert
expect(mainTooltipHasClassTop).toBeTruthy();
expect(testSlider.tooltip.style.top).toBe("");
});
it("should be aligned below the handle if set to 'bottom'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "bottom",
orientation: "horizontal"
});
// Extract needed references/values
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("bottom");
// Assert
expect(mainTooltipHasClassTop).toBeTruthy();
expect(testSlider.tooltip.style.top).toBe("22px");
});
it("should be aligned below the handle if set to 'bottom' for range", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 20,
value: [0, 10],
range: true,
tooltip_position: "bottom",
orientation: "horizontal"
});
// Extract needed references/values
var mainTooltipHasClassTopMin = testSlider.tooltip_min.classList.contains("bottom");
var mainTooltipHasClassTopMax = testSlider.tooltip_max.classList.contains("bottom");
// Assert
expect(mainTooltipHasClassTopMin).toBeTruthy();
expect(mainTooltipHasClassTopMax).toBeTruthy();
expect(testSlider.tooltip_min.style.top).toBe("22px");
expect(testSlider.tooltip_max.style.top).toBe("22px");
});
it("should default to 'top' if tooltip_position set to 'left'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "left",
orientation: "horizontal"
});
// Extract needed references/values
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
// Assert
expect(mainTooltipHasClassTop).toBeTruthy();
expect(testSlider.tooltip.style.top).toBe("");
});
it("should default to 'top' if tooltip_position set to 'right'", function() {
// Create slider
testSlider = new Slider("#testSlider1", {
min: 0,
max: 10,
value: 5,
tooltip_position: "right",
orientation: "horizontal"
});
// Extract needed references/values
var mainTooltipHasClassTop = testSlider.tooltip.classList.contains("top");
// Assert
expect(mainTooltipHasClassTop).toBeTruthy();
expect(testSlider.tooltip.style.top).toBe("");
});
});
});

View File

@@ -0,0 +1,71 @@
/*
*************************
tooltip_split Option Test
*************************
This spec tests if tooltip_main, tooltip_min and tooltip_max
behave correctly when tooltip_split option is set to true or false.
*/
describe("'tooltip_split' Option tests", function() {
var testSlider, sliderId = "tooltipedSlider",
$slider, $tooltipMain, $tooltipMin, $tooltipMax,
sliderOptions = {id: sliderId, value: [0, 10], tooltip: "always"}; // for the sake of testing, always display the tooltip
describe("When 'tooltip_split' is false", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider($.extend(sliderOptions, {tooltip_split: false}));
$slider = $("#"+sliderId);
$tooltipMain = $slider.find(".tooltip-main");
$tooltipMin = $slider.find(".tooltip-min");
$tooltipMax = $slider.find(".tooltip-max");
});
it("should have `tooltip-main` displayed with `in` class", function() {
expect($tooltipMain.css("display")).not.toBe("none");
expect($tooltipMain.hasClass("in")).toBeTruthy();
});
it("should have `tooltip-min, tooltip-max` not displayed", function() {
expect($tooltipMin.css("display")).toBe("none");
expect($tooltipMin.hasClass("in")).toBeFalsy();
expect($tooltipMax.css("display")).toBe("none");
expect($tooltipMax.hasClass("in")).toBeFalsy();
});
});
describe("When 'tooltip_split' is true", function() {
beforeEach(function() {
testSlider = $("#testSlider1").slider($.extend(sliderOptions, {tooltip_split: true}));
$slider = $("#"+sliderId);
$tooltipMain = $slider.find(".tooltip-main");
$tooltipMin = $slider.find(".tooltip-min");
$tooltipMax = $slider.find(".tooltip-max");
});
it("should have `tooltip-min, tooltip-max` displayed with `in` class", function() {
expect($tooltipMin.css("display")).not.toBe("none");
expect($tooltipMin.hasClass("in")).toBeTruthy();
expect($tooltipMax.css("display")).not.toBe("none");
expect($tooltipMax.hasClass("in")).toBeTruthy();
});
it("should have `tooltip-main` not displayed", function() {
expect($tooltipMain.css("display")).toBe("none");
expect($tooltipMain.hasClass("in")).toBeFalsy();
});
it("should be aligned above the handle on init if set to 'top'", function() {
expect($tooltipMin.hasClass("top")).toBeTruthy();
expect($tooltipMax.hasClass("top")).toBeTruthy();
});
});
afterEach(function() {
if(testSlider) {
testSlider.slider('destroy');
testSlider = null;
}
});
});

View File

@@ -0,0 +1,33 @@
//--------------------------------------------------
//--------------------------------------------------
//-- Removes attached function from slider event --
//--------------------------------------------------
//--------------------------------------------------
describe("'off()' test", function() {
var testSlider, eventHandlerTriggered, mouse;
var onStart = function(){
eventHandlerTriggered = true;
};
beforeEach(function() {
eventHandlerTriggered = false;
mouse = document.createEvent('MouseEvents');
});
it("should properly unbind an event listener", function() {
testSlider = $("#testSlider1").slider();
testSlider.on('slideStart', onStart);
testSlider.off('slideStart', onStart);
testSlider.data('slider')._mousedown(mouse);
expect(eventHandlerTriggered).not.toBeTruthy();
});
});

View File

@@ -0,0 +1,113 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner</title>
<% css.forEach(function(style){ %>
<link rel="stylesheet" type="text/css" href="<%= style %>">
<% }) %>
<style type="text/css">
#low-high-slider-styled .slider-track-low
{
background: rgb(0, 255, 0);
}
#low-high-slider-styled .slider-track-high
{
background: rgb(255, 0, 0);
}
#scrollable-div {
overflow-y: scroll;
width: 300px;
height: 150px;
position: relative;
}
#low-div {
padding: 2000px 0 500px 0;
}
</style>
</head>
<body>
<input id="testSliderGeneric" type="text"/>
<!-- Slider used for PublicMethodsSpec and EventsSpec -->
<input id="testSlider1" type="text"/>
<input id="testSlider2" type="text"/>
<!-- Note: Two input elements with class 'makeSlider' are required for tests to run properly -->
<input class="makeSlider" type="text"/>
<input class="makeSlider" type="text"/>
<!-- Sliders used for ElementDataSttributesSpec -->
<input id="minSlider" type="text" data-slider-min="5"/>
<input id="maxSlider" type="text" data-slider-max="5"/>
<input id="orientationSlider" type="text" data-slider-orientation="vertical"/>
<input id="stepSlider" type="text" data-slider-step="5"/>
<input id="precisionSlider" type="text" data-slider-precision="2"/>
<input id="valueSlider" type="text" data-slider-value="5"/>
<input id="sliderWithTickMarksAndLabels" type="text" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-labels='["$0", "$100", "$200", "$300", "$400"]'/>
<input id="selectionSlider" type="text" data-slider-selection="after"/>
<input id="tooltipSlider" type="text" data-slider-tooltip="hide"/>
<input id="handleSlider" type="text" data-slider-handle="triangle"/>
<input id="customHandleSlider" type="text" data-slider-handle="custom"/>
<input id="reversedSlider" type="text" data-slider-reversed="true"/>
<input id="disabledSlider" type="text" data-slider-enabled="false"/>
<input id="changeOrientationSlider" type="text"/>
<input id="makeRangeSlider" type="text"/>
<div id="autoregisterSliderContainer">
<input id="autoregisterSlider" data-provide="slider" data-slider-value="1"/>
</div>
<div id="relayoutSliderContainer" style="display: none">
<input id="relayoutSliderInput" type="text"/>
</div>
<div id="relayoutSliderContainerTickLabels" style="display: none">
<input id="relayoutSliderInputTickLabels" type="text"/>
</div>
<div id="scrollable-div">
<p>just a row</p>
<p>just a row</p>
<input id="ex1" data-slider-id='ex1Slider' type="text"/>
</div>
<div id="low-div">
<input id="veryLowPositionedSlider" type="text"/>
</div>
<!-- Sliders used by resize -->
<input id="resizeSlider" type="text"/>
<input id="resizeSliderVertical" data-slider-orientation="vertical" type="text"/>
<!-- Sliders used for AccessibilitySpec -->
<div>
<span id="accessibilitySliderLabelA">Label A</span>
<span id="accessibilitySliderLabelB">Label B</span>
<input id="accessibilitySliderA" type="text" data-slider-labelledby="accessibilitySliderLabelA" />
<input id="accessibilitySliderB" type="text" data-slider-labelledby='["accessibilitySliderLabelA", "accessibilitySliderLabelB"]' />
</div>
<% with (scripts) { %>
<% [].concat(jasmine, vendor, src, specs, reporters, start).forEach(function(script){ %>
<script src="<%= script %>"></script>
<% }) %>
<% }; %>
</body>
</html>

File diff suppressed because it is too large Load Diff