Merge pull request #55 from gradido/frontend-tets

Setup unit tests for frontend

.github/workflows/test.yml

@@ -214,41 +214,34 @@ jobs:
   #      run: docker-compose exec -T backend yarn test
 
   ##############################################################################
-  # JOB: UNIT TEST WEBAPP ######################################################
+  # JOB: UNIT TEST FRONTEND  ###################################################
   ##############################################################################
-  #unit_test_webapp:
+  unit_test_frontend:
-  #  name: Unit tests - webapp
+    name: Unit tests - Frontend
-  #  runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-  #  needs: [build_test_webapp]
+    needs: [build_test_frontend]
-  #  steps:
+    steps:
-  #    ##########################################################################
+      ##########################################################################
-  #    # CHECKOUT CODE ##########################################################
+      # CHECKOUT CODE ##########################################################
-  #    ##########################################################################
+      ##########################################################################
-  #    - name: Checkout code
+      - name: Checkout code
-  #      uses: actions/checkout@v2
+        uses: actions/checkout@v2
-  #    ##########################################################################
+      ##########################################################################
-  #    # DOWNLOAD DOCKER IMAGES #################################################
+      # DOWNLOAD DOCKER IMAGES #################################################
-  #    ##########################################################################
+      ##########################################################################
-  #    - name: Download Docker Image (Webapp)
+      - name: Download Docker Image (Webapp)
-  #      uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v2
-  #      with:
+        with:
-  #        name: docker-webapp-test
+          name: docker-frontend-test
-  #        path: /tmp
+          path: /tmp
-  #    - name: Load Docker Image
+      - name: Load Docker Image
-  #      run: docker load < /tmp/webapp.tar
+        run: docker load < /tmp/frontend.tar
-  #    ##########################################################################
+      ##########################################################################
-  #    # UNIT TESTS WEBAPP #####################################################
+      # UNIT TESTS FRONTEND ####################################################
-  #    ##########################################################################
+      ##########################################################################
-  #    # TODO: Why do we need those .envs?
+      - name: frontend | Unit tests
-  #    - name: backend | copy env files webapp
+        run: docker run --rm gradido/frontend:test yarn run test
-  #      run: cp webapp/.env.template webapp/.env
+
-  #    - name: backend | copy env files backend
-  #      run: cp backend/.env.template backend/.env
-  #    - name: backend | docker-compose
-  #      run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp
-  #    - name: webapp | Unit tests
-  #      #run: docker run --rm ocelotsocialnetwork/webapp:build yarn run test
-  #      run: docker-compose exec -T webapp yarn test
 
   #test:
   #  runs-on: ubuntu-latest

frontend/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env"
+    ]
+  ],
+  "env": {
+    "test": {
+      "plugins": ["require-context-hook"],
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "10"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

frontend/.gitignore

@@ -18,3 +18,5 @@ package-lock.json
 *.ntvs*
 *.njsproj
 *.sln
+
+*~

frontend/jest.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+    verbose: true,
+    collectCoverageFrom: [
+      "**/*.{js,vue}",
+      "!**/node_modules/**",
+      "!**/?(*.)+(spec|test).js?(x)"
+    ],
+    moduleFileExtensions: [
+      'js',
+      //'jsx',
+      'json',
+      'vue',
+    ],
+    coverageReporters: [
+      "lcov"
+    ],
+    moduleNameMapper: {
+      '^@/(.*)$': '<rootDir>/src/$1'
+    },
+    transform: {
+      '^.+\\.vue$': 'vue-jest',
+      // '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+      "^.+\\.(js|jsx)?$": "babel-jest"
+    },
+    //setupFiles: [
+    //  "<rootDir>/test/registerContext.js"
+    //],
+    testMatch: [
+      "**/?(*.)+(spec|test).js?(x)"
+    ],
+    // snapshotSerializers: ['jest-serializer-vue'],
+    transformIgnorePatterns: ['<rootDir>/node_modules/']
+  };
+  

frontend/package.json

@@ -8,10 +8,15 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev": "yarn run serve",
-    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
+    "test": "jest"
   },
   "dependencies": {
+    "@vue/test-utils": "^1.1.3",
     "axios": "^0.21.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
     "chart.js": "^2.9.3",
@@ -27,6 +32,7 @@
     "flatpickr": "^4.5.7",
     "fuse.js": "^3.2.0",
     "google-maps": "^3.2.1",
+    "jest": "^26.6.3",
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",
     "perfect-scrollbar": "^1.3.0",
@@ -45,6 +51,7 @@
     "vue-flatpickr-component": "^8.1.2",
     "vue-good-table": "^2.21.3",
     "vue-i18n": "^8.22.4",
+    "vue-jest": "^3.0.7",
     "vue-moment": "^4.1.0",
     "vue-qrcode": "^0.3.5",
     "vue-qrcode-reader": "^2.3.16",

frontend/src/components/CloseButton.spec.js

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+
+import CloseButton from './CloseButton'
+
+const localVue = global.localVue
+
+describe('CloseButton', () => {
+
+  let wrapper
+  let propsData = {
+    target: "Target",
+    expanded: false,
+  }
+
+  const Wrapper = () => {
+    return mount(CloseButton, { localVue, propsData })
+  }
+
+  describe('mount', () => {
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('emmits click event', () => {
+      wrapper.find('.navbar-toggler').trigger('click')
+      expect(wrapper.emitted('click')).toBeTruthy()
+    })
+    
+  })
+  
+})