Vue2 add bounce, shake, and some tests (#364)

* add bounce, shake, and some tests

* update supported node versions

* update more supported node versions

* update DEPs

* quick fix to test files

* add beat-fade animation and test

* fix test with correct animation

* remove duplicate bounce and fix test description

* fix flip animation bug and tests

* remove latest and prerelease from package.json

* update the ci.yml file for test.latest

* change dev docs for release of 2x

* pr review fixes

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "stage-3"]
+  "presets": ["@babel/preset-env"]
 }

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        node-version: [14.x, 16.x, 18.x]
 
     steps:
     - uses: actions/checkout@v1
@@ -21,8 +21,7 @@ jobs:
       run: |
         npm install
         npm run build
-        npm run test.latest
-        npm run test.next.proregistry
+        npm run test
       env:
         CI: true
         FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 10.16.2
+nodejs 16.14.0
 python 3.7.5

DEVELOPMENT.md

@@ -16,8 +16,8 @@ test        | Execute unit tests
 1. Update `package.json` and change `version`
 1. Update `README.md` and `package.json`; adding any contributors
 1. Update the `CHANGELOG.md`
-1. `npm publish`
-1. `npm publish --registry https://npm.fontawesome.com`
+1. `npm publish --tag latest-2`
+1. `npm publish --tag latest-2 --registry https://npm.fontawesome.com`
 1. `git add .`
 1. `git commit -a -m 'Release VERSION'`
 1. `git push`

package.json

@@ -3,6 +3,9 @@
   "description": "Official Vue component for Font Awesome 5",
   "version": "2.0.6",
   "main": "index.js",
+  "jest": {
+    "verbose": true
+  },
   "module": "index.es.js",
   "jsnext:main": "index.es.js",
   "types": "index.d.ts",
@@ -26,10 +29,9 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dist": "cross-env NODE_ENV=production npm run build",
-    "test": "npm run test.latest && npm run test.next",
-    "test.latest": "npm --no-save install @fortawesome/fontawesome-svg-core@latest @fortawesome/free-solid-svg-icons@latest && jest --silent",
-    "test.next": "npm --no-save install @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
-    "test.next.proregistry": "npm --userconfig .npmrc.proregistry --registry https://npm.fontawesome.com install --no-save @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
+    "test": "npm run test.5 && npm run test.6",
+    "test.5": "npm --no-save install @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x && jest --silent",
+    "test.6": "npm --no-save install @fortawesome/fontawesome-svg-core@6.x @fortawesome/free-solid-svg-icons@6.x && jest --silent",
     "prepack": "npm run dist"
   },
   "lint-staged": {
@@ -43,27 +45,31 @@
     "vue": "~2"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "@fortawesome/fontawesome-svg-core": "^6",
     "@fortawesome/free-solid-svg-icons": "^6",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "concurrently": "^4.1.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^28.0.0",
+    "concurrently": "^7.1.0",
     "cross-env": "^5.1.1",
     "humps": "^2.0.1",
     "husky": "^1.1.2",
-    "jest": "^23.6.0",
-    "lint-staged": "^8.1.0",
+    "jest": "^28.0.0",
+    "jest-environment-jsdom": "^28.0.1",
+    "lint-staged": "^12.4.1",
     "markdown-toc": "^1.2.0",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup": "^2.70.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "vue": "^2.4.4"
   },
-  "dependencies": {},
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

rollup.config.js

@@ -1,6 +1,6 @@
-import resolve from 'rollup-plugin-node-resolve'
-import commonJs from 'rollup-plugin-commonjs'
-import babel from 'rollup-plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import commonJs from '@rollup/plugin-commonjs'
+import babel from '@rollup/plugin-babel'
 
 const name = 'vue-fontawesome'
 const globals = {
@@ -38,15 +38,11 @@ export default {
     babel({
       babelrc: false,
       presets: [
-        ['env', {
+        ['@babel/preset-env', {
           debug: true,
           targets: {"browsers": ["> 1%", "last 2 versions", "ie > 9"]},
           modules: false
-        }],
-        'stage-3'
-      ],
-      plugins: [
-        'external-helpers'
+        }]
       ],
       exclude: 'node_modules/**'
     })

src/components/FontAwesomeIcon.js

@@ -58,9 +58,9 @@ export default {
       default: false
     },
     flip: {
-      type: String,
-      default: null,
-      validator: (value) => ['horizontal', 'vertical', 'both'].indexOf(value) > -1
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1
     },
     icon: {
       type: [Object, Array, String],
@@ -124,6 +124,18 @@ export default {
     inverse: {
       type: Boolean,
       default: false
+    },
+    bounce: {
+      type: Boolean,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      default: false
+    },
+    beatFade: {
+      type: Boolean,
+      default: false
     }
   },
 

src/components/__tests__/FontAwesomeIcon.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import Vue from 'vue/dist/vue'
 import FontAwesomeIcon from '../FontAwesomeIcon'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -37,7 +41,7 @@ if(coreHasFeature(ICON_ALIASES)) {
     const vm = mountFromProps({ icon: ['fas', 'close'] })
 
     expect(vm.$el.tagName).toBe('svg')
-    expect(vm.$el.classList.contains('fa-close')).toBeTruthy()
+    expect(vm.$el.classList.contains('fa-xmark')).toBeTruthy()
   })
 }
 
@@ -87,7 +91,7 @@ test('using string format', () => {
   expect(vm.$el.classList.contains('fa-coffee')).toBeTruthy()
 })
 
-test.only('using imported object from svg icons package', () => {
+test('using imported object from svg icons package', () => {
   const vm = mountFromProps({ icon: faUser })
 
   expect(vm.$el.tagName).toBe('svg')
@@ -171,23 +175,39 @@ test('using fixedWidth', () => {
 })
 
 describe('using flip', () => {
+  test('flip', () => {
+    const vm = mountFromProps({ icon: faCoffee, flip: true })
+
+    expect(vm.$el.classList.contains('fa-flip')).toBeTruthy()
+    expect(vm.$el.classList.contains('fa-flip-vertical')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip-horizontal')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip-both')).toBeFalsy()
+  })
+
   test('horizontal', () => {
     const vm = mountFromProps({ icon: faCoffee, flip: "horizontal" })
 
     expect(vm.$el.classList.contains('fa-flip-horizontal')).toBeTruthy()
+    expect(vm.$el.classList.contains('fa-flip-vertical')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip-both')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip')).toBeFalsy()
   })
 
   test('vertical', () => {
     const vm = mountFromProps({ icon: faCoffee, flip: "vertical" })
 
     expect(vm.$el.classList.contains('fa-flip-vertical')).toBeTruthy()
+    expect(vm.$el.classList.contains('fa-flip-horizontal')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip-both')).toBeFalsy()
+    expect(vm.$el.classList.contains('fa-flip')).toBeFalsy()
   })
 
   test('both', () => {
     const vm = mountFromProps({ icon: faCoffee, flip: "both" })
 
     expect(vm.$el.classList.contains('fa-flip-horizontal')).toBeTruthy()
     expect(vm.$el.classList.contains('fa-flip-vertical')).toBeTruthy()
+    expect(vm.$el.classList.contains('fa-flip')).toBeFalsy()
   })
 })
 
@@ -335,3 +355,27 @@ describe('title', () => {
       .toBe(0)
   })
 })
+
+describe('using bounce', () => {
+  test('bounce', () => {
+    const vm = mountFromProps({ icon: faCoffee, bounce: true })
+
+    expect(vm.$el.classList.contains('fa-bounce')).toBeTruthy()
+  })
+})
+
+describe('using shake', () => {
+  test('shake', () => {
+    const vm = mountFromProps({ icon: faCoffee, shake: true })
+
+    expect(vm.$el.classList.contains('fa-shake')).toBeTruthy()
+  })
+})
+
+describe('using beat-fade', () => {
+  test('beat-fade', () => {
+    const vm = mountFromProps({ icon: faCoffee, beatFade: true })
+
+    expect(vm.$el.classList.contains('fa-beat-fade')).toBeTruthy()
+  })
+})

src/components/__tests__/FontAwesomeLayers.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import Vue from 'vue/dist/vue'
 import FontAwesomeLayers from '../FontAwesomeLayers'
 import { library } from '@fortawesome/fontawesome-svg-core'

src/components/__tests__/FontAwesomeLayersText.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import Vue from 'vue/dist/vue'
 import FontAwesomeLayersText from '../FontAwesomeLayersText'
 import { compileAndMount } from '../__fixtures__/helpers'

src/utils.js

@@ -15,12 +15,16 @@ export function classList (props) {
     'fa-border': props.border,
     'fa-li': props.listItem,
     'fa-inverse': props.inverse,
+    'fa-flip': props.flip === true,
     'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
     'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
     [`fa-${props.size}`]: props.size !== null,
     [`fa-rotate-${props.rotation}`]: props.rotation !== null,
     [`fa-pull-${props.pull}`]: props.pull !== null,
-    'fa-swap-opacity': props.swapOpacity
+    'fa-swap-opacity': props.swapOpacity,
+    'fa-bounce': props.bounce,
+    'fa-shake': props.shake,
+    'fa-beat-fade': props.beatFade
   }
 
   return Object.keys(classes)