-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
from-event element modifier`
- Loading branch information
1 parent
6962e1c
commit 5f15400
Showing
6 changed files
with
221 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import Ember from "ember"; | ||
| import { fromEvent } from "rxjs"; | ||
|
|
||
| export default Ember._setModifierManager( | ||
| () => ({ | ||
| createModifier() { | ||
| return { | ||
| subscription: undefined, | ||
| element: undefined | ||
| }; | ||
| }, | ||
|
|
||
| _setupSubscription(state, eventName, operatorOrObserver, maybeObserver) { | ||
| const { element } = state; | ||
| let operator, observer; | ||
|
|
||
| if (operatorOrObserver && maybeObserver) { | ||
| operator = operatorOrObserver; | ||
| observer = maybeObserver; | ||
| } else if (operatorOrObserver && !maybeObserver) { | ||
| observer = operatorOrObserver; | ||
| } | ||
|
|
||
| let observable = fromEvent(element, eventName); | ||
|
|
||
| if (operator) { | ||
| observable = observable.pipe(operator); | ||
| } | ||
|
|
||
| state.subscription = observable.subscribe(observer); | ||
| }, | ||
|
|
||
| installModifier( | ||
| state, | ||
| element, | ||
| { | ||
| positional: [eventName, operatorOrObserver, maybeObserver] | ||
| } | ||
| ) { | ||
| state.element = element; | ||
|
|
||
| this._setupSubscription( | ||
| state, | ||
| eventName, | ||
| operatorOrObserver, | ||
| maybeObserver | ||
| ); | ||
| }, | ||
|
|
||
| updateModifier( | ||
| state, | ||
| { | ||
| positional: [eventName, operatorOrSubscribe, maybeObserver] | ||
| } | ||
| ) { | ||
| state.subscription.unsubscribe(); | ||
|
|
||
| this._setupSubscription( | ||
| state, | ||
| eventName, | ||
| operatorOrSubscribe, | ||
| maybeObserver | ||
| ); | ||
| }, | ||
|
|
||
| destroyModifier({ subscription }) { | ||
| subscription.unsubscribe(); | ||
| } | ||
| }), | ||
| class FromEventModifier {} | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from "ember-observable/modifiers/from-event"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { module, test } from "qunit"; | ||
| import { setupRenderingTest } from "ember-qunit"; | ||
| import { setupScheduler } from "ember-observable/test-support"; | ||
| import { render, click } from "@ember/test-helpers"; | ||
| import { Subject } from "rxjs"; | ||
| import { filter } from "rxjs/operators"; | ||
| import hbs from "htmlbars-inline-precompile"; | ||
| import td from "testdouble"; | ||
|
|
||
| module("Integration | Modifier | from-event", function(hooks) { | ||
| setupRenderingTest(hooks); | ||
| setupScheduler(hooks); | ||
|
|
||
| test("it can subscribe to events", async function(assert) { | ||
| this.observer = td.function(); | ||
|
|
||
| await render(hbs` | ||
| <button {{from-event 'click' this.observer}}> | ||
| My Button | ||
| </button> | ||
| `); | ||
|
|
||
| await click("button"); | ||
|
|
||
| assert.verify( | ||
| this.observer(td.matchers.isA(MouseEvent)), | ||
| "The observer was called with the event" | ||
| ); | ||
| }); | ||
|
|
||
| test("it can pipe the observable through an operator", async function(assert) { | ||
| this.operator = filter((_event, index) => index % 2 === 0); | ||
| this.observer = td.function(); | ||
|
|
||
| await render(hbs` | ||
| <button {{from-event 'click' this.operator this.observer}}> | ||
| My Button | ||
| </button> | ||
| `); | ||
|
|
||
| await click("button"); | ||
| await click("button"); | ||
|
|
||
| assert.verify( | ||
| this.observer(td.matchers.isA(MouseEvent)), | ||
| { times: 1 }, | ||
| "The observer was called one time" | ||
| ); | ||
| }); | ||
|
|
||
| test("it handles the arguments changing", async function(assert) { | ||
| const originalObserver = td.function("original observer"); | ||
| const newObserver = td.function("new observer"); | ||
|
|
||
| this.observer = originalObserver; | ||
|
|
||
| await render(hbs` | ||
| <button {{from-event 'click' this.observer}}> | ||
| My Button | ||
| </button> | ||
| `); | ||
|
|
||
| this.set("observer", newObserver); | ||
|
|
||
| await click("button"); | ||
|
|
||
| assert.verify( | ||
| originalObserver(td.matchers.isA(MouseEvent)), | ||
| { times: 0 }, | ||
| "The original observer is never called" | ||
| ); | ||
|
|
||
| assert.verify( | ||
| newObserver(td.matchers.isA(MouseEvent)), | ||
| { times: 1 }, | ||
| "The new observer is called" | ||
| ); | ||
| }); | ||
|
|
||
| test("it can receive a `Subject` to surface the observable", async function(assert) { | ||
| this.subject = new Subject(); | ||
| const observer = td.function("Original observer"); | ||
|
|
||
| this.subject.subscribe(observer); | ||
|
|
||
| await render(hbs` | ||
| <button {{from-event 'click' this.subject}}> | ||
| My Button | ||
| </button> | ||
| `); | ||
|
|
||
| await click("button"); | ||
|
|
||
| assert.verify( | ||
| observer(td.matchers.isA(MouseEvent)), | ||
| "The observer is called through the Subject" | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters