test: add axios upload test (#1855)

package.json

@@ -151,6 +151,7 @@
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "@web/dev-server": "^0.1.38",
+    "axios": "^1.6.1",
     "babel-loader": "^8.2.3",
     "babel-minify": "^0.5.1",
     "commitizen": "^4.2.4",

test/browser/third-party/axios-upload.browser.test.ts

@@ -0,0 +1,35 @@
+import type { AxiosResponse } from 'axios'
+import { test, expect } from '../playwright.extend'
+
+declare namespace window {
+  export let upload: () => Promise<
+    AxiosResponse<{ message: string; content: string }>
+  >
+  export let progressEvents: Array<ProgressEvent>
+}
+
+test('responds with a mocked response to an upload request', async ({
+  loadExample,
+  page,
+}) => {
+  await loadExample(require.resolve('./axios-upload.runtime.js'))
+
+  const uploadResult = await page.evaluate(() => {
+    return window.upload().then((response) => response.data)
+  })
+
+  expect(uploadResult).toEqual({
+    message: 'Successfully uploaded "doc.txt"!',
+    content: 'Helloworld',
+  })
+
+  const progressEvents = await page.evaluate(() => {
+    return window.progressEvents
+  })
+
+  expect(progressEvents.length).toBeGreaterThan(0)
+  expect(progressEvents[0]).toMatchObject({
+    bytes: expect.any(Number),
+    loaded: expect.any(Number),
+  })
+})

test/browser/third-party/axios-upload.runtime.js

@@ -0,0 +1,43 @@
+import axios from 'axios'
+import { http, HttpResponse } from 'msw'
+import { setupWorker } from 'msw/browser'
+
+const worker = setupWorker(
+  http.post('/upload', async ({ request }) => {
+    const data = await request.formData()
+    const file = data.get('file')
+
+    if (!file) {
+      return new HttpResponse('Missing document upload', { status: 400 })
+    }
+
+    if (!(file instanceof File)) {
+      return new HttpResponse('Uploaded document is not a File', {
+        status: 400,
+      })
+    }
+
+    return HttpResponse.json({
+      message: `Successfully uploaded "${file.name}"!`,
+      content: await file.text(),
+    })
+  }),
+)
+worker.start()
+
+const progressEvents = []
+const request = axios.create({
+  baseURL: '/',
+  onDownloadProgress(event) {
+    progressEvents.push(event)
+  },
+})
+
+window.progressEvents = progressEvents
+window.upload = async function () {
+  const formData = new FormData()
+  const file = new Blob(['Hello', 'world'], { type: 'text/plain' })
+  formData.set('file', file, 'doc.txt')
+
+  return request.post('/upload', formData)
+}

test/node/third-party/axios-upload.node.test.ts

@@ -0,0 +1,63 @@
+// @vitest-environment node
+import { File } from 'node:buffer'
+import axios from 'axios'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer(
+  http.post('https://example.com/upload', async ({ request }) => {
+    const data = await request.formData()
+    const file = data.get('file')
+
+    if (!file) {
+      return new HttpResponse('Missing document upload', { status: 400 })
+    }
+
+    if (!(file instanceof File)) {
+      return new HttpResponse('Uploaded document is not a File', {
+        status: 400,
+      })
+    }
+
+    return HttpResponse.json({
+      message: `Successfully uploaded "${file.name}"!`,
+      content: await file.text(),
+    })
+  }),
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+it('responds with a mocked response to an upload request', async () => {
+  const onUploadProgress = vi.fn()
+  const request = axios.create({
+    baseURL: 'https://example.com',
+    onUploadProgress,
+  })
+
+  const formData = new FormData()
+  const file = new Blob(['Hello', 'world'], { type: 'text/plain' })
+  formData.set('file', file, 'doc.txt')
+
+  const response = await request.post('/upload', formData)
+
+  expect(response.data).toEqual({
+    message: 'Successfully uploaded "doc.txt"!',
+    content: 'Helloworld',
+  })
+  expect(onUploadProgress.mock.calls.length).toBeGreaterThan(0)
+  expect(onUploadProgress).toHaveBeenNthCalledWith(
+    1,
+    expect.objectContaining({
+      loaded: expect.any(Number),
+      total: expect.any(Number),
+      bytes: expect.any(Number),
+    }),
+  )
+})