diff --git a/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx b/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx new file mode 100644 index 00000000000..dcf90ec1022 --- /dev/null +++ b/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx @@ -0,0 +1,53 @@ +import React from 'react' +import { describe, it, vi, beforeEach, expect } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' +import { renderWithProviders } from '../../../__testing-utils__' + +import { SendButton } from '../index' + +const mockHandleClick = vi.fn() +const render = (props: React.ComponentProps) => { + return renderWithProviders() +} + +describe('SendButton', () => { + let props: React.ComponentProps + + beforeEach(() => { + props = { + handleClick: mockHandleClick, + disabled: true, + isLoading: false, + } + }) + it('should render button with send icon and its initially disabled', () => { + render(props) + const button = screen.getByRole('button') + expect(button).toBeDisabled() + screen.getByTestId('SendButton_icon_send') + }) + + it('should render button and its not disabled when disabled false', () => { + props = { ...props, disabled: false } + render(props) + const button = screen.getByRole('button') + expect(button).not.toBeDisabled() + screen.getByTestId('SendButton_icon_send') + }) + + it('should render button with spinner icon when isLoading', () => { + props = { ...props, isLoading: true } + render(props) + const button = screen.getByRole('button') + expect(button).toBeDisabled() + screen.getByTestId('SendButton_icon_ot-spinner') + }) + + it('should call a mock function when clicking the button', () => { + props = { ...props, disabled: false } + render(props) + const button = screen.getByRole('button') + fireEvent.click(button) + expect(mockHandleClick).toHaveBeenCalled() + }) +}) diff --git a/opentrons-ai-client/src/atoms/SendButton/index.tsx b/opentrons-ai-client/src/atoms/SendButton/index.tsx new file mode 100644 index 00000000000..e165762b2ab --- /dev/null +++ b/opentrons-ai-client/src/atoms/SendButton/index.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import { css } from 'styled-components' + +import { + ALIGN_CENTER, + BORDERS, + Btn, + COLORS, + DISPLAY_FLEX, + Icon, + JUSTIFY_CENTER, +} from '@opentrons/components' + +interface SendButtonProps { + handleClick: () => void + disabled?: boolean + isLoading?: boolean +} + +export function SendButton({ + handleClick, + disabled = false, + isLoading = false, +}: SendButtonProps): JSX.Element { + const playButtonStyle = css` + -webkit-tap-highlight-color: transparent; + &:focus { + background-color: ${COLORS.blue60}; + color: ${COLORS.white}; + } + + &:hover { + background-color: ${COLORS.blue50}; + color: ${COLORS.white}; + } + + &:focus-visible { + background-color: ${COLORS.blue50}; + } + + &:active { + background-color: ${COLORS.blue60}; + color: ${COLORS.white}; + } + + &:disabled { + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; + } + ` + return ( + + + + ) +} diff --git a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx index cd5bd8f09da..4ef1cb72a63 100644 --- a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx +++ b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx @@ -1,22 +1,20 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import styled, { css } from 'styled-components' +import styled from 'styled-components' import { useForm } from 'react-hook-form' import { useAtom } from 'jotai' import { ALIGN_CENTER, BORDERS, - Btn, COLORS, DIRECTION_ROW, - DISPLAY_FLEX, Flex, - Icon, JUSTIFY_CENTER, SPACING, TYPOGRAPHY, } from '@opentrons/components' +import { SendButton } from '../../atoms/SendButton' import { useFetch } from '../../resources/hooks' import { preparedPromptAtom, chatDataAtom } from '../../resources/atoms' @@ -141,65 +139,3 @@ const StyledTextarea = styled.textarea` transform: translateY(-50%); } ` - -interface SendButtonProps { - handleClick: () => void - disabled?: boolean - isLoading?: boolean -} - -function SendButton({ - handleClick, - disabled = false, - isLoading = false, -}: SendButtonProps): JSX.Element { - const playButtonStyle = css` - -webkit-tap-highlight-color: transparent; - &:focus { - background-color: ${COLORS.blue60}; - color: ${COLORS.white}; - } - - &:hover { - background-color: ${COLORS.blue50}; - color: ${COLORS.white}; - } - - &:focus-visible { - background-color: ${COLORS.blue50}; - } - - &:active { - background-color: ${COLORS.blue60}; - color: ${COLORS.white}; - } - - &:disabled { - background-color: ${COLORS.grey35}; - color: ${COLORS.grey50}; - } - ` - return ( - - - - ) -}