🎉 ✅ setup tests and add some

babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          "@babel/env",
+          {
+            targets: {
+              node: 11
+            }
+          }
+        ]
+      ]
+    }
+  }
+};

package.json

@@ -10,7 +10,8 @@
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
+    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
+    "test": "jest"
   },
   "dependencies": {
     "cross-env": "^5.2.0",
@@ -20,19 +21,27 @@
     "vue-i18n": "^8.11.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/preset-env": "^7.6.3",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "autoprefixer": "^8.6.4",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.3.0",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.2.3",
+    "jest": "^24.9.0",
+    "jest-serializer-vue": "^2.0.2",
     "node-sass": "^4.12.0",
     "nodemon": "^1.18.9",
     "prettier": "^1.18.2",
     "pug": "^2.0.3",
     "pug-plain-loader": "^1.0.0",
     "sass-loader": "^7.1.0",
-    "tailwindcss": "^0.7.0"
+    "tailwindcss": "^0.7.0",
+    "vue-jest": "^3.0.5"
   }
 }

test/mockCategories.json

@@ -0,0 +1,50 @@
+[
+  {
+    "title": "CSS",
+    "slug": "/css",
+    "resources": [
+      {
+        "title": "CSS Grid Generator",
+        "desc": "Visually create your css grid and export the code.",
+        "url": "https://cssgrid-generator.netlify.com/",
+        "tags": ["generator", "grid", "layout", "visual tool"]
+      },
+      {
+        "title": "Keyframes Editor",
+        "desc": "An insanely simple way to create CSS animations",
+        "url": "https://keyframes.app/editor/",
+        "tags": ["generator", "animation", "visual tool"]
+      },
+      {
+        "title": "Flexbox Froggy",
+        "desc": "A game to learn Flexbox",
+        "url": "https://flexboxfroggy.com",
+        "tags": ["educational", "beginner"]
+      }
+    ]
+  },
+  {
+    "title": "Design",
+    "slug": "/design",
+    "resources": [
+      {
+        "title": "UX/UI Designer Roadmap 2017",
+        "desc": "Roadmap to becoming a UI/UX Designer in 2017",
+        "url": "https://github.com/togiberlin/ui-ux-designer-roadmap",
+        "tags": ["career", "ui", "ux"]
+      },
+      {
+        "title": "Undraw",
+        "desc": "Free vector illustrations for your website.",
+        "url": "https://undraw.co",
+        "tags": ["illustration", "svg", "ui"]
+      },
+      {
+        "title": "Practical UI tips",
+        "desc": "7 Tips to boost your UI design.",
+        "url": "https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886",
+        "tags": ["ui", "tips", "tricks"]
+      }
+    ]
+  }
+]

test/pure.test.js

@@ -0,0 +1,29 @@
+import * as P from '../utils/pure.js'
+
+test('includesElOf 1', () => {
+  expect(P.includesElOf([1, 2])([2])).toBeTruthy
+})
+
+test('includesElOf 2', () => {
+  expect(P.includesElOf([1, 2])([3])).toBeFalsy
+})
+
+test('includesElOf 3', () => {
+  expect(P.includesElOf(['a', 'b'])(['a'])).toBeTruthy
+})
+
+test('includesElOf 4', () => {
+  expect(P.includesElOf(['aa', 'b'])(['a'])).toBeFalsy
+})
+
+test('partiallyIncludesElOf 1', () => {
+  expect(P.partiallyIncludesElOf(['a', 'b'], ['a'])).toBeTruthy
+})
+
+test('partiallyIncludesElOf 2', () => {
+  expect(P.partiallyIncludesElOf(['aa', 'b'], ['a'])).toBeTruthy
+})
+
+test('partiallyIncludesElOf 3', () => {
+  expect(P.partiallyIncludesElOf(['aa', 'b'], ['c'])).toBeFalsy
+})

utils/pure.js

@@ -2,6 +2,12 @@
 import * as R from 'ramda'
 
 /// Types
+const Category = {
+  title: String,
+  slug: String,
+  resources: [Resource],
+}
+
 const Resource = {
   title: String,
   cleanTitle: String,
@@ -11,12 +17,6 @@ const Resource = {
   tags: [String],
 }
 
-const Category = {
-  title: String,
-  slug: String,
-  resources: [Resource],
-}
-
 /// Functions
 // isNotEmpty [a] -> Bool
 export const isNotEmpty = R.compose(R.not, R.isEmpty)
@@ -39,17 +39,10 @@ export const tagsNotEmpty = R.compose(isNotEmpty, R.prop('tags'))
 export const cleanString = R.compose(R.toLower, R.trim)
 
 // true if list2 has element that appears in list1 else false
-// includesElOf([1, 2])([2]) -> true
-// includesElOf([1, 2], [3]) -> false
-// includesElOf(['a', 'b'], ['a']) -> true
-// includesElOf(['aa', 'b'], ['a']) -> false
 // includesElOf :: [a] -> [a] -> Bool
 export const includesElOf = R.curry((list1, list2) => R.any(el => R.includes(el, list2), list1))
 
 // Similar to includesElOf, but partially included strings are also allowed
-// partiallyIncludesElOf(['a', 'b'])(['a']) -> true
-// partiallyIncludesElOf(['aa', 'b'], ['a']) -> true
-// partiallyIncludesElOf(['aa', 'b'], ['c']) -> false
 // partiallyIncludesElOf :: [String] -> [String] -> Bool
 export const partiallyIncludesElOf = R.curry((list1, list2) => 
   R.any(el2 =>