Migrate query builder to typescript

src/components/pull-request-list/pull-request-list.spec.ts

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vitest } from 'vitest'
 import NetworkPolling from '../network-polling/network-polling.js'
 import PullRequestLine from '../ui/pull-request-line/pull-request-line.vue'
 import type { Mocks, Wrapper } from '../../test-utils.ts'
-import { buildRepositoriesQuery } from '../../services/graphql/query-builder'
+import { buildRepositoriesQuery } from '../../services/graphql/query-builder.ts'
 import { extractHttp as extractPullRequest, type GDPullRequest } from '../../services/pull-request/pull-request.ts'
 import type { pullRequestNotifications } from '../../services/pull-request-notifications/pull-request-notifications'
 import type { buildUserService } from '../../services/user/user'

src/components/pull-request-list/pull-request-list.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import PullRequestLine from '../ui/pull-request-line/pull-request-line.vue'
 import NetworkPolling from '../network-polling/network-polling.vue'
-import { buildRepositoriesQuery } from '../../services/graphql/query-builder'
+import { buildRepositoriesQuery } from '../../services/graphql/query-builder.ts'
 import {
 	extractHttp as extractPullRequest,
 	type GDPullRequest,

src/components/recently-closed-pull-requests/recently-closed-pull-requests.js

@@ -1,5 +1,5 @@
 import { extractHttp as extractPullRequest, pullRequestFragment } from '../../services/pull-request/pull-request'
-import { buildViewerQuery } from '../../services/graphql/query-builder'
+import { buildViewerQuery } from '../../services/graphql/query-builder.ts'
 import PullRequestLine from '../ui/pull-request-line/pull-request-line.vue'
 import NetworkPolling from '../network-polling/network-polling.vue'
 

src/components/repository-list/repository-list.spec.ts

@@ -6,7 +6,7 @@ import { useRepositoryStore } from '../../stores/repositories/repositories'
 import RepositoryLine from '../ui/repository-line/repository-line.vue'
 import NetworkPolling from '../network-polling/network-polling.js'
 import type { Mocks, Wrapper } from '../../test-utils.ts'
-import type { buildRepositoriesQuery } from '../../services/graphql/query-builder'
+import type { buildRepositoriesQuery } from '../../services/graphql/query-builder.ts'
 
 describe('RepositoryList component', () => {
 	let repositoryList: Wrapper<typeof RepositoryList>

src/components/repository-list/repository-list.vue

@@ -14,7 +14,7 @@
 import RepositoryLine from '../ui/repository-line/repository-line.vue'
 import RepositoryAdder from '../repository-adder/repository-adder.vue'
 import NetworkPolling from '../network-polling/network-polling.vue'
-import { buildRepositoriesQuery } from '../../services/graphql/query-builder'
+import { buildRepositoriesQuery } from '../../services/graphql/query-builder.ts'
 import { useRepositoryStore } from '../../stores/repositories/repositories'
 import { computed, inject, ref } from 'vue'
 import { extractStatuses } from '../../services/statuses/extract-statuses'

src/components/viewer-pull-request-list/viewer-pull-request-list.js

@@ -1,4 +1,4 @@
-import { buildViewerQuery } from '../../services/graphql/query-builder'
+import { buildViewerQuery } from '../../services/graphql/query-builder.ts'
 import PullRequestLine from '../ui/pull-request-line/pull-request-line.vue'
 import NetworkPolling from '../network-polling/network-polling.vue'
 import { extractHttp as extractPullRequest, pullRequestFragment } from '../../services/pull-request/pull-request'

src/services/graphql/query-builder.spec.ts

@@ -0,0 +1,132 @@
+import { buildRepositoriesQuery, buildViewerQuery } from './query-builder.ts'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+describe('Query builder', () => {
+	describe('Query generator', () => {
+		it('should return a function that will use the list of repositories to generate the query', () => {
+			const emptyFragment = ''
+
+			expect(buildRepositoriesQuery(emptyFragment)).toBeTypeOf('function')
+		})
+	})
+
+	describe('Repository Query generation', () => {
+		let queryGenerator: ReturnType<typeof buildRepositoriesQuery>
+
+		beforeEach(() => {
+			queryGenerator = buildRepositoriesQuery(simpleRepositoryFragment)
+		})
+
+		it('should create an empty working query when given an empty repository list', () => {
+			expect(queryGenerator([])).toBe(emptyQuery)
+		})
+
+		it('should create a simple query when given one repository', () => {
+			expect(queryGenerator([{ owner: 'facebook', name: 'react' }])).toBe(simpleRepositoryQuery)
+		})
+
+		it('should create a query when given multiple repositories', () => {
+			expect(
+				queryGenerator([
+					{ owner: 'facebook', name: 'react' },
+					{ owner: 'angular', name: 'angular' }
+				])
+			).toBe(multipleRepositoryQuery)
+		})
+	})
+
+	describe('Viewer Query generation', () => {
+		it('should create an empty working query when an empty fragment', () => {
+			const emptyFragment = ''
+
+			expect(buildViewerQuery(emptyFragment)).toBe(emptyQuery)
+		})
+		it('should create the query when using the given fragment', () => {
+			expect(buildViewerQuery(simpleViewerFragment)).toBe(simpleViewerQuery)
+		})
+	})
+})
+
+const emptyQuery = `fragment rateLimit on Query {
+	rateLimit {
+		cost,
+		limit,
+		remaining,
+		resetAt
+	}
+}
+
+query {
+	...rateLimit
+}`
+
+const simpleRepositoryQuery = `fragment rateLimit on Query {
+	rateLimit {
+		cost,
+		limit,
+		remaining,
+		resetAt
+	}
+}
+
+fragment repository on Repository {
+	name
+}
+
+fragment repositoryList on Query {
+	rep_0: repository(owner: "facebook", name: "react") {...repository}
+}
+
+query {
+	...rateLimit
+	...repositoryList
+}`
+
+const multipleRepositoryQuery = `fragment rateLimit on Query {
+	rateLimit {
+		cost,
+		limit,
+		remaining,
+		resetAt
+	}
+}
+
+fragment repository on Repository {
+	name
+}
+
+fragment repositoryList on Query {
+	rep_0: repository(owner: "facebook", name: "react") {...repository}
+	rep_1: repository(owner: "angular", name: "angular") {...repository}
+}
+
+query {
+	...rateLimit
+	...repositoryList
+}`
+
+const simpleRepositoryFragment = `fragment repository on Repository {
+	name
+}`
+
+const simpleViewerQuery = `fragment rateLimit on Query {
+	rateLimit {
+		cost,
+		limit,
+		remaining,
+		resetAt
+	}
+}
+
+fragment viewer on User {
+	login
+}
+
+query {
+	...rateLimit
+	viewer {...viewer}
+}`
+
+const simpleViewerFragment = `fragment viewer on User {
+	login
+}`

src/services/graphql/query-builder.js → src/services/graphql/query-builder.ts

@@ -1,10 +1,15 @@
-export const buildRepositoriesQuery = (fragment) => (repositoryList) => {
+type Repository = {
+	name: string
+	owner: string
+}
+
+export const buildRepositoriesQuery = (fragment: string) => (repositoryList: Repository[]) => {
 	const fragments = repositoryList.length > 0 ? `\n\n${fragment}\n\n${repositoryListFragment(repositoryList)}` : ''
 	const query = repositoryList.length > 0 ? '\n\t...repositoryList' : ''
 	return `${rateLimitFragment}${fragments}\n\nquery {\n\t...rateLimit${query}\n}`
 }
 
-export const buildViewerQuery = (fragment) => {
+export const buildViewerQuery = (fragment: string) => {
 	const formattedFragment = fragment ? `\n\n${fragment}` : ''
 	const query = fragment ? '\n\tviewer {...viewer}' : ''
 	return `${rateLimitFragment}${formattedFragment}\n\nquery {\n\t...rateLimit${query}\n}`
@@ -19,7 +24,7 @@ const rateLimitFragment = `fragment rateLimit on Query {
 	}
 }`
 
-const repositoryListFragment = (repositoryList) => {
+const repositoryListFragment = (repositoryList: Repository[]) => {
 	const fragmentContent = repositoryList
 		.map(
 			({ owner, name }, index) => `\trep_${index}: repository(owner: "${owner}", name: "${name}") {...repository}`

src/test-setup.js → src/test-setup.ts

@@ -4,6 +4,6 @@ import { config } from '@vue/test-utils'
 // see https://github.com/jsdom/jsdom/issues/1862
 window.Notification = {
 	permission: 'denied'
-}
+} as never
 
 config.global.renderStubDefaultSlot = true

vitest.config.ts

@@ -12,7 +12,7 @@ export default mergeConfig(
 			exclude: [...configDefaults.exclude, 'e2e/*'],
 			root: fileURLToPath(new URL('./', import.meta.url)),
 			globals: true,
-			setupFiles: './src/test-setup.js',
+			setupFiles: './src/test-setup.ts',
 			coverage: {
 				all: true,
 				reporter: ['text-summary', 'text', 'html', 'cobertura']