test: add tests for attributes/props (#171)

src/picker/components/Picker/Picker.js

@@ -11,6 +11,7 @@ import { applySkinTone } from '../../utils/applySkinTone'
 import { halt } from '../../utils/halt'
 import { incrementOrDecrement } from '../../utils/incrementOrDecrement'
 import {
+  DEFAULT_CATEGORY_SORTING,
   DEFAULT_NUM_COLUMNS,
   DEFAULT_SKIN_TONE_EMOJI, FONT_FAMILY,
   MOST_COMMONLY_USED_EMOJI,
@@ -33,7 +34,7 @@ let skinToneEmoji = DEFAULT_SKIN_TONE_EMOJI
 let i18n = enI18n
 let database = null
 let customEmoji = null
-let customCategorySorting = (a, b) => a < b ? -1 : a > b ? 1 : 0
+let customCategorySorting = DEFAULT_CATEGORY_SORTING
 
 // private
 let initialLoad = true

src/picker/constants.js

@@ -25,3 +25,6 @@ export const MOST_COMMONLY_USED_EMOJI = [
 
 export const FONT_FAMILY = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",' +
   '"Twemoji Mozilla","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif'
+
+/* istanbul ignore next */
+export const DEFAULT_CATEGORY_SORTING = (a, b) => a < b ? -1 : a > b ? 1 : 0

test/spec/picker/attributes.test.js

@@ -1,6 +1,9 @@
 import { basicAfterEach, basicBeforeEach, FR_EMOJI, ALL_EMOJI, mockFrenchDataSource, tick } from '../shared'
 import Picker from '../../../src/picker/PickerElement.js'
 import { getByRole } from '@testing-library/dom'
+import { DEFAULT_DATA_SOURCE, DEFAULT_LOCALE } from '../../../src/database/constants'
+import enI18n from '../../../src/picker/i18n/en.js'
+import { DEFAULT_CATEGORY_SORTING, DEFAULT_SKIN_TONE_EMOJI } from '../../../src/picker/constants'
 
 describe('attributes tests', () => {
   beforeEach(async () => {
@@ -50,4 +53,115 @@ describe('attributes tests', () => {
     document.body.removeChild(picker)
     await tick(20)
   })
+
+  test('change property while disconnected from DOM', async () => {
+    const picker = new Picker()
+    picker.setAttribute('data-source', ALL_EMOJI)
+    document.body.appendChild(picker)
+    await tick(20)
+    document.body.removeChild(picker)
+    await tick(20)
+    picker.skinToneEmoji = '✌'
+    expect(picker.skinToneEmoji).toEqual('✌')
+    document.body.appendChild(picker)
+    await tick(20)
+
+    expect(getByRole(picker.shadowRoot, 'button', { name: /Choose a skin tone/ }).innerHTML)
+      .toContain('✌')
+    expect(picker.skinToneEmoji).toEqual('✌')
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
+
+  test('change property while disconnected from DOM', async () => {
+    const picker = new Picker()
+    picker.setAttribute('data-source', ALL_EMOJI)
+    document.body.appendChild(picker)
+    await tick(20)
+    document.body.removeChild(picker)
+    await tick(20)
+    picker.setAttribute('skin-tone-emoji', '✌')
+    expect(picker.skinToneEmoji).toEqual('✌')
+    document.body.appendChild(picker)
+    await tick(20)
+
+    expect(getByRole(picker.shadowRoot, 'button', { name: /Choose a skin tone/ }).innerHTML)
+      .toContain('✌')
+    expect(picker.skinToneEmoji).toEqual('✌')
+    expect(picker.getAttribute('skin-tone-emoji')).toEqual('✌')
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
+
+  function testDefaultProps (picker) {
+    expect(picker.customCategorySorting).toEqual(DEFAULT_CATEGORY_SORTING)
+    expect(picker.customEmoji).toEqual(null)
+    expect(picker.dataSource).toEqual(DEFAULT_DATA_SOURCE)
+    expect(picker.i18n).toEqual(enI18n)
+    expect(picker.locale).toEqual(DEFAULT_LOCALE)
+    expect(picker.skinToneEmoji).toEqual(DEFAULT_SKIN_TONE_EMOJI)
+  }
+
+  function expectTruthyDatabase (picker) {
+    expect(typeof picker.database).toEqual('object')
+    expect(picker.database).toBeTruthy()
+  }
+
+  test('default properties - connected', async () => {
+    const picker = new Picker()
+    document.body.appendChild(picker)
+    await tick(20)
+
+    testDefaultProps(picker)
+    expectTruthyDatabase(picker)
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
+
+  test('default properties - disconnected', async () => {
+    const picker = new Picker()
+    document.body.appendChild(picker)
+    await tick(20)
+
+    document.body.removeChild(picker)
+    await tick(20)
+
+    testDefaultProps(picker)
+    expectTruthyDatabase(picker)
+  })
+
+  test('default properties - never connected', async () => {
+    const picker = new Picker()
+
+    testDefaultProps(picker)
+    expectTruthyDatabase(picker)
+
+    document.body.appendChild(picker)
+    await tick(20)
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
+
+  test('attributes present on element at creation time', async () => {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    div.innerHTML = `<emoji-picker locale="fr" data-source="${ALL_EMOJI}" skin-tone-emoji="✌"></emoji-picker>`
+    const picker = div.querySelector('emoji-picker')
+    await tick(20)
+    expect(picker.locale).toEqual('fr')
+    expect(picker.dataSource).toEqual(ALL_EMOJI)
+    expect(picker.skinToneEmoji).toEqual('✌')
+    expect(getByRole(picker.shadowRoot, 'button', { name: /Choose a skin tone/ }).innerHTML)
+      .toContain('✌')
+
+    expect(fetch).toHaveBeenCalledTimes(1)
+    expect(fetch).toHaveBeenLastCalledWith(ALL_EMOJI, undefined)
+
+    document.body.removeChild(div)
+    await tick(20)
+  })
 })

test/spec/picker/custom.test.js

@@ -1,10 +1,11 @@
-import { ALL_EMOJI, basicBeforeEach, tick } from '../shared'
+import { ALL_EMOJI, basicAfterEach, basicBeforeEach, tick } from '../shared'
 import { groups } from '../../../src/picker/groups'
 import Picker from '../../../src/picker/PickerElement'
 import { getAllByRole, getByRole, waitFor } from '@testing-library/dom'
 
 describe('Custom emojis tests', () => {
   beforeEach(basicBeforeEach)
+  afterEach(basicAfterEach)
 
   test('Setting custom emoji shows the proper first page', async () => {
     const picker = new Picker({