Merge pull request #5 from yuriifabirovskyi/master

Fix query param value undefined, fix empty hash, add some tests

Author: rainxh11

src/index.ts

@@ -61,13 +61,14 @@ export class UrlBuilder {
 		this.baseUrl = baseUrl ?? ""
 	}
 	public buildHash(url: string, hash: string | number): string {
-		if (url.match(/#.+/gi)) return url.replace(/#.+/gi, `#${hash}`)
-		return `${url}#${hash}`
+		hash = hash ? `#${hash}` : ''
+		if (url.match(/#.+/gi)) return url.replace(/#.+/gi, `${hash}`)
+		return `${url}${hash}`
 	}
 	public buildPathVariables(url: string, pathVariables: IPathVariables): string {
 		Object.keys(pathVariables).forEach((_, index) => {
 			const value = Object.values(pathVariables)[index]
-			url = url.replace(/:([^\/]+)/gi, isReactive(value) ? (value as Ref).value : value.toString())
+			url = url.replace(/:([^\/]+)/gi, isReactive(value) ? (value as Ref).value : value?.toString())
 		})
 		return url
 	}
@@ -76,12 +77,9 @@ export class UrlBuilder {
 		const params = Object.keys(queryParams)
 			.map((key, index) => {
 				const param = Object.values(queryParams)[index]
-				switch (typeof key) {
-					default:
-						return `${key}=${param}`
-					case "object":
-						return this.buildCSV(key, param, disableCSV)
-				}
+				if (param === null || param === undefined) return undefined
+				if (param instanceof Array) return this.buildCSV(key, param, disableCSV)
+				return `${key}=${param}`
 			})
 			.flat()
 			.filter(x => !!x)

test/test.ts

@@ -2,39 +2,123 @@ import { useDebounce } from "@vueuse/core"
 import { useUrl, createUseUrlInstance } from "../src/index"
 import { ref, reactive, set } from "vue-demi"
 
-const search = ref("query")
-const filters = ref(["filter1", "filter2", "filter3"])
+const urlBuilder = createUseUrlInstance()
 
-const params = reactive({
-	search: "query",
-	param: "something",
-})
+test('Path variables test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/:id",
+			pathVariables: {
+				id: ref(1),
+			},
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/1');
+});
+
+
+test('Query params test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/list",
+			queryParams: {
+				string: ref('query'),
+				boolean: false,
+				someUndefined: undefined,
+				someNull: null,
+			},
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/list?string=query&boolean=false');
+});
+
+
+test('Query params CSV false test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/list",
+			queryParams: {
+				string: ['query1', 'query2', 'query3'],
+			},
+			// disableCSV: false
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/list?string=query1,query2,query3');
+});
+
+
+test('Query params CSV true test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/list",
+			queryParams: {
+				string: ['query1', 'query2', 'query3'],
+			},
+			disableCSV: true
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/list?string=query1&string=query2&string=query3');
+});
+
+
+test('Hash test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/list",
+			hash: "hash",
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/list#hash');
+});
+
+
+test('All together test', () => {
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/:id",
+			pathVariables: {
+				id: ref(1),
+			},
+			queryParams: {
+				string: ref('query'),
+				boolean: false,
+				someUndefined: undefined,
+				someNull: null,
+			},
+			hash: "hash",
+		},
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/1?string=query&boolean=false#hash');
+});
 
-const urlBuilder = createUseUrlInstance()
 
-const { url, queryParams, pathVariables, hash, path, disableCSV } = urlBuilder(
-	{
-		path: "/api/v1/entity/:id/subentity",
-		pathVariables: {
-			id: 1,
+test('Reactivity test', () => {
+	const id = ref(1)
+	const queryParam = ref('query')
+	const { url } = urlBuilder(
+		{
+			path: "/api/v1/entity/:id",
+			pathVariables: {
+				id: id,
+			},
+			queryParams: {
+				string: queryParam,
+				boolean: false,
+				someUndefined: undefined,
+				someNull: null,
+			},
+			hash: "hash",
 		},
-		queryParams: params,
-		hash: "someHash",
-	},
-	"https://somedomain.com/",
-)
-
-console.log(url.value)
-
-set(params, "s", ref("extra"))
-setInterval(() => {
-	pathVariables.id = (pathVariables.id as number) + 1
-	console.log(url.value)
-}, 1000)
-
-/*search.value = "newQuery"
-filters.value = ["newFilter1" , "newFilter"]
-
-setTimeout(() => {
-  console.log(url.value)
-},500)*/
+		"https://somedomain.com/",
+	)
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/1?string=query&boolean=false#hash');
+	id.value = 2
+	queryParam.value = 'query2'
+  expect(url.value).toBe('https://somedomain.com/api/v1/entity/2?string=query2&boolean=false#hash');
+});