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.

Sign up for GitHub

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

Fix (dis)connected callbacks with targetAttributeForScope #810

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix (dis)connected callbacks with targetAttributeForScope #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/core/target_observer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class TargetObserver implements TokenListObserverDelegate {
// Private

private get attributeName() {
return `data-${this.context.identifier}-target`
return this.context.schema.targetAttributeForScope(this.context.identifier)
}

private get element() {
Expand Down
35 changes: 22 additions & 13 deletions src/tests/modules/core/target_tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import { ControllerTestCase } from "../../cases/controller_test_case"
import { TargetController } from "../../controllers/target_controller"
import { Schema, defaultSchema } from "../../../core/schema"

export default class TargetTests extends ControllerTestCase(TargetController) {
override schema: Schema = {
...defaultSchema,

// Override target attribute to verify that it is used correctly
// https://github.com/hotwired/stimulus/issues/809
targetAttributeForScope: (identifier) => `data-${identifier}-test-target`,
}

fixtureHTML = `
<div data-controller="${this.identifier}" data-${this.identifier}-connected-class="connected" data-${this.identifier}-disconnected-class="disconnected">
<div data-${this.identifier}-target="alpha" id="alpha1"></div>
<div data-${this.identifier}-target="alpha" id="alpha2"></div>
<div data-${this.identifier}-target="beta" id="beta1">
<div data-${this.identifier}-target="gamma" id="gamma1"></div>
<div data-${this.identifier}-test-target="alpha" id="alpha1"></div>
<div data-${this.identifier}-test-target="alpha" id="alpha2"></div>
<div data-${this.identifier}-test-target="beta" id="beta1">
<div data-${this.identifier}-test-target="gamma" id="gamma1"></div>
</div>
<div data-controller="${this.identifier}" id="child">
<div data-${this.identifier}-target="delta" id="delta1"></div>
<div data-${this.identifier}-test-target="delta" id="delta1"></div>
</div>
<textarea data-${this.identifier}-target="omega input" id="input1"></textarea>
<textarea data-${this.identifier}-test-target="omega input" id="input1"></textarea>
</div>
`

Expand Down Expand Up @@ -54,7 +63,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
}

"test singular linked target property throws an error when no target is found"() {
this.findElement("#beta1").removeAttribute(`data-${this.identifier}-target`)
this.findElement("#beta1").removeAttribute(`data-${this.identifier}-test-target`)
this.assert.equal(this.controller.hasBetaTarget, false)
this.assert.equal(this.controller.betaTargets.length, 0)
this.assert.throws(() => this.controller.betaTarget)
Expand All @@ -69,7 +78,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {

async "test target connected callback when element is inserted"() {
const connectedInput = document.createElement("input")
connectedInput.setAttribute(`data-${this.controller.identifier}-target`, "input")
connectedInput.setAttribute(`data-${this.controller.identifier}-test-target`, "input")

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)

Expand All @@ -89,7 +98,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)

element.setAttribute(`data-${this.controller.identifier}-target`, "input")
element.setAttribute(`data-${this.controller.identifier}-test-target`, "input")
await this.nextFrame

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2)
Expand All @@ -102,7 +111,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)

element.setAttribute(`data-${this.controller.identifier}-target`, "alpha input")
element.setAttribute(`data-${this.controller.identifier}-test-target`, "alpha input")
await this.nextFrame

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2)
Expand Down Expand Up @@ -156,7 +165,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
`expected "${element.className}" not to contain "disconnected"`
)

element.removeAttribute(`data-${this.controller.identifier}-target`)
element.removeAttribute(`data-${this.controller.identifier}-test-target`)
await this.nextFrame

this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 1)
Expand All @@ -177,7 +186,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
`expected "${element.className}" not to contain "disconnected"`
)

element.setAttribute(`data-${this.controller.identifier}-target`, "input")
element.setAttribute(`data-${this.controller.identifier}-test-target`, "input")
await this.nextFrame

this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2)
Expand All @@ -193,7 +202,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
this.controller.element.insertAdjacentHTML(
"beforeend",
`
<div data-${this.identifier}-target="recursive" id="recursive2"></div>
<div data-${this.identifier}-test-target="recursive" id="recursive2"></div>
`
)
await this.nextFrame
Expand Down