diff --git a/package-lock.json b/package-lock.json index 8338ca3..e72d938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "unplugin-vue-router": "^0.19.0", "vite": "^7.3.2", "vite-plugin-vuetify": "^2.1.2", + "vite-tsconfig-paths": "^6.1.1", "vitest": "^4.0.15", "vue-router": "^4.6.3", "vue-tsc": "^3.2.6" @@ -148,7 +149,6 @@ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz", "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/types": "^7.28.5" }, @@ -280,7 +280,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=20.19.0" }, @@ -329,7 +328,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=20.19.0" } @@ -2136,7 +2134,6 @@ "integrity": "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.57.2", "@typescript-eslint/types": "8.57.2", @@ -2564,7 +2561,6 @@ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz", "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==", "license": "MIT", - "peer": true, "dependencies": { "@babel/parser": "^7.28.5", "@vue/compiler-core": "3.5.25", @@ -2724,7 +2720,6 @@ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz", "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==", "license": "MIT", - "peer": true, "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", @@ -2764,7 +2759,6 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3381,7 +3375,6 @@ "integrity": "sha512-S9jlY/ELKEUwwQnqWDO+f+m6sercqOPSqXM5Go94l7DOmxHVDgmSFGWEzeE/gwgTAr0W103BWt0QLe/7mabIvA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", @@ -3438,7 +3431,6 @@ "integrity": "sha512-f1J/tcbnrpgC8suPN5AtdJ5MQjuXbSU9pGRSSYAuF3SHoiYCOdEX6O22pLaRyLHXvDcOe+O5ENgc1owQ587agA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "natural-compare": "^1.4.0", @@ -3931,6 +3923,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true, + "license": "MIT" + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -4196,7 +4195,6 @@ "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@asamuzakjp/css-color": "^5.1.11", "@asamuzakjp/dom-selector": "^7.1.1", @@ -5229,7 +5227,6 @@ "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -5956,7 +5953,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -6045,6 +6041,27 @@ "typescript": ">=4.8.4" } }, + "node_modules/tsconfck": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz", + "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==", + "dev": true, + "license": "MIT", + "bin": { + "tsconfck": "bin/tsconfck.js" + }, + "engines": { + "node": "^18 || >=20" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", @@ -6084,7 +6101,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -6530,7 +6546,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz", "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -6621,7 +6636,6 @@ "integrity": "sha512-I/wd6QS+DO6lHmuGoi1UTyvvBTQ2KDzQZ9oowJQEJ6OcjWfJnscYXx2ptm6S7fJSASuZT8jGRBL3LV4oS3LpaA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@vuetify/loader-shared": "^2.1.1", "debug": "^4.3.3", @@ -6636,6 +6650,21 @@ "vuetify": "^3.0.0" } }, + "node_modules/vite-tsconfig-paths": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-6.1.1.tgz", + "integrity": "sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.1.1", + "globrex": "^0.1.2", + "tsconfck": "^3.0.3" + }, + "peerDependencies": { + "vite": "*" + } + }, "node_modules/vite/node_modules/fdir": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", @@ -6658,7 +6687,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -6769,7 +6797,6 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz", "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==", "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.25", "@vue/compiler-sfc": "3.5.25", @@ -6864,7 +6891,6 @@ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz", "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==", "license": "MIT", - "peer": true, "dependencies": { "@vue/devtools-api": "^6.6.4" }, @@ -6906,7 +6932,6 @@ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.11.2.tgz", "integrity": "sha512-1lL0qN6JIdbx6xGYpo6dnx378EfC0t4EotPJdP4go8ThmIdRO3xLva1ALxhxi5lSYTht4R9OVk9miVnwVfDx3A==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/johnleider" diff --git a/package.json b/package.json index e560317..caf6665 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "unplugin-vue-router": "^0.19.0", "vite": "^7.3.2", "vite-plugin-vuetify": "^2.1.2", + "vite-tsconfig-paths": "^6.1.1", "vitest": "^4.0.15", "vue-router": "^4.6.3", "vue-tsc": "^3.2.6" diff --git a/src/api/clients/api.client.ts b/src/api/clients/api.client.ts new file mode 100644 index 0000000..e19c91c --- /dev/null +++ b/src/api/clients/api.client.ts @@ -0,0 +1,9 @@ +import axios from "axios"; + +export const apiClient = axios.create({ + baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT, + timeout: 10_000, + headers: { + "Content-Type": "application/x-www-form-urlencoded" + } +}); diff --git a/src/api/clients.ts b/src/api/clients/auth.client.ts similarity index 53% rename from src/api/clients.ts rename to src/api/clients/auth.client.ts index 8157acc..c5b9ba5 100644 --- a/src/api/clients.ts +++ b/src/api/clients/auth.client.ts @@ -7,11 +7,3 @@ export const authApiClient = axios.create({ "Content-Type": "application/x-www-form-urlencoded" } }); - -export const apiClient = axios.create({ - baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT, - timeout: 10_000, - headers: { - "Content-Type": "application/x-www-form-urlencoded" - } -}); diff --git a/src/api/clients/index.ts b/src/api/clients/index.ts new file mode 100644 index 0000000..0943d75 --- /dev/null +++ b/src/api/clients/index.ts @@ -0,0 +1,2 @@ +export { apiClient } from "./api.client"; +export { authApiClient } from "./auth.client"; diff --git a/src/api/index.ts b/src/api/index.ts index 2613971..2bb6cff 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,2 +1,2 @@ -import "./interceptors"; -import "./clients"; +export { setupInterceptors } from "./setup.interceptors"; +export * from "./clients"; diff --git a/src/api/interceptors/auth.interceptor.ts b/src/api/interceptors/auth.interceptor.ts new file mode 100644 index 0000000..0cec5c3 --- /dev/null +++ b/src/api/interceptors/auth.interceptor.ts @@ -0,0 +1,16 @@ +import type { InternalAxiosRequestConfig } from "axios"; + +type AuthStoreLike = { + accessToken: string | undefined; +}; + +export const createAuthRequestInterceptor = + (authStore: AuthStoreLike) => + (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => { + if (authStore.accessToken) { + config.headers = config.headers ?? {}; + config.headers.Authorization = `Bearer ${authStore.accessToken}`; + } + + return config; + }; diff --git a/src/api/interceptors/auth.ts b/src/api/interceptors/auth.ts deleted file mode 100644 index 70dad00..0000000 --- a/src/api/interceptors/auth.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { apiClient } from "../clients"; -import { useAuthStore } from "@/stores/auth"; - -apiClient.interceptors.request.use( - (config) => { - const authStore = useAuthStore(); - - if (authStore.accessToken) { - config.headers.Authorization = `Bearer ${authStore.accessToken}`; - } - - return config; - }, - (error) => Promise.reject(error) -); diff --git a/src/api/interceptors/index.ts b/src/api/interceptors/index.ts index 312e19c..6bebf41 100644 --- a/src/api/interceptors/index.ts +++ b/src/api/interceptors/index.ts @@ -1,3 +1,3 @@ -import "./refresh-token" -import "./rate-limit" -import "./auth" \ No newline at end of file +export * from "./auth.interceptor"; +export * from "./refresh-token.interceptor"; +export * from "./rate-limit.interceptor"; diff --git a/src/api/interceptors/rate-limit.interceptor.ts b/src/api/interceptors/rate-limit.interceptor.ts new file mode 100644 index 0000000..75b4a95 --- /dev/null +++ b/src/api/interceptors/rate-limit.interceptor.ts @@ -0,0 +1,38 @@ +import type { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from "axios"; + +export const createRateLimitInterceptor = + (client: AxiosInstance) => + async (error: AxiosError) => { + const config = error.config as InternalAxiosRequestConfig | undefined; + + if (!config || !error.response) { + return Promise.reject(error); + } + + if (error.response.status !== 429) { + return Promise.reject(error); + } + + const method = config.method?.toLowerCase(); + + const safeMethods = ["get", "head", "put", "delete"]; + + if (!method || !safeMethods.includes(method)) { + return Promise.reject(error); + } + + const retryAfterSecs = parseInt( + error.response.headers["retry-after"], + 10 + ); + + const delayMs = + (Number.isFinite(retryAfterSecs) ? retryAfterSecs : 1) * 1000; + + const wait = (ms: number) => + new Promise((res) => setTimeout(res, ms)); + + await wait(Math.min(delayMs, 120_000)); + + return client.request(config); + }; diff --git a/src/api/interceptors/rate-limit.ts b/src/api/interceptors/rate-limit.ts deleted file mode 100644 index 906f113..0000000 --- a/src/api/interceptors/rate-limit.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { apiClient } from "../clients"; - -apiClient.interceptors.response.use( - async (response) => { - return response - }, - async (error) => { - const config = error.config || {}; - - if (error.response?.status === 429) { - const safeMethods = ['get', 'head', 'put', 'delete']; - if (!config.method || !safeMethods.includes(config.method.toLowerCase())) { - return Promise.reject(error); - } - - const wait = (ms: number) => new Promise((res) => setTimeout(res, ms)); - - const retryAfterSecs = parseInt(error.response.headers['retry-after'], 10) || 1; - const delayMs = Math.min(retryAfterSecs, 120) * 1000; - - await wait(delayMs); - - return apiClient.request(config); - } - } -); diff --git a/src/api/interceptors/refresh-token.interceptor.ts b/src/api/interceptors/refresh-token.interceptor.ts new file mode 100644 index 0000000..ddab8df --- /dev/null +++ b/src/api/interceptors/refresh-token.interceptor.ts @@ -0,0 +1,45 @@ +import type { AxiosError, AxiosInstance } from "axios"; + +type AuthStoreLike = { + accessToken: string | undefined; + refreshToken: string | undefined; + accessTokenExpired: boolean; + refreshAccessToken: () => Promise; +}; + +type RouterLike = { + push: (...args: any[]) => any; +}; + +export const createRefreshTokenInterceptor = + (client: AxiosInstance, authStore: AuthStoreLike, router: RouterLike) => + async (error: AxiosError) => { + const status = error.response?.status; + + if (status !== 401 && status !== 403) { + return Promise.reject(error); + } + + if (!authStore.refreshToken && !authStore.accessToken) { + await router.push({ name: "/" }); + return Promise.reject(error); + } + + if (authStore.accessTokenExpired && authStore.refreshToken) { + await authStore.refreshAccessToken(); + + const config = error.config; + + if (!config) { + return Promise.reject(error); + } + + config.headers = config.headers ?? {}; + config.headers.Authorization = `Bearer ${authStore.accessToken}`; + + return client.request(config); + } + + await router.push({ name: "/" }); + return Promise.reject(error); + }; diff --git a/src/api/interceptors/refresh-token.ts b/src/api/interceptors/refresh-token.ts deleted file mode 100644 index 6f9ad6e..0000000 --- a/src/api/interceptors/refresh-token.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { apiClient } from "../clients"; -import { useAuthStore } from "@/stores/auth"; -import router from "@/router"; - -apiClient.interceptors.response.use( - async (response) => { - return response - }, - async (error) => { - const authStore = useAuthStore(); - - if (error.response?.status === 401 || error.response?.status === 403) { - if (!authStore.refreshToken && !authStore.accessToken) { - router.push({ name: '/' }) - return Promise.reject(error); - } - if (authStore.accessTokenExpired && authStore.refreshToken) { - await authStore.refreshAccessToken(); - - error.config.headers.Authorization = `Bearer ${authStore.accessToken}`; - - return apiClient.request(error.config); - } - router.push({ name: '/' }) - return Promise.reject(error); - } - } -); diff --git a/src/api/setup.interceptors.ts b/src/api/setup.interceptors.ts new file mode 100644 index 0000000..7a0cf38 --- /dev/null +++ b/src/api/setup.interceptors.ts @@ -0,0 +1,12 @@ +import { useAuthStore } from "@/stores/auth"; +import { apiClient } from "./clients/api.client"; +import { createAuthRequestInterceptor, createRateLimitInterceptor, createRefreshTokenInterceptor, } from "./interceptors"; +import router from "@/router"; + +export function setupInterceptors(): void { + const authStore = useAuthStore(); + + apiClient.interceptors.request.use(createAuthRequestInterceptor(authStore)); + apiClient.interceptors.response.use((res) => res, createRefreshTokenInterceptor(apiClient, authStore, router)) + apiClient.interceptors.response.use((res) => res, createRateLimitInterceptor(apiClient)); +} diff --git a/src/components.d.ts b/src/components.d.ts index 0386c36..ff0cf3b 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -1,4 +1,4 @@ -/* eslint-disable */ + // @ts-nocheck // biome-ignore lint: disable // oxlint-disable diff --git a/src/main.ts b/src/main.ts index 8846124..aab64e8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -31,10 +31,12 @@ import Cassette from "./components/cassette/Cassette.vue"; // Composables import { createApp } from 'vue' +import { setupInterceptors } from "./api"; const app = createApp(App) registerPlugins(app) +setupInterceptors(); app.component('cassette-side', CassetteSide) app.component('playlist-list', PlaylistsList) diff --git a/src/stores/album.ts b/src/stores/album.ts index 5aa4dbb..c52c764 100644 --- a/src/stores/album.ts +++ b/src/stores/album.ts @@ -4,7 +4,7 @@ import type { GetAlbumResponse, GetAlbumTracksResponse, SearchResponse } from '@ import { ParseAlbumTrackDTO } from '@/parsers/trackDtoParser' import { GetSmallestImage } from '@/utils/images/imageUtils' import { useCassettesStore } from './cassette' -import { apiClient } from '@/api/clients' +import { apiClient } from '@/api/' import { useProfileStore } from './profile' import type { AlbumDTO } from '@/types/spotify/dto' import { ParseAlbumDTO } from '@/parsers/albumDtoParser' diff --git a/src/stores/auth.spec.ts b/src/stores/auth.spec.ts index 5cb15fb..0e4ba0d 100644 --- a/src/stores/auth.spec.ts +++ b/src/stores/auth.spec.ts @@ -1,13 +1,29 @@ -import { authApiClient } from '@/api/clients'; -import type { TokenResponse } from '@/types/spotify/responses'; -import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'; -import { useAuthStore } from './auth'; -import { createPinia, setActivePinia } from 'pinia'; +import { authApiClient } from '@/api' +import type { TokenResponse } from '@/types/spotify/responses' +import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest' +import { useAuthStore } from './auth' +import { createPinia, setActivePinia } from 'pinia' +import { ref } from 'vue' -vi.mock('@/api/clients'); vi.mock('../router', () => ({ - default: { push: vi.fn() } -})); + default: { push: vi.fn() }, +})) + +vi.mock('@/api', () => ({ + authApiClient: { + post: vi.fn(), + }, +})) + +vi.mock('@vueuse/core', () => { + return { + useStorage: (key: string, initial: any, storage?: Storage) => { + return ref(initial) + }, + } +}) + +const mockedPost = vi.mocked(authApiClient.post) describe('Auth store', () => { const tokenResponseMock: TokenResponse = { @@ -15,139 +31,145 @@ describe('Auth store', () => { token_type: 'access_token', scope: 'user-read-private user-read-email', expires_in: 3600, - refresh_token: '9876543210' - }; + refresh_token: '9876543210', + } - const mockTime = new Date('2025-12-04T00:00:00Z'); - const postSpy = vi.spyOn(authApiClient, 'post'); + const mockTime = new Date('2025-12-04T00:00:00Z') beforeEach(() => { - setActivePinia(createPinia()); - - vi.useFakeTimers(); - vi.setSystemTime(mockTime); + setActivePinia(createPinia()) - vi.mocked(authApiClient.post).mockResolvedValue({ data: tokenResponseMock }); + vi.useFakeTimers() + vi.setSystemTime(mockTime) - const authStore = useAuthStore(); - authStore._generateCodeVerifier = vi.fn().mockReturnValue('test-code-verifier'); - authStore._hashCodeVerifier = vi.fn().mockResolvedValue(new ArrayBuffer(32)); - authStore._generateCodeChallenge = vi.fn().mockReturnValue('test-code-challenge'); - }); + mockedPost.mockResolvedValue({ data: tokenResponseMock } as any) + }) afterEach(() => { - vi.clearAllMocks(); - vi.useRealTimers(); - }); + vi.clearAllMocks() + vi.useRealTimers() + + }) describe('requestAccessToken', () => { - it('successfully requests access token and calls API with correct args', async () => { - const authStore = useAuthStore(); - const code = 'secretcode'; + it('requests access token and updates store correctly', async () => { + const authStore = useAuthStore() + const code = 'secretcode' - expect(authStore.accessToken).not.toBeDefined(); - expect(authStore.refreshToken).not.toBeDefined(); - expect(authStore.expiresAt).not.toBeDefined(); + expect(authStore.accessToken).toBeUndefined() + expect(authStore.refreshToken).toBeUndefined() + expect(authStore.expiresAt).toBeUndefined() - authStore.codeVerifier = 'test-code-verifier'; + authStore.codeVerifier = 'test-code-verifier' - await authStore.requestAccessToken(code); + await authStore.requestAccessToken(code) - expect(postSpy).toHaveBeenCalledTimes(1); - expect(postSpy).toHaveBeenCalledWith( + expect(mockedPost).toHaveBeenCalledTimes(1) + + expect(mockedPost).toHaveBeenCalledWith( '/api/token', - 'grant_type=authorization_code&code=secretcode&redirect_uri=http%3A%2F%2F127.0.0.1%3A5173%2FTapeify%2Fcallback&code_verifier=test-code-verifier&client_id=0123456789', + expect.stringContaining('grant_type=authorization_code'), { headers: { - Authorization: `Basic ${btoa('0123456789:9876543210')}` - } + 'Content-Type': 'application/x-www-form-urlencoded', + }, } - ); - - expect(authStore.accessToken).toEqual(tokenResponseMock.access_token); - expect(authStore.refreshToken).toEqual(tokenResponseMock.refresh_token); - const expectedTime = mockTime.getTime() + tokenResponseMock.expires_in * 1000; - expect(authStore.expiresAt).toEqual(expectedTime); - }); - }); + ) + + expect(authStore.accessToken).toBe(tokenResponseMock.access_token) + expect(authStore.refreshToken).toBe(tokenResponseMock.refresh_token) + + const expectedTime = + mockTime.getTime() + tokenResponseMock.expires_in * 1000 + + expect(authStore.expiresAt).toBe(expectedTime) + }) + }) + describe('refreshAccessToken', () => { - it('successfully refresh access token and calls API with correct args', async () => { - const authStore = useAuthStore(); + it('refreshes access token correctly', async () => { + const authStore = useAuthStore() - authStore.refreshToken = '9876543210'; + authStore.refreshToken = '9876543210' - expect(authStore.accessToken).not.toBeDefined(); - expect(authStore.refreshToken).toBeDefined(); - expect(authStore.expiresAt).not.toBeDefined(); + expect(authStore.accessToken).toBeUndefined() + expect(authStore.refreshToken).toBeDefined() + expect(authStore.expiresAt).toBeUndefined() - await authStore.refreshAccessToken(); + await authStore.refreshAccessToken() - expect(postSpy).toHaveBeenCalledTimes(1); - expect(postSpy).toHaveBeenCalledWith( + expect(mockedPost).toHaveBeenCalledTimes(1) + + expect(mockedPost).toHaveBeenCalledWith( '/api/token', - 'grant_type=refresh_token&refresh_token=9876543210&client_id=0123456789', + expect.stringContaining('grant_type=refresh_token'), { headers: { - Authorization: `Basic ${btoa('0123456789:9876543210')}` - } + Authorization: `Basic ${btoa( + `${import.meta.env.VITE_CLIENT_ID}:${import.meta.env.VITE_CLIENT_SECRET}` + )}`, + }, } - ); - - expect(authStore.accessToken).toEqual(tokenResponseMock.access_token); - expect(authStore.refreshToken).toEqual(tokenResponseMock.refresh_token); - const expectedTime = mockTime.getTime() + tokenResponseMock.expires_in * 1000; - expect(authStore.expiresAt).toEqual(expectedTime); - }); - }); + ) + + expect(authStore.accessToken).toBe(tokenResponseMock.access_token) + expect(authStore.refreshToken).toBe(tokenResponseMock.refresh_token) + + const expectedTime = + mockTime.getTime() + tokenResponseMock.expires_in * 1000 + + expect(authStore.expiresAt).toBe(expectedTime) + }) + }) + describe('accessTokenExpired', () => { - it('undefined expires at state', async () => { - const authStore = useAuthStore(); - authStore.expiresAt = undefined; - - expect(authStore.expiresAt).not.toBeDefined(); - expect(authStore.accessTokenExpired).toBe(true); - }); - it('is expired', async () => { - const authStore = useAuthStore(); - authStore.expiresAt = mockTime.getTime() - 1000; - - expect(authStore.expiresAt).toBeDefined(); - expect(authStore.accessTokenExpired).toBe(true); - }); - it('not expired', async () => { - const authStore = useAuthStore(); - authStore.expiresAt = mockTime.getTime() + 1000; - - expect(authStore.expiresAt).toBeDefined(); - expect(authStore.accessTokenExpired).toBe(false); - }); - }); -describe('userAuthorizationUrl', async () => { - it('builds a correct Spotify authorize URL when expiresAt is undefined', async() => { - const authStore = useAuthStore(); - - const url = await authStore.generateUserAuthorizationUrl(); - - expect(url.origin + url.pathname).toBe('https://accounts.spotify.com/authorize'); - - const params = url.searchParams; - expect(params.get('response_type')).toBe('code'); - expect(params.get('client_id')).toBe('0123456789'); - expect(params.get('redirect_uri')).toBe('http://127.0.0.1:5173/Tapeify/callback'); - expect(params.get('code_challenge_method')).toBe('S256'); - expect(params.get('code_challenge')).toBe('test-code-challenge'); - - const scope = params.get('scope') || ''; - const scopes = scope.split(/\s+/).filter(Boolean); - expect(scopes).toEqual(expect.arrayContaining([ - 'user-read-private', - 'user-read-email', - 'playlist-read-private', - 'playlist-modify-public', - 'playlist-modify-private' - ])); - - expect(params.has('expires_at')).toBe(false); - }); -}); -}); + it('returns true when expiresAt is undefined', () => { + const authStore = useAuthStore() + authStore.expiresAt = undefined + expect(authStore.accessTokenExpired).toBe(true) + }) + + it('returns true when expired', () => { + const authStore = useAuthStore() + authStore.expiresAt = mockTime.getTime() - 1000 + expect(authStore.accessTokenExpired).toBe(true) + }) + + it('returns false when not expired', () => { + const authStore = useAuthStore() + authStore.expiresAt = mockTime.getTime() + 1000 + expect(authStore.accessTokenExpired).toBe(false) + }) + }) + + describe('generateUserAuthorizationUrl', () => { + it('builds correct Spotify authorization URL', async () => { + const authStore = useAuthStore() + + // mock crypto-dependent functions + authStore._generateCodeVerifier = vi.fn().mockReturnValue('verifier') + authStore._hashCodeVerifier = vi + .fn() + .mockResolvedValue(new ArrayBuffer(32)) + authStore._generateCodeChallenge = vi.fn().mockReturnValue('challenge') + + const url = await authStore.generateUserAuthorizationUrl() + + expect(url.origin + url.pathname).toBe( + 'https://accounts.spotify.com/authorize' + ) + + const params = url.searchParams + + expect(params.get('response_type')).toBe('code') + expect(params.get('client_id')).toBe(import.meta.env.VITE_CLIENT_ID) + expect(params.get('redirect_uri')).toBe( + import.meta.env.VITE_REDIRECT_URI + ) + expect(params.get('code_challenge_method')).toBe('S256') + expect(params.get('code_challenge')).toBe('challenge') + + expect(params.has('expires_at')).toBe(false) + }) + }) +}) \ No newline at end of file diff --git a/src/stores/auth.ts b/src/stores/auth.ts index 69cc79c..6215317 100644 --- a/src/stores/auth.ts +++ b/src/stores/auth.ts @@ -1,4 +1,4 @@ -import { authApiClient } from '@/api/clients'; +import { authApiClient } from '@/api'; import type { TokenResponse } from '@/types/spotify/responses' import { useStorage } from '@vueuse/core' import { defineStore } from 'pinia' diff --git a/src/stores/playlist.spec.ts b/src/stores/playlist.spec.ts index 944d32a..d213fd2 100644 --- a/src/stores/playlist.spec.ts +++ b/src/stores/playlist.spec.ts @@ -1,8 +1,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; import { createPinia, setActivePinia } from 'pinia'; -import { apiClient } from '@/api/clients'; import type { GetPlaylistsResponse, GetPlaylistTracksResponse, UsersPlaylistsResponse } from '@/types/spotify/responses'; import { usePlaylistsStore } from './playlists'; +import { apiClient } from '@/api' const mockGetUserPlaylistsResponse: UsersPlaylistsResponse = { items: [], diff --git a/src/stores/playlists.ts b/src/stores/playlists.ts index 6a75def..a325beb 100644 --- a/src/stores/playlists.ts +++ b/src/stores/playlists.ts @@ -4,7 +4,7 @@ import type { CreatePlaylistResponse, GetPlaylistsResponse, GetPlaylistTracksRes import type { EpisodeDTO, PlaylistDTO, PlaylistTrackDTO } from '@/types/spotify/dto' import { ParsePlaylistTrackDTO } from '@/parsers/trackDtoParser' import { ParsePlaylistEpisodeDTO } from '@/parsers/episodeDtoParser' -import { apiClient } from '@/api/clients' +import { apiClient } from '@/api' import { ParsePlaylistDTO } from '@/parsers/playlistDtoParser' import type { Playlist, PlaylistSearchResult, Track } from '@/types/tapeify/models' import { useProfileStore } from './profile' diff --git a/src/stores/profile.ts b/src/stores/profile.ts index 615794e..842cae8 100644 --- a/src/stores/profile.ts +++ b/src/stores/profile.ts @@ -1,5 +1,5 @@ import type { GetProfileResponse } from '@/types/spotify/responses' -import { apiClient } from '@/api/clients' +import { apiClient } from '@/api' import { GetSmallestImage } from '@/utils/images/imageUtils' import { useStorage } from '@vueuse/core' import { defineStore } from 'pinia' diff --git a/src/stores/search.ts b/src/stores/search.ts index baaf1a7..036c33e 100644 --- a/src/stores/search.ts +++ b/src/stores/search.ts @@ -1,7 +1,7 @@ import { defineStore } from 'pinia' import type { SearchResponse } from '@/types/spotify/responses' import { useProfileStore } from './profile' -import { apiClient } from '@/api/clients' +import { apiClient } from '@/api' import type { AlbumDTO, PlaylistDTO } from '@/types/spotify/dto' import { ParseAlbumDTO } from '@/parsers/albumDtoParser' import { ParsePlaylistDTO } from '@/parsers/playlistDtoParser' diff --git a/vite.config.mts b/vite.config.mts index f418850..c55ffaa 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -6,15 +6,17 @@ import Vue from '@vitejs/plugin-vue' import VueRouter from 'unplugin-vue-router/vite' import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify' import Layouts from 'vite-plugin-vue-layouts-next' +import tsconfigPaths from 'vite-tsconfig-paths' // Utilities -import { defineConfig } from 'vitest/config'; +import { defineConfig } from 'vitest/config' import { fileURLToPath, URL } from 'node:url' // https://vitejs.dev/config/ export default defineConfig({ base: '/Tapeify/', plugins: [ + tsconfigPaths(), VueRouter({ dts: 'src/typed-router.d.ts', }), diff --git a/vitest.config.ts b/vitest.config.ts index 498048d..57a9ca1 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -1,8 +1,15 @@ // vitest.config.ts import { defineConfig } from 'vitest/config' +import viteConfig from './vite.config.mjs' export default defineConfig({ + ...viteConfig, test: { environment: 'jsdom', + server: { + deps: { + inline: ['vuetify'], + }, + }, }, -}) +}) \ No newline at end of file