@primer/components 31.0.2-rc.1e80de40 → 31.0.2-rc.95622264

package/src/_TextInputWrapper.tsx

@@ -45,6 +45,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   border-radius: ${get('radii.2')};
   outline: none;
   box-shadow: ${get('shadows.primer.shadow.inset')};
+  cursor: text;
 
   ${props => {
     if (props.hasIcon) {

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {render} from '../utils/testing'
-import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
+import {render as HTMLRender, fireEvent, act, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
@@ -29,6 +29,18 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
+// describe('axe test', () => {
+//   it('should have no axe violations', async () => {
+//     const onRemoveMock = jest.fn()
+//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
+//     const results = await axe(container)
+//     expect(results).toHaveNoViolations()
+//     cleanup()
+//   })
+// })
+
+jest.useFakeTimers()
+
 describe('TextInputWithTokens', () => {
   it('renders without tokens', () => {
     const onRemoveMock = jest.fn()
@@ -85,6 +97,13 @@ describe('TextInputWithTokens', () => {
     ).toMatchSnapshot()
   })
 
+  it('renders a truncated set of tokens', () => {
+    const onRemoveMock = jest.fn()
+    expect(
+      render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />)
+    ).toMatchSnapshot()
+  })
+
   it('focuses the previous token when keying ArrowLeft', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(
@@ -165,6 +184,119 @@ describe('TextInputWithTokens', () => {
     expect(document.activeElement?.id).toEqual(inputNode.id)
   })
 
+  it('does not focus the input when clicking a token', () => {
+    const onRemoveMock = jest.fn()
+    const {getByLabelText, getByText} = HTMLRender(
+      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />
+    )
+    const inputNode = getByLabelText('Tokens')
+    const tokenNode = getByText(mockTokens[0].text)
+
+    expect(document.activeElement).not.toEqual(inputNode.id)
+    fireEvent.click(tokenNode)
+    expect(document.activeElement?.id).not.toEqual(inputNode.id)
+  })
+
+  it('focuses the input when clicking somewhere in the component besides the tokens', () => {
+    const onRemoveMock = jest.fn()
+    const {getByLabelText, getByText} = HTMLRender(
+      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />
+    )
+    const inputNode = getByLabelText('Tokens')
+    const truncatedTokenCount = getByText('+6')
+
+    expect(document.activeElement).not.toEqual(inputNode.id)
+    fireEvent.click(truncatedTokenCount)
+    expect(document.activeElement?.id).toEqual(inputNode.id)
+  })
+
+  it('shows all tokens when the input is focused and hides them when it is blurred (when visibleTokenCount is set)', () => {
+    const onRemoveMock = jest.fn()
+    const visibleTokenCount = 2
+    const {getByLabelText, getByText} = HTMLRender(
+      <>
+        <LabelledTextInputWithTokens
+          tokens={mockTokens}
+          onTokenRemove={onRemoveMock}
+          visibleTokenCount={visibleTokenCount}
+        />
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>
+    )
+    const inputNode = getByLabelText('Tokens')
+    const focusableOutsideComponentNode = getByText('Focus me')
+    const allTokenLabels = mockTokens.map(token => token.text)
+    const truncatedTokenCountNode = getByText('+6')
+
+    act(() => {
+      jest.runAllTimers()
+      fireEvent.focus(inputNode)
+    })
+
+    setTimeout(() => {
+      for (const tokenLabel of allTokenLabels) {
+        const tokenNode = getByText(tokenLabel)
+        expect(tokenNode).toBeDefined()
+      }
+    }, 0)
+
+    act(() => {
+      jest.runAllTimers()
+      // onBlur isn't called on input unless we specifically fire the "blur" event
+      // eslint-disable-next-line github/no-blur
+      fireEvent.blur(inputNode)
+      fireEvent.focus(focusableOutsideComponentNode)
+    })
+
+    setTimeout(() => {
+      expect(truncatedTokenCountNode).toBeDefined()
+
+      for (const tokenLabel of allTokenLabels) {
+        const tokenNode = getByText(tokenLabel)
+        if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(tokenNode).toBeDefined()
+        } else {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(tokenNode).not.toBeDefined()
+        }
+      }
+    }, 0)
+
+    jest.useRealTimers()
+  })
+
+  it('does not hide tokens when blurring the input to focus within the component (when visibleTokenCount is set)', () => {
+    const onRemoveMock = jest.fn()
+    const visibleTokenCount = 2
+    const {getByLabelText, getByText} = HTMLRender(
+      <>
+        <LabelledTextInputWithTokens
+          tokens={mockTokens}
+          onTokenRemove={onRemoveMock}
+          visibleTokenCount={visibleTokenCount}
+        />
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>
+    )
+    const inputNode = getByLabelText('Tokens')
+    const firstTokenNode = getByText(mockTokens[visibleTokenCount - 1].text)
+    const allTokenLabels = mockTokens.map(token => token.text)
+    const truncatedTokenCountNode = getByText('+6')
+
+    act(() => {
+      fireEvent.focus(inputNode)
+      fireEvent.focus(firstTokenNode)
+    })
+
+    expect(truncatedTokenCountNode).toBeDefined()
+
+    for (const tokenLabel of allTokenLabels) {
+      const tokenNode = getByText(tokenLabel)
+      expect(tokenNode).toBeDefined()
+    }
+  })
+
   it('focuses the first token when keying ArrowRight in the input', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(
@@ -238,6 +370,44 @@ describe('TextInputWithTokens', () => {
     expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id)
   })
 
+  it('moves focus to the next token when removing the first token', () => {
+    jest.useFakeTimers()
+    const onRemoveMock = jest.fn()
+    const {getByText} = HTMLRender(
+      <TextInputWithTokens tokens={[...mockTokens].slice(0, 2)} onTokenRemove={onRemoveMock} />
+    )
+    const tokenNode = getByText(mockTokens[0].text)
+
+    fireEvent.focus(tokenNode)
+    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
+
+    jest.runAllTimers()
+    setTimeout(() => {
+      expect(document.activeElement?.textContent).toBe(mockTokens[1].text)
+    }, 0)
+
+    jest.useRealTimers()
+  })
+
+  it('moves focus to the input when the last token is removed', () => {
+    jest.useFakeTimers()
+    const onRemoveMock = jest.fn()
+    const {getByText, getByLabelText} = HTMLRender(
+      <LabelledTextInputWithTokens tokens={[mockTokens[0]]} onTokenRemove={onRemoveMock} />
+    )
+    const tokenNode = getByText(mockTokens[0].text)
+    const inputNode = getByLabelText('Tokens')
+
+    fireEvent.focus(tokenNode)
+    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
+
+    jest.runAllTimers()
+    setTimeout(() => {
+      expect(document.activeElement?.id).toBe(inputNode.id)
+    }, 0)
+    jest.useRealTimers()
+  })
+
   it('calls onKeyDown', () => {
     const onRemoveMock = jest.fn()
     const onKeyDownMock = jest.fn()

package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -36,6 +36,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -148,6 +149,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -295,6 +297,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -1040,6 +1043,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -1708,6 +1712,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -2376,6 +2381,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -3337,6 +3343,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 

package/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -35,6 +35,7 @@ exports[`TextInput renders 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -106,6 +107,7 @@ exports[`TextInput renders block 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   display: block;
   width: 100%;
@@ -179,6 +181,7 @@ exports[`TextInput renders consistently 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -249,6 +252,7 @@ exports[`TextInput renders large 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   padding-left: 8px;
   padding-right: 8px;
@@ -325,6 +329,7 @@ exports[`TextInput renders small 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   min-height: 28px;
   padding-left: 8px;
@@ -403,6 +408,7 @@ exports[`TextInput should render a password input 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }