Merge pull request #46 from randombenj/feature/frontend-tests

Add frontend tests

Dockerfile

@@ -5,6 +5,7 @@ COPY web ./
 COPY doc/getting-started.md ./src/assets/
 RUN yarn install --frozen-lockfile
 RUN yarn lint
+RUN yarn run test:unit
 RUN yarn build
 
 # production

web/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}

web/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -20,7 +21,9 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
+    "@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",
@@ -41,7 +44,18 @@
     "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "postcss": {
     "plugins": {

web/src/repositories/ProjectRepository.js

@@ -1,6 +1,6 @@
 import Repository from '@/repositories/Repository'
 
-const resource = '/doc'
+const resource = 'doc'
 export default {
 
   /**

web/tests/unit/__mocks__/axios.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef */
+const mockAxios = jest.genMockFromModule('axios')
+
+// this is the key to fix the axios.create() undefined error!
+mockAxios.create = jest.fn(() => mockAxios)
+mockAxios.defaults.baseURL = 'https://do.cat'
+
+export default mockAxios

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

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils'
+
+import ProjectRepository from '@/repositories/ProjectRepository'
+
+import Project from '@/components/Project.vue'
+
+ProjectRepository.getProjectLogoURL = (project) => `/api/${project}`
+ProjectRepository.getVersions = () => [
+  { name: '1.0.0', type: 'directory' },
+  { name: 'latest', type: 'directory' }
+]
+
+const project = 'awesome-project'
+const wrapper = shallowMount(Project, {
+  propsData: { project },
+  stubs: {
+    'router-link': true,
+    'md-card': true,
+    'md-card-header': true,
+    'md-avatar': true
+  }
+})
+
+describe('Project.vue', () => {
+  it('finds the latest version', () => {
+    expect(wrapper.vm.$data.latestVersion).toMatch('latest')
+  })
+
+  it('gets the correct logo url', () => {
+    expect(wrapper.vm.$data.logoURL).toMatch('/api/awesome-project')
+  })
+
+  it('fetches all versions correctly', () => {
+    expect(wrapper.vm.$data.versions).toEqual(ProjectRepository.getVersions())
+  })
+})

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

@@ -0,0 +1,58 @@
+import mockAxios from 'axios'
+
+import ProjectRepository from '@/repositories/ProjectRepository'
+
+afterEach(() => {
+  mockAxios.get.mockClear()
+})
+
+describe('ProjectRepository', () => {
+  it('should return the correct logo URL', () => {
+    expect(ProjectRepository.getProjectLogoURL('awesome-project'))
+      .toMatch('https://do.cat/doc/awesome-project/logo.jpg')
+  })
+
+  it('should return the correct docs URL', () => {
+    expect(ProjectRepository.getProjectDocsURL('pet-project', '1.0.0'))
+      .toMatch('https://do.cat/doc/pet-project/1.0.0/')
+  })
+
+  it('should get all projects', async () => {
+    const projects = [
+      { name: 'awesome-project' },
+      { name: 'pet-project' }
+    ]
+    mockAxios.get.mockImplementationOnce(() =>
+      Promise.resolve({ data: projects })
+    )
+
+    const result = (await ProjectRepository.get()).data
+
+    expect(mockAxios.get).toHaveBeenCalledTimes(1)
+    expect(result).toEqual(projects)
+  })
+
+  it('should get all versions of a project', async () => {
+    const versions = [
+      { name: '1.0', type: 'directory' },
+      { name: '2.0', type: 'directory' },
+      { name: 'image.png', type: 'file' }
+    ]
+    mockAxios.get.mockImplementationOnce(() =>
+      Promise.resolve({ data: versions })
+    )
+
+    const result = await ProjectRepository.getVersions('awesome--project')
+
+    expect(mockAxios.get).toHaveBeenCalledTimes(1)
+    expect(result).toEqual(versions.filter((version) => version.type == 'directory'))
+  })
+
+  it('should upload new documentation', async () => {
+    mockAxios.post.mockImplementationOnce()
+
+    await ProjectRepository.upload('awesome--project', '4.0', { data: true })
+
+    expect(mockAxios.post).toHaveBeenCalledTimes(1)
+  })
+})