fix(encodeQueryValue): encode the slash character

[hexrw]

🔗 Linked issue

Issue #196

❓ Type of change

• 📖 Documentation (updates to the documentation, readme, or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Make function encodeQueryValue also encode the slash character so that it's consistent with the native URL interface and tools. Resolves #196

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pi0]

Can you please add tests and also (manually) confirm if new URL().href has the same behavior for doing encoding? 🙏🏼

[hexrw]

Before this fix

Tested in Node 20 and Firefox 120

// setting the `new $URL().query` object

import { $URL } from "ufo"

const url = new $URL("https://example.com/")
url.query = { foo: "bar/egg" }

console.log(url.toString())  // "https://example.com/?foo=bar/egg"
console.log(url.href)  // "https://example.com/?foo=bar/egg"

// assigning a property to the `new $URL().query` object

import { $URL } from "ufo"

const url = new $URL("https://example.com/")
url.query = { foo: "bar/egg" }

console.log(url.toString())  // "https://example.com/?foo=bar/egg"
console.log(url.href)  // "https://example.com/?foo=bar/egg"

// using the `$URL` constructor(s) and pre-encoding slashes inside query parameter values

import { $URL } from "ufo"

const url = new $URL("https://example.com/?foo=bar%2Fegg")

// slashes get decoded!
console.log(url.toString())  // "https://example.com/?foo=bar/egg"
console.log(url.href)  // "https://example.com/?foo=bar/egg"

// using the `$URL` constructor(s) and not encoding slashes inside query parameter values

const url = new $URL("https://example.com/?foo=bar/egg")

console.log(url.toString())  // "https://example.com/?foo=bar/egg"
console.log(url.href)  // "https://example.com/?foo=bar/egg"

After this fix

Tested in Node 20 and Firefox 120

// setting the `new $URL().query` object

import { $URL } from "ufo"

const url = new $URL("https://example.com/")
url.query = { foo: "bar/egg" }

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

// assigning a property to the `new $URL().query` object

import { $URL } from "ufo"

const url = new $URL("https://example.com/")
url.query = { foo: "bar/egg" }

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

// using the `$URL` constructor(s) and pre-encoding slashes inside query parameter values

import { $URL } from "ufo"

const url = new $URL("https://example.com/?foo=bar%2Fegg")

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

// using the `$URL` constructor(s) and not encoding slashes inside query parameter values

const url = new $URL("https://example.com/?foo=bar/egg")

// see the note below
console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

Native behavior

Tested in Node 20 and Firefox 120

// using the `new URL().search` Map and `new URLSearchParams().toString()`

const url = new URL("https://example.com/")
url.search = new URLSearchParams({ foo: "bar/egg" }).toString()

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

// using `new URL().searchParams`

const url = new URL("https://example.com/")
url.searchParams.set("foo", "bar/egg")

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

// using the `URL` constructor(s) and pre-encoding slashes inside query parameter values

const url = new URL("https://example.com/?foo=bar%2Fegg")

console.log(url.toString())  // "https://example.com/?foo=bar%2Fegg"
console.log(url.href)  // "https://example.com/?foo=bar%2Fegg"

NOTE: The native URL interface does not encode slashes when passing them unencoded to the constructor(s)

// using the `URL` constructor(s) and not encoding slashes inside query parameter values

const url = new URL("https://example.com/?foo=bar/egg")

console.log(url.toString())  // "https://example.com/?foo=bar/egg"
console.log(url.href)  // "https://example.com/?foo=bar/egg"

[hexrw]

@pi0 my previous comment contains all results from my manual testing. Those did not seem to me as needing to be given separate unit tests, and you said to test it manually anyway.

Also, I will now commit changes to the unit tests for encoding and normalization, which now pass as they expect the new adjusted behavior

[hexrw]

@pi0 needs attention

[pi0]

Thanks! ❤️