Skip to content

Commit

Permalink
Make Action Parameters attributes case-insensitive (#571)
Browse files Browse the repository at this point in the history
Even though this is not the "recommended way" to specify the data 
attributes for the params it's to match the existing behaviour of 
Actions, Controllers, Targets and Values.

Resolves #561
  • Loading branch information
marcoroth committed Aug 30, 2022
1 parent f3e1c03 commit a2a030f
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/core/action.ts
Expand Up @@ -31,7 +31,7 @@ export class Action {

get params() {
const params:{ [key: string]: any } = {}
const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`)
const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`, "i")

for (const { name, value } of Array.from(this.element.attributes)) {
const match = name.match(pattern)
Expand Down
62 changes: 62 additions & 0 deletions src/tests/modules/core/action_params_case_insensitive_tests.ts
@@ -0,0 +1,62 @@
import ActionParamsTests from "./action_params_tests"

export default class ActionParamsCaseInsensitiveTests extends ActionParamsTests {
identifier = ["CamelCase", "AnotherOne"]
fixtureHTML = `
<div data-controller="CamelCase AnotherOne">
<button data-CamelCase-id-param="123"
data-CamelCase-multi-word-example-param="/path"
data-CamelCase-active-param="true"
data-CamelCase-inactive-param="false"
data-CamelCase-empty-param=""
data-CamelCase-payload-param='${JSON.stringify({value: 1})}'
data-CamelCase-param-something="not-reported"
data-Something-param="not-reported"
data-AnotherOne-id-param="234">
<div id="nested"></div>
</button>
</div>
<div id="outside"></div>
`
expectedParamsForCamelCase = {
id: 123,
multiWordExample: "/path",
payload: {
value: 1
},
active: true,
empty: "",
inactive: false
}

async "test clicking on the element does return its params"() {
this.actionValue = "click->CamelCase#log"
await this.nextFrame
await this.triggerEvent(this.buttonElement, "click")

this.assertActions(
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
)
}

async "test global event return element params where the action is defined"() {
this.actionValue = "keydown@window->CamelCase#log"
await this.nextFrame
await this.triggerEvent("#outside", "keydown")

this.assertActions(
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
)
}

async "test passing params to namespaced controller"() {
this.actionValue = "click->CamelCase#log click->AnotherOne#log2"
await this.nextFrame
await this.triggerEvent(this.buttonElement, "click")

this.assertActions(
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
{ identifier: "AnotherOne", params: { id: 234 } },
)
}
}
8 changes: 4 additions & 4 deletions src/tests/modules/core/action_params_tests.ts
Expand Up @@ -69,10 +69,10 @@ export default class ActionParamsTests extends LogControllerTestCase {
{ identifier: "c", params: this.expectedParamsForC },
)

await this.buttonElement.setAttribute("data-c-id-param", "234")
await this.buttonElement.setAttribute("data-c-new-param", "new")
await this.buttonElement.removeAttribute("data-c-payload-param")
await this.triggerEvent(this.buttonElement, "click")
this.buttonElement.setAttribute("data-c-id-param", "234")
this.buttonElement.setAttribute("data-c-new-param", "new")
this.buttonElement.removeAttribute("data-c-payload-param")
this.triggerEvent(this.buttonElement, "click")

this.assertActions(
{ identifier: "c", params: this.expectedParamsForC },
Expand Down

0 comments on commit a2a030f

Please sign in to comment.