diff --git a/.editorconfig b/.editorconfig index 47c5438..219985c 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,22 +13,8 @@ insert_final_newline = true indent_style = space indent_size = 2 -[*.js] -indent_style = space -indent_size = 2 - [*.hbs] insert_final_newline = false -indent_style = space -indent_size = 2 - -[*.css] -indent_style = space -indent_size = 2 - -[*.html] -indent_style = space -indent_size = 2 [*.{diff,md}] trim_trailing_whitespace = false diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..fbfc364 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,13 @@ +module.exports = { + root: true, + parserOptions: { + ecmaVersion: 6, + sourceType: 'module' + }, + extends: 'eslint:recommended', + env: { + browser: true + }, + rules: { + } +}; diff --git a/.gitignore b/.gitignore index 86fceae..9eb796f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. + +# See https://help.github.com/ignore-files/ for more about ignoring files. # compiled output /dist @@ -13,5 +14,43 @@ /connect.lock /coverage/* /libpeerconnection.log -npm-debug.log +npm-debug.log* testem.log +======= +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 08096ef..0000000 --- a/.jshintrc +++ /dev/null @@ -1,32 +0,0 @@ -{ - "predef": [ - "document", - "window", - "-Promise" - ], - "browser": true, - "boss": true, - "curly": true, - "debug": false, - "devel": true, - "eqeqeq": true, - "evil": true, - "forin": false, - "immed": false, - "laxbreak": false, - "newcap": true, - "noarg": true, - "noempty": false, - "nonew": false, - "nomen": false, - "onevar": false, - "plusplus": false, - "regexp": false, - "undef": true, - "sub": true, - "strict": false, - "white": false, - "eqnull": true, - "esnext": true, - "unused": true -} diff --git a/.npmignore b/.npmignore index d522ca2..889b2bf 100644 --- a/.npmignore +++ b/.npmignore @@ -1,15 +1,16 @@ -bower_components/ -tests/ -tmp/ -dist/ - +/bower_components +/config/ember-try.js +/dist +/tests +/tmp +**/.gitkeep .bowerrc .editorconfig .ember-cli +.gitignore +.eslintrc.js +.watchmanconfig .travis.yml -.npmignore -**/.gitkeep bower.json ember-cli-build.js -Brocfile.js -testem.json +testem.js diff --git a/.travis.yml b/.travis.yml index f5deadf..5235bf5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,34 +1,40 @@ --- language: node_js node_js: - - "0.12" + - "6" sudo: false cache: directories: - - node_modules + - $HOME/.npm + - $HOME/.cache # includes bowers cache env: - matrix: - - EMBER_TRY_SCENARIO=ember-release - - EMBER_TRY_SCENARIO=ember-beta - - EMBER_TRY_SCENARIO=ember-canary + # we recommend testing LTS's and latest stable release (bonus points to beta/canary) + - EMBER_TRY_SCENARIO=ember-lts-2.4 + - EMBER_TRY_SCENARIO=ember-lts-2.8 + - EMBER_TRY_SCENARIO=ember-release + - EMBER_TRY_SCENARIO=ember-beta + - EMBER_TRY_SCENARIO=ember-canary + - EMBER_TRY_SCENARIO=ember-default matrix: fast_finish: true allow_failures: - - env: EMBER_TRY_SCENARIO=ember-beta - env: EMBER_TRY_SCENARIO=ember-canary before_install: - - "npm config set spin false" - - "npm install -g npm@^2" + - npm config set spin false + - npm install -g bower phantomjs-prebuilt + - bower --version + - phantomjs --version install: - - npm install -g bower - npm install - bower install script: - - ember try $EMBER_TRY_SCENARIO test + # Usually, it's ok to finish the test scenario without reverting + # to the addon's original dependency state, skipping "cleanup". + - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup diff --git a/.watchmanconfig b/.watchmanconfig index 5e9462c..e7834e3 100644 --- a/.watchmanconfig +++ b/.watchmanconfig @@ -1,3 +1,3 @@ { - "ignore_dirs": ["tmp"] + "ignore_dirs": ["tmp", "dist"] } diff --git a/LICENSE.md b/LICENSE.md index 00e9fbb..0d5e3ef 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 +Copyright (c) 2017 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.md b/README.md index 04ae049..2490d00 100644 --- a/README.md +++ b/README.md @@ -1,134 +1,22 @@ # ember-lazy-image -[![Build Status](https://travis-ci.org/twokul/ember-lazy-image.svg)](https://travis-ci.org/twokul/ember-lazy-image) - -`ember-lazy-image` is a component that allows you to gracefully handle image loading. - -Component will load images lazily, only if they appeared in the view port. -This optimization brings page load time down. - -Default loading placeholder is stolen from [aurer](https://github.com/aurer) and his awesome [codepen](http://codepen.io/aurer/pen/jEGbA). - -### Installation - -From inside your ember-cli project, run the following: - -```bash -ember install ember-lazy-image -``` - -#### Installation for ember-cli 0.1.5 - 0.2.2 - -```bash -ember install:addon ember-lazy-image -``` - -#### Installation without ember-cli - -```bash -npm install ember-lazy-image --save -``` - -### lazy-image - -```hbs -{{lazy-image url='http://my-valid-url.com/foo.jpg'}} -``` - -Component will wait until the image is loaded and while waiting it will show default -loading placeholder (see above). - -You can customize `loading` placeholder by passing it as an parameter: - -```hbs -{{#lazy-image url='http://my-valid-url.com/foo.jpg'}} - -{{/lazy-image}} -``` - -You can also define the fallback if the image failed to load. By default, component will render -`Image failed to load` text. - -You can customize `error` text by passing it as an parameter: - -```hbs -{{lazy-image url='http://my-not-valid-url.com/foo.jpg' errorText='Something went wrong.'}} -``` - -### `width`, `height` and `data-*` attributes - -Lazy Image supports `width`, `height` and `data-*` attribute bindings. - -```hbs -{{lazy-image url='http://my-valid-url.com/foo.jpg' width=400 height=400 data-foo-bar="my-foo-bar"}} -{{lazy-image url='http://my-valid-url.com/foo.jpg' width=400 height=400 data-foo-bar=foo.bar.path}} -``` - -### `class` attribute - -You can also pass class names for the image element. - -```hbs -{{lazy-image url='http://my-valid-url.com/foo.jpg' class='foo-bar baz-bar'}} -``` - -### `alt` attribute - -You can pass the alt attribute to the component and it will be rendered on the image element - -```hbs -{{lazy-image url='http://my-valid-url.com/foo.jpg' alt='foo description'}} -``` - -### ember-in-viewport options - -Lazy Image uses [ember-in-viewport](https://github.com/dockyard/ember-in-viewport/) for viewport detection. Due to the way listeners and `requestAnimationFrame` is setup, you'll have to override the `ember-in-viewport` options by creating `app/components/lazy-image.js`: - -```js -// app/components/lazy-image.js - -import Ember from 'ember'; -import LazyImage from 'ember-lazy-image/components/lazy-image'; - -export default LazyImage.extend({ - viewportOptionsOverride: Ember.on('didInsertElement', function() { - Ember.setProperties(this, { - viewportUseRAF : true, - viewportSpy : false, - viewportRefreshRate : 150, - viewportTolerance: { - top : 50, - bottom : 50, - left : 20, - right : 20 - } - }); - }) -}); -``` - -See [Advanced usage (options)](https://github.com/dockyard/ember-in-viewport/tree/1.0.0#advanced-usage-options) for more in detail `ember-in-viewport` options. - -The use of `threshold` is deprecated in favor of `viewportTolerance`. - -### Experimental `lazy-background-image` - -This is an experimental component that will add `background-image` style attribute to a component's `div`. It also -sets `min-height` attribute to `270px` so the image is visible. You should be able to overwrite it by using `lazy-background-image` class. +This README outlines the details of collaborating on this Ember addon. ## Installation -* `git clone` this repository +* `git clone ` this repository +* `cd ember-lazy-image` * `npm install` * `bower install` ## Running -* `ember server` -* Visit your app at http://localhost:4200. +* `ember serve` +* Visit your app at [http://localhost:4200](http://localhost:4200). ## Running Tests +* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions) * `ember test` * `ember test --server` @@ -136,4 +24,4 @@ sets `min-height` attribute to `270px` so the image is visible. You should be ab * `ember build` -For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). +For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). diff --git a/tests/dummy/app/styles/.gitkeep b/addon/.gitkeep similarity index 100% rename from tests/dummy/app/styles/.gitkeep rename to addon/.gitkeep diff --git a/addon/components/lazy-background-image.js b/addon/components/lazy-background-image.js deleted file mode 100644 index fc1424d..0000000 --- a/addon/components/lazy-background-image.js +++ /dev/null @@ -1,31 +0,0 @@ -import Ember from 'ember'; -import ImageLoadMixin from '../mixins/image-load'; -import LazyImageMixin from '../mixins/lazy-image'; -import InViewportMixin from 'ember-in-viewport'; - -const { htmlSafe } = Ember.String; -const { computed, Component } = Ember; - -export default Component.extend(InViewportMixin, ImageLoadMixin, LazyImageMixin, { - attributeBindings: ['width', 'height', 'style'], - - style: computed('lazyUrl', 'opacity', function() { - const opacity = this.get('opacity'); - const style = opacity ? `background-image: linear-gradient(rgba(0, 0, 0, ${opacity}), rgba(0, 0, 0, ${opacity})), url(${this.get('lazyUrl')})` : `background-image: url(${this.get('lazyUrl')})`; - - return htmlSafe(style); - }), - - classNames: ['lazy-background-image'], - - _setupAttributes() { - const component = this; - const keys = Object.keys || Ember.keys; - - keys(component).forEach((key) => { - if (key.substr(0, 5) === 'data-' && !key.match(/Binding$/)) { - component.get('attributeBindings').pushObject(key); - } - }); - } -}); diff --git a/addon/components/lazy-image.js b/addon/components/lazy-image.js index 5d0c97c..e317194 100644 --- a/addon/components/lazy-image.js +++ b/addon/components/lazy-image.js @@ -2,10 +2,13 @@ import Ember from 'ember'; import ImageLoadMixin from '../mixins/image-load'; import LazyImageMixin from '../mixins/lazy-image'; import InViewportMixin from 'ember-in-viewport'; +import layout from '../templates/components/lazy-image'; const { on, get, set, computed, Component } = Ember; export default Component.extend(InViewportMixin, ImageLoadMixin, LazyImageMixin, { + layout, + classNames: ['lazy-image-container'], concatenatedProperties: ['class'], diff --git a/vendor/lazy-image/lazy-image.css b/addon/styles/lazy-image.css similarity index 93% rename from vendor/lazy-image/lazy-image.css rename to addon/styles/lazy-image.css index 6021b9b..d313468 100644 --- a/vendor/lazy-image/lazy-image.css +++ b/addon/styles/lazy-image.css @@ -1,6 +1,7 @@ .lazy-image-container { position: relative; min-height: 200px; + width: 560px; } .lazy-image-container img { @@ -10,6 +11,8 @@ .lazy-image-container.loaded img { opacity: 1; + height: 100%; + width: 100%; } .lazy-image-error-message { diff --git a/app/templates/components/lazy-image.hbs b/addon/templates/components/lazy-image.hbs similarity index 99% rename from app/templates/components/lazy-image.hbs rename to addon/templates/components/lazy-image.hbs index 818bfee..ef87d2f 100644 --- a/app/templates/components/lazy-image.hbs +++ b/addon/templates/components/lazy-image.hbs @@ -34,4 +34,3 @@ {{else}} {{unbound alt}} {{/if}} - diff --git a/tests/dummy/app/views/.gitkeep b/app/.gitkeep similarity index 100% rename from tests/dummy/app/views/.gitkeep rename to app/.gitkeep diff --git a/app/components/lazy-background-image.js b/app/components/lazy-background-image.js deleted file mode 100644 index 95251c6..0000000 --- a/app/components/lazy-background-image.js +++ /dev/null @@ -1,2 +0,0 @@ -import LazyBackgroundImage from 'ember-lazy-image/components/lazy-background-image'; -export default LazyBackgroundImage; diff --git a/app/components/lazy-image.js b/app/components/lazy-image.js index b1b8056..60b8e3a 100644 --- a/app/components/lazy-image.js +++ b/app/components/lazy-image.js @@ -1,2 +1 @@ -import LazyImage from 'ember-lazy-image/components/lazy-image'; -export default LazyImage; +export { default } from 'ember-lazy-image/components/lazy-image'; \ No newline at end of file diff --git a/app/templates/components/lazy-background-image.hbs b/app/templates/components/lazy-background-image.hbs deleted file mode 100644 index ee10e9e..0000000 --- a/app/templates/components/lazy-background-image.hbs +++ /dev/null @@ -1,32 +0,0 @@ -{{#if hasBlock}} - {{#if errorThrown}} -
{{defaultErrorText}}
- {{else}} -
{{yield}}
- {{/if}} -{{else}} - {{#if errorThrown}} -
{{defaultErrorText}}
- {{else}} -
- - - - - - -
- {{/if}} -{{/if}} - - diff --git a/bower.json b/bower.json index 38bb1f3..ef8d3d9 100644 --- a/bower.json +++ b/bower.json @@ -1,18 +1,6 @@ { "name": "ember-lazy-image", "dependencies": { - "jquery": "^2.1.4", - "ember": "1.13.10", - "ember-resolver": "~0.1.21", - "loader.js": "ember-cli/loader.js#3.2.1", - "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.5", - "ember-cli-test-loader": "ember-cli/ember-cli-test-loader#0.1.3", - "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", - "ember-qunit": "0.4.15", - "ember-qunit-notifications": "0.1.0", - "qunit": "~1.20.0" - }, - "resolutions": { - "qunit-notifications": "~0.1.0" + "blob-polyfill": "^1.0.20150320" } } diff --git a/config/ember-try.js b/config/ember-try.js index 136f903..a070124 100644 --- a/config/ember-try.js +++ b/config/ember-try.js @@ -1,29 +1,91 @@ -/* jshint node: true */ - +/* eslint-env node */ module.exports = { - scenarios: [{ - name: 'ember-release', - dependencies: { - 'ember': 'components/ember#release' + scenarios: [ + { + name: 'ember-lts-2.4', + bower: { + dependencies: { + 'ember': 'components/ember#lts-2-4' + }, + resolutions: { + 'ember': 'lts-2-4' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } }, - resolutions: { - 'ember': 'release' - } - }, { - name: 'ember-beta', - dependencies: { - 'ember': 'components/ember#beta' + { + name: 'ember-lts-2.8', + bower: { + dependencies: { + 'ember': 'components/ember#lts-2-8' + }, + resolutions: { + 'ember': 'lts-2-8' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } }, - resolutions: { - 'ember': 'beta' - } - }, { - name: 'ember-canary', - dependencies: { - 'ember': 'components/ember#canary' + { + name: 'ember-release', + bower: { + dependencies: { + 'ember': 'components/ember#release' + }, + resolutions: { + 'ember': 'release' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } + }, + { + name: 'ember-beta', + bower: { + dependencies: { + 'ember': 'components/ember#beta' + }, + resolutions: { + 'ember': 'beta' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } + }, + { + name: 'ember-canary', + bower: { + dependencies: { + 'ember': 'components/ember#canary' + }, + resolutions: { + 'ember': 'canary' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } }, - resolutions: { - 'ember': 'canary' + { + name: 'ember-default', + npm: { + devDependencies: {} + } } - }] + ] }; diff --git a/config/environment.js b/config/environment.js index 0dfaed4..012a412 100644 --- a/config/environment.js +++ b/config/environment.js @@ -1,3 +1,4 @@ +/* eslint-env node */ 'use strict'; module.exports = function(/* environment, appConfig */) { diff --git a/ember-cli-build.js b/ember-cli-build.js index d37d64c..5e6f037 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -1,13 +1,13 @@ -/* global require, module */ -var EmberApp = require('ember-cli/lib/broccoli/ember-addon'); +/* eslint-env node */ +const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); module.exports = function(defaults) { - var app = new EmberApp(defaults, { + var app = new EmberAddon(defaults, { // 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/index.js b/index.js index f33a643..8df0ec5 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,6 @@ -/* jshint node: true */ +/* eslint-env node */ 'use strict'; module.exports = { - name: 'ember-lazy-image', - - included: function emberLazyImageIncluded(app) { - this._super.included(app); - - app.import('vendor/lazy-image/lazy-image.css'); - } + name: 'ember-lazy-image' }; diff --git a/package.json b/package.json index 2b21be2..4a4279d 100644 --- a/package.json +++ b/package.json @@ -1,49 +1,51 @@ { "name": "ember-lazy-image", - "version": "0.0.14", - "description": "Lazy image loading for Ember apps", + "version": "0.1.0", + "description": "The default blueprint for ember-cli addons.", + "keywords": [ + "ember-addon" + ], + "license": "MIT", + "author": "", "directories": { "doc": "doc", "test": "tests" }, + "repository": "", "scripts": { - "start": "ember server", "build": "ember build", - "test": "ember try:testall" + "start": "ember server", + "test": "ember try:each" }, - "repository": "https://github.com/twokul/ember-lazy-image/", - "engines": { - "node": ">= 0.10.0" + "dependencies": { + "ember-cli-babel": "^5.1.7", + "ember-cli-htmlbars": "^1.1.1", + "ember-local-storage": "^1.3.5" }, - "author": "Alex Navasardyan", - "license": "MIT", "devDependencies": { - "broccoli-asset-rev": "^2.3.0", - "ember-cli": "1.13.8", - "ember-cli-app-version": "1.0.0", - "ember-cli-content-security-policy": "0.4.0", - "ember-cli-dependency-checker": "^1.1.0", - "ember-cli-htmlbars": "1.0.1", - "ember-cli-htmlbars-inline-precompile": "^0.3.1", - "ember-cli-ic-ajax": "0.2.1", - "ember-cli-inject-live-reload": "^1.3.1", - "ember-cli-qunit": "1.0.3", + "broccoli-asset-rev": "^2.4.5", + "ember-ajax": "^2.4.1", + "ember-cli": "2.12.1", + "ember-cli-dependency-checker": "^1.3.0", + "ember-cli-eslint": "^3.0.0", + "ember-cli-htmlbars-inline-precompile": "^0.3.6", + "ember-cli-inject-live-reload": "^1.4.1", + "ember-cli-qunit": "^3.1.0", + "ember-cli-shims": "^1.0.2", + "ember-cli-sri": "^2.1.0", "ember-cli-uglify": "^1.2.0", - "ember-disable-prototype-extensions": "^1.0.0", + "ember-disable-prototype-extensions": "^1.1.0", "ember-export-application-global": "^1.0.5", - "ember-try": "0.0.8", - "phantomjs": "^1.9.18" + "ember-in-viewport": "^2.1.1", + "ember-load-initializers": "^0.6.0", + "ember-resolver": "^2.0.3", + "ember-source": "~2.12.0", + "ember-welcome-page": "^2.0.2", + "loader.js": "^4.2.3" }, - "dependencies": { - "ember-cli-babel": "^5.0.0", - "ember-in-viewport": "^2.0.4", - "ember-local-storage": "0.0.5" + "engines": { + "node": ">= 4" }, - "keywords": [ - "ember-addon", - "image", - "lazy load" - ], "ember-addon": { "configPath": "tests/dummy/config" } diff --git a/testem.json b/testem.js similarity index 79% rename from testem.json rename to testem.js index 0f35392..b234048 100644 --- a/testem.json +++ b/testem.js @@ -1,5 +1,5 @@ -{ - "framework": "qunit", +/* eslint-env node */ +module.exports = { "test_page": "tests/index.html?hidepassed", "disable_watching": true, "launch_in_ci": [ @@ -9,4 +9,4 @@ "PhantomJS", "Chrome" ] -} +}; diff --git a/tests/.eslintrc.js b/tests/.eslintrc.js new file mode 100644 index 0000000..fbf2555 --- /dev/null +++ b/tests/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + env: { + embertest: true + } +}; diff --git a/tests/.jshintrc b/tests/.jshintrc deleted file mode 100644 index ea8b88f..0000000 --- a/tests/.jshintrc +++ /dev/null @@ -1,51 +0,0 @@ -{ - "predef": [ - "document", - "window", - "location", - "setTimeout", - "$", - "-Promise", - "define", - "console", - "visit", - "exists", - "fillIn", - "click", - "keyEvent", - "triggerEvent", - "find", - "findWithAssert", - "wait", - "DS", - "andThen", - "currentURL", - "currentPath", - "currentRouteName" - ], - "node": false, - "browser": false, - "boss": true, - "curly": false, - "debug": false, - "devel": false, - "eqeqeq": true, - "evil": true, - "forin": false, - "immed": false, - "laxbreak": false, - "newcap": true, - "noarg": true, - "noempty": false, - "nonew": false, - "nomen": false, - "onevar": false, - "plusplus": false, - "regexp": false, - "undef": true, - "sub": true, - "strict": false, - "white": false, - "eqnull": true, - "esnext": true -} diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js index 8d66b95..831ad61 100644 --- a/tests/dummy/app/app.js +++ b/tests/dummy/app/app.js @@ -1,16 +1,16 @@ import Ember from 'ember'; -import Resolver from 'ember/resolver'; -import loadInitializers from 'ember/load-initializers'; +import Resolver from './resolver'; +import loadInitializers from 'ember-load-initializers'; import config from './config/environment'; -var App; +let App; Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, - Resolver: Resolver + Resolver }); loadInitializers(App, config.modulePrefix); diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html index 1c49d36..5120bd7 100644 --- a/tests/dummy/app/index.html +++ b/tests/dummy/app/index.html @@ -7,19 +7,19 @@ - {{content-for 'head'}} + {{content-for "head"}} - - + + - {{content-for 'head-footer'}} + {{content-for "head-footer"}} - {{content-for 'body'}} + {{content-for "body"}} - - + + - {{content-for 'body-footer'}} + {{content-for "body-footer"}} diff --git a/tests/dummy/app/resolver.js b/tests/dummy/app/resolver.js new file mode 100644 index 0000000..2fb563d --- /dev/null +++ b/tests/dummy/app/resolver.js @@ -0,0 +1,3 @@ +import Resolver from 'ember-resolver'; + +export default Resolver; diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index dce5994..275145a 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -1,9 +1,13 @@ import Ember from 'ember'; import config from './config/environment'; -var Router = Ember.Router.extend({ - location: config.locationType +const Router = Ember.Router.extend({ + location: config.locationType, + rootURL: config.rootURL }); -export default Router.map(function() { +Router.map(function() { + this.route('index'); }); + +export default Router; diff --git a/tests/dummy/app/routes/index.js b/tests/dummy/app/routes/index.js index 50fe97d..3bc252d 100644 --- a/tests/dummy/app/routes/index.js +++ b/tests/dummy/app/routes/index.js @@ -4,37 +4,25 @@ export default Ember.Route.extend({ model: function() { return Ember.A([{ text: 'Yehuda Katz', - url: 'http://emberjs.com/images/team/ykatz.jpg' + url: 'https://avatars3.githubusercontent.com/u/4?v=3&s=400' }, { text: 'Tom Dale', - url: 'http://emberjs.com/images/team/tdale.jpg' + url: 'https://avatars0.githubusercontent.com/u/90888?v=3&s=400' }, { - text: 'Peter Wagenet', - url: 'http://emberjs.com/images/team/pwagenet.jpg' + text: 'Godfrey Chan', + url: 'https://avatars0.githubusercontent.com/u/55829?v=3&s=400' }, { - text: 'Trek Glowacki', - url: 'http://emberjs.com/images/team/tglowaki.jpg' + text: 'Leah Silber', + url: 'https://avatars2.githubusercontent.com/u/25433?v=3&s=400' }, { text: 'Erik Bryn', - url: 'http://emberjs.com/images/team/ebryn.jpg' + url: 'https://avatars0.githubusercontent.com/u/3018?v=3&s=400' }, { text: 'Kris Selden', - url: 'http://emberjs.com/images/team/kselden.jpg' + url: 'https://avatars0.githubusercontent.com/u/61024?v=3&s=400' }, { text: 'Stefan Penner', - url: 'http://emberjs.com/images/team/spenner.jpg' - }, { - text: 'Leah Silber', - url: 'http://emberjs.com/images/team/lsilber.jpg' - }, { - text: 'Alex Matchneer', - url: 'http://emberjs.com/images/team/amatchneer.jpg' - }, { - text: 'Robert Jackson', - url: 'http://emberjs.com/images/team/rjackson.jpg' - }, { - text: 'Igor Terzic', - url: 'http://emberjs.com/images/team/iterzic.jpeg' + url: 'https://avatars3.githubusercontent.com/u/1377?v=3&s=400' }]); } }); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 05eb936..b1b1f40 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,3 +1,2 @@ -

Welcome to Ember.js

{{outlet}} diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index c35a7a0..6a378d3 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -1,29 +1,25 @@ -/* jshint node: true */ +/* eslint-env node */ module.exports = function(environment) { var ENV = { modulePrefix: 'dummy', environment: environment, - baseURL: '/', + rootURL: '/', locationType: 'auto', EmberENV: { FEATURES: { // Here you can enable experimental features on an ember canary build // e.g. 'with-controller': true + }, + EXTEND_PROTOTYPES: { + // Prevent Ember Data from overriding Date.parse. + Date: false } }, - contentSecurityPolicy: { - 'img-src': "'self' emberjs.com", - 'style-src': "'self' 'unsafe-inline'" - }, APP: { // Here you can pass flags/options to your application instance // when it is created - }, - - viewportConfig: { - viewportUseRAF: false } }; @@ -37,11 +33,8 @@ module.exports = function(environment) { if (environment === 'test') { // Testem prefers this... - ENV.baseURL = '/'; ENV.locationType = 'none'; - ENV.EmberENV.RAISE_ON_DEPRECATION = true; - // keep test console output quieter ENV.APP.LOG_ACTIVE_GENERATION = false; ENV.APP.LOG_VIEW_LOOKUPS = false; diff --git a/tests/dummy/public/crossdomain.xml b/tests/dummy/public/crossdomain.xml index 29a035d..0c16a7a 100644 --- a/tests/dummy/public/crossdomain.xml +++ b/tests/dummy/public/crossdomain.xml @@ -1,15 +1,15 @@ - + - - + + - - + + diff --git a/tests/dummy/public/robots.txt b/tests/dummy/public/robots.txt index 5debfa4..f591645 100644 --- a/tests/dummy/public/robots.txt +++ b/tests/dummy/public/robots.txt @@ -1,2 +1,3 @@ # http://www.robotstxt.org User-agent: * +Disallow: diff --git a/tests/helpers/destroy-app.js b/tests/helpers/destroy-app.js new file mode 100644 index 0000000..c3d4d1a --- /dev/null +++ b/tests/helpers/destroy-app.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default function destroyApp(application) { + Ember.run(application, 'destroy'); +} diff --git a/tests/helpers/module-for-acceptance.js b/tests/helpers/module-for-acceptance.js new file mode 100644 index 0000000..76996fd --- /dev/null +++ b/tests/helpers/module-for-acceptance.js @@ -0,0 +1,23 @@ +import { module } from 'qunit'; +import Ember from 'ember'; +import startApp from '../helpers/start-app'; +import destroyApp from '../helpers/destroy-app'; + +const { RSVP: { Promise } } = Ember; + +export default function(name, options = {}) { + module(name, { + beforeEach() { + this.application = startApp(); + + if (options.beforeEach) { + return options.beforeEach.apply(this, arguments); + } + }, + + afterEach() { + let afterEach = options.afterEach && options.afterEach.apply(this, arguments); + return Promise.resolve(afterEach).then(() => destroyApp(this.application)); + } + }); +} diff --git a/tests/helpers/resolver.js b/tests/helpers/resolver.js index 28f4ece..b208d38 100644 --- a/tests/helpers/resolver.js +++ b/tests/helpers/resolver.js @@ -1,7 +1,7 @@ -import Resolver from 'ember/resolver'; +import Resolver from '../../resolver'; import config from '../../config/environment'; -var resolver = Resolver.create(); +const resolver = Resolver.create(); resolver.namespace = { modulePrefix: config.modulePrefix, diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js index 16cc7c3..9a605eb 100644 --- a/tests/helpers/start-app.js +++ b/tests/helpers/start-app.js @@ -1,19 +1,15 @@ import Ember from 'ember'; import Application from '../../app'; -import Router from '../../router'; import config from '../../config/environment'; export default function startApp(attrs) { - var application; - - var attributes = Ember.merge({}, config.APP); + let attributes = Ember.merge({}, config.APP); attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; - Ember.run(function() { - application = Application.create(attributes); + return Ember.run(() => { + let application = Application.create(attributes); application.setupForTesting(); application.injectTestHelpers(); + return application; }); - - return application; } diff --git a/tests/index.html b/tests/index.html index 8fea6fe..5209b85 100644 --- a/tests/index.html +++ b/tests/index.html @@ -7,27 +7,27 @@ - {{content-for 'head'}} - {{content-for 'test-head'}} + {{content-for "head"}} + {{content-for "test-head"}} - - - + + + - {{content-for 'head-footer'}} - {{content-for 'test-head-footer'}} + {{content-for "head-footer"}} + {{content-for "test-head-footer"}} + {{content-for "body"}} + {{content-for "test-body"}} - {{content-for 'body'}} - {{content-for 'test-body'}} - - - - - + + + + + - {{content-for 'body-footer'}} - {{content-for 'test-body-footer'}} + {{content-for "body-footer"}} + {{content-for "test-body-footer"}} diff --git a/tests/integration/.gitkeep b/tests/integration/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/integration/components/lazy-image-test.js b/tests/integration/components/lazy-image-test.js new file mode 100644 index 0000000..9d74642 --- /dev/null +++ b/tests/integration/components/lazy-image-test.js @@ -0,0 +1,25 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('lazy-image', 'Integration | Component | lazy image', { + integration: true +}); + +test('it renders', function(assert) { + + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{lazy-image}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#lazy-image}} + template block text + {{/lazy-image}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/unit/.gitkeep b/tests/unit/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/unit/components/lazy-image-test.js b/tests/unit/components/lazy-image-test.js deleted file mode 100644 index 6e19c34..0000000 --- a/tests/unit/components/lazy-image-test.js +++ /dev/null @@ -1,148 +0,0 @@ -import Ember from 'ember'; -import { - moduleForComponent, - test -} from 'ember-qunit'; - -import Cache from 'ember-lazy-image/lib/cache'; -import hbs from 'htmlbars-inline-precompile'; - -moduleForComponent('lazy-image', 'LazyImageComponent', { - unit: true, - - beforeEach() { - window.sessionStorage.clear(); - } -}); - -const { run } = Ember; -const get = Ember.get; - -const imageSelector = '.lazy-image'; -const placeholderSelector = '.lazy-image-placeholder'; -const errorMessageSelector = '.lazy-image-error-message'; -const imageContainerSelector = '.lazy-image-container'; - -test('it has correct defaults', function(assert) { - assert.expect(5); - - const component = this.subject(); - - assert.equal(get(component, 'loaded'), false); - assert.equal(get(component, 'errorThrown'), false); - assert.equal(get(component, 'lazyUrl'), null); - assert.equal(get(component, 'defaultErrorText'), 'Image failed to load'); - assert.equal(get(component, 'class'), 'lazy-image'); -}); - -test('it renders default placeholder', function(assert) { - assert.expect(1); - - this.render(hbs`{{lazy-image}}`); - - assert.ok(this.$(placeholderSelector).length > 0, 'placeholder is correctly rendered'); -}); - -test('it renders default error message if image fails to load', function(assert) { - assert.expect(2); - - const component = this.subject({ - errorThrown: true - }); - - this.render(); - - assert.ok(component.$(errorMessageSelector).length > 0, 'error message is correctly rendered'); - assert.ok(component.$(errorMessageSelector + ':contains("' + 'Image failed to load' + '")'), 'default error message is rendered correctly'); -}); - -test('it leverages cache', function(assert) { - run(() => { - Cache.create(); - }); - - assert.expect(1); - - const component = this.subject({ - url: 'http://emberjs.com/images/team/tdale.jpg' - }); - - this.render(); - - run(() => { - component.set('viewportEntered', true); - component.trigger('didEnterViewport'); - }); - - let lazyImages = window.sessionStorage['ember-lazy-images']; - let cache = lazyImages ? JSON.parse(lazyImages) : lazyImages; - - assert.deepEqual(cache, { - emberjscomimagesteamtdalejpg: true - }); -}); - -test('`width` and `height` bindings work correctly', function(assert) { - assert.expect(2); - - const component = this.subject({ - width: 400, - height: 400 - }); - - this.render(); - - assert.equal(component.$('img').attr('width'), 400, 'width is correct'); - assert.equal(component.$('img').attr('height'), 400, 'height is correct'); -}); - -test('`width` and `height` are not used if set to 0 or unset', function(assert) { - assert.expect(2); - - const component = this.subject({ - width: 400 - }); - - this.render(); - - assert.equal(component.$('img').attr('width'), undefined, 'width is not used'); - assert.equal(component.$('img').attr('height'), undefined, 'height is not used'); -}); - -test('`data-*` attribute bindings work correctly', function(assert) { - assert.expect(1); - - const component = this.subject({ - 'data-person-id': 1234 - }); - - this.render(); - - assert.equal(component.$('img').attr('data-person-id'), 1234, 'data attribute is correct'); -}); - -test('passing class names for the element', function(assert) { - assert.expect(1); - - const component = this.subject({ - class: 'img-responsive image-thumbnail' - }); - - this.render(); - - const expected = 'lazy-image img-responsive image-thumbnail'; - assert.equal(component.$('img').attr('class'), expected); -}); - -test('passing alt attribute for the element', function(assert) { - assert.expect(1); - - const component = this.subject({ - alt: 'alternate text' - }); - - this.render(); - - const expected = 'alternate text'; - assert.equal(component.$('img').attr('alt'), expected); -}); diff --git a/vendor/.gitkeep b/vendor/.gitkeep new file mode 100644 index 0000000..e69de29