Merge pull request #144 from serebrov/update-dependencies-2021-11-21

Update dependencies 2021-11-21

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8
+FROM node:14
 
 WORKDIR /src
 

package.json

@@ -20,41 +20,41 @@
   },
   "homepage": "https://github.com/serebrov/emoji-mart-vue",
   "dependencies": {
-    "@babel/polyfill": "7.2.5",
-    "@babel/runtime": "7.3.4",
-    "vue-virtual-scroller": "^1.0.0-rc.2"
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.16.3",
+    "vue-virtual-scroller": "^1.0.10"
   },
   "peerDependencies": {
     "vue": ">2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.3.4",
-    "@babel/plugin-transform-runtime": "7.3.4",
-    "@babel/preset-env": "7.3.4",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
+    "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "24.1.0",
-    "babel-loader": "8.0.5",
-    "css-loader": "^0.28.0",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
     "emoji-datasource": "6.0.1",
     "emojilib": "^3.0.1",
     "inflection": "1.10.0",
-    "jest": "^24.1.0",
+    "jest": "^27.3.1",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
-    "postcss-loader": "^3.0.0",
-    "prettier": "1.16.4",
+    "postcss-loader": "^6.2.0",
+    "prettier": "^2.4.1",
     "quasar-framework": "^0.17.20",
-    "size-limit": "^0.11.4",
-    "url-loader": "^0.5.8",
-    "vue": "^2.5.18",
-    "vue-jest": "^3.0.3",
-    "vue-loader": "^15.6.4",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.5.18",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1"
+    "size-limit": "^7.0.3",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.14",
+    "vue-jest": "^3.0.7",
+    "vue-loader": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.64.2",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   },
   "scripts": {
     "clean": "rm -rf dist/",
@@ -104,7 +104,8 @@
       "!src/vendor/**",
       "!src/polyfills/**",
       "!src/webpack.config.js"
-    ]
+    ],
+    "testEnvironment": "jsdom"
   },
   "size-limit": [
     {

spec/emoji-index-facebook-spec.js

@@ -2,7 +2,7 @@ import { EmojiIndex, EmojiData, EmojiView } from '../src/utils/emoji-data'
 import data from '../data/facebook.json'
 
 describe('#EmojiIndex', () => {
-  describe('search', function() {
+  describe('search', function () {
     it('should find pineapple emoji by id', () => {
       const emojiIndex = new EmojiIndex(data)
       let emojis = emojiIndex.search('pineapple')

spec/emoji-index-spec.js

@@ -2,7 +2,7 @@ import { EmojiIndex, EmojiData, EmojiView } from '../src/utils/emoji-data'
 import data from '../data/all.json'
 
 describe('#EmojiIndex', () => {
-  describe('search', function() {
+  describe('search', function () {
     it('should find pineapple emoji by id', () => {
       const emojiIndex = new EmojiIndex(data)
       let emojis = emojiIndex.search('pineapple')
@@ -68,7 +68,7 @@ describe('#EmojiIndex', () => {
     })
   })
 
-  describe('categories', function() {
+  describe('categories', function () {
     it('should return categories', () => {
       const emojiIndex = new EmojiIndex(data)
       const categories = emojiIndex.categories()

spec/emoji-spec.js

@@ -14,7 +14,6 @@ describe('Emoji', () => {
   })
 
   it('works', () => {
-    expect(emoji.isVueInstance()).toBeTruthy()
     expect(emoji.html()).toContain('emoji-set-apple emoji-type-image')
     expect(emoji.vm.emojiObject.id).toBe('point_up')
   })
@@ -23,8 +22,8 @@ describe('Emoji', () => {
     expect(emoji.element).toMatchSnapshot()
   })
 
-  test('renders correctly native emoji', () => {
-    emoji.setProps({ native: true })
+  test('renders correctly native emoji', async () => {
+    await emoji.setProps({ native: true })
     expect(emoji.element).toMatchSnapshot()
   })
 
@@ -107,13 +106,13 @@ describe('Emoji title', () => {
     expect(emoji.vm.title).toBe(null)
   })
 
-  it('has short name as a title if tooltip property is set to true', () => {
-    emoji.setProps({ tooltip: true })
+  it('has short name as a title if tooltip property is set to true', async () => {
+    await emoji.setProps({ tooltip: true })
     expect(emoji.vm.title).toBe('point_up')
   })
 
-  it('does not have title if tooltop property is set to false', () => {
-    emoji.setProps({ tooltip: false })
+  it('does not have title if tooltop property is set to false', async () => {
+    await emoji.setProps({ tooltip: false })
     expect(emoji.vm.title).toBe(null)
   })
 })
@@ -134,8 +133,8 @@ describe('Emoji size', () => {
     })
   })
 
-  it('size can be set', () => {
-    emoji.setProps({ size: 32 })
+  it('size can be set', async () => {
+    await emoji.setProps({ size: 32 })
     expect(emoji.vm.size).toBe(32)
     expect(emoji.vm.view.cssStyle).toEqual({
       backgroundPosition: '94.74% 12.28%',

spec/frequently-spec.js

@@ -13,7 +13,7 @@ describe('Picker frequnt category', () => {
   })
 
   it('Has default emojis initially', () => {
-    let categories = picker.findAll(Category)
+    let categories = picker.findAllComponents(Category)
     expect(categories.at(0).vm.name).toBe('Recent')
     expect(categories.at(0).vm.emojis.length).toBe(16)
 
@@ -92,7 +92,7 @@ describe('Picker frequnt category', () => {
     })
     // Wait for picker to be rendered.
     picker.vm.$nextTick(() => {
-      let categories = newPicker.findAll(Category)
+      let categories = newPicker.findAllComponents(Category)
       let recent = categories.at(0).vm
 
       expect(recent.emojis[0].id).toBe('nerd_face')

spec/keyboard-spec.js

@@ -19,7 +19,7 @@ describe('Picker keyboard control', () => {
   it('Arrow down selects emoji below', () => {
     expect(picker.vm.view.previewEmoji).toEqual(null)
 
-    const search = picker.find(Search)
+    const search = picker.findComponent(Search)
     const input = search.find('input')
     input.trigger('click')
 
@@ -39,7 +39,7 @@ describe('Picker keyboard control', () => {
   it('Arrow down selects emoji above', () => {
     expect(picker.vm.view.previewEmoji).toEqual(null)
 
-    const search = picker.find(Search)
+    const search = picker.findComponent(Search)
     const input = search.find('input')
 
     input.trigger('click')
@@ -62,7 +62,7 @@ describe('Picker keyboard control', () => {
   it('Arrow right selects emoji on the right', () => {
     expect(picker.vm.view.previewEmoji).toEqual(null)
 
-    const search = picker.find(Search)
+    const search = picker.findComponent(Search)
     const input = search.find('input')
     input.trigger('click')
 
@@ -82,7 +82,7 @@ describe('Picker keyboard control', () => {
   it('Arrow left selects emoji on the left', () => {
     expect(picker.vm.view.previewEmoji).toEqual(null)
 
-    const search = picker.find(Search)
+    const search = picker.findComponent(Search)
     const input = search.find('input')
 
     input.trigger('click')
@@ -105,7 +105,7 @@ describe('Picker keyboard control', () => {
   it('Enter selects the emoji', () => {
     expect(picker.vm.view.previewEmoji).toEqual(null)
 
-    const search = picker.find(Search)
+    const search = picker.findComponent(Search)
     const input = search.find('input')
     input.trigger('click')
 

spec/picker-spec.js

@@ -20,7 +20,6 @@ describe('Picker', () => {
   })
 
   it('works', () => {
-    expect(picker.isVueInstance()).toBeTruthy()
     expect(picker.html()).toContain('woman-gesturing-ok')
   })
 
@@ -42,7 +41,7 @@ describe('Picker', () => {
   })
 
   it('renders 10 categories', () => {
-    let categories = picker.findAll(Category)
+    let categories = picker.findAllComponents(Category)
     expect(categories.length).toBe(10)
     // // Hidden category with search results
     // expect(categories.at(0).vm.name).toBe('Search')
@@ -59,17 +58,17 @@ describe('Picker', () => {
   })
 
   it('no error when clicking anchor when search is active', (done) => {
-    let search = picker.find(Search)
+    let search = picker.findComponent(Search)
     let input = search.find('input')
     input.element.value = '+1'
     input.trigger('input')
 
     picker.vm.$nextTick(() => {
-      let categories = picker.findAll(Category)
+      let categories = picker.findAllComponents(Category)
       let searchCategory = categories.at(0)
       expect(searchCategory.vm.id).toBe('search')
 
-      let anchors = picker.find(Anchors)
+      let anchors = picker.findComponent(Anchors)
       let anchorsCategories = anchors.findAll('.emoji-mart-anchor')
       let symbols = anchorsCategories.at(8)
       expect(symbols.element.attributes['data-title'].value).toBe('Symbols')
@@ -104,7 +103,7 @@ describe('categories', () => {
   })
 
   it('will not show some based upon our filter', () => {
-    let categories = picker.findAll(Category)
+    let categories = picker.findAllComponents(Category)
     expect(categories.length).toBe(2)
     // Visible cateogires - Flags and Activity
     expect(categories.at(0).vm.name).toBe('Activities')
@@ -151,7 +150,7 @@ describe('categories include allows to select and order categories', () => {
 
   // Note: the error is printed into console.
   it('will not throw an error if default emoji is not available', () => {
-    let categories = picker.findAll(Category)
+    let categories = picker.findAllComponents(Category)
     expect(categories.length).toBe(3)
     expect(categories.at(0).vm.name).toBe('Recent')
     expect(categories.at(1).vm.name).toBe('Animals & Nature')
@@ -178,7 +177,7 @@ describe('anchors', () => {
   })
 
   it('contains all categories', () => {
-    let anchors = picker.find(Anchors)
+    let anchors = picker.findComponent(Anchors)
     let categories = anchors.findAll('.emoji-mart-anchor')
     let names = []
     for (let idx = 0; idx < categories.length; idx++) {
@@ -200,7 +199,7 @@ describe('anchors', () => {
   })
 
   it('can be clicked to scroll to the category', async () => {
-    let anchors = picker.find(Anchors)
+    let anchors = picker.findComponent(Anchors)
 
     let anchorsCategories = anchors.findAll('.emoji-mart-anchor')
     let symbols = anchorsCategories.at(8)
@@ -275,22 +274,31 @@ describe('emjois skin', () => {
   })
 })
 
-describe('emjoi tooltip', () => {
+describe('emjoi tooltip is true', () => {
   let index = new EmojiIndex(data)
   const picker = mount(Picker, {
     propsData: {
       data: index,
+      emojiTooltip: true,
     },
   })
 
   it('emoji title is set to emoji id when emojiTooltip is true', () => {
-    picker.setProps({ emojiTooltip: true })
     let emoji = picker.find('[data-title="+1"]')
     expect(emoji.element.title).toBe('+1')
   })
+})
+
+describe('emjoi tooltip is false', () => {
+  let index = new EmojiIndex(data)
+  const picker = mount(Picker, {
+    propsData: {
+      data: index,
+      emojiTooltip: false,
+    },
+  })
 
   it('emoji title is not set when emojiTooltip is false', () => {
-    picker.setProps({ emojiTooltip: false })
     let emoji = picker.find('[data-title="+1"]')
     expect(emoji.element.title).toBe('')
   })
@@ -306,15 +314,15 @@ describe('emjoi preview', () => {
   })
 
   it('preview shows point_up when no emoji is hovered', () => {
-    let emoji = picker.find(Preview).find(Emoji)
+    let emoji = picker.findComponent(Preview).findComponent(Emoji)
     expect(emoji.vm.emojiObject.id).toBe('point_up')
   })
 
-  it('preview shows the hovered emoji', () => {
+  it('preview shows the hovered emoji', async () => {
     let emoji = picker.find('[data-title="+1"]')
-    emoji.trigger('mouseenter')
+    await emoji.trigger('mouseenter')
 
-    let previewEmoji = picker.find(Preview).find(Emoji)
+    let previewEmoji = picker.findComponent(Preview).findComponent(Emoji)
     expect(previewEmoji.vm.emojiObject.id).toBe('+1')
   })
 })
@@ -337,8 +345,8 @@ describe('emjoiSize', () => {
     )
   })
 
-  it('emojiSize can be changed', () => {
-    picker.setProps({ emojiSize: 20 })
+  it('emojiSize can be changed', async () => {
+    await picker.setProps({ emojiSize: 20 })
     let emoji = picker.find('[data-title="+1"]')
     // The inner span with applied inline style.
     let emojiSpan = emoji.element.childNodes[0]
@@ -347,8 +355,8 @@ describe('emjoiSize', () => {
     )
   })
 
-  it('native emoji font size is 19.2px by default', () => {
-    picker.setProps({ emojiSize: 24, native: true })
+  it('native emoji font size is 19.2px by default', async () => {
+    await picker.setProps({ emojiSize: 24, native: true })
     let emoji = picker.find('[data-title="+1"]')
     // The inner span with applied inline style.
     let emojiSpan = emoji.element.childNodes[0]
@@ -358,8 +366,8 @@ describe('emjoiSize', () => {
     )
   })
 
-  it('native emoji font size is smaller when emojiSize is smaller', () => {
-    picker.setProps({ emojiSize: 20, native: true })
+  it('native emoji font size is smaller when emojiSize is smaller', async () => {
+    await picker.setProps({ emojiSize: 20, native: true })
     let emoji = picker.find('[data-title="+1"]')
     // The inner span with applied inline style.
     let emojiSpan = emoji.element.childNodes[0]