Skip to content

Commit 0ef6980

Browse files
LeTamanoirLeTamanoir
committed
add test (wip)
1 parent 3015120 commit 0ef6980

File tree

6 files changed

+321
-0
lines changed

6 files changed

+321
-0
lines changed

‎packages/react/test-app/Pages/AxiosInstance.jsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { usePage } from '@inertiajs/react'
2+
import { useEffect } from 'react'
3+
4+
export default function AxiosInstance({ headers, method, form, files, query, axiosInstanceUsed }) {
5+
const page = usePage()
6+
7+
const dump = {
8+
headers,
9+
method,
10+
form,
11+
files: files ? files : {},
12+
query,
13+
axiosInstanceUsed,
14+
$page: page,
15+
}
16+
17+
useEffect(() => {
18+
window._inertia_request_dump = {
19+
headers,
20+
method,
21+
form,
22+
files: files ? files : {},
23+
query,
24+
axiosInstanceUsed,
25+
$page: page,
26+
}
27+
}, [headers, method, form, files, query, axiosInstanceUsed, page])
28+
29+
return (
30+
<div>
31+
<div className="text">This is Inertia page component testing custom axios instance</div>
32+
<hr />
33+
<pre className="dump">{JSON.stringify(dump, null, 2)}</pre>
34+
</div>
35+
)
36+
}

‎packages/svelte/test-app/Pages/AxiosInstance.svelte‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script>
2+
import { onMount } from 'svelte'
3+
import { page } from '@inertiajs/svelte'
4+
5+
export let headers
6+
export let method
7+
export let form
8+
export let files
9+
export let query
10+
export let axiosInstanceUsed
11+
12+
const dump = {
13+
headers,
14+
method,
15+
form,
16+
files: files ? files : {},
17+
query,
18+
axiosInstanceUsed,
19+
$page: $page,
20+
}
21+
22+
onMount(() => {
23+
window._inertia_request_dump = {
24+
headers,
25+
method,
26+
form,
27+
files: files ? files : {},
28+
query,
29+
axiosInstanceUsed,
30+
$page: $page,
31+
}
32+
})
33+
</script>
34+
35+
<div>
36+
<div class="text">This is Inertia page component testing custom axios instance</div>
37+
<hr />
38+
<pre class="dump">{JSON.stringify(dump, null, 2)}</pre>
39+
</div>

‎packages/vue3/test-app/Pages/AxiosInstance.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup>
2+
import { usePage } from '@inertiajs/vue3'
3+
import { onBeforeMount } from 'vue'
4+
5+
const props = defineProps({
6+
headers: Object,
7+
method: String,
8+
form: Object,
9+
files: Array,
10+
query: Object,
11+
axiosInstanceUsed: String,
12+
})
13+
14+
const page = usePage()
15+
16+
const dump = {
17+
headers: props.headers,
18+
method: props.method,
19+
form: props.form,
20+
files: props.files ? props.files : {},
21+
query: props.query,
22+
axiosInstanceUsed: props.axiosInstanceUsed,
23+
$page: page,
24+
}
25+
26+
onBeforeMount(() => {
27+
window._inertia_request_dump = {
28+
headers: props.headers,
29+
method: props.method,
30+
form: props.form,
31+
files: props.files ? props.files : {},
32+
query: props.query,
33+
axiosInstanceUsed: props.axiosInstanceUsed,
34+
$page: page,
35+
}
36+
})
37+
</script>
38+
39+
<template>
40+
<div>
41+
<div class="text">This is Inertia page component testing custom axios instance</div>
42+
<hr />
43+
<pre class="dump">{{ dump }}</pre>
44+
</div>
45+
</template>

‎tests/app/server.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,34 @@ app.delete('/dump/delete', upload.any(), (req, res) =>
198198
}),
199199
)
200200

201+
// Axios instance test routes
202+
app.get('/axios-instance/test', upload.any(), (req, res) =>
203+
inertia.render(req, res, {
204+
component: 'AxiosInstance',
205+
props: {
206+
headers: req.headers,
207+
method: 'get',
208+
form: req.body,
209+
query: req.query,
210+
files: req.files,
211+
axiosInstanceUsed: req.headers['x-custom-axios'] || 'default'
212+
},
213+
}),
214+
)
215+
app.post('/axios-instance/test', upload.any(), (req, res) =>
216+
inertia.render(req, res, {
217+
component: 'AxiosInstance',
218+
props: {
219+
headers: req.headers,
220+
method: 'post',
221+
form: req.body,
222+
query: req.query,
223+
files: req.files,
224+
axiosInstanceUsed: req.headers['x-custom-axios'] || 'default'
225+
},
226+
}),
227+
)
228+
201229
app.get('/visits/reload-on-mount', upload.any(), (req, res) => {
202230
if (req.headers['x-inertia-partial-data']) {
203231
return inertia.render(req, res, {

‎tests/axios-instance.spec.ts‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import test, { expect } from '@playwright/test'
2+
import { shouldBeDumpPage, setupCustomAxiosInstance } from './support'
3+
4+
// Extend Window interface for TypeScript
5+
declare global {
6+
interface Window {
7+
Inertia: any
8+
createInertiaApp: any
9+
}
10+
}
11+
12+
test.describe('Axios Instance', () => {
13+
test.beforeEach(async ({ page }) => {
14+
await page.goto('/')
15+
})
16+
17+
test('uses default axios instance when no custom instance is provided', async ({ page }) => {
18+
await page.goto('/axios-instance/test')
19+
20+
// Make a request using the default axios instance
21+
await page.evaluate(() => {
22+
window.Inertia.visit('/axios-instance/test', { method: 'post', data: { test: 'data' } })
23+
})
24+
25+
await page.waitForURL('/axios-instance/test')
26+
27+
const dump = await shouldBeDumpPage(page, 'post')
28+
29+
// Should not have custom axios header
30+
await expect(dump.headers['x-custom-axios']).toBeUndefined()
31+
await expect(dump.axiosInstanceUsed).toBe('default')
32+
})
33+
34+
test('uses custom axios instance when provided', async ({ page }) => {
35+
// Set up a custom axios instance with a custom header
36+
await setupCustomAxiosInstance(page)
37+
38+
await page.goto('/axios-instance/test')
39+
40+
// Make a request using the custom axios instance
41+
await page.evaluate(() => {
42+
window.Inertia.visit('/axios-instance/test', { method: 'post', data: { test: 'data' } })
43+
})
44+
45+
await page.waitForURL('/axios-instance/test')
46+
47+
const dump = await shouldBeDumpPage(page, 'post')
48+
49+
// Should have custom axios header
50+
await expect(dump.headers['x-custom-axios']).toBe('custom-instance')
51+
await expect(dump.axiosInstanceUsed).toBe('custom-instance')
52+
})
53+
54+
test('custom axios instance works with different HTTP methods', async ({ page }) => {
55+
// Set up a custom axios instance
56+
await setupCustomAxiosInstance(page)
57+
58+
await page.goto('/axios-instance/test')
59+
60+
// Test GET request
61+
await page.evaluate(() => {
62+
window.Inertia.visit('/axios-instance/test?method=get', { method: 'get' })
63+
})
64+
65+
await page.waitForURL('/axios-instance/test')
66+
67+
let dump = await shouldBeDumpPage(page, 'get')
68+
await expect(dump.headers['x-custom-axios']).toBe('custom-instance')
69+
await expect(dump.axiosInstanceUsed).toBe('custom-instance')
70+
71+
// Test POST request
72+
await page.evaluate(() => {
73+
window.Inertia.visit('/axios-instance/test', { method: 'post', data: { test: 'data' } })
74+
})
75+
76+
await page.waitForURL('/axios-instance/test')
77+
78+
dump = await shouldBeDumpPage(page, 'post')
79+
await expect(dump.headers['x-custom-axios']).toBe('custom-instance')
80+
await expect(dump.axiosInstanceUsed).toBe('custom-instance')
81+
})
82+
83+
test('custom axios instance configuration is preserved', async ({ page }) => {
84+
// Set up a custom axios instance with specific configuration
85+
await setupCustomAxiosInstance(page, { 'x-test-config': 'preserved' })
86+
87+
await page.goto('/axios-instance/test')
88+
89+
await page.evaluate(() => {
90+
window.Inertia.visit('/axios-instance/test', { method: 'post', data: { test: 'data' } })
91+
})
92+
93+
await page.waitForURL('/axios-instance/test')
94+
95+
const dump = await shouldBeDumpPage(page, 'post')
96+
97+
// Should have both custom headers
98+
await expect(dump.headers['x-custom-axios']).toBe('custom-instance')
99+
await expect(dump.headers['x-test-config']).toBe('preserved')
100+
await expect(dump.axiosInstanceUsed).toBe('custom-instance')
101+
})
102+
103+
test('axios instance option is optional and backward compatible', async ({ page }) => {
104+
// Test that the app works without the axiosInstance option
105+
await page.goto('/axios-instance/test')
106+
107+
await page.evaluate(() => {
108+
window.Inertia.visit('/axios-instance/test', { method: 'get' })
109+
})
110+
111+
await page.waitForURL('/axios-instance/test')
112+
113+
const dump = await shouldBeDumpPage(page, 'get')
114+
115+
// Should work normally without custom instance
116+
await expect(dump.method).toBe('get')
117+
await expect(dump.axiosInstanceUsed).toBe('default')
118+
})
119+
120+
test('custom axios instance works with form submissions', async ({ page }) => {
121+
// Set up a custom axios instance
122+
await setupCustomAxiosInstance(page)
123+
124+
await page.goto('/axios-instance/test')
125+
126+
// Test form submission
127+
await page.evaluate(() => {
128+
const form = document.createElement('form')
129+
form.method = 'post'
130+
form.action = '/axios-instance/test'
131+
132+
const input = document.createElement('input')
133+
input.name = 'form_field'
134+
input.value = 'test_value'
135+
form.appendChild(input)
136+
137+
document.body.appendChild(form)
138+
139+
window.Inertia.post('/axios-instance/test', { form_field: 'test_value' })
140+
})
141+
142+
await page.waitForURL('/axios-instance/test')
143+
144+
const dump = await shouldBeDumpPage(page, 'post')
145+
146+
await expect(dump.headers['x-custom-axios']).toBe('custom-instance')
147+
await expect(dump.axiosInstanceUsed).toBe('custom-instance')
148+
await expect(dump.form.form_field).toBe('test_value')
149+
})
150+
})

‎tests/support.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,26 @@ export const scrollElementTo = async (page: Page, promise: Promise<void>) => {
6666
// Wait for scroll listener debounce
6767
await page.waitForTimeout(100)
6868
}
69+
70+
export const setupCustomAxiosInstance = async (page: Page, customHeaders: Record<string, string> = {}) => {
71+
await page.addInitScript((headers) => {
72+
const axios = require('axios')
73+
const customAxios = axios.create({
74+
headers: {
75+
'x-custom-axios': 'custom-instance',
76+
...headers
77+
}
78+
})
79+
80+
// Store the original createInertiaApp
81+
const originalCreateInertiaApp = window.createInertiaApp
82+
83+
// Override createInertiaApp to use custom axios instance
84+
window.createInertiaApp = (options) => {
85+
return originalCreateInertiaApp({
86+
...options,
87+
axiosInstance: customAxios
88+
})
89+
}
90+
}, customHeaders)
91+
}

0 commit comments

Comments
 (0)