diff --git a/.travis.yml b/.travis.yml index a19d73f9..ee67302f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ --- language: node_js node_js: - - "4.4" + - "0.12" sudo: false @@ -11,7 +11,7 @@ cache: env: - EMBER_TRY_SCENARIO=default - - EMBER_TRY_SCENARIO=ember-1-13 + - EMBER_TRY_SCENARIO=ember-1.13 - EMBER_TRY_SCENARIO=ember-release - EMBER_TRY_SCENARIO=ember-beta - EMBER_TRY_SCENARIO=ember-canary @@ -22,10 +22,7 @@ matrix: - env: EMBER_TRY_SCENARIO=ember-canary before_install: - - mkdir travis-phantomjs - - wget https://s3.amazonaws.com/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2 -O $PWD/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2 - - tar -xvf $PWD/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2 -C $PWD/travis-phantomjs - - export PATH=$PWD/travis-phantomjs:$PATH + - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH - "npm config set spin false" - "npm install -g npm@^2" diff --git a/LICENSE.md b/LICENSE.md index 00e9fbbf..02000b56 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 +Copyright (c) 2016 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: diff --git a/README-pre-1-0.md b/README-pre-1-0.md new file mode 100644 index 00000000..da1e5b76 --- /dev/null +++ b/README-pre-1-0.md @@ -0,0 +1,398 @@ +Ember-tooltips [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg)](https://travis-ci.org/sir-dunxalot/ember-tooltips) [![npm](https://img.shields.io/npm/v/ember-tooltips.svg)](https://www.npmjs.com/package/ember-tooltips) +====== + +Render simple tooltips on components, views, HTML elements, and more using simple strings, HTMLBars, bound properties, and more. + +Powered by darsain/tooltip. You can see [a demo here](http://sir-dunxalot.github.io/ember-tooltips/). + +## Installation + +``` +ember install ember-tooltips +``` + +## Documentation + +Documentation for usage is below: + +- [Usage](#usage) + - [On helpers](#using-on-helpers) + - [As a component](#using-as-a-component) + - [On HTML elements](#using-on-html-elements) +- [Supported properties](#supported-properties) +- [The Tooltip Object](#the-tooltip-object) +- [Hiding and Showing Tooltips](#hiding-and-showing-tooltips) +- [Accessibility](#accessibility) +- [The Tooltip Mixin (and changing default values)](#the-tooltip-mixin) +- [The Tooltip Utility](#the-tooltip-utility) + +## Usage + +### Using on Helpers + +The most common way to use a tooltip is on a helper like `{{#link-to}}` or `{{some-component}}`. + +All [supported properties](#supported-properties) should be camelCased and prefixed by `tooltip`. + +To add a tooltip to any component: + +```hbs +{{#some-component tooltipContent='This is the tooltip'}} + Hover over me! +{{/some-component}} +``` + +You can use multiple options: + +```hbs +{{#some-component + tooltipContent='This is the tooltip' + tooltipPlace='Right' + tooltipSpacing=50 +}} + Hover over me! +{{/some-component}} +``` + +### Using as a Component + +If you want to use HTMLBars in your tooltip, then the `{{tooltip-on-parent}}` component is your friend. + +The tooltip is automatically attached to the parent view's element and the template block of the `{{tooltip-on-parent}}` component will be rendered inside the tooltip. + +```hbs +{{#some-component}} + {{#tooltip-on-parent}} + Stop hovering over me, {{name}}! + {{/tooltip-on-parent}} + + Don't hover over me! +{{/some-component}} +``` + +camelCased Options can still be passed to the component but they are not prefixed: + +```hbs +{{#some-component}} + {{#tooltip-on-parent place='right' effectClass='grow'}} + Stop hovering over me, {{name}}! + {{/tooltip-on-parent}} + + Dont' hover over me! +{{/some-component}} +``` + +### Using on HTML elements + +If you want to render a tooltip on an HTML element that isn't rendered by an Ember Component, you can use `data` attributes. + +1. Add the `has-tooltip` class +2. Add `data-` attributes to set tooltip properties +3. Call `this.renderChildTooltips()` in a parent view that has the tooltips mixin included (usually this mixin is automatically added to all components. See [the tooltips mixin](#the-tooltip-mixin)) + +For example, to render two tooltips: + +```hbs +{{#some-component}} + +{{/some-component}} +``` + +```js +// app/components/some-component.js + +import Ember from 'ember'; +import TooltipsMixin from 'ember-tooltips/mixins/components/tooltips'; + +export default Ember.Component.extend( + TooltipsMixin, { + + didInsertElement: function() { + this._super(...arguments); + this.renderChildTooltips(); // Voila! + }, + +}); +``` + +Options can be set on the element(s) as prefixed and dasherized attributes. For example: + +```hbs +{{#some-component}} +
+ + + Hover for more info + + +
+{{/some-component}} +``` + +```js +// app/components/some-component.js + +import Ember from 'ember'; + +export default Ember.Component.extend({ + + didInsertElement: function() { + this._super(...arguments); + this.renderChildTooltips(); // Voila! + }, + +}); +``` + +**Warning:** Using HTML `data-x` attributes has limitations. Durations and manual triggers are not supported. + +### Supported Properties + +This addon aims to maintain parity with all the [Tooltip library](https://github.com/darsain/tooltip/wiki) features. + +Current tooltip properties this addon supports are: + +- `auto` (`true` or `false`. Defaults to `true`) +- `duration` (time in milliseconds. No default) +- `effectClass` (`'none'`, `'fade'`, `'slide'`, or `'grow'`. Defaults to `'slide'`) +- `event` (see [events](#events)) +- `hideOn` (see [events](#events)) +- `place` (defaults to `'top'`) +- `showOn` (see [events](#events)) +- `spacing` (defaults to `10`) +- `typeClass` (can be any string. No default) +- `visibility` (`true` or `false`, when `event: 'manual'`. No default) + +**Please note**, depending on your use case, you may have to prefix or modify the property name. For example, `effectClass`, `tooltipEffectClass` or `data-tooltip-effect-class`. + +Default values can be set [on the `ember-tooltips` mixin](#customizing-the-mixin). + +```hbs +{{input type='text' + tooltipEvent='focus' + tooltipContent='Helpful form tip' + tooltipDuration='1000' + tooltipPlace='right' +}} +``` + +### The Tooltip Object + +Any time a tooltip is created for a component, the tooltip is set as the `tooltip` property of the component. + +Thus, you can programatically control the tooltip of any Ember component using `this.get('tooltip')`. This will return the `Tooltip` instance, which is created using [`darsain/tooltip`](https://github.com/darsain/tooltip/wiki/Tooltip). + +The documentation for the tooltip is contained in [the `Tooltip` API wiki](https://github.com/darsain/tooltip/wiki/Tooltip). + +For example: + +```js +/* Change the tooltip content */ +this.get('tooltip').content('This is the new content'); + +/* Show the tooltip */ +this.get('tooltip').show(); + +/* Get the tooltip's DOM element */ +this.get('tooltip').element; + +/* Update the size after the tooltip content changes */ +this.get('tooltip').updateSize(); + +/* See if the tooltip is already hidden */ +this.get('tooltip').hidden; // 1 or 0 +``` + +### Hiding and Showing Tooltips + +There are three ways to hide and show tooltips: + +- [Events](#events) +- [Methods](#methods) +- [Timers](#timers) + +#### Events + +You can control the hiding and showing of tooltips on set jQuery events using three properties: `event`, `showOn`, and `hideOn`. + +Version `0.5.5` and lower does *not* support `hideOn` and `showOn`. + +`event` is the easiest way to set the hide and show event - it sets the `hideOn` and `showOn` properties. + +`event` should be a string equal to `'hover'`, `'click'`, `'focus'`, `'ready'` (show on load of DOM), or `'none'`. The default value is `'hover'`. + +```hbs +{{some-component + tooltipContent='This will show on hover' + tooltipEvent='hover' +}} +``` + +If you want to set the show or hide events individually, you can overwrite `event` using `showOn` and `hideOn`. Both properties accept any [jQuery event](https://api.jquery.com/category/events/) or `'none'`. + +For example: + +```hbs +{{some-component + tooltipHideOn='none' + tooltipShowOn='click' + tooltipContent='hover' +}} +``` + +Default values for `event`, `hideOn`, and `showOn` can be set [on the `ember-tooltips` mixin](#customizing-the-mixin). + +Version `0.5.5` and lower of this addon use 'manual' instead of 'none'. + +#### Methods + +As described in [The Tooltip Object](#the-tooltip-object) documentation, you can access the `tooltip` property on any component. + +Thus, you can programatically hide and show the tooltip of any component as follows: + +```js +this.get('tooltip').hide(); +this.get('tooltip').show(); +``` + +If you want to check whether a tooltip is currently hidden, access the `hidden` property: + +``` +this.get('tooltip').hidden; // 1 or 0 +``` + +#### Timers + +You can set a timer on a tooltip to close it after an amount of time using the `duration` property. Duration should be any number of milliseconds. + +```hbs +{{input type='text' + tooltipEvent='focus' + tooltipContent='Helpful form tip' + tooltipDuration='1000' +}} +``` + +In the above example, the tooltip shows on focus and then closes after 1000ms. + +### Accessibility + +This addon aims to meet 508 compliance. + +Components with tooltips are given a `tabindex` attribute and when the component receives focus, the tooltip with show. + +Additionally, the `aria-describedby`, `title`, `id`, and `role` attributes are managed by this addon. + +There is always room for improvement and PRs to improve accessibility are welcome. + +### The Tooltip Mixin + +By default the `ember-tooltips` mixin is added to all components. This mixin contains the helper methods to render tooltips. + +You can customize where the mixin is automatically added by overriding the `addTo` option in your `config/environment.js` file: + +```js +module.exports = function(environment) { + var ENV = { + + /* ... */ + + tooltips: { + addTo: ['Component'], // Ember.Component + } + } +}; +``` + +Each option corresponds to a class on the Ember namespace. For example, `addTo: ['Input']` corresponds to `Ember.Input`. + +You can disable all reopening of classes by seting `addTo` to a falsy value or empty array: + +```js +module.exports = function(environment) { + var ENV = { + + /* ... */ + + tooltips: { + addTo: [], // The mixin is not added to anything + } + } +}; +``` + +You can add the tooltip functionality to individual classes by importing the mixin to your class: + +```js +// app/components/big-button.js + +import Ember from 'ember'; +import TooltipsComponent from 'ember-tooltips/mixins/components/tooltips'; + +export default Ember.Component.extend( + TooltipsComponent, { + +}); +``` + +To set default values for [supported properties](#supported-properties) across your application, set the values in the mixin in your app tree: + +```js +// app/mixins/components/tooltips.js + +import Ember from 'ember'; +import EmberTooltipsMixin from 'ember-tooltips/mixins/components/tooltips'; + +export default Ember.Mixin.create( + EmberTooltipsMixin, { + + tooltipPlace: 'right', + tooltipSpacing: 20, +}); +``` + +You can see the [tooltips mixin here](https://github.com/sir-dunxalot/ember-tooltips/blob/master/addon/mixins/components/tooltips.js). + +### The Tooltip Utility + +All tooltips rendered by this addon use the [`renderTooltip()` utility](https://github.com/sir-dunxalot/ember-tooltips/blob/master/addon/utils/render-tooltip.js). + +You can use this utility in your application if none of the given use cases work: + +```js +import Ember from 'ember'; +import renderTooltip from 'ember-tooltips/utils/render-tooltip'; + +export default Ember.Component.extend({ + + AddTheTooltip() { + const element = this.$().find('#some-element')[0]; + + renderTooltip(element, { + content: 'Some extra info', + event: 'click', + place: 'right', + }); + }, + +}); +``` + +## Development + +All PRs and issues are welcome. + +- `git clone https://github.com/sir-dunxalot/ember-tooltips.git` +- `cd ember-tooltips` +- `npm install && bower install` +- `ember s` +- `ember test`, `ember try:testall`, or the `/tests` route + +You do not need to bump the version when you have a PR. diff --git a/README.md b/README.md index da1e5b76..f0c7d84b 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ Ember-tooltips [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg)](https://travis-ci.org/sir-dunxalot/ember-tooltips) [![npm](https://img.shields.io/npm/v/ember-tooltips.svg)](https://www.npmjs.com/package/ember-tooltips) ====== -Render simple tooltips on components, views, HTML elements, and more using simple strings, HTMLBars, bound properties, and more. - -Powered by darsain/tooltip. You can see [a demo here](http://sir-dunxalot.github.io/ember-tooltips/). +Render tooltips on components and other HTML elements using HTMLBars. ## Installation @@ -26,6 +24,11 @@ Documentation for usage is below: - [The Tooltip Mixin (and changing default values)](#the-tooltip-mixin) - [The Tooltip Utility](#the-tooltip-utility) +## Upgrading to 1.0.0 + + +Version 1.0.0 removed darsain/tooltip as a dependency, in favor of using custom Ember code. This introduced only a single way to add tooltips: the `{{tooltip-on-element}}` component. + ## Usage ### Using on Helpers diff --git a/addon/components/tooltip-on-element.js b/addon/components/tooltip-on-element.js index 8f1c290c..97b001f8 100644 --- a/addon/components/tooltip-on-element.js +++ b/addon/components/tooltip-on-element.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import EmberTetherComponent from 'ember-tether/components/ember-tether'; -const { $, computed, run, get } = Ember; +const { $, computed, run } = Ember; const defaultPosition = 'center'; diff --git a/app/styles/app.scss b/app/styles/app.scss new file mode 100644 index 00000000..55754de2 --- /dev/null +++ b/app/styles/app.scss @@ -0,0 +1 @@ +@import 'ember-paper'; diff --git a/bower.json b/bower.json index 80f67666..93c65645 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,11 @@ { "name": "ember-tooltips", "dependencies": { - "ember": "~2.4.1", + "ember": "~2.5.0", "ember-cli-shims": "0.1.1", - "ember-cli-test-loader": "0.2.2" - }, - "devDependencies": { - "compass-mixins": "~1.0.2", - "hammerjs": "~2.0.4", - "matchMedia": "0.3.0", - "qunit": "~1.22.0" + "ember-cli-test-loader": "0.2.2", + "ember-qunit-notifications": "0.1.0", + "hammer.js": "^2.0.8", + "matchMedia": "0.2.0" } } diff --git a/config/ember-try.js b/config/ember-try.js index 980e43c8..014f603d 100644 --- a/config/ember-try.js +++ b/config/ember-try.js @@ -4,52 +4,52 @@ module.exports = { { name: 'default', bower: { - dependencies: { }, - }, + dependencies: { } + } }, { - name: 'ember-1-13', + name: 'ember-1.13', bower: { dependencies: { - ember: '~1.13.0', + 'ember': '~1.13.0' }, resolutions: { - ember: '~1.13.0', - }, - }, + 'ember': '~1.13.0' + } + } }, { name: 'ember-release', bower: { dependencies: { - ember: 'components/ember#release', + 'ember': 'components/ember#release' }, resolutions: { - ember: 'release', - }, - }, + 'ember': 'release' + } + } }, { name: 'ember-beta', bower: { dependencies: { - ember: 'components/ember#beta', + 'ember': 'components/ember#beta' }, resolutions: { - ember: 'beta', - }, - }, + 'ember': 'beta' + } + } }, { name: 'ember-canary', bower: { dependencies: { - ember: 'components/ember#canary', + 'ember': 'components/ember#canary' }, resolutions: { - ember: 'canary', - }, - }, - }, - ], + 'ember': 'canary' + } + } + } + ] }; diff --git a/ember-cli-build.js b/ember-cli-build.js index e6f785d2..4ac39137 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -4,18 +4,11 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); module.exports = function(defaults) { var app = new EmberAddon(defaults, { - snippetSearchPaths: ['app', 'tests'], - - sassOptions: { - extension: 'scss', - includePaths: [ - 'bower_components/compass-mixins/lib' - ] - } + // Add options here }); /* - This build file specifes the options for the dummy test app of this + This build file specifies the options for the dummy test app of this addon, located in `/tests/dummy` This build file does *not* influence how the addon or the app using it behave. You most likely want to be modifying `./index.js` or app's build file diff --git a/package.json b/package.json index 0f59f777..7b94bb31 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-tooltips", - "version": "0.6.0", + "version": "1.0.0", "description": "The default blueprint for ember-cli addons.", "directories": { "doc": "doc", @@ -13,37 +13,35 @@ }, "repository": "https://github.com/sir-dunxalot/ember-tooltips", "engines": { - "node": "4.4.x" + "node": ">= 0.10.0" }, "author": "", "license": "MIT", "devDependencies": { - "broccoli-asset-rev": "^2.2.0", + "broccoli-asset-rev": "^2.4.2", "ember-ajax": "0.7.1", - "ember-cli": "2.4.2", + "ember-cli": "2.5.0", "ember-cli-app-version": "^1.0.0", - "ember-cli-content-security-policy": "0.5.0", "ember-cli-dependency-checker": "^1.2.0", - "ember-cli-github-pages": "0.0.6", + "ember-cli-github-pages": "0.0.8", + "ember-cli-htmlbars": "^1.0.3", "ember-cli-htmlbars-inline-precompile": "^0.3.1", - "ember-cli-inject-live-reload": "^1.3.1", - "ember-cli-qunit": "^1.2.1", + "ember-cli-inject-live-reload": "^1.4.0", + "ember-cli-jshint": "^1.0.0", + "ember-cli-qunit": "^1.4.0", "ember-cli-release": "0.2.8", "ember-cli-sri": "^2.1.0", "ember-cli-uglify": "^1.2.0", - "ember-code-snippet": "1.1.3", + "ember-code-snippet": "1.3.0", + "ember-data": "^2.5.0", "ember-disable-prototype-extensions": "^1.1.0", - "ember-disable-proxy-controllers": "^1.0.1", - "ember-export-application-global": "^1.0.4", - "ember-load-initializers": "^0.5.0", - "ember-paper": "0.2.8", + "ember-export-application-global": "^1.0.5", + "ember-load-initializers": "^0.5.1", + "ember-paper": "0.2.14", "ember-resolver": "^2.0.3", - "ember-suave": "1.2.3", "ember-tether": "0.3.1", - "ember-try": "^0.1.2", - "loader.js": "^4.0.0", - "publish": "^0.5.0", - "rsvp": "^3.1.0" + "ember-try": "^0.2.2", + "loader.js": "^4.0.1" }, "keywords": [ "ember-addon", @@ -54,8 +52,7 @@ "htmlbars" ], "dependencies": { - "ember-cli-babel": "^5.1.5", - "ember-cli-htmlbars": "^1.0.1", + "ember-cli-babel": "^5.1.6", "ember-cli-sass": "5.3.1" }, "ember-addon": { diff --git a/tests/.jshintrc b/tests/.jshintrc index 5a640365..6ec0b7c1 100644 --- a/tests/.jshintrc +++ b/tests/.jshintrc @@ -21,12 +21,7 @@ "andThen", "currentURL", "currentPath", - "currentRouteName", - "inspect", - "mouseOut", - "mouseOver", - "assertTooltipProperties", - "andThenAfterRender" + "currentRouteName" ], "node": false, "browser": false, diff --git a/tests/acceptance/destroy-on-transition-test.js b/tests/acceptance/destroy-on-transition-test.js deleted file mode 100644 index 59d7565d..00000000 --- a/tests/acceptance/destroy-on-transition-test.js +++ /dev/null @@ -1,90 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import selectorFor from '../helpers/selector-for'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | destroy on transition', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('visiting /destroy-on-transition', function(assert) { - const tooltip = 'show-on-click'; - - assert.expect(9); - - visit('/destroy-on-transition'); - - andThen(function() { - - assert.equal(currentURL(), '/destroy-on-transition', - 'Should be on correct route'); - - assertTooltipProperties(assert, tooltip, { - content: 'Should be removed on transition', - event: 'click', - }); - - }); - - click(selectorFor(tooltip)); - - andThen(function() { - - assert.ok(inspect(tooltip).length, - 'The tooltip should be in the DOM'); - - }); - - visit('/'); - - andThen(function() { - - assert.ok(inspect(tooltip).length === 0, - 'The tooltip should not be in the DOM after a route transition'); - - }); - -}); - -test('visiting /destroy-on-transition and a tooltip in a `link-to` component', function(assert) { - const tooltip = 'link-with-tooltip'; - - visit('/destroy-on-transition'); - - andThen(function() { - - assert.equal(currentURL(), '/destroy-on-transition', - 'Should be on correct route'); - - assertTooltipProperties(assert, tooltip, { - content: 'Tooltip on link should be removed on transition', - }); - - }); - - andThen(function() { - assert.equal(Ember.$('.tooltip').length, 0); - }); - - mouseOver(tooltip); - - andThen(function() { - assert.equal(Ember.$('.tooltip').length, 1); - }); - - click(selectorFor(tooltip)); - - andThen(function() { - assert.equal(Ember.$('.tooltip').length, 0); - }); -}); diff --git a/tests/acceptance/tooltip-as-component-test.js b/tests/acceptance/tooltip-as-component-test.js deleted file mode 100644 index bd1c87c9..00000000 --- a/tests/acceptance/tooltip-as-component-test.js +++ /dev/null @@ -1,39 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip as component', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Rendering tooltips set using {{tooltip-on-parent}}', function(assert) { - visit('/tooltip-as-component'); - - assert.expect(21); - - assertTooltipProperties(assert, 'in-component-and-block', { - content: 'Using a component in the template', - usingComponent: true, - }); - - assertTooltipProperties(assert, 'in-component-and-block-htmlbars', { - content: 'Using HTMLBars in content', - usingComponent: true, - }); - - assertTooltipProperties(assert, 'in-component-and-inline', { - content: 'Using a component in the template', - usingComponent: true, - }); - -}); diff --git a/tests/acceptance/tooltip-auto-close-test.js b/tests/acceptance/tooltip-auto-close-test.js deleted file mode 100644 index 71d2c7aa..00000000 --- a/tests/acceptance/tooltip-auto-close-test.js +++ /dev/null @@ -1,44 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip auto close', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Auto-closing tooltips using duration parameter', function(assert) { - visit('/tooltip-auto-close'); - - assert.expect(25); - - assertTooltipProperties(assert, 'auto-close-basic', { - content: 'This shows on a click event, then hides', - event: 'click', - }); - - assertTooltipProperties(assert, 'auto-close-component', { - content: 'Using a component with duration set', - usingComponent: true, - }); - - assertTooltipProperties(assert, 'auto-close-data', { - content: 'This is set on a data attribute', - event: 'click', - }); - - assertTooltipProperties(assert, 'auto-close-input', { - content: 'Auto-closing tooltip on {{input}}', - event: 'focus', - }); - -}); diff --git a/tests/acceptance/tooltip-manual-trigger-test.js b/tests/acceptance/tooltip-manual-trigger-test.js deleted file mode 100644 index 66331b34..00000000 --- a/tests/acceptance/tooltip-manual-trigger-test.js +++ /dev/null @@ -1,36 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip triggered manually', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Rendering tooltips with event="manual" and provided "tooltipVisibility" boolean', function(assert) { - visit('/tooltip-manual-trigger'); - - assert.expect(13); - - assertTooltipProperties(assert, 'manually-trigger', { - content: 'This is a manually triggered tooltip', - event: 'manual', - }); - - assertTooltipProperties(assert, 'manually-trigger-component', { - targetContent: 'Manual tooltip as component', - content: 'Manually triggering a component tooltip', - usingComponent: true, - event: 'manual', - }); - -}); diff --git a/tests/acceptance/tooltip-on-element-test.js b/tests/acceptance/tooltip-on-element-test.js deleted file mode 100644 index de01ee40..00000000 --- a/tests/acceptance/tooltip-on-element-test.js +++ /dev/null @@ -1,29 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip on element', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Rendering tooltips set on child DOM elements', function(assert) { - - assert.expect(6); - - visit('/tooltip-on-element'); - - assertTooltipProperties(assert, 'on-element', { - content: 'This is set on a data attribute', - }); - -}); diff --git a/tests/acceptance/tooltip-on-helper-test.js b/tests/acceptance/tooltip-on-helper-test.js deleted file mode 100644 index 08973d0d..00000000 --- a/tests/acceptance/tooltip-on-helper-test.js +++ /dev/null @@ -1,42 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip on helper', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Rendering tooltips set on helpers', function(assert) { - - assert.expect(24); - - visit('/tooltip-on-helper'); - - assertTooltipProperties(assert, 'on-inline-component', { - content: 'This is a tooltip on an inline component', - }); - - assertTooltipProperties(assert, 'on-block-component', { - content: 'This is a tooltip on a block component', - }); - - assertTooltipProperties(assert, 'on-link-to', { - content: 'This is a tooltip on a link-to helper', - }); - - assertTooltipProperties(assert, 'showing-on-click', { - content: 'This shows on a click event', - event: 'click', - }); - -}); diff --git a/tests/acceptance/tooltip-with-safestring-test.js b/tests/acceptance/tooltip-with-safestring-test.js deleted file mode 100644 index 31a3a5c4..00000000 --- a/tests/acceptance/tooltip-with-safestring-test.js +++ /dev/null @@ -1,27 +0,0 @@ -import Ember from 'ember'; -import { module, test } from 'qunit'; -import startApp from '../helpers/start-app'; - -let application; - -module('Acceptance | tooltip with safestring', { - - beforeEach() { - application = startApp(); - }, - - afterEach() { - Ember.run(application, 'destroy'); - }, - -}); - -test('Rendering safestring works', function(assert) { - - visit('/tooltip-with-safestring'); - - assertTooltipProperties(assert, 'on-inline-component', { - content: 'this is a test', - }); - -}); diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js index ad66c931..831ad610 100644 --- a/tests/dummy/app/app.js +++ b/tests/dummy/app/app.js @@ -10,7 +10,7 @@ Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, - Resolver, + Resolver }); loadInitializers(App, config.modulePrefix); diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 4d7d793b..64cbe05f 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -1,4 +1,3 @@ -@import 'compass'; @import 'ember-paper'; @import 'core/variables'; @@ -23,7 +22,7 @@ body { .logo, .logo-wrapper .text { - @include inline-block; + display: inline-block; } .logo { diff --git a/tests/dummy/app/styles/components/_code.scss b/tests/dummy/app/styles/components/_code.scss index 0c95f629..72701b71 100644 --- a/tests/dummy/app/styles/components/_code.scss +++ b/tests/dummy/app/styles/components/_code.scss @@ -66,7 +66,7 @@ pre code { text-transform: uppercase; @include rem(font-size, 1.2); @include rem(padding, 0.5, 1); - @include inline-block; + display: inline-block; margin: 0; position: absolute; diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index ff829ced..4a390879 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -4,3 +4,11 @@ Hey sdg sdg {{/tooltip-on-element}} {{/test-component}} + +
+ +{{#tooltip-on-element side='left' target='#test-1' event='focus' duration=1000}} + Hey sdg sdg +{{/tooltip-on-element}} + +{{input id='test-1'}} diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index a6801d07..91a703f1 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -47,6 +47,8 @@ module.exports = function(environment) { } if (environment === 'production') { + ENV.locationType = 'hash'; + ENV.baseURL = '/ember-tooltips/'; ENV.baseURL = '/ember-tooltips'; } diff --git a/tests/helpers/async/and-then-after-render.js b/tests/helpers/async/and-then-after-render.js deleted file mode 100644 index fefb3bd4..00000000 --- a/tests/helpers/async/and-then-after-render.js +++ /dev/null @@ -1,9 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Test.registerAsyncHelper('andThenAfterRender', - function(app, callback) { - andThen(function() { - Ember.run.scheduleOnce('afterRender', this, callback); - }); - } -); diff --git a/tests/helpers/async/assert-tooltip-properties.js b/tests/helpers/async/assert-tooltip-properties.js deleted file mode 100644 index 48e8ae37..00000000 --- a/tests/helpers/async/assert-tooltip-properties.js +++ /dev/null @@ -1,149 +0,0 @@ -import Ember from 'ember'; -import selectorFor from '../selector-for'; - -function cleanWhitespace(jQueryElement) { - jQueryElement.contents().filter(function() { - this.innerHTML = $.trim(this.innerText); - - return (this.nodeType === 3 && !/\S/.test(this.nodeValue)); - }).remove(); - - return jQueryElement; -} - -/* like click() but runs asyncrously allowing you to -use it outside of an andThen function with the same -stuff in the DOM */ - -export default Ember.Test.registerAsyncHelper('assertTooltipProperties', - function(app, assert, name, properties = {}) { - - /* Default options */ - - const expectedContent = properties.content || 'This is a tooltip'; - const expectedEffectClass = properties.effectClass || 'slide'; - const expectedEvent = properties.event || 'hover'; - const expectedPlace = properties.place || 'top'; - const expectedTypeClass = properties.typeClass || null; - const typeOfContent = Ember.typeOf(expectedContent); - const usingComponent = properties.usingComponent || false; - - /* Hover/click to attach the tooltip to the DOM */ - - if (expectedEvent === 'click') { - click(selectorFor(name)); - } else if (expectedEvent === 'hover') { - mouseOver(name); - } else if (expectedEvent === 'manual') { - click(`${selectorFor(name)} + input[type="checkbox"]`); - } else { - triggerEvent(selectorFor(name), expectedEvent); - } - - andThen(function() { - const [ tooltip ] = Ember.$('.tooltip').toArray(); - const indexOfEffectClass = tooltip.className.indexOf(expectedEffectClass); - const indexOfTypeClass = tooltip.className.indexOf(expectedTypeClass); - - assert.ok(!!tooltip, - 'The tooltip should be added to the DOM after triggering the show event on the target element'); - - /* Check auto - NO TEST */ - - /* Check content */ - - if (usingComponent) { - const [ tooltipHtml ] = cleanWhitespace($(tooltip)).toArray(); - const cleanTooltipHtml = tooltipHtml.innerHTML.replace(/id="[^"]*"/g, '').replace(/\s+/, ' '); - const expectedTargetContent = properties.targetContent || 'Hover over me'; - const target = inspect(name, false); - - assert.equal($.trim(cleanTooltipHtml), expectedContent, - 'The HTML content of the tooltip should be correct'); - - assert.equal(target.innerText, expectedTargetContent, - 'The expected target content should contain just the expected text and not the {{tooltip-on-parent}} view'); - - } else if (typeOfContent === 'string') { - - assert.equal(tooltip.textContent, expectedContent, - 'The text content of the tooltip should be correct'); - - } else if (typeOfContent === 'object') { - - assert.equal(tooltip.innerHTML, expectedContent, - 'The child node of the tooltip should be correct'); - - } else { - Ember.warn('No tooltip content was expected by a call to assertTooltipProperties'); - } - - /* Check effectClass */ - - if (expectedEffectClass) { - - assert.ok(indexOfEffectClass > -1, - `The effect class of the tooltip should be ${expectedEffectClass}`); - - } else { - - assert.ok(indexOfEffectClass === -1, - `The type class of the tooltip should not contain ${expectedTypeClass}`); - - } - - /* Check event - NO TEST */ - - /* Check place - - We check that place is in the class name, so we know the addon is - consuming the option */ - - assert.ok(tooltip.className.indexOf(expectedPlace) > -1, - 'The placement of the tooltip should be reflected in the tooltip class name'); - - /* Check spacing - NO TEST */ - - /* Check typeClass */ - - if (expectedTypeClass) { - - assert.ok(indexOfTypeClass > -1, - `The type class of the tooltip should be ${expectedTypeClass}`); - - } else { - - assert.ok(indexOfTypeClass === -1, - `The type class of the tooltip should not contain ${expectedTypeClass}`); - - } - - }); - - /* Unhover/click so the tooltip is detached from the DOM */ - - // if (name.match('auto-close')) do nothing - - if (expectedEvent === 'click') { - click(selectorFor(name)); - } else if (expectedEvent === 'hover') { - mouseOut(name); - } else if (expectedEvent === 'manual') { - click(`${selectorFor(name)} + input[type="checkbox"]`); - } - - /* Then check it has been removed */ - - andThen(function() { - - Ember.run.later(this, function() { - - assert.ok(!Ember.$('.tooltip').length, - 'There should not be a tooltip in the DOM after triggering the hide event on the target element'); - - }, 200); - - }); - - } -); diff --git a/tests/helpers/async/mouse-out.js b/tests/helpers/async/mouse-out.js deleted file mode 100644 index 90a6b3ff..00000000 --- a/tests/helpers/async/mouse-out.js +++ /dev/null @@ -1,34 +0,0 @@ -import Ember from 'ember'; -import selectorFor from '../selector-for'; - -/* like click() but runs asyncrously allowing you to -use it outside of an andThen function with the same -stuff in the DOM */ - -export default Ember.Test.registerAsyncHelper('mouseOut', - function(app, name) { - const selector = selectorFor(name); - const $element = inspect(name); - const $tooltips = Ember.$('.tooltip'); - - let elementExists = $element.length; - - triggerEvent(selector, 'mouseout'); - - /* Wait until the element is removed to continue the tests */ - - if ($tooltips.length) { - $tooltips[0].addEventListener('DOMNodeRemovedFromDocument', function() { - Ember.run(function() { - elementExists = false; - }); - }); - } else { - elementExists = false; - } - - Ember.Test.registerWaiter(function() { - return !elementExists; - }); - } -); diff --git a/tests/helpers/async/mouse-over.js b/tests/helpers/async/mouse-over.js deleted file mode 100644 index df91b318..00000000 --- a/tests/helpers/async/mouse-over.js +++ /dev/null @@ -1,12 +0,0 @@ -import Ember from 'ember'; -import selectorFor from '../selector-for'; - -/* like click() but runs asyncrously allowing you to -use it outside of an andThen function with the same -stuff in the DOM */ - -export default Ember.Test.registerAsyncHelper('mouseOver', - function(app, name) { - triggerEvent(selectorFor(name), 'mouseover'); - } -); diff --git a/tests/helpers/module-for-acceptance.js b/tests/helpers/module-for-acceptance.js index 5bd23939..8c8b74ec 100644 --- a/tests/helpers/module-for-acceptance.js +++ b/tests/helpers/module-for-acceptance.js @@ -18,6 +18,6 @@ export default function(name, options = {}) { } destroyApp(this.application); - }, + } }); } diff --git a/tests/helpers/resolver.js b/tests/helpers/resolver.js index 1cbe8eec..b208d38d 100644 --- a/tests/helpers/resolver.js +++ b/tests/helpers/resolver.js @@ -1,11 +1,11 @@ -import Resolver from 'ember-resolver'; +import Resolver from '../../resolver'; import config from '../../config/environment'; const resolver = Resolver.create(); resolver.namespace = { modulePrefix: config.modulePrefix, - podModulePrefix: config.podModulePrefix, + podModulePrefix: config.podModulePrefix }; export default resolver; diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js index 87def335..e098f1d5 100644 --- a/tests/helpers/start-app.js +++ b/tests/helpers/start-app.js @@ -2,12 +2,6 @@ import Ember from 'ember'; import Application from '../../app'; import config from '../../config/environment'; -import './async/and-then-after-render'; -import './async/assert-tooltip-properties'; -import './async/mouse-out'; -import './async/mouse-over'; -import './sync/inspect'; - export default function startApp(attrs) { let application; diff --git a/tests/helpers/sync/inspect.js b/tests/helpers/sync/inspect.js deleted file mode 100644 index 2ba67e6d..00000000 --- a/tests/helpers/sync/inspect.js +++ /dev/null @@ -1,14 +0,0 @@ -import Ember from 'ember'; -import selectorFor from '../selector-for'; - -export default Ember.Test.registerHelper('inspect', - function(app, name, useJquery = true) { - const [ element ] = find(selectorFor(name)).toArray(); - - if (useJquery) { - return $(element); - } else { - return element; - } - } -); diff --git a/tests/unit/initializers/ember-tooltips.js b/tests/unit/initializers/ember-tooltips.js deleted file mode 100644 index d8b7e532..00000000 --- a/tests/unit/initializers/ember-tooltips.js +++ /dev/null @@ -1,32 +0,0 @@ -import Ember from 'ember'; -// import { initialize } from '../../../initializers/ember-tooltips'; -import { module, test } from 'qunit'; - -let application; -let container; - -module('Unit | Initializer | add tooltips to components', { - - beforeEach() { - Ember.run(function() { - application = Ember.Application.create(); - container = application.__container__; - application.deferReadiness(); - }); - }, - -}); - -test('Reopening classes', function(assert) { - const classes = ['Component']; - - assert.expect(classes.length); - - classes.forEach(function(className) { - const instance = Ember[className].create(); - - assert.strictEqual(instance.get('tooltip'), null, - `By default the mixin should be added to Ember.${className}`); - - }); -}); diff --git a/tests/unit/mixins/components/tooltips-new-test.js b/tests/unit/mixins/components/tooltips-new-test.js deleted file mode 100644 index 07543ac8..00000000 --- a/tests/unit/mixins/components/tooltips-new-test.js +++ /dev/null @@ -1,12 +0,0 @@ -import Ember from 'ember'; -import ComponentsTooltipsNewMixin from 'ember-tooltips/mixins/components/tooltips-new'; -import { module, test } from 'qunit'; - -module('Unit | Mixin | components/tooltips new'); - -// Replace this with your real tests. -test('it works', function(assert) { - let ComponentsTooltipsNewObject = Ember.Object.extend(ComponentsTooltipsNewMixin); - let subject = ComponentsTooltipsNewObject.create(); - assert.ok(subject); -}); diff --git a/tests/unit/mixins/components/tooltips-test.js b/tests/unit/mixins/components/tooltips-test.js deleted file mode 100644 index 1b96c2d7..00000000 --- a/tests/unit/mixins/components/tooltips-test.js +++ /dev/null @@ -1,82 +0,0 @@ -import ComponentsTooltipsMixin from 'ember-tooltips/mixins/components/tooltips'; -import Ember from 'ember'; -import { module, test } from 'qunit'; - -let component; - -module('Unit | Mixin | components/tooltip', { - - beforeEach() { - const ComponentsTooltipsObject = Ember.Component.extend(ComponentsTooltipsMixin); - - component = ComponentsTooltipsObject.create(); - }, - -}); - -test('The mixin adds the public properties', function(assert) { - const expectedProperties = { - tooltip: null, - tooltipSupportedProperties: [ - 'auto', - 'content', - 'duration', - 'effectClass', - 'event', - 'hideOn', - 'place', - 'showOn', - 'spacing', - 'tabIndex', - 'typeClass', - 'visibility', - ], - tooltipAuto: true, - tooltipContent: null, - tooltipDuration: null, - tooltipEffectClass: 'slide', - tooltipEvent: 'hover', - tooltipHideOn: null, - tooltipPlace: 'top', - tooltipSpacing: 10, - tooltipShowOn: null, - tooltipTabIndex: 0, - tooltipTypeClass: null, - tooltipVisibility: null, - }; - - assert.expect(14); - - Object.keys(expectedProperties).forEach(function(expectedProperty) { - const expectedValue = expectedProperties[expectedProperty]; - const actualValue = component.get(expectedProperty); - - if (expectedValue) { - - assert.deepEqual(actualValue, expectedValue, - `The component should have a ${expectedProperty} property with a value equal to ${expectedValue}`); - - } else { - - assert.ok(actualValue !== undefined, - `The component should have a ${expectedProperty} property`); - - } - }); - -}); - -test('The mixin adds the public methods', function(assert) { - - assert.ok(!!component.renderTooltip, - 'The component should have a renderTooltip method'); - - assert.ok(!!component.renderChildTooltips, - 'The component should have a renderTooltip method'); - - component.renderTooltip(); - - assert.ok(!component.get('tooltip'), - 'The component should not have a tooltip property after calling renderTooltip when no tooltip content is specified'); - -}); diff --git a/tests/unit/utils/render-tooltip-test.js b/tests/unit/utils/render-tooltip-test.js deleted file mode 100644 index e9dd4657..00000000 --- a/tests/unit/utils/render-tooltip-test.js +++ /dev/null @@ -1,14 +0,0 @@ -import renderTooltip from '../../../utils/render-tooltip'; -import { module, test } from 'qunit'; - -module('Unit | Utility | render tooltip'); - -test('It returns a Tooltip object', function(assert) { - const result = renderTooltip(document.createElement('div'), { - content: 'test tooltip', - }); - - assert.equal(result.constructor, window.Tooltip, - 'The util should return the tooltip object created by new Tooltip'); - -});