Skip to content

Commit

Permalink
Add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
marcoroth committed Jan 28, 2023
1 parent 391211c commit f2dcda4
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 6 deletions.
13 changes: 7 additions & 6 deletions src/core/outlet_set.ts
Expand Up @@ -42,10 +42,7 @@ export class OutletSet {
getSelectorForOutletName(outletName: string) {
const attributeName = this.schema.outletAttributeForScope(this.identifier, outletName)
const selector = this.controllerElement.getAttribute(attributeName)

if (selector) return selector

return this.scope.controllerSelector
return selector || this.getControllerSelectorForOutletName(outletName)
}

private findOutlet(outletName: string) {
Expand All @@ -69,7 +66,11 @@ export class OutletSet {
}

private matchesElement(element: Element, selector: string, outletName: string): boolean {
const controllerAttribute = element.getAttribute(this.scope.schema.controllerAttribute) || ""
return element.matches(selector) && controllerAttribute.split(" ").includes(outletName)
const controllerSelector = this.getControllerSelectorForOutletName(outletName)
return element.matches(selector) && element.matches(controllerSelector)
}

private getControllerSelectorForOutletName(outletName: string) {
return `[${this.schema.controllerAttribute}~="${outletName}"]`
}
}
20 changes: 20 additions & 0 deletions src/tests/controllers/outlet_controller.ts
Expand Up @@ -19,6 +19,8 @@ export class OutletController extends BaseOutletController {
alphaOutletDisconnectedCallCount: Number,
betaOutletConnectedCallCount: Number,
betaOutletDisconnectedCallCount: Number,
gammaOutletConnectedCallCount: Number,
gammaOutletDisconnectedCallCount: Number,
namespacedEpsilonOutletConnectedCallCount: Number,
namespacedEpsilonOutletDisconnectedCallCount: Number,
}
Expand All @@ -29,6 +31,12 @@ export class OutletController extends BaseOutletController {
betaOutletElements!: Element[]
hasBetaOutlet!: boolean

gammaOutlet!: Controller | null
gammaOutlets!: Controller[]
gammaOutletElement!: Element | null
gammaOutletElements!: Element[]
hasGammaOutlet!: boolean

namespacedEpsilonOutlet!: Controller | null
namespacedEpsilonOutlets!: Controller[]
namespacedEpsilonOutletElement!: Element | null
Expand All @@ -44,6 +52,8 @@ export class OutletController extends BaseOutletController {
alphaOutletDisconnectedCallCountValue = 0
betaOutletConnectedCallCountValue = 0
betaOutletDisconnectedCallCountValue = 0
gammaOutletConnectedCallCountValue = 0
gammaOutletDisconnectedCallCountValue = 0
namespacedEpsilonOutletConnectedCallCountValue = 0
namespacedEpsilonOutletDisconnectedCallCountValue = 0

Expand All @@ -67,6 +77,16 @@ export class OutletController extends BaseOutletController {
this.betaOutletDisconnectedCallCountValue++
}

gammaOutletConnected(_outlet: Controller, element: Element) {
if (this.hasConnectedClass) element.classList.add(this.connectedClass)
this.gammaOutletConnectedCallCountValue++
}

gammaOutletDisconnected(_outlet: Controller, element: Element) {
if (this.hasDisconnectedClass) element.classList.add(this.disconnectedClass)
this.gammaOutletDisconnectedCallCountValue++
}

namespacedEpsilonOutletConnected(_outlet: Controller, element: Element) {
if (this.hasConnectedClass) element.classList.add(this.connectedClass)
this.namespacedEpsilonOutletConnectedCallCountValue++
Expand Down
116 changes: 116 additions & 0 deletions src/tests/modules/core/outlet_fallback_selector_tests.ts
@@ -0,0 +1,116 @@
import { ControllerTestCase } from "../../cases/controller_test_case"
import { OutletController } from "../../controllers/outlet_controller"

export default class OutletFallbackSelectorTests extends ControllerTestCase(OutletController) {
fixtureHTML = `
<div id="container">
<div data-controller="alpha" id="alpha1"></div>
<div data-controller="beta" id="beta1">
<div data-controller="alpha beta" id="mixed"></div>
<div data-controller="beta" id="beta2"></div>
</div>
<div
data-controller="${this.identifier}"
data-${this.identifier}-connected-class="connected"
data-${this.identifier}-disconnected-class="disconnected"
>
</div>
</div>
`
get identifiers() {
return ["test", "alpha", "beta", "gamma"]
}

"test OutletSet#find"() {
this.assert.equal(this.controller.outlets.find("alpha"), this.findElement("#alpha1"))
this.assert.equal(this.controller.outlets.find("beta"), this.findElement("#beta1"))
this.assert.equal(this.controller.outlets.find("gamma"), undefined)
}

"test OutletSet#findAll"() {
this.assert.deepEqual(this.controller.outlets.findAll("alpha"), this.findElements("#alpha1", "#mixed"))
this.assert.deepEqual(this.controller.outlets.findAll("beta"), this.findElements("#beta1", "#mixed", "#beta2"))
this.assert.deepEqual(this.controller.outlets.findAll("gamma"), [])
}

"test OutletSet#findAll with multiple arguments"() {
this.assert.deepEqual(
this.controller.outlets.findAll("alpha", "beta"),
this.findElements("#alpha1", "#mixed", "#beta1", "#mixed", "#beta2")
)
}

"test OutletSet#has"() {
this.assert.equal(this.controller.outlets.has("alpha"), true)
this.assert.equal(this.controller.outlets.has("beta"), true)
this.assert.equal(this.controller.outlets.has("gamma"), false)
}

async "test OutletSet#has when no element with selector exists"() {
const element = document.createElement("div")
element.setAttribute("data-controller", "gamma")

this.assert.equal(this.controller.outlets.has("gamma"), false)

this.controller.element.appendChild(element)
await this.nextFrame

this.assert.equal(this.controller.outlets.has("gamma"), true)

const gammaOutlets = this.controller.gammaOutletElements.filter((outlet) => outlet.classList.contains("connected"))
this.assert.equal(gammaOutlets.length, 1)
this.assert.equal(this.controller.gammaOutletConnectedCallCountValue, 1)
}

"test singular linked outlet property throws an error when no outlet is found"() {
this.findElements("#alpha1", "#mixed", "#beta1", "#mixed", "#beta2").forEach((e) => e.remove())

this.assert.equal(this.controller.hasAlphaOutlet, false)
this.assert.equal(this.controller.alphaOutlets.length, 0)
this.assert.equal(this.controller.alphaOutletElements.length, 0)
this.assert.throws(() => this.controller.alphaOutlet)
this.assert.throws(() => this.controller.alphaOutletElement)

this.assert.equal(this.controller.hasBetaOutlet, false)
this.assert.equal(this.controller.betaOutlets.length, 0)
this.assert.equal(this.controller.betaOutletElements.length, 0)
this.assert.throws(() => this.controller.betaOutlet)
this.assert.throws(() => this.controller.betaOutletElement)
}

"test outlet connected callback fires"() {
const alphaOutlets = this.controller.alphaOutletElements.filter((outlet) => outlet.classList.contains("connected"))
const betaOutlets = this.controller.betaOutletElements.filter((outlet) => outlet.classList.contains("connected"))
const gammaOutlets = this.controller.gammaOutletElements.filter((outlet) => outlet.classList.contains("connected"))

this.assert.equal(alphaOutlets.length, 2)
this.assert.equal(this.controller.alphaOutletConnectedCallCountValue, 2)

this.assert.equal(betaOutlets.length, 3)
this.assert.equal(this.controller.betaOutletConnectedCallCountValue, 3)

this.assert.equal(gammaOutlets.length, 0)
this.assert.equal(this.controller.gammaOutletConnectedCallCountValue, 0)
}

async "test outlet disconnect callback fires"() {
this.findElements("#alpha1", "#mixed", "#beta1", "#mixed", "#beta2").forEach((e) => e.remove())

await this.nextFrame

const alphaOutlets = this.controller.alphaOutletElements.filter((outlet) => outlet.classList.contains("connected"))
const betaOutlets = this.controller.betaOutletElements.filter((outlet) => outlet.classList.contains("connected"))
const gammaOutlets = this.controller.gammaOutletElements.filter((outlet) => outlet.classList.contains("connected"))

this.assert.equal(alphaOutlets.length, 0)
this.assert.equal(this.controller.alphaOutletDisconnectedCallCountValue, 2)

this.assert.equal(betaOutlets.length, 0)
this.assert.equal(this.controller.betaOutletDisconnectedCallCountValue, 3)

this.assert.equal(gammaOutlets.length, 0)
this.assert.equal(this.controller.gammaOutletDisconnectedCallCountValue, 0)
}
}
1 change: 1 addition & 0 deletions src/tests/modules/core/outlet_tests.ts
Expand Up @@ -20,6 +20,7 @@ export default class OutletTests extends ControllerTestCase(OutletController) {
data-${this.identifier}-alpha-outlet="#alpha1,#alpha2"
data-${this.identifier}-beta-outlet=".beta"
data-${this.identifier}-delta-outlet=".delta"
data-${this.identifier}-gamma-outlet="#gamma-doesnt-exist"
data-${this.identifier}-namespaced--epsilon-outlet=".epsilon"
>
<div data-controller="gamma" class="gamma" id="gamma2"></div>
Expand Down

0 comments on commit f2dcda4

Please sign in to comment.