Merge branch '520-fix-premium-tests-not-running-in-ci' into 'develop'

Docker MR 1: Fix premium tests not being run by the CI + Other web-frontend CI changes

Closes #520

See merge request bramw/baserow!537

premium/web-frontend/test/jest.base.config.js

@@ -1,25 +1,25 @@
+// Allow to transform some ESM installed modules
+const esModules = ['@nuxtjs/i18n'].join('|')
 module.exports = {
-  rootDir: require('path').resolve(__dirname, '..', '..', '..', 'web-frontend'),
-  testEnvironment: 'node',
+  rootDir: '../../../../',
   expand: true,
   forceExit: true,
+  moduleDirectories: ['<rootDir>/web-frontend/node_modules/'],
+  modulePaths: ['<rootDir>/web-frontend/node_modules/'],
   moduleNameMapper: {
-    '^@baserow/(.*)$': '<rootDir>$1',
+    '^@baserow/(.*)$': '<rootDir>/web-frontend/$1',
     '^@baserow_premium/(.*)$':
-      '<rootDir>/../premium/web-frontend/modules/baserow_premium/$1',
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js',
+      '<rootDir>/premium/web-frontend/modules/baserow_premium/$1',
+    '^@/(.*)$': '<rootDir>/web-frontend/$1',
+    '^~/(.*)$': '<rootDir>/web-frontend/$1',
+    '^vue$': '<rootDir>/web-frontend/node_modules/vue/dist/vue.common.js',
   },
   moduleFileExtensions: ['js', 'vue', 'json'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest',
+    '.*\\.(vue)$': '<rootDir>/web-frontend/node_modules/vue-jest',
   },
-  transformIgnorePatterns: ['node_modules/(?!(baserow)/)'],
-  collectCoverage: true,
-  collectCoverageFrom: [
-    '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue',
+  transformIgnorePatterns: [
+    `<rootDir>/web-frontend/node_modules/(?!(baserow|${esModules})/)`,
   ],
 }

premium/web-frontend/test/unit/jest.config.js

@@ -2,7 +2,12 @@ const baseConfig = require('../jest.base.config')
 
 module.exports = Object.assign({}, baseConfig, {
   testEnvironment: 'jsdom',
-  testMatch: ['<rootDir>/test/unit/**/*.spec.js'],
+  testMatch: ['<rootDir>/premium/web-frontend/test/unit/**/*.spec.js'],
   displayName: 'premium-unit',
-  setupFilesAfterEnv: ['./test/unit/jest.setup.js'],
+  setupFilesAfterEnv: [
+    '<rootDir>/premium/web-frontend/test/unit/jest.setup.js',
+  ],
+  snapshotSerializers: [
+    '<rootDir>/web-frontend/node_modules/jest-serializer-vue',
+  ],
 })

premium/web-frontend/test/unit/premium/admin/users/userAdmin.spec.js

@@ -87,7 +87,7 @@ describe('User Admin Component Tests', () => {
     expect(signedUpCell.text()).toBe('04/21/2021 12:04 PM')
 
     // Shown as active
-    expect(isActiveCell.text()).toBe('Active')
+    expect(isActiveCell.text()).toBe('premium.user.active')
   })
 
   test('A user with no groups is displayed without any', async () => {
@@ -140,7 +140,7 @@ describe('User Admin Component Tests', () => {
 
     const cells = ui.findCells()
     const { isActiveCell } = ui.getRow(cells, 0)
-    expect(isActiveCell.text()).toContain('Deactivated')
+    expect(isActiveCell.text()).toContain('premium.user.deactivated')
   })
 
   test('A deactivated user can be activated', async () => {
@@ -160,7 +160,7 @@ describe('User Admin Component Tests', () => {
 
     const cells = ui.findCells()
     const { isActiveCell } = ui.getRow(cells, 0)
-    expect(isActiveCell.text()).toContain('Active')
+    expect(isActiveCell.text()).toContain('premium.user.active')
   })
 
   test('A users password can be changed', async () => {
@@ -186,7 +186,7 @@ describe('User Admin Component Tests', () => {
         validPassword,
         validPassword + 'DifferentFromFirst'
       )
-    ).toContain('This field must match your password field')
+    ).toContain('changePasswordForm.error.doesntMatch')
   })
 
   test('users password cant be changed less than 8 characters', async () => {
@@ -295,9 +295,7 @@ describe('User Admin Component Tests', () => {
     const modal = await ui.changeFullName(tooShortFullName)
     const error = ui.getModalFieldErrorText(modal)
 
-    expect(error).toContain(
-      'Please enter a valid full name, it must be longer than 2 letters and less than 150.'
-    )
+    expect(error).toContain('userForm.error.invalidName')
   })
 
   test('a users full name cant be changed to more than 150 characters', async () => {
@@ -308,9 +306,7 @@ describe('User Admin Component Tests', () => {
     const modal = await ui.changeFullName(tooLongFullName)
     const error = ui.getModalFieldErrorText(modal)
 
-    expect(error).toContain(
-      'Please enter a valid full name, it must be longer than 2 letters and less than 150.'
-    )
+    expect(error).toContain('userForm.error.invalidName')
   })
 
   test('a users username be changed', async () => {
@@ -344,7 +340,7 @@ describe('User Admin Component Tests', () => {
     const modal = await ui.changeEmail(invalidEmail)
     const error = ui.getModalFieldErrorText(modal)
 
-    expect(error).toContain('Please enter a valid e-mail address.')
+    expect(error).toContain('userForm.error.invalidEmail')
   })
 
   test('changing a users username and closing without saving resets the modals form', async () => {
@@ -602,7 +598,7 @@ describe('User Admin Component Tests', () => {
     let cells = ui.findCells()
     const { isActiveCell } = ui.getRow(cells, 0)
     expect(isActiveCell.text()).toBe(
-      startingIsActive ? 'Active' : 'Deactivated'
+      startingIsActive ? 'premium.user.active' : 'premium.user.deactivated'
     )
 
     mockPremiumServer.expectUserUpdated(user, {
@@ -620,7 +616,7 @@ describe('User Admin Component Tests', () => {
     cells = ui.findCells()
     const { isActiveCell: updatedIsActiveCell } = ui.getRow(cells, 0)
     expect(updatedIsActiveCell.text()).toBe(
-      startingIsActive ? 'Deactivated' : 'Active'
+      startingIsActive ? 'premium.user.deactivated' : 'premium.user.active'
     )
   }
 

web-frontend/jest.config.js

@@ -1,3 +1,16 @@
+// The main jest config file used to run all of our tests.
 module.exports = {
-  projects: ['test/server', 'test/unit', '../premium/web-frontend/test/unit'],
+  // The rootDir used by jest must be the root of the repository so the premium tests
+  // and frontend code are contained within jest's rootDir. This is because:
+  // - Jest cannot collect coverage for files outside of its rootDir
+  // - Jest struggles to run tests which are outside of its rootDir.
+  rootDir: '..',
+  roots: ['<rootDir>/web-frontend/', '<rootDir>/premium/web-frontend'],
+  moduleDirectories: ['<rootDir>/web-frontend/node_modules/'],
+  modulePaths: ['<rootDir>/web-frontend/node_modules/'],
+  projects: [
+    '<rootDir>/web-frontend/test/unit',
+    '<rootDir>/premium/web-frontend/test/unit',
+    '<rootDir>/web-frontend/test/server',
+  ],
 }

web-frontend/package.json

@@ -12,7 +12,7 @@
     "start": "nuxt start --hostname 0.0.0.0",
     "eslint": "eslint -c .eslintrc.js --ext .js,.vue . ../premium/web-frontend",
     "stylelint": "stylelint **/*.scss ../premium/web-frontend/**/*.scss --syntax scss",
-    "jest": "jest -i --verbose false",
+    "jest": "jest --verbose false",
     "test": "yarn jest"
   },
   "dependencies": {
@@ -26,7 +26,6 @@
     "chart.js": "2.9.4",
     "cookie-universal-nuxt": "^2.1.5",
     "cross-env": "^7.0.2",
-    "jest-serializer-vue": "^2.0.2",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "markdown-it": "^12.3.2",
@@ -65,6 +64,7 @@
     "eslint-plugin-vue": "^7.14.0",
     "flush-promises": "^1.0.2",
     "jest": "^26.6.3",
+    "jest-serializer-vue": "^2.0.2",
     "jsdom": "^16.6.0",
     "jsdom-global": "^3.0.2",
     "node-mocks-http": "^1.7.6",

web-frontend/test/helpers/components.js

@@ -1,4 +1,4 @@
-import Vuelidate from 'vuelidate'
+import Vuelidate from '@baserow/node_modules/vuelidate/lib/index'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import '@baserow/modules/core/plugins/global'

web-frontend/test/helpers/create-nuxt.js

@@ -2,12 +2,12 @@ import { Builder, Nuxt } from 'nuxt'
 
 import config from '@/config/nuxt.config.test'
 
-export default async function createNuxt(buildAndListen = false) {
+export default async function createNuxt(buildAndListen = false, port = 3001) {
   const nuxt = new Nuxt(config)
   await nuxt.ready()
   if (buildAndListen) {
     await new Builder(nuxt).build()
-    await nuxt.server.listen(3001, 'localhost')
+    await nuxt.server.listen(port, 'localhost')
   }
   return nuxt
 }

web-frontend/test/helpers/testApp.js

@@ -12,7 +12,7 @@ import flushPromises from 'flush-promises'
  * Uses the real baserow plugins to setup a Vuex store and baserow registry
  * correctly.
  */
-function _createBaserowStoreAndRegistry(app, vueContext) {
+function _createBaserowStoreAndRegistry(app, vueContext, extraPluginSetupFunc) {
   const store = new vueContext.vuex.Store({})
 
   setupCore({ store, app }, (name, dep) => {
@@ -26,10 +26,14 @@ function _createBaserowStoreAndRegistry(app, vueContext) {
   store.$client = app.client
   store.app = app
   app.$store = store
-  setupDatabasePlugin({
+  const setupContext = {
     store,
     app,
-  })
+  }
+  setupDatabasePlugin(setupContext)
+  if (extraPluginSetupFunc) {
+    extraPluginSetupFunc(setupContext)
+  }
   return store
 }
 
@@ -59,7 +63,7 @@ function _createBaserowStoreAndRegistry(app, vueContext) {
  *
  */
 export class TestApp {
-  constructor() {
+  constructor(extraPluginSetupFunc = null) {
     this.mock = new MockAdapter(axios, { onNoMatch: 'throwException' })
     // In the future we can extend this stub realtime implementation to perform
     // useful testing of realtime interaction in the frontend!
@@ -88,7 +92,11 @@ export class TestApp {
       },
     }
     this._vueContext = bootstrapVueContext()
-    this.store = _createBaserowStoreAndRegistry(this._app, this._vueContext)
+    this.store = _createBaserowStoreAndRegistry(
+      this._app,
+      this._vueContext,
+      extraPluginSetupFunc
+    )
     this._initialCleanStoreState = _.cloneDeep(this.store.state)
     this.mockServer = new MockServer(this.mock, this.store)
     this.failTestOnErrorResponse = true

web-frontend/test/jest.base.config.js

@@ -2,25 +2,22 @@
 const esModules = ['@nuxtjs/i18n'].join('|')
 
 module.exports = {
-  rootDir: '../../',
+  rootDir: '../../../',
   testEnvironment: 'node',
   expand: true,
   forceExit: true,
   moduleNameMapper: {
-    '^@baserow/(.*)$': '<rootDir>/$1',
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js',
+    '^@baserow/(.*)$': '<rootDir>/web-frontend/$1',
+    '^@/(.*)$': '<rootDir>/web-frontend/$1',
+    '^~/(.*)$': '<rootDir>/web-frontend/$1',
+    '^vue$': '<rootDir>/web-frontend/node_modules/vue/dist/vue.common.js',
   },
   moduleFileExtensions: ['js', 'vue', 'json'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest',
+    '.*\\.(vue)$': '<rootDir>/web-frontend/node_modules/vue-jest',
   },
-  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
-  collectCoverage: true,
-  collectCoverageFrom: [
-    '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue',
+  transformIgnorePatterns: [
+    `<rootDir>/web-frontend/node_modules/(?!${esModules})`,
   ],
 }

web-frontend/test/server/core/pages/index.spec.js

@@ -26,7 +26,7 @@ describe('index redirect', () => {
       },
     })
 
-    nuxt = await createNuxt(true)
+    nuxt = await createNuxt(true, 3501)
     done()
   })
 

web-frontend/test/server/core/pages/login.spec.js

@@ -4,7 +4,7 @@ let nuxt = null
 
 describe('children', () => {
   beforeAll(async (done) => {
-    nuxt = await createNuxt(true)
+    nuxt = await createNuxt(true, 3502)
     done()
   }, 120000)
 

web-frontend/test/server/core/pages/signup.spec.js

@@ -4,7 +4,7 @@ let nuxt = null
 
 describe('children', () => {
   beforeAll(async (done) => {
-    nuxt = await createNuxt(true)
+    nuxt = await createNuxt(true, 3503)
     done()
   }, 120000)
 

web-frontend/test/server/jest.config.js

@@ -2,8 +2,8 @@ const baseConfig = require('../jest.base.config')
 
 module.exports = Object.assign({}, baseConfig, {
   testEnvironment: 'node',
-  testMatch: ['<rootDir>/test/server/**/*.spec.js'],
+  testMatch: ['<rootDir>/web-frontend/test/server/**/*.spec.js'],
   displayName: 'server',
   name: 'server',
-  setupFilesAfterEnv: ['./test/server/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/web-frontend/test/server/jest.setup.js'],
 })

web-frontend/test/unit/jest.config.js

@@ -2,8 +2,10 @@ const baseConfig = require('../jest.base.config')
 
 module.exports = Object.assign({}, baseConfig, {
   testEnvironment: 'jsdom',
-  testMatch: ['<rootDir>/test/unit/**/*.spec.js'],
+  testMatch: ['<rootDir>/web-frontend/test/unit/**/*.spec.js'],
   displayName: 'unit',
-  setupFilesAfterEnv: ['./test/unit/jest.setup.js'],
-  snapshotSerializers: ['jest-serializer-vue'],
+  setupFilesAfterEnv: ['<rootDir>/web-frontend/test/unit/jest.setup.js'],
+  snapshotSerializers: [
+    '<rootDir>/web-frontend/node_modules/jest-serializer-vue',
+  ],
 })

web-frontend/yarn.lock

@@ -3301,9 +3301,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228:
-  version "1.0.30001246"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001246.tgz#fe17d9919f87124d6bb416ef7b325356d69dc76c"
-  integrity sha512-Tc+ff0Co/nFNbLOrziBXmMVtpt9S2c2Y+Z9Nk9Khj09J+0zR9ejvIW5qkZAErCbOrVODCx/MN+GpB5FNBs5GFA==
+  version "1.0.30001300"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz"
+  integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
 
 capture-exit@^2.0.0:
   version "2.0.0"