6 | {{sl-date-picker
7 | class="sl-daterange-start-date col-md-6"
8 | endDate=latestStartDate
9 | placeholder=startDatePlaceholder
10 | startDate=minDate
11 | value=startDateValue
12 | inputId=inputId
13 | format=format
14 | }}
15 |
16 | {{sl-date-picker
17 | class="sl-daterange-end-date col-md-6"
18 | endDate=maxDate
19 | placeholder=endDatePlaceholder
20 | startDate=earliestEndDate
21 | value=endDateValue
22 | format=format
23 | }}
24 |
25 |
26 | {{#if helpText}}
27 | (http://www.notmessenger.com)",
42 | "Michael Carroll (https://github.com/juwara0)"
43 | ],
44 | "license": "MIT",
45 | "dependencies": {
46 | "broccoli-autoprefixer": "4.1.0",
47 | "broccoli-funnel": "^1.0.1",
48 | "broccoli-less-single": "^0.5.0",
49 | "broccoli-merge-trees": "^1.1.0",
50 | "ember-cli-babel": "^5.1.6",
51 | "ember-cli-htmlbars": "^1.0.3",
52 | "ember-stream": "^0.7.3",
53 | "ember-get-config": "0.0.2"
54 | },
55 | "devDependencies": {
56 | "broccoli-asset-rev": "^2.4.2",
57 | "broccoli-string-replace": "0.1.1",
58 | "ember-ajax": "0.7.1",
59 | "ember-cli": "2.4.3",
60 | "ember-cli-app-version": "^1.0.0",
61 | "ember-cli-blanket": "0.8.0",
62 | "ember-cli-dependency-checker": "^1.2.0",
63 | "ember-cli-doc-server": "1.1.0",
64 | "ember-cli-htmlbars-inline-precompile": "^0.3.1",
65 | "ember-cli-inject-live-reload": "^1.4.0",
66 | "ember-cli-jsdoc": "1.4.0",
67 | "ember-cli-less": "^1.5.3",
68 | "ember-cli-qunit": "^1.4.0",
69 | "ember-cli-uglify": "^1.2.0",
70 | "ember-disable-prototype-extensions": "^1.1.0",
71 | "ember-export-application-global": "^1.0.5",
72 | "ember-load-initializers": "^0.5.1",
73 | "ember-resolver": "^2.0.3",
74 | "ember-sinon": "0.5.0",
75 | "ember-try": "^0.2.2",
76 | "loader.js": "^4.0.1",
77 | "sl-ember-test-helpers": "1.12.0",
78 | "sl-eslint": "0.4.0"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/public/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/public/.gitkeep
--------------------------------------------------------------------------------
/public/assets/images/spinner-dark-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/public/assets/images/spinner-dark-sm.png
--------------------------------------------------------------------------------
/public/assets/images/spinner-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/public/assets/images/spinner-dark.png
--------------------------------------------------------------------------------
/public/assets/images/spinner-light-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/public/assets/images/spinner-light-sm.png
--------------------------------------------------------------------------------
/public/assets/images/spinner-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/public/assets/images/spinner-light.png
--------------------------------------------------------------------------------
/testem.js:
--------------------------------------------------------------------------------
1 | /* jshint node:true*/
2 | module.exports = {
3 | 'framework': 'qunit',
4 | 'test_page': 'tests/index.html?hidepassed&nojshint',
5 | 'disable_watching': true,
6 | 'launch_in_ci': [
7 | 'Chrome'
8 | ],
9 | 'launch_in_dev': [
10 | 'Chrome',
11 | 'IE8',
12 | 'IE9',
13 | 'IE10',
14 | 'IE11',
15 | 'Firefox',
16 | 'Safari',
17 | 'Opera'
18 | ]
19 | };
20 |
--------------------------------------------------------------------------------
/tests/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "predef": [
3 | "$",
4 | "-Promise",
5 | "DS",
6 | "QUnit",
7 | "andThen",
8 | "asyncTest",
9 | "click",
10 | "console",
11 | "contains",
12 | "currentPath",
13 | "currentRouteName",
14 | "currentURL",
15 | "deepEqual",
16 | "define",
17 | "document",
18 | "equal",
19 | "exists",
20 | "expect",
21 | "fillIn",
22 | "find",
23 | "findWithAssert",
24 | "isolatedContainer",
25 | "keyEvent",
26 | "location",
27 | "module",
28 | "moduleFor",
29 | "moduleForComponent",
30 | "moduleForModel",
31 | "notEqual",
32 | "notStrictEqual",
33 | "ok",
34 | "process",
35 | "raises",
36 | "requires",
37 | "setTimeout",
38 | "start",
39 | "startApp",
40 | "stop",
41 | "strictEqual",
42 | "test",
43 | "testBoth",
44 | "testWithDefault",
45 | "throws",
46 | "triggerEvent",
47 | "visit",
48 | "wait",
49 | "window"
50 | ],
51 | "boss": true,
52 | "browser": false,
53 | "curly": true,
54 | "debug": false,
55 | "devel": false,
56 | "eqeqeq": true,
57 | "eqnull": true,
58 | "esnext": true,
59 | "evil": true,
60 | "forin": false,
61 | "immed": false,
62 | "laxbreak": false,
63 | "newcap": true,
64 | "noarg": true,
65 | "node": false,
66 | "noempty": false,
67 | "nomen": false,
68 | "nonew": false,
69 | "onevar": false,
70 | "plusplus": false,
71 | "regexp": false,
72 | "strict": false,
73 | "sub": true,
74 | "undef": true,
75 | "unused": true,
76 | "white": false
77 | }
78 |
--------------------------------------------------------------------------------
/tests/blanket-options.js:
--------------------------------------------------------------------------------
1 | /* globals blanket, module */
2 |
3 | const options = {
4 | modulePrefix: 'sl-ember-components',
5 | filter: '//.*sl-ember-components/.*/',
6 | antifilter: '//.*(tests|template).*/',
7 | loaderExclusions: [],
8 | enableCoverage: true,
9 | modulePattern: '\/(\\w+)',
10 | branchTracking: true,
11 | cliOptions: {
12 | reporters: [ 'json' ],
13 | autostart: true
14 | }
15 | };
16 |
17 | if ( 'undefined' === typeof exports ) {
18 | blanket.options( options );
19 | } else {
20 | module.exports = options;
21 | }
22 |
--------------------------------------------------------------------------------
/tests/dummy/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "predef": [
3 | "document",
4 | "window",
5 | "-Promise"
6 | ],
7 | "browser" : true,
8 | "boss" : true,
9 | "curly": true,
10 | "debug": false,
11 | "devel": true,
12 | "eqeqeq": true,
13 | "evil": true,
14 | "forin": false,
15 | "immed": false,
16 | "laxbreak": false,
17 | "newcap": true,
18 | "noarg": true,
19 | "noempty": false,
20 | "nonew": false,
21 | "nomen": false,
22 | "onevar": false,
23 | "plusplus": false,
24 | "regexp": false,
25 | "undef": true,
26 | "sub": true,
27 | "strict": false,
28 | "white": false,
29 | "eqnull": true,
30 | "esnext": true,
31 | "unused": true
32 | }
33 |
--------------------------------------------------------------------------------
/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | Ember.MODEL_FACTORY_INJECTIONS = true;
7 |
8 | const App = Ember.Application.extend({
9 | modulePrefix: config.modulePrefix,
10 | podModulePrefix: config.podModulePrefix,
11 | Resolver
12 | });
13 |
14 | loadInitializers( App, config.modulePrefix );
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/demos/sl-grid-detail.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Component.extend();
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/demos/tabs/tab-one.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Component.extend({
4 | inputText: 'One input text',
5 |
6 | text: 'Here is some dynamic content from the \'demos/tabs/tab-one\' component.'
7 | });
8 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/property-text.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Component.extend({
4 | classNameBindings: [
5 | 'required:list-group-item-warning'
6 | ],
7 |
8 | classNames: [
9 | 'list-group-item'
10 | ],
11 |
12 | required: false
13 | });
14 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/browsers.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | components: Ember.A([
5 | {
6 | name: 'sl-alert',
7 | lib: { 'twb': true }
8 | },
9 | {
10 | name: 'sl-button',
11 | lib: { 'twb': true }
12 | },
13 | {
14 | name: 'sl-calendar',
15 | lib: { 'sec': true }
16 | },
17 | {
18 | name: 'sl-chart',
19 | lib: { 'hc': true }
20 | },
21 | {
22 | name: 'sl-checkbox',
23 | lib: { 'twb': true }
24 | },
25 | {
26 | name: 'sl-date-picker',
27 | lib: { 'bd': true }
28 | },
29 | {
30 | name: 'sl-date-range-picker',
31 | lib: { 'bd': true }
32 | },
33 | {
34 | name: 'sl-date-time',
35 | lib: { 'sec': true }
36 | },
37 | {
38 | name: 'sl-drop-button',
39 | lib: { 'twb': true }
40 | },
41 | {
42 | name: 'sl-drop-option',
43 | lib: { 'twb': true }
44 | },
45 | {
46 | name: 'sl-grid',
47 | lib: { 'sec': true }
48 | },
49 | {
50 | name: 'sl-input',
51 | lib: { 'twb': true, 'ta': true }
52 | },
53 | {
54 | name: 'sl-menu',
55 | lib: { 'sec': true }
56 | },
57 | {
58 | name: 'sl-modal',
59 | lib: { 'twb': true }
60 | },
61 | {
62 | name: 'sl-pagination',
63 | lib: { 'sec': true }
64 | },
65 | {
66 | name: 'sl-panel',
67 | lib: { 'twb': true }
68 | },
69 | {
70 | name: 'sl-progress-bar',
71 | lib: { 'twb': true }
72 | },
73 | {
74 | name: 'sl-radio',
75 | lib: { 'sec': true }
76 | },
77 | {
78 | name: 'sl-radio-group',
79 | lib: { 'twb': true }
80 | },
81 | {
82 | name: 'sl-select',
83 | lib: { 's2': true }
84 | },
85 | {
86 | name: 'sl-span',
87 | lib: { 'sec': true }
88 | },
89 | {
90 | name: 'sl-tab-pane',
91 | lib: { 'twb': true }
92 | },
93 | {
94 | name: 'sl-tab-panel',
95 | lib: { 'twb': true }
96 | },
97 | {
98 | name: 'sl-textarea',
99 | lib: { 'sec': true }
100 | },
101 | {
102 | name: 'sl-tooltip',
103 | lib: { 'twb': true }
104 | }
105 | ])
106 | });
107 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-calendar.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | actions: {
5 | logLabel( dateObjects ) {
6 | window.console.log( dateObjects );
7 | }
8 | }
9 | });
10 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-chart.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | actions: {
5 | logOptions() {
6 | window.console.log( 'Chart options:', this.get( 'chartOptions' ) );
7 | },
8 |
9 | logSeries() {
10 | window.console.log( 'Content:', this.get( 'content' ) );
11 | }
12 | },
13 |
14 | chartOptions: {
15 | chart: {
16 | type: 'bar'
17 | },
18 |
19 | xAxis: {
20 | categories: [ 'Apples', 'Bananas', 'Oranges' ]
21 | },
22 |
23 | yAxis: {
24 | title: {
25 | text: 'Fruit Eaten'
26 | }
27 | }
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-date-time.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | firstDayDate: Ember.computed(
5 | function() {
6 | return window.moment().dayOfYear( 1 );
7 | }
8 | ),
9 |
10 | threeMonthsAgoDate: Ember.computed(
11 | function() {
12 | const now = window.moment();
13 |
14 | return window.moment().month( now.month() - 3 );
15 | }
16 | )
17 | });
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-drop-button.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | actions: {
5 | logRed() {
6 | window.console.log( 'Red!' );
7 | },
8 |
9 | logGreen() {
10 | window.console.log( 'Green!' );
11 | },
12 |
13 | logWhite() {
14 | window.console.log( 'White!' );
15 | }
16 | }
17 | });
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-grid.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | sortProperties: [ 'fruit' ],
5 | sortedModel: Ember.computed.sort( 'model', 'sortProperties' ),
6 |
7 | actions: {
8 | rowClick( row ) {
9 | window.console.log( 'Clicked', row );
10 | },
11 |
12 | logName( row ) {
13 | window.console.log( 'Record:', Ember.get( row, 'name' ) );
14 | },
15 |
16 | sortColumn( column ) {
17 | const columns = this.get( 'columns' );
18 | const currentDir = Ember.get( column, 'sorted' );
19 |
20 | let sortDir = 'asc';
21 | if ( 'asc' === currentDir ) {
22 | sortDir = 'desc';
23 | }
24 |
25 | for ( let i = 0; i < columns.length; i++ ) {
26 | Ember.set( columns[ i ], 'sorted', null );
27 | }
28 |
29 | Ember.set( column, 'sorted', sortDir );
30 |
31 | let columnString = column[ 'valuePath' ];
32 |
33 | if ( sortDir !== 'asc' ) {
34 | columnString = `${columnString}:desc`;
35 | }
36 |
37 | this.set( 'sortProperties', [ columnString ] );
38 | }
39 | },
40 |
41 | columns: Ember.A([
42 | {
43 | title: 'Color',
44 | valuePath: 'name'
45 | },
46 | {
47 | headerClass: 'smallWidth',
48 | primary: true,
49 | sortable: true,
50 | sorted: 'asc',
51 | title: 'Fruit',
52 | valuePath: 'fruit'
53 | },
54 | {
55 | headerClass: 'smallWidth',
56 | sortable: true,
57 | title: 'Hex Code',
58 | valuePath: 'hexCode'
59 | }
60 | ]),
61 |
62 | rowActions: [
63 | {
64 | label: 'Log',
65 | action: 'sendLog'
66 | }
67 | ],
68 |
69 | totalCount: 6
70 | });
71 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-input.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | colors: [
5 | { id: 'Black' },
6 | { id: 'Blue' },
7 | { id: 'Gray' },
8 | { id: 'Green' },
9 | { id: 'Orange' },
10 | { id: 'Purple' },
11 | { id: 'Red' },
12 | { id: 'White' },
13 | { id: 'Yellow' }
14 | ],
15 |
16 | names: [
17 | 'Jeff',
18 | 'Michael',
19 | 'Jeremy'
20 | ]
21 | });
22 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-pagination.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | actions: {
5 | changePage( pageNumber ) {
6 | window.console.log( 'Page changed to', pageNumber );
7 | }
8 | }
9 | });
10 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-progress-bar.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | dynamicValue: 42
5 | });
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-radio-group.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | currentColor: 'blue'
5 | });
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-select.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | numbers: [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
5 | });
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/sl-span.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | initialize: Ember.on(
5 | 'init',
6 | function() {
7 | setTimeout( () => {
8 | this.set( 'isLoading', false );
9 | }, 5000 );
10 | }
11 | ),
12 |
13 | isLoading: true
14 | });
15 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/demos/tabs/home.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Controller.extend({
4 | testValue: 'Hello'
5 | });
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/helpers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/tests/dummy/app/helpers/.gitkeep
--------------------------------------------------------------------------------
/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | sl-ember-components Demo Application and Documentation
7 | {{model.name}} fruit: {{model.fruit}}
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/demos/tabs/tab-one.hbs:
--------------------------------------------------------------------------------
1 | Tab Pane One
2 |
3 | {{text}}
4 |
5 | {{sl-input placeholder="Enter some text" value=inputText}}
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/demos/tabs/tab-two.hbs:
--------------------------------------------------------------------------------
1 | Tab Pane Two
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/property-text.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{name}}
3 | {{#if required}}
4 | required
5 | {{/if}}
6 |
7 |
8 | {{type}} {{#if default}}, default: {{default}} {{/if}}{{#if requires}}, requires {{requires}} {{/if}}
9 |
10 | {{yield}}
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-calendar.hbs:
--------------------------------------------------------------------------------
1 | sl-calendar
2 | A standalone calendar to display date values from an array of objects.
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
\{{sl-calendar action="logLabel" content=content}}
12 |
13 |
Route/Controller
14 |
model: [
15 | {
16 | date: new Date(),
17 | label: 'Today!'
18 | }
19 | ]
20 |
21 |
22 |
23 |
Rendered Component
24 | {{sl-calendar action="logLabel" class="col-sm-6" content=content}}
25 |
26 |
Custom CSS styling
31 |
32 |
33 |
34 |
sl-ember-components-calendar
35 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-calendar.
36 |
37 |
Properties
42 |
43 |
44 | {{#property-text name="action" type="Function"}}
45 | Action to call when a day is clicked that contains one of the content dates. An array of content objects with dates occurring on the clicked date will be returned to this action.
46 | {{/property-text}}
47 |
48 | {{#property-text name="content" type="Object[]"}}
49 | Bound array of objects with date values, looked up using the dateValuePath property.
50 | {{/property-text}}
51 |
52 | {{#property-text name="currentMonth" type="Number" default="current month"}}
53 | The month number to display (1-12).
54 | {{/property-text}}
55 |
56 | {{#property-text name="currentYear" type="Number" default="current year"}}
57 | The year to display.
58 | {{/property-text}}
59 |
60 | {{#property-text name="dateValuePath" type="String" default="\"date\""}}
61 | Path to the content objects' date value.
62 | {{/property-text}}
63 |
64 | {{#property-text name="locale" type="String" default="\"en\""}}
65 | The locale string to use for moment date formats.
66 | {{/property-text}}
67 |
68 | {{#property-text name="locked" type="Boolean" default="false"}}
69 | When true, the view is locked in the initial mode, and forward and back buttons are disabled.
70 | {{/property-text}}
71 |
72 | {{#property-text name="viewMode" type="String" default="\"days\""}}
73 | The view to display the calendar in; "days", "months", or "years".
74 | {{/property-text}}
75 |
76 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-chart.hbs:
--------------------------------------------------------------------------------
1 | sl-chart
2 | A wrapper component for Highcharts .
3 | Highcharts is only free for non-commercial use and requires a license for any other use. See
4 | this FAQ page for more information.
5 |
6 | Example
9 |
10 |
11 |
12 |
Template
13 |
\{{sl-chart
14 | options=chartOptions
15 | series=content
16 | title="Fruit Consumption"
17 | }}
18 |
19 |
Controller
20 |
chartOptions: {
21 | chart: {
22 | type: 'bar'
23 | },
24 |
25 | xAxis: {
26 | categories: [ 'Apples', 'Bananas', 'Oranges' ]
27 | },
28 |
29 | yAxis: {
30 | title: {
31 | text: 'Fruit Eaten'
32 | }
33 | }
34 | }
35 |
36 |
Route
37 |
content = [
38 | {
39 | name: 'Jane',
40 | data: [ 1, 0, 4 ]
41 | }, {
42 | name: 'John',
43 | data: [ 5, 7, 3 ]
44 | }
45 | ]
46 |
47 |
48 |
49 |
Rendered Component
50 | {{sl-chart options=chartOptions series=content title="Fruit Consumption"}}
51 |
52 |
Custom CSS styling
57 |
58 |
59 |
60 |
sl-ember-components-chart
61 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-chart.
62 |
63 |
Properties
68 |
69 |
70 | {{#property-text name="options" required=true type="Object"}}
71 | An object of options passed directly to Highcharts initialization.
72 | {{/property-text}}
73 |
74 | {{#property-text name="series" required=true type="Array"}}
75 | Array of series data to bind to the component.
76 | {{/property-text}}
77 |
78 | {{#property-text name="height" type="String"}}
79 | CSS string for the height inline style value.
80 | {{/property-text}}
81 |
82 | {{#property-text name="loading" type="Boolean" default="false"}}
83 | When true, the chart is masked and a loading icon appears.
84 | {{/property-text}}
85 |
86 | {{#property-text name="title" type="String"}}
87 | The title of the chart's panel.
88 | {{/property-text}}
89 |
90 | {{#property-text name="width" type="String"}}
91 | CSS string for the width inline style value.
92 | {{/property-text}}
93 |
94 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-checkbox.hbs:
--------------------------------------------------------------------------------
1 | sl-checkbox
2 | An improved substitute for the default <input type="checkbox"> element. See Bootstrap - Supported controls for details.
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
\{{sl-checkbox
12 | checked=checkboxValue
13 | label="Checkbox"
14 | name="checkbox"
15 | inline=true
16 | }}
17 |
18 |
19 |
20 |
Rendered Component
21 | {{sl-checkbox checked=checkboxValue label="Checkbox" name="checkbox" inline=true}}
22 |
23 | {{#if checkboxValue}}
24 | Checked!
25 | {{/if}}
26 |
27 |
30 |
31 |
Template
32 |
\{{sl-checkbox
33 | disabled=true
34 | label="Disabled checkbox"
35 | }}
36 |
37 |
38 |
39 |
Rendered Component
40 | {{sl-checkbox disabled=true label="Disabled checkbox"}}
41 |
42 |
Mixins used
47 |
48 |
49 |
52 |
53 |
sl-tooltip-enabled
54 |
55 |
Custom CSS styling
60 |
61 |
62 |
63 |
sl-ember-components-checkbox
64 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-checkbox.
65 |
66 |
Properties
71 |
72 |
73 | {{#property-text name="checked" type="Boolean" default="false"}}
74 | The bound value indicating if the checkbox is checked or not.
75 | {{/property-text}}
76 |
77 | {{#property-text name="disabled" type="Boolean" default="false"}}
78 | When true, the checkbox is disabled.
79 | {{/property-text}}
80 |
81 | {{#property-text name="inline" type="Boolean" default="false"}}
82 | Display the checkbox inline with others.
83 | {{/property-text}}
84 |
85 | {{#property-text name="label" type="String"}}
86 | Label text to display beside the checkbox.
87 | {{/property-text}}
88 |
89 | {{#property-text name="name" type="String"}}
90 | name attribute value for the input.
91 | {{/property-text}}
92 |
93 | {{#property-text name="popover" type="String"}}
94 | Popover content text.
95 | {{/property-text}}
96 |
97 | {{#property-text name="title" type="String"}}
98 | Tooltip text string, or becomes popover title with supplied popover property.
99 | {{/property-text}}
100 |
101 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-date-range-picker.hbs:
--------------------------------------------------------------------------------
1 | sl-date-range-picker
2 | A component to use for date ranges, using two {{#link-to "demos.sl-date-picker"}}sl-date-picker{{/link-to}} components.
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
\{{sl-date-range-picker
12 | label="Select date range"
13 | startDatePlaceholder="Select start date"
14 | endDatePlaceholder="Select end date"
15 | }}
16 |
17 |
18 |
19 |
Rendered Component
20 | {{sl-date-range-picker
21 | label="Select date range"
22 | startDatePlaceholder="Select start date"
23 | endDatePlaceholder="Select end date"
24 | }}
25 |
26 |
Mixins used
31 |
32 |
33 |
34 |
sl-component-input-id
35 |
36 |
Custom CSS styling
41 |
42 |
43 |
44 |
sl-ember-components-date-range-picker
45 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-date-range-picker.
46 |
47 |
Properties
52 |
53 |
54 | {{#property-text name="endDatePlaceholder" type="String"}}
55 | The
placeholder attribute text for the end date input.
56 | {{/property-text}}
57 |
58 | {{#property-text name="endDateValue" type="String" default="null"}}
59 | The binding value for the endDate input.
60 | {{/property-text}}
61 |
62 | {{#property-text name="format" type="String" default="\"mm/dd/yyyy\""}}
63 | The date format used for both inputs; combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy
64 |
65 | d, dd : Numeric date, no leading zero and leading zero, respectively
66 | D, DD : Abbreviated and full weekday names, respectively
67 | m, mm : Numeric month, no leading zero and leading zero, respectively
68 | M, MM : Abbreviated and full month names, respectively
69 | yy, yyyy : 2- and 4-digit years, respectively
70 |
71 | {{/property-text}}
72 |
73 | {{#property-text name="maxDate" type="Date/String" default="null"}}
74 | The latest possible date for the range.
75 | {{/property-text}}
76 |
77 | {{#property-text name="minDate" type="Date/String" default="null"}}
78 | The earliest possible date for the range.
79 | {{/property-text}}
80 |
81 | {{#property-text name="startDatePlaceholder" type="String"}}
82 | The
placeholder attribute text for the start date input.
83 | {{/property-text}}
84 |
85 | {{#property-text name="startDateValue" type="String" default="null"}}
86 | The binding value for the startDate input.
87 | {{/property-text}}
88 |
{{model.name}} fruit: {{model.fruit}}
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-grid/footer.hbs:
--------------------------------------------------------------------------------
1 | Viewing {{content.length}} of {{totalCount}} Colors
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-grid/header.hbs:
--------------------------------------------------------------------------------
1 | {{#sl-drop-button label="Do something"}}
2 | {{sl-drop-option click=sayHello label="Say Hello" targetObject=parentView}}
3 | {{sl-drop-option click=sayGoodbye label="Say Goodbye" targetObject=parentView}}
4 | {{/sl-drop-button}}
5 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-pagination.hbs:
--------------------------------------------------------------------------------
1 | sl-pagination
2 | A component used for displaying and controlling pages of content.
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
\{{sl-pagination changePage="changePage" totalPages=20}}
12 |
13 |
14 |
Rendered Component
15 | {{sl-pagination changePage="changePage" totalPages=20}}
16 |
17 |
Custom CSS styling
22 |
23 |
24 |
25 |
sl-ember-components-pagination
26 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-pagination.
27 |
28 |
Properties
33 |
34 |
35 | {{#property-text name="totalPages" required=true type="Number"}}
36 | The total number of pages.
37 | {{/property-text}}
38 |
39 | {{#property-text name="busy" type="Boolean" default="false"}}
40 | When true, the state of the pagination component will not change.
41 | {{/property-text}}
42 |
43 | {{#property-text name="changePage" type="String"}}
44 | An action triggered when the currentPage value is changed. The page number changed to is sent to the action.
45 | {{/property-text}}
46 |
47 | {{#property-text name="currentPage" type="Number" default="1"}}
48 | The current page bound value.
49 | {{/property-text}}
50 |
51 | {{#property-text name="isResponsive" type="Boolean" default="true"}}
52 | Whether to use the
responsive jQuery plugin .
53 | {{/property-text}}
54 |
55 | {{#property-text name="nextPage" type="String"}}
56 | An action triggered when the page is incremented successfully. The action is passed the new page number.
57 | {{/property-text}}
58 |
59 | {{#property-text name="previousPage" type="String"}}
60 | An action triggered when the page is decremented successfully. The action is passed the new page number.
61 | {{/property-text}}
62 |
sl-panel
2 | A basic content wrapper for Bootstrap - Panels .
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
\{{#sl-panel heading="Test Panel" theme="primary"}}
12 | <p>Hello world!</p>
13 | \{{/sl-panel}}
14 |
15 |
16 |
17 |
Rendered Template
18 | {{#sl-panel heading="Test Panel" theme="primary"}}
19 |
Hello world!
20 | {{/sl-panel}}
21 |
22 |
25 |
26 |
Template
27 |
\{{#sl-panel footer="Test Panel"}}
28 | <p>Hello world!</p>
29 | \{{/sl-panel}}
30 |
31 |
32 |
33 |
Rendered Template
34 | {{#sl-panel footer="Test Panel"}}
35 |
Hello world!
36 | {{/sl-panel}}
37 |
38 |
41 |
42 |
Template
43 |
\{{#sl-panel heading="Test Panel" loading=true}}
44 | <p>Hello world!</p>
45 | \{{/sl-panel}}
46 |
47 |
48 |
49 |
Rendered Template
50 | {{#sl-panel heading="Test Panel" loading=true}}
51 |
Hello world!
52 | {{/sl-panel}}
53 |
54 |
Custom CSS styling
59 |
60 |
61 |
62 |
sl-ember-components-panel
63 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-panel.
64 |
65 |
Properties
70 |
71 |
72 | {{#property-text name="footer" type="String"}}
73 | Text for the panel footer.
74 | {{/property-text}}
75 |
76 | {{#property-text name="heading" type="String"}}
77 | Text for the panel heading.
78 | {{/property-text}}
79 |
80 | {{#property-text name="loading" type="Boolean" default="false"}}
81 | When true, the panel body becomes masked and a loading icon appears.
82 | {{/property-text}}
83 |
84 | {{#property-text name="theme" type="String" default="\"default\""}}
85 | The Bootstrap contextual theme string to style the panel with.
86 | {{/property-text}}
87 |
88 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-radio.hbs:
--------------------------------------------------------------------------------
1 | sl-radio
2 | Individual radio button component.
3 |
4 | Examples
7 |
8 |
9 |
10 |
Template
11 |
\{{sl-radio inline=true label="Test radio button"}}
12 |
13 |
14 |
15 |
Rendered Component
16 | {{sl-radio inline=true label="Test radio button"}}
17 |
18 |
21 |
22 |
Template
23 |
\{{sl-radio disabled=true label="Disabled radio button"}}
24 |
25 |
26 |
27 |
Rendered Component
28 | {{sl-radio disabled=true label="Disabled radio button"}}
29 |
30 |
Mixins used
35 |
36 |
41 |
42 | Custom CSS styling
45 |
46 |
47 |
48 |
sl-ember-components-radio
49 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-radio.
50 |
51 |
Properties
56 |
57 |
58 | {{#property-text name="disabled" type="Boolean" default="false"}}
59 | When true, the radio button will be disabled.
60 | {{/property-text}}
61 |
62 | {{#property-text name="inline" type="Boolean" default="false"}}
63 | Display the radio inputs inline with each other.
64 | {{/property-text}}
65 |
66 | {{#property-text name="label" type="String"}}
67 | Text label for the button.
68 | {{/property-text}}
69 |
70 | {{#property-text name="name" type="String"}}
71 | name attribute value for the button.
72 | {{/property-text}}
73 |
74 | {{#property-text name="value" type="String"}}
75 | Bound value for the radio button.
76 | {{/property-text}}
77 |
78 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-span.hbs:
--------------------------------------------------------------------------------
1 | sl-span
2 | A wrapper to intelligently represent state for inline content.
3 |
4 | Example
7 |
8 |
9 |
10 |
Template
11 |
<p>
12 | Loads in 5 seconds: \{{sl-span
13 | class="text-success"
14 | loading=isLoading
15 | value="Done!"
16 | }}
17 | </p>
18 |
19 |
Note: This component does not provide a time-delay mechanism. The 5 second time delay represented in the example is implemented in the demonstration controller and is employed to emulate the waiting for a promise to be resolved in order to demonstrate the loading state of this component and the final display of the resolved data value.
20 |
21 |
22 |
23 |
Rendered Component
24 |
Loads in 5 seconds: {{sl-span class="text-success" loading=isLoading value="Done!"}}
25 |
26 |
Custom CSS styling
31 |
32 |
33 |
34 |
sl-ember-components-span
35 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-span.
36 |
37 |
Properties
42 |
43 |
44 | {{#property-text name="class" type="String"}}
45 | The class attribute to apply to the span.
46 | {{/property-text}}
47 |
48 | {{#property-text name="loading" type="Boolean" default="false"}}
49 | When true, a loading icon will be displayed in place of content.
50 | {{/property-text}}
51 |
52 | {{#property-text name="value" type="String"}}
53 | The value to display once loaded/ready. This property will override the yielded content.
54 | {{/property-text}}
55 |
56 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-tab-panel.hbs:
--------------------------------------------------------------------------------
1 | sl-tab-panel
2 | A component with selectable tabs and related tab panes. Based on Bootstrap - Togglable tabs .
3 |
4 | Examples
7 |
8 |
9 |
10 |
Template
11 |
\{{#sl-tab-panel}}
12 | \{{#sl-tab-pane label="One" name="one"}}
13 | \{{demos/tabs/tab-one}}
14 | \{{/sl-tab-pane}}
15 |
16 | \{{#sl-tab-pane label="Two" name="two"}}
17 | \{{demos/tabs/tab-two}}
18 | \{{/sl-tab-pane}}
19 |
20 | \{{#sl-tab-pane label="Three" name="three"}}
21 | <p>Content for tab three!</p>
22 | \{{/sl-tab-pane}}
23 | \{{/sl-tab-panel}}
24 |
25 |
26 |
27 |
Rendered Component
28 | {{#sl-tab-panel}}
29 | {{#sl-tab-pane label="One" name="one"}}
30 | {{demos/tabs/tab-one}}
31 | {{/sl-tab-pane}}
32 |
33 | {{#sl-tab-pane label="Two" name="two"}}
34 | {{demos/tabs/tab-two}}
35 | {{/sl-tab-pane}}
36 |
37 | {{#sl-tab-pane label="Three" name="three"}}
38 |
Content for tab three!
39 | {{/sl-tab-pane}}
40 | {{/sl-tab-panel}}
41 |
42 |
Custom CSS styling
47 |
48 |
49 |
50 |
sl-ember-components-tab-panel
51 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-tab-panel.
52 |
53 |
sl-tab-panel Properties
58 |
59 |
60 | {{#property-text name="alignTabs" type="String" default="\"left\""}}
61 | How to align the tabs, "left" or "right".
62 | {{/property-text}}
63 |
64 | {{#property-text name="initialTabName" type="String"}}
65 | Name of the initial active tab. This value corresponds to the value set on the name property of the sl-tab-pane component. If omitted, the first tab pane will be open on initialization.
66 | {{/property-text}}
67 |
68 |
69 | sl-tab-pane Properties
72 |
73 |
74 | {{#property-text name="label" type="String" required=true}}
75 | The text label for the tab pane's tab.
76 | {{/property-text}}
77 |
78 | {{#property-text name="name" type="String" required=true}}
79 | This value is never displayed in the tabs.
80 | Used to set the data-tab-name attribute on the tab and used internally by the component to manage tab selection.
81 | The name provided can be specified in the initialTabName property of the sl-tab-panel component to indicate which tab should be active when initially displayed.
82 | {{/property-text}}
83 |
84 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/demos/sl-tooltip.hbs:
--------------------------------------------------------------------------------
1 | sl-tooltip
2 | A simple component that surrounds content to enable Bootstrap's tooltip and popover behavior.
3 |
4 | Examples
7 |
8 |
9 |
10 |
Template
11 |
\{{#sl-tooltip
12 | tagName="u"
13 | title="Tooltip text!"
14 | }}
15 | Tooltip example
16 | \{{/sl-tooltip}}
17 |
18 |
19 |
20 |
Rendered Component
21 |
{{#sl-tooltip tagName="u" title="Tooltip text!"}}Tooltip example{{/sl-tooltip}}
22 |
23 |
26 |
27 |
Template
28 |
\{{#sl-tooltip
29 | popover="Popover content!"
30 | tagName="u"
31 | title="Popover title"
32 | }}
33 | Popover example
34 | \{{/sl-tooltip}}
35 |
36 |
37 |
38 |
Rendered Component
39 | {{#sl-tooltip
40 | popover="Popover content!"
41 | tagName="u"
42 | title="Popover title"}}
43 | Popover example
44 | {{/sl-tooltip}}
45 |
46 |
Mixins used
51 |
52 |
53 |
54 | sl-tooltip-enabled
55 |
56 |
Custom CSS styling
61 |
62 |
63 |
64 |
sl-ember-components-tooltip
65 |
The default class prefix is "sl-ember-components" unless the consuming application passes in a custom prefix. In which case, the CSS class would be [customprefix]-tooltip.
66 |
67 |
Properties
72 |
73 |
74 | {{#property-text name="title" type="String" required=true}}
75 | Tooltip content text, or popover title text when popover property is set.
76 | {{/property-text}}
77 |
78 | {{#property-text name="popover" type="String"}}
79 | Popover content text.
80 | {{/property-text}}
81 |
82 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/index.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
sl-ember-components REPLACE_APPLICATION_VERSION
4 |
An Ember CLI Addon that provides a variety of UI components.
5 |
6 |
9 |
10 | Components
11 |
12 | sl-alert
13 | sl-button
14 | sl-calendar
15 | sl-chart
16 | sl-checkbox
17 | sl-date-picker
18 | sl-date-range-picker
19 | sl-date-time
20 | sl-drop-button
21 | sl-grid
22 | sl-input
23 | sl-menu
24 | sl-modal
25 | sl-pagination
26 | sl-panel
27 | sl-progress-bar
28 | sl-radio
29 | sl-radio-group
30 | sl-select
31 | sl-span
32 | sl-tab-panel
33 | sl-textarea
34 | sl-tooltip
35 |
36 |
37 |
38 |
39 | Mixins
40 |
41 | sl-component-input-id
42 | sl-input-based
43 | sl-namespace
44 | sl-tooltip-enabled
45 |
46 |
47 |
48 |
49 | Utility Classes
50 |
51 | containsValue
52 | error
53 | warn
54 |
55 |
56 |
57 |
58 | CSS Classes
59 |
62 |
63 |
4 |
5 |
6 |
7 |
16 |
--------------------------------------------------------------------------------
/tests/dummy/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/tests/dummy/public/favicon.png
--------------------------------------------------------------------------------
/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default function destroyApp( application ) {
4 | Ember.run( application, 'destroy' );
5 | }
6 |
--------------------------------------------------------------------------------
/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import startApp from '../helpers/start-app';
3 | import destroyApp from '../helpers/destroy-app';
4 |
5 | export default function( name, options = {} ) {
6 | module( name, {
7 | beforeEach() {
8 | this.application = startApp();
9 |
10 | if ( options.beforeEach ) {
11 | options.beforeEach.apply( this, arguments );
12 | }
13 | },
14 |
15 | afterEach() {
16 | if ( options.afterEach ) {
17 | options.afterEach.apply( this, arguments );
18 | }
19 |
20 | destroyApp( this.application );
21 | }
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/tests/helpers/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from '../../resolver';
2 | import config from '../../config/environment';
3 |
4 | const resolver = Resolver.create();
5 |
6 | resolver.namespace = {
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix
9 | };
10 |
11 | export default resolver;
12 |
--------------------------------------------------------------------------------
/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import slRegisterTestHelpers from './sl/register-test-helpers';
3 | import Application from '../../app';
4 | import config from '../../config/environment';
5 |
6 | export default function startApp( attrs ) {
7 | let attributes = Ember.merge( {}, config.APP );
8 | attributes = Ember.merge( attributes, attrs ); // use defaults, but you can override;
9 |
10 | let application;
11 | Ember.run( () => {
12 | application = Application.create( attributes );
13 | application.setupForTesting();
14 | slRegisterTestHelpers();
15 | application.injectTestHelpers();
16 | });
17 |
18 | return application;
19 | }
20 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | sl-ember-components Tests
7 |
28 | {{/sl-modal-body}}`
29 | );
30 |
31 | assert.strictEqual(
32 | this.$( '>:first-child' ).find( '.test' ).length,
33 | 1
34 | );
35 | });
36 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-modal-footer-test.js:
--------------------------------------------------------------------------------
1 | import hbs from 'htmlbars-inline-precompile';
2 | import { moduleForComponent, test } from 'ember-qunit';
3 |
4 | moduleForComponent( 'sl-modal-footer', 'Integration | Component | sl modal footer', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 | this.render( hbs`
10 | {{sl-modal-footer}}
11 | ` );
12 |
13 | assert.ok(
14 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-modal-footer' ),
15 | 'Component has class "sl-ember-components-modal-footer"'
16 | );
17 |
18 | assert.ok(
19 | this.$( '>:first-child' ).hasClass( 'modal-footer' ),
20 | 'Component has class "modal-footer"'
21 | );
22 | });
23 |
24 | test( 'Content is yielded', function( assert ) {
25 | this.render( hbs`
26 | {{#sl-modal-footer}}
27 |
28 | {{/sl-modal-footer}}
29 | ` );
30 |
31 | assert.strictEqual(
32 | this.$( '>:first-child' ).find( '.test' ).length,
33 | 1,
34 | 'Content is yielded correctly'
35 | );
36 |
37 | this.render( hbs`
38 | {{sl-modal-footer}}
39 | ` );
40 |
41 | assert.ok(
42 | this.$( '>:first-child' ).find( '[data-dismiss="modal"]' ).length > 0,
43 | 'Default footer content and button rendered when not yielded'
44 | );
45 | });
46 |
47 | test( 'Close button text is customizable', function( assert ) {
48 | const buttonText = 'Custom Close Text';
49 |
50 | this.set( 'buttonText', buttonText );
51 |
52 | this.render( hbs`
53 | {{sl-modal-footer buttonText=buttonText}}
54 | ` );
55 |
56 | assert.strictEqual(
57 | this.$( '>:first-child' ).find( 'button[data-dismiss="modal"]' ).text().trim(),
58 | buttonText
59 | );
60 | });
61 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-modal-header-test.js:
--------------------------------------------------------------------------------
1 | import hbs from 'htmlbars-inline-precompile';
2 | import { moduleForComponent, test } from 'ember-qunit';
3 |
4 | moduleForComponent( 'sl-modal-header', 'Integration | Component | sl modal header', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 | this.render( hbs`
10 | {{sl-modal-header}}
11 | ` );
12 |
13 | assert.ok(
14 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-modal-header' ),
15 | 'Component has class "sl-ember-components-modal-header"'
16 | );
17 |
18 | assert.ok(
19 | this.$( '>:first-child' ).hasClass( 'modal-header' ),
20 | 'Component has class "modal-header"'
21 | );
22 |
23 | assert.ok(
24 | this.$( '>:first-child' ).find( '[data-dismiss="modal"]' ).length > 0,
25 | 'Default header content and close button rendered'
26 | );
27 | });
28 |
29 | test( 'Setting title on header works', function( assert ) {
30 | const title = 'hello world';
31 |
32 | this.set( 'title', title );
33 |
34 | this.render( hbs`
35 | {{sl-modal-header title=title}}
36 | ` );
37 |
38 | assert.strictEqual(
39 | this.$( '>:first-child' ).find( '.modal-title' ).text(),
40 | title
41 | );
42 | });
43 |
44 | test( 'Component may be used as block', function( assert ) {
45 | this.render( hbs`
46 | {{#sl-modal-header}}
47 |
48 | {{/sl-modal-header}}
49 | ` );
50 |
51 | assert.strictEqual(
52 | this.$( '>:first-child' ).find( '.test' ).length,
53 | 1,
54 | 'Content is yielded correctly'
55 | );
56 | });
57 |
58 | test( 'Modal title\'s id is set to ariaLabelledBy property value', function( assert ) {
59 | this.set( 'title', 'label test' );
60 | this.set( 'ariaLabelledBy', 'initial value' );
61 |
62 | this.render( hbs`
63 | {{sl-modal-header title=title ariaLabelledBy=ariaLabelledBy}}
64 | ` );
65 |
66 | assert.strictEqual(
67 | this.$( '>:first-child' ).find( '.modal-title' ).prop( 'id' ),
68 | this.get( 'ariaLabelledBy' )
69 | );
70 | });
71 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-panel-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent( 'sl-panel', 'Integration | Component | sl panel', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 | this.render( hbs`
10 | {{sl-panel}}
11 | ` );
12 |
13 | assert.ok(
14 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-panel' ),
15 | 'Default rendered component has class "sl-ember-components-panel"'
16 | );
17 |
18 | assert.ok(
19 | this.$( '>:first-child' ).hasClass( 'panel' ),
20 | 'Default rendered component has class "panel"'
21 | );
22 |
23 | assert.ok(
24 | this.$( '>:first-child' ).hasClass( 'panel-default' ),
25 | 'Default rendered component has class "panel-default"'
26 | );
27 |
28 | const panelBody = this.$( '>:first-child' ).find( '> .panel-body' );
29 |
30 | assert.strictEqual(
31 | panelBody.length,
32 | 1,
33 | 'Default rendered component has child with class "panel-body"'
34 | );
35 | });
36 |
37 | test( 'Valid heading value renders panel-heading', function( assert ) {
38 | this.render( hbs`
39 | {{sl-panel heading="Test"}}
40 | ` );
41 |
42 | assert.strictEqual(
43 | this.$( '>:first-child' ).find( '.panel-heading' ).length,
44 | 1,
45 | 'Rendered component has panel-heading text'
46 | );
47 |
48 | assert.strictEqual(
49 | this.$( '>:first-child' ).find( '.panel-heading' ).text(),
50 | 'Test',
51 | 'Text of rendered heading is equal to value passed to it'
52 | );
53 | });
54 |
55 | test( 'Loading state applies class name', function( assert ) {
56 | this.render( hbs`
57 | {{sl-panel loading=true}}
58 | ` );
59 |
60 | assert.ok(
61 | this.$( '>:first-child' ).find( '> .panel-body' ).hasClass( 'sl-loading' ),
62 | 'Rendered component body has class "sl-loading"'
63 | );
64 | });
65 |
66 | test( 'Content is yielded', function( assert ) {
67 | this.render( hbs`
68 | {{#sl-panel}}
69 |
70 | {{/sl-panel}}
71 | ` );
72 |
73 | assert.strictEqual(
74 | this.$( '>:first-child' ).find( '.yield-test' ).length,
75 | 1,
76 | 'Content yields successfully'
77 | );
78 | });
79 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-radio-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | const defaultTemplate = hbs`
5 | {{sl-radio}}
6 | `;
7 |
8 | moduleForComponent( 'sl-radio', 'Integration | Component | sl radio', {
9 | integration: true
10 | });
11 |
12 | test( 'Default rendered state', function( assert ) {
13 | this.render( defaultTemplate );
14 |
15 | assert.ok(
16 | this.$( '>:first-child' ).hasClass( 'form-group' ),
17 | 'Has class "form-group"'
18 | );
19 |
20 | assert.ok(
21 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-radio' ),
22 | 'Has class "sl-ember-components-radio"'
23 | );
24 |
25 | assert.ok(
26 | this.$( '>:first-child' ).hasClass( 'radio' ),
27 | 'Has class "radio"'
28 | );
29 |
30 | assert.strictEqual(
31 | this.$( '>:first-child' ).find( 'input[type="radio"]' ).length,
32 | 1,
33 | 'input type is set to "radio"'
34 | );
35 | });
36 |
37 | test( 'Disabled state applies disabled class, and attribute to input', function( assert ) {
38 | this.render( hbs`
39 | {{sl-radio disabled=true}}
40 | ` );
41 |
42 | assert.ok(
43 | this.$( '>:first-child' ).find( 'input' ).prop( 'disabled' ),
44 | 'has attribute "disabled"'
45 | );
46 |
47 | assert.ok(
48 | this.$( '>:first-child' ).hasClass( 'disabled' ),
49 | 'has class "disabled"'
50 | );
51 | });
52 |
53 | test( 'Inline property sets relevant class', function( assert ) {
54 | this.render( hbs`
55 | {{sl-radio inline=true}}
56 | ` );
57 |
58 | assert.ok(
59 | this.$( '>:first-child' ).hasClass( 'radio-inline' ),
60 | 'has class "radio-inline"'
61 | );
62 |
63 | assert.notOk(
64 | this.$( '>:first-child' ).hasClass( 'form-group' ),
65 | 'inline radio does not have class "form-group"'
66 | );
67 | });
68 |
69 | test( 'name applies property to input', function( assert ) {
70 | this.render( defaultTemplate );
71 |
72 | assert.strictEqual(
73 | this.$( '>:first-child' ).find( 'input' ).prop( 'name' ),
74 | '',
75 | 'Rendered input has empty name'
76 | );
77 |
78 | this.render( hbs`
79 | {{sl-radio name="testname"}}
80 | ` );
81 |
82 | assert.strictEqual(
83 | this.$( '>:first-child' ).find( 'input' ).prop( 'name' ),
84 | 'testname',
85 | 'Rendered input has name set'
86 | );
87 | });
88 |
89 | test( '"value" property is supported', function( assert ) {
90 | this.render( hbs`
91 | {{sl-radio value="testValue"}}
92 | ` );
93 |
94 | assert.strictEqual(
95 | this.$( '>:first-child' ).find( 'input' ).val(),
96 | 'testValue',
97 | '"value" is set'
98 | );
99 | });
100 |
101 | test( '"label" property is supported', function( assert ) {
102 | this.render( hbs`
103 | {{sl-radio label="testLabel"}}
104 | ` );
105 |
106 | assert.strictEqual(
107 | this.$( '>:first-child' ).find( 'label' ).text().trim(),
108 | 'testLabel',
109 | '"label" text gets set'
110 | );
111 | });
112 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-span-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent( 'sl-span', 'Integration | Component | sl span', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 | this.render( hbs`
10 | {{sl-span}}
11 | ` );
12 |
13 | assert.ok(
14 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-span' ),
15 | 'Has class "sl-ember-components-span"'
16 | );
17 |
18 | assert.strictEqual(
19 | this.$( '>:first-child' ).text().trim(),
20 | '',
21 | '"value" defaults to null'
22 | );
23 | });
24 |
25 | test( 'Content is yielded', function( assert ) {
26 | this.render( hbs`
27 | {{#sl-span}}
28 | Some yielded text
29 | {{/sl-span}}
30 | ` );
31 |
32 | assert.strictEqual(
33 | this.$( '>:first-child' ).text().trim(),
34 | 'Some yielded text',
35 | 'Content yields successfully'
36 | );
37 | });
38 |
39 | test( '"value" property is supported', function( assert ) {
40 | this.render( hbs`
41 | {{sl-span value="value text"}}
42 | ` );
43 |
44 | assert.strictEqual(
45 | this.$( '>:first-child' ).text().trim(),
46 | 'value text',
47 | '"value" text is displayed'
48 | );
49 | });
50 |
51 | test( '"value" property overrides yield', function( assert ) {
52 | this.render( hbs`
53 | {{#sl-span value="value text"}}
54 | Some yielded text
55 | {{/sl-span}}
56 | ` );
57 |
58 | assert.strictEqual(
59 | this.$( '>:first-child' ).text().trim(),
60 | 'value text',
61 | '"value" text is displayed instead of yield'
62 | );
63 | });
64 |
65 | test( 'loading property applies loading class', function( assert ) {
66 | this.render( hbs`
67 | {{sl-span}}
68 | ` );
69 |
70 | assert.notOk(
71 | this.$( '>:first-child' ).hasClass( 'sl-loading' ),
72 | 'Component does not have class "sl-loading"'
73 | );
74 |
75 | this.render( hbs`
76 | {{sl-span loading=true}}
77 | ` );
78 |
79 | assert.ok(
80 | this.$( '>:first-child' ).hasClass( 'sl-loading' ),
81 | 'Component has class "sl-loading"'
82 | );
83 | });
84 |
85 | test( 'inverse property applies inverse class', function( assert ) {
86 | this.render( hbs`
87 | {{sl-span}}
88 | ` );
89 |
90 | assert.notOk(
91 | this.$( '>:first-child' ).hasClass( 'inverse' ),
92 | 'Component does not have class "inverse"'
93 | );
94 |
95 | this.render( hbs`
96 | {{sl-span inverse=true}}
97 | ` );
98 |
99 | assert.ok(
100 | this.$( '>:first-child' ).hasClass( 'inverse' ),
101 | 'Component has class "inverse"'
102 | );
103 | });
104 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-tab-pane-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent( 'sl-tab-pane', 'Integration | Component | sl tab pane', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 |
10 | const label = 'Test Label';
11 | this.set( 'labelTest', label );
12 |
13 | const name = 'Test Name';
14 | this.set( 'nameTest', name );
15 |
16 | this.render( hbs`
17 | {{sl-tab-pane
18 | label=labelTest
19 | name=nameTest
20 | }}
21 | ` );
22 |
23 | assert.ok(
24 | this.$( '>:first-child' ).hasClass( 'tab-pane' ),
25 | 'Has class "tab-pane"'
26 | );
27 |
28 | assert.strictEqual(
29 | this.$( '>:first-child' ).attr( 'data-tab-label' ),
30 | label,
31 | 'Data tab label is set properly'
32 | );
33 |
34 | assert.strictEqual(
35 | this.$( '>:first-child' ).attr( 'data-tab-name' ),
36 | name,
37 | 'Data tab name is set properly'
38 | );
39 | });
40 |
41 | test( 'Yielded content passes through', function( assert ) {
42 |
43 | this.render( hbs`
44 | {{#sl-tab-pane}}
45 | A content
46 | {{/sl-tab-pane}}
47 | ` );
48 |
49 | assert.strictEqual(
50 | this.$( '>:first-child' ).text().trim(),
51 | 'A content',
52 | 'Expected content is present'
53 | );
54 | });
55 |
--------------------------------------------------------------------------------
/tests/integration/components/sl-tooltip-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent( 'sl-tooltip', 'Integration | Component | sl tooltip', {
5 | integration: true
6 | });
7 |
8 | test( 'Default rendered state', function( assert ) {
9 | this.set( 'title', 'test title' );
10 |
11 | this.render( hbs`
12 | {{sl-tooltip title=title}}
13 | ` );
14 |
15 | assert.ok(
16 | this.$( '>:first-child' ).hasClass( 'sl-ember-components-tooltip' ),
17 | 'Has class "sl-ember-components-tooltip"'
18 | );
19 | });
20 |
21 | test( '"Title" capabilities are supported', function( assert ) {
22 | this.set( 'title', 'test title' );
23 |
24 | this.render( hbs`
25 | {{sl-tooltip title=title}}
26 | ` );
27 |
28 | assert.strictEqual(
29 | this.$( '>:first-child' ).attr( 'data-original-title' ),
30 | this.get( 'title' ),
31 | 'Title prop supported'
32 | );
33 | });
34 |
35 | test( '"Popover" capabilities are supported', function( assert ) {
36 | this.set( 'popover', 'Popover content' );
37 | this.set( 'title', 'test title' );
38 |
39 | this.render( hbs`
40 | {{sl-tooltip title=title popover=popover}}
41 | ` );
42 |
43 | assert.strictEqual(
44 | this.$( '>:first-child' ).data( 'bs.popover' ).options.content,
45 | this.get( 'popover' ),
46 | 'Popover capabilites are supported'
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import resolver from './helpers/resolver';
2 | import { setResolver } from 'ember-qunit';
3 |
4 | setResolver( resolver );
5 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-calendar-month-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent(
5 | 'sl-calendar-month',
6 | 'Unit | Component | sl calendar month', {
7 | unit: true
8 | }
9 | );
10 |
11 | test( 'Default state is inactive', function( assert ) {
12 | const component = this.subject();
13 |
14 | assert.strictEqual(
15 | component.get( 'active' ),
16 | false,
17 | 'Component is not active'
18 | );
19 |
20 | assert.strictEqual(
21 | this.$().hasClass( 'active' ),
22 | false,
23 | 'Component does not have "active" class'
24 | );
25 | });
26 |
27 | test( 'Active state is set correctly', function( assert ) {
28 | const component = this.subject({ active: true });
29 |
30 | assert.ok(
31 | component.get( 'active' ),
32 | 'Component is active'
33 | );
34 |
35 | assert.ok(
36 | this.$().hasClass( 'active' ),
37 | '"active" class is present'
38 | );
39 | });
40 |
41 | test( 'Action binding sends action with month', function( assert ) {
42 | this.subject({
43 | action: 'test',
44 | month: 6,
45 | targetObject: {
46 | test( month ) {
47 | assert.strictEqual(
48 | month,
49 | 6,
50 | 'Test action fired with expected month'
51 | );
52 | }
53 | }
54 | });
55 |
56 | assert.expect( 1 );
57 |
58 | this.$().trigger( 'click' );
59 | });
60 |
61 | test( 'Short name property is invalid without month', function( assert ) {
62 | const component = this.subject();
63 |
64 | assert.strictEqual(
65 | component.get( 'shortName' ),
66 | 'Invalid date',
67 | 'Invalid month results in invalid shortName'
68 | );
69 | });
70 |
71 | test( 'Short name property is defined with valid month', function( assert ) {
72 | const component = this.subject({ month: 1 });
73 |
74 | assert.strictEqual(
75 | component.get( 'shortName' ),
76 | 'Jan',
77 | 'Valid shortName with valid month'
78 | );
79 | });
80 |
81 | test( 'Dependent keys are correct', function( assert ) {
82 | const component = this.subject();
83 |
84 | const shortNameDependentKeys = [
85 | 'month'
86 | ];
87 |
88 | assert.deepEqual(
89 | component.shortName._dependentKeys,
90 | shortNameDependentKeys,
91 | 'Dependent keys are correct for shortName()'
92 | );
93 | });
94 |
95 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
96 | globalLibraries.setupSpies();
97 |
98 | const component = this.subject();
99 |
100 | this.render();
101 |
102 | globalLibraries.triggerEvents( component );
103 |
104 | assert.notOk(
105 | globalLibraries.called(),
106 | 'Global libraries are not referenced in component'
107 | );
108 |
109 | globalLibraries.restoreSpies();
110 | });
111 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-calendar-year-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent( 'sl-calendar-year', 'Unit | Component | sl calendar year', {
5 | unit: true
6 | });
7 |
8 | test( 'Default state is not active, new, or old', function( assert ) {
9 | const component = this.subject();
10 |
11 | assert.strictEqual(
12 | component.get( 'active' ),
13 | false,
14 | 'Default component is not active'
15 | );
16 |
17 | assert.strictEqual(
18 | component.get( 'new' ),
19 | false,
20 | 'Default component is not in new state'
21 | );
22 |
23 | assert.strictEqual(
24 | component.get( 'old' ),
25 | false,
26 | 'Default component is not in old state'
27 | );
28 |
29 | assert.strictEqual(
30 | this.$().hasClass( 'active' ),
31 | false,
32 | 'Default rendered component does not have class "active"'
33 | );
34 |
35 | assert.strictEqual(
36 | this.$().hasClass( 'new' ),
37 | false,
38 | 'Default rendered component does not have class "new"'
39 | );
40 |
41 | assert.strictEqual(
42 | this.$().hasClass( 'old' ),
43 | false,
44 | 'Default rendered component does not have class "old"'
45 | );
46 | });
47 |
48 | test( 'Click event sends action with year value', function( assert ) {
49 | assert.expect( 1 );
50 |
51 | const done = assert.async();
52 |
53 | const exampleYear = 2000;
54 |
55 | this.subject({
56 | action: 'test',
57 |
58 | targetObject: {
59 | test: ( year ) => {
60 | assert.strictEqual(
61 | year,
62 | exampleYear,
63 | 'Received year'
64 | );
65 |
66 | done();
67 | }
68 | },
69 |
70 | year: exampleYear
71 | });
72 |
73 | this.$().trigger( 'click' );
74 | });
75 |
76 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
77 | globalLibraries.setupSpies();
78 |
79 | const component = this.subject();
80 |
81 | this.render();
82 |
83 | globalLibraries.triggerEvents( component );
84 |
85 | assert.notOk(
86 | globalLibraries.called(),
87 | 'Global libraries are not referenced in component'
88 | );
89 |
90 | globalLibraries.restoreSpies();
91 | });
92 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-drop-option-test.js:
--------------------------------------------------------------------------------
1 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
2 | import sinon from 'sinon';
3 | import { moduleForComponent, test } from 'ember-qunit';
4 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
5 |
6 | moduleForComponent( 'sl-drop-option', 'Unit | Component | sl drop option', {
7 | unit: true
8 | });
9 |
10 | test( 'Expected Mixins are present', function( assert ) {
11 | assert.ok(
12 | ClassPrefix.detect( this.subject() ),
13 | 'ClassPrefix Mixin is present'
14 | );
15 | });
16 |
17 | test( 'Default property values', function( assert ) {
18 | const component = this.subject();
19 |
20 | assert.strictEqual(
21 | component.get( 'componentClass' ),
22 | 'drop-option',
23 | 'componentClass is set to drop-option'
24 | );
25 |
26 | assert.strictEqual(
27 | component.get( 'data' ),
28 | null,
29 | '"Data" property defaults to null'
30 | );
31 |
32 | assert.strictEqual(
33 | component.get( 'actionContext' ),
34 | null,
35 | '"Actioncontext" property defaults to null'
36 | );
37 |
38 | assert.strictEqual(
39 | component.get( 'tagName' ),
40 | 'li',
41 | '"tagName" property defaults to li'
42 | );
43 | });
44 |
45 | test( 'Click triggers bound action with correct arguments', function( assert ) {
46 | const testDataObject = {
47 | testProp: 'testValue'
48 | };
49 |
50 | const testActionSpy = sinon.spy();
51 |
52 | this.subject({
53 | action: 'testAction',
54 | actionContext: 'testActionContext',
55 | data: testDataObject,
56 | label: 'Test',
57 | targetObject: {
58 | testAction: testActionSpy
59 | }
60 | });
61 |
62 | this.$( 'a' ).trigger( 'click' );
63 |
64 | // spy.calledWith() does a deepEquals on objects
65 | assert.ok(
66 | testActionSpy.calledWith( testDataObject, 'testActionContext' ),
67 | 'Test action fired correctly with the correct arguments'
68 | );
69 | });
70 |
71 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
72 | globalLibraries.setupSpies();
73 |
74 | const component = this.subject();
75 |
76 | this.render();
77 |
78 | globalLibraries.triggerEvents( component );
79 |
80 | assert.notOk(
81 | globalLibraries.called(),
82 | 'Global libraries are not referenced in component'
83 | );
84 |
85 | globalLibraries.restoreSpies();
86 | });
87 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-grid-row-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent( 'sl-grid-row', 'Unit | Component | sl grid row', {
5 | unit: true
6 | });
7 |
8 | test( 'Default property values', function( assert ) {
9 | const component = this.subject();
10 |
11 | assert.strictEqual(
12 | component.get( 'tagName' ),
13 | 'tr',
14 | 'tagName is tr'
15 | );
16 |
17 | assert.strictEqual(
18 | component.get( 'record' ),
19 | null,
20 | 'record is null'
21 | );
22 | });
23 |
24 | test( 'Click event triggers rowClick action with row record', function( assert ) {
25 | const record = { testValue: true };
26 |
27 | this.subject({
28 | record,
29 | onClick: 'test',
30 |
31 | targetObject: {
32 | test( passedRow ) {
33 | assert.equal(
34 | passedRow.record,
35 | record,
36 | 'Row record passed from onClick is expected value'
37 | );
38 | }
39 | }
40 | });
41 |
42 | this.$().trigger( 'click' );
43 | });
44 |
45 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
46 | globalLibraries.setupSpies();
47 |
48 | const component = this.subject();
49 |
50 | this.render();
51 |
52 | globalLibraries.triggerEvents( component );
53 |
54 | assert.notOk(
55 | globalLibraries.called(),
56 | 'Global libraries are not referenced in component'
57 | );
58 |
59 | globalLibraries.restoreSpies();
60 | });
61 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-menu-item-show-all-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent( 'sl-menu-item-show-all', 'Unit | Component | sl menu item show all', {
5 | unit: true
6 | });
7 |
8 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
9 | globalLibraries.setupSpies();
10 |
11 | const component = this.subject();
12 |
13 | this.render();
14 |
15 | globalLibraries.triggerEvents( component );
16 |
17 | assert.notOk(
18 | globalLibraries.called(),
19 | 'Global libraries are not referenced in component'
20 | );
21 |
22 | globalLibraries.restoreSpies();
23 | });
24 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-modal-body-test.js:
--------------------------------------------------------------------------------
1 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 | import { moduleForComponent, test } from 'ember-qunit';
4 |
5 | moduleForComponent( 'sl-modal-body', 'Unit | Component | sl modal body', {
6 | unit: true
7 | });
8 |
9 | test( 'Expected Mixins are present', function( assert ) {
10 | assert.ok(
11 | ClassPrefix.detect( this.subject() ),
12 | 'ClassPrefix Mixin is present'
13 | );
14 | });
15 |
16 | test( 'Default property values are set correctly', function( assert ) {
17 | const component = this.subject();
18 |
19 | assert.strictEqual(
20 | component.get( 'componentClass' ),
21 | 'modal-body',
22 | 'componentClass is set to modal-body'
23 | );
24 | });
25 |
26 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
27 | globalLibraries.setupSpies();
28 |
29 | const component = this.subject();
30 |
31 | this.render();
32 |
33 | globalLibraries.triggerEvents( component );
34 |
35 | assert.notOk(
36 | globalLibraries.called(),
37 | 'Global libraries are not referenced in component'
38 | );
39 |
40 | globalLibraries.restoreSpies();
41 | });
42 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-modal-footer-test.js:
--------------------------------------------------------------------------------
1 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
2 | import { moduleForComponent, test } from 'ember-qunit';
3 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
4 |
5 | moduleForComponent( 'sl-modal-footer', 'Unit | Component | sl modal footer', {
6 | unit: true
7 | });
8 |
9 | test( 'Default property values', function( assert ) {
10 | const component = this.subject();
11 |
12 | assert.strictEqual(
13 | component.get( 'buttonText' ),
14 | 'Close',
15 | 'Default buttonText is "Close"'
16 | );
17 |
18 | assert.ok(
19 | ClassPrefix.detect( this.subject() ),
20 | 'ClassPrefix Mixin is present'
21 | );
22 | });
23 |
24 | test( 'Default property values are set correctly', function( assert ) {
25 | const component = this.subject();
26 |
27 | assert.strictEqual(
28 | component.get( 'componentClass' ),
29 | 'modal-footer',
30 | 'componentClass is set to modal-footer'
31 | );
32 | });
33 |
34 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
35 | globalLibraries.setupSpies();
36 |
37 | const component = this.subject();
38 |
39 | this.render();
40 |
41 | globalLibraries.triggerEvents( component );
42 |
43 | assert.notOk(
44 | globalLibraries.called(),
45 | 'Global libraries are not referenced in component'
46 | );
47 |
48 | globalLibraries.restoreSpies();
49 | });
50 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-modal-header-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent( 'sl-modal-header', 'Unit | Component | sl modal header', {
5 | unit: true
6 | });
7 |
8 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
9 | globalLibraries.setupSpies();
10 |
11 | const component = this.subject();
12 |
13 | this.render();
14 |
15 | globalLibraries.triggerEvents( component );
16 |
17 | assert.notOk(
18 | globalLibraries.called(),
19 | 'Global libraries are not referenced in component'
20 | );
21 |
22 | globalLibraries.restoreSpies();
23 | });
24 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-panel-test.js:
--------------------------------------------------------------------------------
1 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
2 | import { moduleForComponent, test } from 'ember-qunit';
3 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
4 |
5 | moduleForComponent( 'sl-panel', 'Unit | Component | sl panel', {
6 | unit: true
7 | });
8 |
9 | test( 'Expected Mixins are present', function( assert ) {
10 | assert.ok(
11 | ClassPrefix.detect( this.subject() ),
12 | 'ClassPrefix Mixin is present'
13 | );
14 | });
15 |
16 | test( 'Default property values', function( assert ) {
17 | const component = this.subject();
18 |
19 | assert.strictEqual(
20 | component.get( 'componentClass' ),
21 | 'panel',
22 | 'componentClass is set to panel'
23 | );
24 |
25 | assert.strictEqual(
26 | component.get( 'heading' ),
27 | null,
28 | 'Default heading value is null'
29 | );
30 |
31 | assert.strictEqual(
32 | component.get( 'loading' ),
33 | false,
34 | 'Default loading value is null'
35 | );
36 | });
37 |
38 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
39 | globalLibraries.setupSpies();
40 |
41 | const component = this.subject();
42 |
43 | this.render();
44 |
45 | globalLibraries.triggerEvents( component );
46 |
47 | assert.notOk(
48 | globalLibraries.called(),
49 | 'Global libraries are not referenced in component'
50 | );
51 |
52 | globalLibraries.restoreSpies();
53 | });
54 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-radio-test.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
3 | import InputBasedMixin from 'sl-ember-components/mixins/sl-input-based';
4 | import{ moduleForComponent, test } from 'ember-qunit';
5 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
6 |
7 | moduleForComponent( 'sl-radio', 'Unit | Component | sl radio', {
8 | unit: true
9 | });
10 |
11 | test( 'Expected Mixins are present', function( assert ) {
12 | assert.ok(
13 | ClassPrefix.detect( this.subject() ),
14 | 'ClassPrefix Mixin is present'
15 | );
16 |
17 | assert.ok(
18 | InputBasedMixin.detect( this.subject() ),
19 | 'InputBased Mixin is present'
20 | );
21 | });
22 |
23 | test( 'Default property values', function( assert ) {
24 | const component = this.subject();
25 |
26 | assert.strictEqual(
27 | component.get( 'componentClass' ),
28 | 'radio',
29 | 'ComponentClass is set to radio'
30 | );
31 |
32 | assert.strictEqual(
33 | component.get( 'label' ),
34 | null,
35 | 'Default property "label" is null'
36 | );
37 |
38 | assert.strictEqual(
39 | component.get( 'tagName' ),
40 | 'div',
41 | 'tagName is "div" in default state'
42 | );
43 |
44 | assert.strictEqual(
45 | component.get( 'value' ),
46 | null,
47 | 'Default property "value" is null'
48 | );
49 | });
50 |
51 | test( 'radioType property sets relevant class', function( assert ) {
52 | const component = this.subject();
53 |
54 | assert.strictEqual(
55 | component.get( 'radioType' ),
56 | 'radio',
57 | 'RadioType defaults to "radio"'
58 | );
59 |
60 | Ember.run( () => {
61 | component.set( 'inline', true );
62 | });
63 |
64 | assert.strictEqual(
65 | component.get( 'radioType' ),
66 | 'radio-inline',
67 | 'RadioType is inline'
68 | );
69 | });
70 |
71 | test( 'inline property changes tagName', function( assert ) {
72 | const component = this.subject({
73 | inline: true
74 | });
75 |
76 | assert.strictEqual(
77 | component.get( 'tagName' ),
78 | 'label',
79 | 'tagName is "label" when component is inline'
80 | );
81 | });
82 |
83 | test( 'Dependent keys are correct', function( assert ) {
84 | const component = this.subject();
85 |
86 | const radioTypeDependentKeys = [
87 | 'inline'
88 | ];
89 |
90 | assert.deepEqual(
91 | component.radioType._dependentKeys,
92 | radioTypeDependentKeys,
93 | 'Dependent keys are correct for radioType()'
94 | );
95 | });
96 |
97 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
98 | globalLibraries.setupSpies();
99 |
100 | const component = this.subject();
101 |
102 | this.render();
103 |
104 | globalLibraries.triggerEvents( component );
105 |
106 | assert.notOk(
107 | globalLibraries.called(),
108 | 'Global libraries are not referenced in component'
109 | );
110 |
111 | globalLibraries.restoreSpies();
112 | });
113 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-select-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 |
4 | moduleForComponent( 'sl-select', 'Unit | Component | sl select', {
5 | unit: true
6 | });
7 |
8 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
9 | globalLibraries.setupSpies();
10 |
11 | const component = this.subject();
12 |
13 | this.render();
14 |
15 | globalLibraries.triggerEvents( component );
16 |
17 | assert.notOk(
18 | globalLibraries.called(),
19 | 'Global libraries are not referenced in component'
20 | );
21 |
22 | globalLibraries.restoreSpies();
23 | });
24 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-span-test.js:
--------------------------------------------------------------------------------
1 | import ClassPrefix from 'sl-ember-components/mixins/class-prefix';
2 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
3 | import{ moduleForComponent, test } from 'ember-qunit';
4 |
5 | moduleForComponent( 'sl-span', 'Unit | Component | sl span', {
6 | unit: true
7 | });
8 |
9 | test( 'Expected Mixins are present', function( assert ) {
10 | assert.ok(
11 | ClassPrefix.detect( this.subject() ),
12 | 'ClassPrefix Mixin is present'
13 | );
14 | });
15 |
16 | test( 'Default property values', function( assert ) {
17 | const component = this.subject();
18 |
19 | assert.strictEqual(
20 | component.get( 'componentClass' ),
21 | 'span',
22 | 'ComponentClass is set to span'
23 | );
24 |
25 | assert.strictEqual(
26 | component.get( 'tagName' ),
27 | 'span',
28 | 'Default property "tagName" is "span"'
29 | );
30 |
31 | assert.strictEqual(
32 | component.get( 'inverse' ),
33 | false,
34 | 'Default property "inverse" is false'
35 | );
36 |
37 | assert.strictEqual(
38 | component.get( 'loading' ),
39 | false,
40 | 'Default property "loading" is false'
41 | );
42 |
43 | assert.strictEqual(
44 | component.get( 'value' ),
45 | null,
46 | 'Default property "value" is null'
47 | );
48 | });
49 |
50 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
51 | globalLibraries.setupSpies();
52 |
53 | const component = this.subject();
54 |
55 | this.render();
56 |
57 | globalLibraries.triggerEvents( component );
58 |
59 | assert.notOk(
60 | globalLibraries.called(),
61 | 'Global libraries are not referenced in component'
62 | );
63 |
64 | globalLibraries.restoreSpies();
65 | });
66 |
--------------------------------------------------------------------------------
/tests/unit/components/sl-tab-pane-test.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import { moduleForComponent, test } from 'ember-qunit';
3 | import startApp from '../../helpers/start-app';
4 | import globalLibraries from '../../helpers/sl/synchronous/global-libraries';
5 |
6 | let App;
7 |
8 | moduleForComponent( 'sl-tab-pane', 'Unit | Component | sl tab pane', {
9 | needs: [ 'component:sl-tab-panel' ],
10 |
11 | beforeEach() {
12 | App = startApp();
13 | },
14 |
15 | afterEach() {
16 | Ember.run( App, App.destroy );
17 | },
18 |
19 | unit: true
20 | });
21 |
22 | test( 'Default property values', function( assert ) {
23 | const component = this.subject( {
24 | label: 'Test Label',
25 | name: 'Test Name'
26 | } );
27 |
28 | assert.strictEqual(
29 | component.get( 'data-tab-label' ),
30 | 'Test Label',
31 | '"data-tab-label" is set to the value of "label"'
32 | );
33 |
34 | assert.strictEqual(
35 | component.get( 'data-tab-name' ),
36 | 'Test Name',
37 | '"data-tab-name" is set to the value of "name"'
38 | );
39 | });
40 |
41 | test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
42 | globalLibraries.setupSpies();
43 |
44 | const component = this.subject();
45 |
46 | this.render();
47 |
48 | globalLibraries.triggerEvents( component );
49 |
50 | assert.notOk(
51 | globalLibraries.called(),
52 | 'Global libraries are not referenced in component'
53 | );
54 |
55 | globalLibraries.restoreSpies();
56 | });
57 |
--------------------------------------------------------------------------------
/tests/unit/mixins/sl-component-class-prefix-test.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import mixinUnderTest from 'sl-ember-components/mixins/class-prefix';
3 | import * as prefixModule from 'sl-ember-components/utils/class-prefix';
4 | import sinon from 'sinon';
5 | import { module, test } from 'qunit';
6 |
7 | module( 'Unit | Mixin | sl component class prefix' );
8 |
9 | test( 'Can be successfully mixed', function( assert ) {
10 | const testObject = Ember.Component.extend( mixinUnderTest );
11 | const subject = testObject.create();
12 |
13 | assert.ok(
14 | subject
15 | );
16 | });
17 |
18 | test( 'prefix() is called when getComponentClassName() invoked', function( assert ) {
19 | const testObject = Ember.Component.extend( mixinUnderTest, {
20 | componentClass: 'test-component'
21 | });
22 |
23 | const subject = testObject.create();
24 | const prefixSpy = sinon.spy( prefixModule, 'default' );
25 |
26 | subject.getComponentClassName();
27 |
28 | assert.ok(
29 | prefixSpy.called,
30 | 'prefix() was called'
31 | );
32 | });
33 |
34 | test( 'Prefixed component class is present in classNames array', function( assert ) {
35 | const testObject = Ember.Component.extend( mixinUnderTest, {
36 | componentClass: 'test-component'
37 | });
38 |
39 | const subject = testObject.create();
40 | const prefix = prefixModule.default;
41 | const prefixedComponentClass = prefix( 'test-component' );
42 |
43 | assert.ok(
44 | subject.get( 'classNames' ).contains( prefixedComponentClass ),
45 | 'Prefixed component class is present in classNames array'
46 | );
47 | });
48 |
--------------------------------------------------------------------------------
/tests/unit/mixins/sl-component-input-id-test.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import mixinUnderTest from 'sl-ember-components/mixins/sl-component-input-id';
3 | import { module, test } from 'qunit';
4 |
5 | module( 'Unit | Mixin | sl component input id' );
6 |
7 | test( 'Can be successfully mixed', function( assert ) {
8 | const testObject = Ember.Object.extend( mixinUnderTest );
9 | const subject = testObject.create();
10 |
11 | assert.ok(
12 | subject,
13 | 'sl-component-input-id mixin is present'
14 | );
15 | });
16 |
17 | test( 'inputId is set on component', function( assert ) {
18 | const component = Ember.Component.extend( mixinUnderTest ).create();
19 |
20 | assert.strictEqual(
21 | component.get( 'inputId' ),
22 | component.get( 'elementId' ) + '-input'
23 | );
24 | });
25 |
26 | test( 'inputId value is preserved if it is already set', function( assert ) {
27 | const id = 'preset-id';
28 | const component = Ember.Component.extend( mixinUnderTest ).create( {
29 | inputId: id
30 | });
31 |
32 | assert.strictEqual(
33 | component.get( 'inputId' ),
34 | id
35 | );
36 | });
37 |
--------------------------------------------------------------------------------
/tests/unit/mixins/sl-input-based-test.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import mixinUnderTest from 'sl-ember-components/mixins/sl-input-based';
3 | import { module, test } from 'qunit';
4 |
5 | module( 'Unit | Mixin | sl input based' );
6 |
7 | test( 'Successfully mixed', function( assert ) {
8 | const testObject = Ember.Object.extend( mixinUnderTest );
9 | const subject = testObject.create();
10 |
11 | assert.ok(
12 | subject
13 | );
14 | });
15 |
16 | test( 'Default values are set correctly', function( assert ) {
17 | const testObject = Ember.Object.extend( mixinUnderTest );
18 | const subject = testObject.create();
19 |
20 | assert.strictEqual(
21 | subject.get( 'disabled' ),
22 | false,
23 | 'Disabled is false by default'
24 | );
25 |
26 | assert.strictEqual(
27 | subject.get( 'optional' ),
28 | false,
29 | 'Optional is false by default'
30 | );
31 |
32 | assert.strictEqual(
33 | subject.get( 'name' ),
34 | null,
35 | 'Name is null by default'
36 | );
37 |
38 | assert.strictEqual(
39 | subject.get( 'readonly' ),
40 | false,
41 | 'Readonly is false by default'
42 | );
43 |
44 | assert.strictEqual(
45 | subject.get( 'required' ),
46 | false,
47 | 'Required is false by default'
48 | );
49 | });
50 |
51 | test( 'Class name bindings contain expected bindings', function( assert ) {
52 | const expectedClassNameBindings = [
53 | 'disabled',
54 | 'optional',
55 | 'readonly',
56 | 'required'
57 | ];
58 | const testObject = Ember.Object.extend( mixinUnderTest );
59 | const subject = testObject.create();
60 |
61 | assert.deepEqual(
62 | subject.get( 'classNameBindings' ),
63 | expectedClassNameBindings,
64 | 'classNameBindings contains the expected class names'
65 | );
66 | });
67 |
68 | test( 'readonlyString() returns expected value', function( assert ) {
69 | const testObject = Ember.Object.extend( mixinUnderTest );
70 | const subject = testObject.create();
71 |
72 | subject.set( 'readonly', true );
73 |
74 | assert.strictEqual(
75 | subject.get( 'readonlyString' ),
76 | 'readonly',
77 | 'readonlyString() returns expected string when "readonly" is true'
78 | );
79 |
80 | subject.set( 'readonly', false );
81 |
82 | assert.strictEqual(
83 | subject.get( 'readonlyString' ),
84 | null,
85 | 'readonlyString() returns null when "readonly" is false'
86 | );
87 | });
88 |
89 | test( 'Dependent keys are correct', function( assert ) {
90 | const testObject = Ember.Object.extend( mixinUnderTest );
91 | const subject = testObject.create();
92 |
93 | const readonlyStringDependentKeys = [
94 | 'readonly'
95 | ];
96 |
97 | assert.deepEqual(
98 | subject.readonlyString._dependentKeys,
99 | readonlyStringDependentKeys,
100 | 'Dependent keys are correct for readonlyString()'
101 | );
102 | });
103 |
--------------------------------------------------------------------------------
/tests/unit/utils/class-prefix-test.js:
--------------------------------------------------------------------------------
1 | import prefix from 'sl-ember-components/utils/class-prefix';
2 | import { module, test } from 'qunit';
3 | import config from 'ember-get-config';
4 |
5 | module( 'Unit | Utility | class-prefix' );
6 |
7 | test( 'prefix() returns a correctly structured prefixed component class name', function( assert ) {
8 | config.componentClassPrefix = 'test-prefix';
9 |
10 | assert.strictEqual(
11 | prefix( 'test-component' ),
12 | 'test-prefix-test-component',
13 | 'prefix returns a correctly structured prefixed component class name'
14 | );
15 | });
16 |
--------------------------------------------------------------------------------
/vendor/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softlayer/sl-ember-components/b666df5d75c6ecf51da82ca2c3fd2722add17715/vendor/.gitkeep
--------------------------------------------------------------------------------