Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add assertions for tagless component event handlers #12503

Merged
merged 1 commit into from
Oct 19, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions packages/ember-views/lib/components/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,23 @@ var Component = View.extend(TargetActionSupport, {

this.layout = this.defaultLayout;
}

// If in a tagless component, assert that no event handlers are defined
assert(
`You can not define a function that handles DOM events in the \`${this}\` tagless component since it doesn't have any DOM element.`,
this.tagName !== '' || !(() => {
let eventDispatcher = this.container.lookup('event_dispatcher:main');
let events = (eventDispatcher && eventDispatcher._finalEvents) || {};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rwjblue Like this? :)

I think a test may be a bit paranoic here. Are we testing && and ||?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HA! Agreed. This looks good.


for (let key in events) {
let methodName = events[key];

if (typeof this[methodName] === 'function') {
return true; // indicate that the assertion should be triggered
}
}
}
)());
},

template: null,
Expand Down
2 changes: 1 addition & 1 deletion packages/ember-views/lib/system/event_dispatcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default EmberObject.extend({
*/
setup(addedEvents, rootElement) {
var event;
var events = assign({}, get(this, 'events'), addedEvents);
var events = this._finalEvents = assign({}, get(this, 'events'), addedEvents);

if (!isNone(rootElement)) {
set(this, 'rootElement', rootElement);
Expand Down
97 changes: 97 additions & 0 deletions packages/ember-views/tests/views/component_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import Service from 'ember-runtime/system/service';
import { Registry } from 'ember-runtime/system/container';
import inject from 'ember-runtime/inject';
import { get } from 'ember-metal/property_get';
import Application from 'ember-application/system/application';
import ApplicationInstance from 'ember-application/system/application-instance';
import isEnabled from 'ember-metal/features';

import EmberView from 'ember-views/views/view';
import Component from 'ember-views/components/component';
Expand Down Expand Up @@ -279,3 +282,97 @@ QUnit.test('component with target', function() {

appComponent.send('foo', 'baz');
});

let app, appInstance;

QUnit.module('Ember.Component - tagless components assertions', {
teardown() {
if (appInstance) {
run(appInstance, 'destroy');
}

if (app) {
run(app, 'destroy');
}
}
});


QUnit.test('throws an error if an event function is defined in a tagless component', function() {
app = run(Application, 'create', { rootElement: '#qunit-fixture', autoboot: false });
if (!isEnabled('ember-application-visit')) {
run(app.__deprecatedInstance__, 'destroy');
}

run(function() {
appInstance = ApplicationInstance.create({ application: app });
appInstance.setupEventDispatcher();
});

let TestComponent = Component.extend({
tagName: '',
container: appInstance,
click() { }
});

expectAssertion(function() {
TestComponent.create();
}, /You can not define a function that handles DOM events in the .* tagless component since it doesn't have any DOM element./);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSCS is failing due to lack of newline at the end of the file.


QUnit.test('throws an error if an Application custom event handler is defined in a tagless component', function() {
app = run(Application, 'create', {
rootElement: '#qunit-fixture',
autoboot: false,
customEvents: {
awesome: 'sauce'
}
});

if (!isEnabled('ember-application-visit')) {
run(app.__deprecatedInstance__, 'destroy');
}

run(function() {
appInstance = ApplicationInstance.create({ application: app });
appInstance.setupEventDispatcher();
});

let TestComponent = Component.extend({
tagName: '',
container: appInstance,
sauce() { }
});

expectAssertion(function() {
TestComponent.create();
}, /You can not define a function that handles DOM events in the .* tagless component since it doesn't have any DOM element./);
});

QUnit.test('throws an error if an ApplicationInstance custom event handler is defined in a tagless component', function() {
app = run(Application, 'create', { rootElement: '#qunit-fixture', autoboot: false });

if (!isEnabled('ember-application-visit')) {
run(app.__deprecatedInstance__, 'destroy');
}

run(function() {
appInstance = ApplicationInstance.create({
application: app,
customEvents: {
love: 'hurts'
}
});
appInstance.setupEventDispatcher();
});

let TestComponent = Component.extend({
tagName: '',
container: appInstance,
hurts() { }
});

expectAssertion(function() {
TestComponent.create();
}, /You can not define a function that handles DOM events in the .* tagless component since it doesn't have any DOM element./);
});