feat(tabs): add test code for tab actions

Author: yangwooseong

packages/bezier-react/src/components/Tabs/Tabs.test.tsx

@@ -24,6 +24,7 @@ const CONTENT1 = 'Content one'
 const CONTENT2 = 'Content two'
 
 const ACTION1 = 'Action1'
+const ACTION2 = 'Action2'
 
 type RenderTabsProps = {
   tabsProps?: TabsProps
@@ -54,6 +55,9 @@ describe('Tabs', () => {
           <TabAction href="https://github.com/channel-io/bezier-react">
             { ACTION1 }
           </TabAction>
+          <TabAction>
+            { ACTION2 }
+          </TabAction>
         </TabActions>
       </TabList>
 
@@ -196,6 +200,32 @@ describe('Tabs', () => {
     })
   })
 
+  describe('Tab Actions', () => {
+    describe('ARIA', () => {
+      it('should have \'role="toolbar"\' attribute.', () => {
+        const { getByRole } = renderTabs()
+        expect(getByRole('toolbar', { name: 'More actions' })).toBeInTheDocument()
+      })
+    })
+
+    describe('Keyboard Navigation', () => {
+      it('can control by arrow right and left key', async () => {
+        const { getByRole } = renderTabs()
+        const tabItem1 = getByRole('link', { name: ACTION1 })
+        const tabItem2 = getByRole('button', { name: ACTION2 })
+
+        await user.click(getByRole('link', { name: ACTION1 }))
+        expect(document.activeElement).toBe(tabItem1)
+        await user.keyboard('{arrowright}')
+        expect(document.activeElement).toBe(tabItem2)
+        await user.keyboard('{arrowleft}')
+        expect(document.activeElement).toBe(tabItem1)
+        await user.keyboard('{arrowleft}')
+        expect(document.activeElement).toBe(tabItem2)
+      })
+    })
+  })
+
   describe('Tab Content', () => {
     describe('ARIA', () => {
       it('should have \'role="tabpanel"\' attribute.', () => {