Merge pull request #59 from randombenj/feature/use-fetch

feat: use fetch

web/package.json

@@ -24,7 +24,6 @@
     "@vue/cli-plugin-unit-jest": "~4.2.0",
     "@vue/cli-service": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.31",
-    "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",

web/src/components/ProjectOverview.vue

@@ -28,7 +28,7 @@ export default {
     }
   },
   async created() {
-    this.projects = (await ProjectRepository.get()).data
+    this.projects = await ProjectRepository.get()
   }
 }
 </script>

web/src/pages/Docs.vue

@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     onChange() {
-      const docsFrame = document.getElementById("docs")
+      const docsFrame = document.getElementById('docs')
       docsFrame.contentWindow.document.querySelectorAll('a').forEach((a) => {
         if (!a.href.startsWith(location.origin)) {
           // open all foreign links in a new tab
@@ -75,8 +75,8 @@ export default {
 
       // listen on anchor tag changes
       const component = this
-      document.getElementById("docs")
-        .contentWindow.addEventListener("hashchange", (event) =>
+      document.getElementById('docs')
+        .contentWindow.addEventListener('hashchange', (event) =>
           component.load(event.newURL))
 
       // set document path in actual url

web/src/repositories/ProjectRepository.js

@@ -1,16 +1,19 @@
-import Repository from '@/repositories/Repository'
 
+const port = process.env.VUE_APP_BACKEND_PORT || location.port
+const host = process.env.VUE_APP_BACKEND_HOST || location.hostname
+
+const resource = 'doc'
 export default {
 
-  resource: 'doc',
+  baseURL: `${location.protocol}//${host}:${port}`,
 
   /**
   * Get Config
   */
   async getConfig() {
     try {
-      const result = await Repository.get(`${Repository.defaults.baseURL}/config.json`)
-      return result.data;
+      const resp = await fetch(`${this.baseURL}/config.json`)
+      return await resp.json();
     } catch {
       return {}
     }
@@ -19,16 +22,17 @@ export default {
   /**
    * Returns all projects
    */
-  get() {
-    return Repository.get(`${Repository.defaults.baseURL}/${this.resource}/`)
+  async get() {
+    const resp = await fetch(`${this.baseURL}/${resource}/`)
+    return await resp.json()
   },
 
   /**
    * Returns the logo URL of a given project
    * @param {string} projectName Name of the project
    */
   getProjectLogoURL(projectName) {
-    return `${Repository.defaults.baseURL}/${this.resource}/${projectName}/logo.jpg`
+    return `${this.baseURL}/${resource}/${projectName}/logo.jpg`
   },
 
   /**
@@ -38,7 +42,7 @@ export default {
    * @param {string?} docsPath Path to the documentation page
    */
   getProjectDocsURL(projectName, version, docsPath) {
-    return `${Repository.defaults.baseURL}/${this.resource}/${projectName}/${version}/${docsPath || ''}`
+    return `${this.baseURL}/${resource}/${projectName}/${version}/${docsPath || ''}`
   },
 
   /**
@@ -64,22 +68,24 @@ export default {
    * @param {string} projectName Name of the project
    */
   async getVersions(projectName) {
-    return (await Repository.get(`${Repository.defaults.baseURL}/${this.resource}/${projectName}/`))
-      .data
+    const resp = await fetch(`${this.baseURL}/${resource}/${projectName}/`)
+    return (await resp.json())
       .filter((version) => version.type == 'directory')
   },
 
   /**
-   * Upload a new project (as zip)
+   * Uploads new project documentation
    * @param {string} projectName Name of the project
-   * @param {string} version Version of the project
-   * @param {formData} formData Zip archive to upload
+   * @param {string} version Name of the version
+   * @param {string} body Data to upload
    */
-  async upload(projectName, version, formData) {
-    await Repository.post(
-      `${Repository.defaults.baseURL}/api/${projectName}/${version}`,
-      formData,
-      { headers: { 'Content-Type': 'multipart/form-data' } }
+  async upload(projectName, version, body) {
+    await fetch(`${this.baseURL}/api/${projectName}/${version}`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'multipart/form-data' },
+        body
+      }
     )
   }
 }

web/tests/unit/project-repository.spec.js

@@ -1,12 +1,17 @@
-import mockAxios from 'axios'
 
 import ProjectRepository from '@/repositories/ProjectRepository'
 
-afterEach(() => {
-  mockAxios.get.mockClear()
-})
+ProjectRepository.baseURL = 'https://do.cat'
+
+const mockFetchData = (fetchData) => {
+  global.fetch = jest.fn().mockImplementation(() => Promise.resolve({
+    json: () => Promise.resolve(fetchData)
+  }))
+}
+
 
 describe('ProjectRepository', () => {
+
   it('should return the correct logo URL', () => {
     expect(ProjectRepository.getProjectLogoURL('awesome-project'))
       .toMatch('https://do.cat/doc/awesome-project/logo.jpg')
@@ -22,13 +27,11 @@ describe('ProjectRepository', () => {
       { name: 'awesome-project' },
       { name: 'pet-project' }
     ]
-    mockAxios.get.mockImplementationOnce(() =>
-      Promise.resolve({ data: projects })
-    )
+    mockFetchData(projects)
 
-    const result = (await ProjectRepository.get()).data
+    const result = await ProjectRepository.get()
 
-    expect(mockAxios.get).toHaveBeenCalledTimes(1)
+    expect(global.fetch).toHaveBeenCalledTimes(1)
     expect(result).toEqual(projects)
   })
 
@@ -38,21 +41,26 @@ describe('ProjectRepository', () => {
       { name: '2.0', type: 'directory' },
       { name: 'image.png', type: 'file' }
     ]
-    mockAxios.get.mockImplementationOnce(() =>
-      Promise.resolve({ data: versions })
-    )
+    mockFetchData(versions)
 
     const result = await ProjectRepository.getVersions('awesome--project')
 
-    expect(mockAxios.get).toHaveBeenCalledTimes(1)
+    expect(global.fetch).toHaveBeenCalledTimes(1)
     expect(result).toEqual(versions.filter((version) => version.type == 'directory'))
   })
 
   it('should upload new documentation', async () => {
-    mockAxios.post.mockImplementationOnce()
+    mockFetchData({})
 
-    await ProjectRepository.upload('awesome--project', '4.0', { data: true })
+    await ProjectRepository.upload('awesome-project', '4.0', { data: true })
 
-    expect(mockAxios.post).toHaveBeenCalledTimes(1)
+    expect(global.fetch).toHaveBeenCalledTimes(1)
+    expect(global.fetch).toHaveBeenCalledWith('https://do.cat/api/awesome-project/4.0',
+      {
+        'body': {'data': true},
+        'headers': {'Content-Type': 'multipart/form-data'},
+        'method': 'POST'
+      }
+    )
   })
 })