@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/TokenInput/tests/default/deleting.test.js

@@ -1,101 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render, userEvent} from '../../../utils/react-testing-library';
-import TokenInput from '../../';
-
-describe('When deleting...', () => {
-  describe('...in an empty input', () => {
-    it('should do nothing', () => {
-      const mockCallback = jest.fn(() => {});
-
-      const {getByPlaceholderText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          placeholder="Enter text"
-          onRemoveToken={mockCallback}
-        />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-      userEvent.type(input, '{backspace}');
-
-      expect(mockCallback).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  describe('...in an input with text', () => {
-    it('should delete the last character of text', () => {
-      const {getByPlaceholderText} = render(
-        <TokenInput id="0" name="token-input" placeholder="Enter text" />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-
-      userEvent.type(input, 'Hello{space}World');
-      userEvent.type(input, '{backspace}');
-
-      expect(input).toHaveValue('Hello Worl');
-    });
-  });
-
-  describe('...in an input with at least one token and no text', () => {
-    it('should delete the last token', () => {
-      const mockCallback = jest.fn(() => {});
-      const {getByPlaceholderText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          tokens={[
-            {id: '0', value: 'you'},
-            {id: '1', value: 'are'},
-            {id: '2', value: 'beautiful'},
-          ]}
-          placeholder="Enter text"
-          onRemoveToken={mockCallback}
-        />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-
-      userEvent.type(input, '{backspace}');
-      expect(mockCallback).toHaveBeenCalledTimes(1);
-
-      const result = mockCallback.mock.calls;
-      expect(result[0][0]).toBe('2');
-    });
-  });
-
-  describe('...in an input with at least one token and text', () => {
-    it('should delete all the text and then the token', () => {
-      const mockCallback = jest.fn(() => {});
-      const {getByPlaceholderText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          tokens={[
-            {id: '0', value: 'you'},
-            {id: '1', value: 'are'},
-            {id: '2', value: 'beautiful'},
-          ]}
-          placeholder="Enter text"
-          onRemoveToken={mockCallback}
-        />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-
-      userEvent.type(input, 'william');
-      input.setSelectionRange(0, input.value.length);
-      userEvent.type(input, '{backspace}');
-      expect(input).toHaveValue('');
-      expect(mockCallback).toHaveBeenCalledTimes(0);
-
-      const result = mockCallback.mock.calls;
-
-      userEvent.type(input, '{backspace}');
-      expect(result[0][0]).toBe('2');
-    });
-  });
-});

package/__flow__/TokenInput/tests/default/focusing.test.js

@@ -1,39 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render, userEvent} from '../../../utils/react-testing-library';
-import TokenInput from '../../';
-
-describe('When tabbing...', () => {
-  describe('...the tokens', () => {
-    it('should be focused', () => {
-      const {getByPlaceholderText, getByText} = render(
-        <TokenInput
-          id="0"
-          placeholder="Please enter a value..."
-          name="token-input"
-          tokens={[
-            {id: '0', value: 'you'},
-            {id: '1', value: 'are'},
-            {id: '2', value: 'beautiful'},
-          ]}
-        />
-      );
-
-      const input = getByPlaceholderText('Please enter a value...');
-
-      userEvent.click(input);
-      userEvent.tab({shift: true});
-
-      expect(getByText('beautiful').closest('button')).toHaveFocus();
-
-      userEvent.tab({shift: true});
-
-      expect(getByText('are').closest('button')).toHaveFocus();
-
-      userEvent.tab();
-
-      expect(getByText('beautiful').closest('button')).toHaveFocus();
-    });
-  });
-});

package/__flow__/TokenInput/tests/default/inputting.test.js

@@ -1,57 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render, userEvent} from '../../../utils/react-testing-library';
-import TokenInput from '../../';
-
-describe('When inputting...', () => {
-  describe('...simple text into an empty input', () => {
-    it('should add characters to the input', () => {
-      const {getByPlaceholderText} = render(
-        <TokenInput id="0" name="token-input" placeholder="Enter text" />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-      userEvent.type(input, 'Hello world!');
-
-      expect(input).toHaveValue('Hello world!');
-    });
-  });
-
-  describe('...a delimiter into an empty input', () => {
-    it("should add a value, if it's printable", () => {
-      const {getByPlaceholderText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          delimiters={['.', 'Enter']}
-          placeholder="Enter text"
-        />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-      userEvent.type(input, '.');
-      expect(input).toHaveValue('.');
-    });
-  });
-
-  describe('...a delimiter into an input with a value', () => {
-    it('should add a token rather than a value', () => {
-      const mockCallback = jest.fn(() => {});
-
-      const {getByPlaceholderText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          value=","
-          placeholder="Enter text"
-          onAddToken={mockCallback}
-        />
-      );
-
-      const input = getByPlaceholderText('Enter text');
-      userEvent.type(input, ',');
-      expect(mockCallback).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/__flow__/TokenInput/tests/default/pasting.test.js

@@ -1,216 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import 'jest-styled-components';
-import {render, userEvent} from '../../../utils/react-testing-library';
-
-import TokenInput from '../../';
-
-const firePasteEvent = (target: React.Node, text: string) => {
-  userEvent.paste(target, text, {clipboardData: {getData: () => text}});
-};
-
-describe('When pasting...', () => {
-  let mockHandleAdd;
-  let mockHandleRemove;
-  let mockHandleChange;
-  let tokenInput;
-  let input;
-
-  describe('...with no tokens...', () => {
-    beforeEach(() => {
-      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
-      mockHandleAdd = jest.fn();
-      mockHandleRemove = jest.fn();
-      mockHandleChange = jest.fn();
-
-      tokenInput = (
-        <TokenInput
-          id="0"
-          name="token-input"
-          placeholder="Enter text"
-          onAddToken={mockHandleAdd}
-          onRemoveToken={mockHandleRemove}
-          onChange={mockHandleChange}
-        />
-      );
-
-      const {getByPlaceholderText} = render(tokenInput);
-
-      input = getByPlaceholderText('Enter text');
-    });
-
-    describe('...simple text into an empty input', () => {
-      it('should insert the simple text', () => {
-        expect(input).toHaveValue('');
-
-        firePasteEvent(input, 'Hello world');
-
-        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleChange).toHaveBeenCalledTimes(1);
-
-        expect(mockHandleChange.mock.calls[0][1]).toBe('Hello world');
-      });
-    });
-
-    describe('...a delimiter into an empty input', () => {
-      it("shouldn't add anything... with a ','", () => {
-        firePasteEvent(input, ',');
-
-        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-      });
-
-      it("shouldn't add anything... with an 'new-line'", () => {
-        firePasteEvent(input, '\n');
-
-        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-      });
-    });
-
-    describe('...delimited text into an empty input', () => {
-      it('should add tokens', () => {
-        expect(input).toHaveValue('');
-
-        firePasteEvent(input, 'one, two, three');
-
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleAdd).toHaveBeenCalledTimes(3);
-        expect(mockHandleChange).toHaveBeenCalledTimes(1);
-
-        expect(mockHandleChange.mock.calls[0][1]).toBe('one, two, three');
-
-        const tokenSpec1 = mockHandleAdd.mock.calls[0][0];
-        const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
-        const tokenSpec3 = mockHandleAdd.mock.calls[2][0];
-
-        expect(tokenSpec1).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'one'})
-        );
-        expect(tokenSpec2).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'two'})
-        );
-        expect(tokenSpec3).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'three'})
-        );
-      });
-    });
-
-    describe('...simple text into an input with text', () => {
-      it('should simply paste the text', () => {
-        const preText = '4321!';
-        const pasteText = 'hello world';
-
-        userEvent.type(input, preText);
-        firePasteEvent(input, pasteText);
-
-        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleChange).toHaveBeenCalledTimes(6);
-      });
-    });
-  });
-
-  describe('...with text...', () => {
-    beforeEach(() => {
-      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
-      mockHandleAdd = jest.fn();
-      mockHandleRemove = jest.fn();
-
-      tokenInput = (
-        <TokenInput
-          id="0"
-          name="token-input"
-          placeholder="Enter text"
-          value="Pre Text!"
-          onAddToken={mockHandleAdd}
-          onRemoveToken={mockHandleRemove}
-        />
-      );
-
-      const {getByPlaceholderText} = render(tokenInput);
-
-      input = getByPlaceholderText('Enter text');
-    });
-
-    describe('...delimited text into an input with text', () => {
-      it('should make new tokens from the pasted text', () => {
-        firePasteEvent(input, 'this, that');
-
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleAdd).toHaveBeenCalledTimes(2);
-
-        const tokenSpec1 = mockHandleAdd.mock.calls[0][0];
-        const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
-
-        expect(tokenSpec1).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'this'})
-        );
-        expect(tokenSpec2).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'that'})
-        );
-      });
-    });
-  });
-
-  describe('...with tokens...', () => {
-    beforeEach(() => {
-      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
-      mockHandleAdd = jest.fn();
-      mockHandleRemove = jest.fn();
-
-      tokenInput = (
-        <TokenInput
-          id="0"
-          name="token-input"
-          placeholder="Enter text"
-          tokens={[
-            {id: '1', value: 'one'},
-            {id: '2', value: 'two'},
-            {id: '3', value: 'three'},
-          ]}
-          onAddToken={mockHandleAdd}
-          onRemoveToken={mockHandleRemove}
-        />
-      );
-
-      const {getByPlaceholderText} = render(tokenInput);
-
-      input = getByPlaceholderText('Enter text');
-    });
-
-    describe('...simple text after one or more tokens', () => {
-      it('simply paste the text', () => {
-        firePasteEvent(input, 'Hello world');
-
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
-
-        // expect(mockHandleChange.mock.calls[0][1]).toBe("Hello world");
-      });
-    });
-
-    describe('...delimited text after one or more tokens', () => {
-      it('should add multiple new tokens', () => {
-        firePasteEvent(input, 'this, that');
-
-        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
-        expect(mockHandleAdd).toHaveBeenCalledTimes(2);
-
-        // expect(mockHandleChange.mock.calls[0][1]).toBe("this, that");
-
-        const tokenSpec1 = mockHandleAdd.mock.calls[0][0];
-        const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
-
-        expect(tokenSpec1).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'this'})
-        );
-        expect(tokenSpec2).toEqual(
-          expect.objectContaining({id: expect.any(String), value: 'that'})
-        );
-      });
-    });
-  });
-});

package/__flow__/TokenInput/tests/default/rendering.test.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import 'jest-styled-components';
-import {render} from '../../../utils/react-testing-library';
-import TokenInput from '../../';
-
-describe('When rendering...', () => {
-  it('should render disabled status correctly', () => {
-    const {queryByDataQaLabel} = render(
-      <TokenInput
-        id="0"
-        placeholder="Please enter a value..."
-        name="token-input"
-        tokens={[
-          {id: '0', value: 'you'},
-          {id: '1', value: 'are'},
-          {id: '2', value: 'beautiful'},
-        ]}
-        disabled
-      />
-    );
-
-    expect(queryByDataQaLabel({'input-isdisabled': true})).toBeTruthy();
-  });
-
-  it('should render before and after elements', () => {
-    const {getByText} = render(
-      <TokenInput
-        elemAfter={<p>After</p>}
-        elemBefore={<p>Before</p>}
-        id="name"
-        name="name"
-        value="User"
-      />
-    );
-
-    expect(getByText('Before')).toBeTruthy();
-    expect(getByText('After')).toBeTruthy();
-  });
-
-  describe('...the isInvalid prop', () => {
-    it.each([true, 'foobar', 1])(
-      'should correctly set aria-invalid to true for truthy values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <TokenInput id="name" name="name" isInvalid={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-          'aria-invalid',
-          'true'
-        );
-      }
-    );
-    it.each([false, null, undefined, 0])(
-      'should correctly set aria-invalid to false for falsy values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <TokenInput id="name" name="name" isInvalid={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-          'aria-invalid',
-          'false'
-        );
-      }
-    );
-  });
-
-  describe('...tokens', () => {
-    it('should render tokens in container', () => {
-      const {getByText} = render(
-        <TokenInput
-          id="name"
-          name="name"
-          value="User"
-          tokens={[
-            {id: 0, value: 'han'},
-            {id: 1, value: 'solo'},
-          ]}
-        />
-      );
-
-      expect(getByText('han')).toBeTruthy();
-      expect(getByText('solo')).toBeTruthy();
-    });
-
-    it('should render tokens with icons', () => {
-      const {getAllByDataQaLabel} = render(
-        <TokenInput
-          id="name"
-          iconName="lock"
-          name="name"
-          value="User"
-          tokens={[
-            {id: 0, value: 'han'},
-            {id: 1, value: 'solo'},
-          ]}
-        />
-      );
-
-      expect(getAllByDataQaLabel({icon: 'lock'}).length).toBe(2);
-    });
-
-    it('should render tokens with individual icons', () => {
-      const {getAllByDataQaLabel} = render(
-        <TokenInput
-          id="name"
-          name="name"
-          value="User"
-          tokens={[
-            {id: 0, value: 'han'},
-            {id: 1, iconName: 'sun', value: 'solo'},
-            {id: 2, iconName: 'sun', value: 'darth'},
-            {id: 3, value: 'vader'},
-          ]}
-        />
-      );
-
-      expect(getAllByDataQaLabel({icon: 'sun'}).length).toBe(2);
-    });
-
-    it('should render tokens with individual icons and fallback icon', () => {
-      const {getAllByDataQaLabel} = render(
-        <TokenInput
-          id="name"
-          iconName="lock"
-          name="name"
-          value="User"
-          tokens={[
-            {id: 0, value: 'han'},
-            {id: 1, iconName: 'sun', value: 'solo'},
-            {id: 2, iconName: 'sun', value: 'darth'},
-            {id: 3, value: 'vader'},
-          ]}
-        />
-      );
-
-      expect(getAllByDataQaLabel({icon: 'lock'}).length).toBe(2);
-      expect(getAllByDataQaLabel({icon: 'sun'}).length).toBe(2);
-    });
-  });
-});