clean up + update test

missive · Jul 21, 2020 · 81d109a · 81d109a
1 parent 7eae6f1
commit 81d109a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/src/components/__tests__/skins-dot.js b/src/components/__tests__/skins-dot.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow, configure } from 'enzyme'
+import { mount, configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import SkinsDot from '../skins-dot'
 
@@ -21,7 +21,7 @@ test('click dot to expand the menu', () => {
     },
   }
 
-  const skins = shallow(<SkinsDot skin={1} onChange={onChange} i18n={i18n} />)
+  const skins = mount(<SkinsDot skin={1} onChange={onChange} i18n={i18n} />)
 
   // component should be un-expanded by default
   expect(skins.find('[aria-haspopup]').prop('aria-label')).toEqual(

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -634,12 +634,9 @@ class NimblePicker extends React.PureComponent {
         const activeCategoryIndex = this.categories.findIndex(
           ({ name }) => name === activeCategory,
         )
-        const { container } = this.categoryRefs[
-          `category-${activeCategoryIndex}`
-        ]
-
-        const firstEmoji = container.querySelector('button')
-        firstEmoji.focus()
+        const emojiEl = this.getEmojiElement(activeCategoryIndex, 0)
+        emojiEl.focus()
+        this.getEmojiToPreview(activeCategoryIndex, 0)
         handled = true
         break
 

diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
@@ -109,10 +109,12 @@ export default class SkinsDot extends Skins {
               if (opened) {
                 this.handleClick(e)
                 this.onClose(e)
+              } else {
+                this.handleMenuClick(e)
               }
             }}
             onKeyDown={(e) => this.handleSkinKeyDown(e, skinTone)}
-            tabIndex={opened ? '0' : '-1'}
+            tabIndex={selected ? '0' : '-1'}
             role="button"
             {...(selected
               ? {
@@ -138,7 +140,6 @@ export default class SkinsDot extends Skins {
         <div
           {...(opened ? { role: 'menubar' } : {})}
           tabIndex={'0'}
-          onClick={this.handleMenuClick}
           onKeyDown={this.handleKeyDown}
           ref={this.setSkinTonesRef}
         >

diff --git a/stories/index.js b/stories/index.js
@@ -69,17 +69,13 @@ storiesOf('Picker', module)
     />
   ))
 
-  .add('Custom “Not found” component', () => {
-    const ref = useRef(null)
-    return (
-      <Picker
-        ref={ref}
-        notFound={() => (
-          <img src="https://github.githubassets.com/images/icons/emoji/octocat.png" />
-        )}
-      />
-    )
-  })
+  .add('Custom “Not found” component', () => (
+    <Picker
+      notFound={() => (
+        <img src="https://github.githubassets.com/images/icons/emoji/octocat.png" />
+      )}
+    />
+  ))
 
   .add('Custom categories', () => (
     <Picker custom={CUSTOM_EMOJIS_WITH_CATEGORIES} />