(test) setup jest

Author: antoine92190

.babelrc

@@ -0,0 +1,8 @@
+{
+	"presets": [["@babel/preset-env", { "modules": false }]],
+	"env": {
+		"test": {
+			"presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+		}
+	}
+}

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	verbose: true,
+	moduleFileExtensions: ['js', 'json', 'vue'],
+	transform: {
+		'.*\\.(vue)$': 'vue-jest',
+		'^.+\\.js$': '<rootDir>/node_modules/babel-jest'
+	}
+	// collectCoverage: true,
+	// collectCoverageFrom: ['src/components/*.{js,vue}', '!**/node_modules/**'],
+	// coverageReporters: ['html', 'text-summary']
+}

package.json

@@ -36,7 +36,8 @@
 		"build:wc": "vue-cli-service build --target wc --no-clean --name vue-advanced-chat ./src/ChatWindow/ChatWindow.vue",
 		"prepublish": "npm run lint && npm run build",
 		"publish-beta": "npm publish --tag beta",
-		"lint": "vue-cli-service lint"
+		"lint": "vue-cli-service lint",
+		"test": "jest"
 	},
 	"typings": "types/index.d.ts",
 	"files": [
@@ -55,14 +56,18 @@
 		"@vue/cli-service": "~4.5.0",
 		"@vue/eslint-config-standard": "^4.0.0",
 		"@vue/eslint-config-typescript": "^5.0.2",
+		"@vue/test-utils": "^1.1.3",
 		"babel-eslint": "^10.0.3",
+		"babel-jest": "^23.6.0",
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^7.5.0",
+		"jest": "^23.6.0",
 		"node-sass": "^4.13.0",
 		"rimraf": "^2.7.1",
 		"sass-loader": "^8.0.2",
 		"typescript": "^4.0.5",
 		"vue": "^2.6.10",
+		"vue-jest": "^3.0.7",
 		"vue-template-compiler": "^2.6.11"
 	},
 	"dependencies": {

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	env: {
+		jest: true
+	}
+}

tests/unit/RoomsList.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils'
+import RoomsList from '../../src/ChatWindow/RoomsList/RoomsList'
+
+import mockData from './mock-data'
+
+let wrapper
+
+beforeEach(() => {
+	wrapper = shallowMount(RoomsList, {
+		propsData: {
+			currentUserId: mockData.currentUserId,
+			textMessages: mockData.textMessages,
+			showRoomsList: true,
+			showAddRoom: mockData.showAddRoom,
+			textFormatting: mockData.textFormatting,
+			isMobile: false,
+			rooms: mockData.rooms,
+			loadingRooms: mockData.loadingRooms,
+			roomsLoaded: mockData.roomsLoaded,
+			room: mockData.rooms[0],
+			roomActions: mockData.roomActions
+		}
+	})
+})
+
+afterEach(() => {
+	wrapper.destroy()
+})
+
+describe('RoomsList', () => {
+	test('is a Vue instance', () => {
+		expect(wrapper.isVueInstance).toBeTruthy()
+	})
+})

tests/unit/mock-data.js

@@ -0,0 +1,59 @@
+const height = '100px'
+const currentUserId = 'user_1'
+const rooms = [{ _id: 1 }]
+const loadingRooms = false
+const roomsLoaded = true
+const roomId = 'room_1'
+const loadFirstRoom = true
+const messages = [{ _id: 1 }]
+const roomMessage = ''
+const messagesLoaded = true
+const roomActions = [{ title: 'A room action' }]
+const menuActions = [{ title: 'A menu action' }]
+const messageActions = [{ title: 'A message action' }]
+const showAddRoom = true
+const showSendIcon = true
+const showFiles = true
+const showAudio = true
+const showEmojis = true
+const showReactionEmojis = true
+const showNewMessagesDivider = true
+const showFooter = true
+const textMessages = { ROOMS_EMPTY: 'No rooms' }
+const textFormatting = true
+const responsiveBreakpoint = 10
+const singleRoom = false
+const theme = 'dark'
+const acceptedFiles = '*'
+const styles = { general: { color: '#0a0a0a' } }
+
+export default {
+	height,
+	currentUserId,
+	rooms,
+	loadingRooms,
+	roomsLoaded,
+	roomId,
+	loadFirstRoom,
+	messages,
+	roomMessage,
+	messagesLoaded,
+	roomActions,
+	menuActions,
+	messageActions,
+	showAddRoom,
+	showSendIcon,
+	showFiles,
+	showAudio,
+	showEmojis,
+	showReactionEmojis,
+	showNewMessagesDivider,
+	showFooter,
+	textMessages,
+	textFormatting,
+	responsiveBreakpoint,
+	singleRoom,
+	theme,
+	acceptedFiles,
+	styles
+}