@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.4

package/src/EditorToolbar/Tools/Image/ImageButton.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
+import ImageModal from './ImageModal';
+import { ImageFormData } from './Form/ImageForm';
+import Button from '../../../ui/Button/Button';
+import { useCommands, useKeymap } from '@remirror/react';
+
+const ImageButton = () => {
+  const [showModal, setShowModal] = useState(false);
+  const { insertImage } = useCommands();
+  const active = showModal;
+
+  const handleClick = () => {
+    if (!showModal) {
+      // form element are uncontrolled, let the event loop run to
+      // update the selected text in state before showing the modal.
+      requestAnimationFrame(() => {
+        setShowModal(true);
+      });
+    }
+  };
+
+  const insertImageFromData = (data: ImageFormData) => {
+    const { src, alt, width, height } = data;
+    if (src) {
+      insertImage({ src, alt, width, height });
+    }
+  };
+
+  const handleSubmit = (data: ImageFormData) => {
+    insertImageFromData(data);
+    setShowModal(false);
+  };
+
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  useKeymap('Mod-l', handleShortcut);
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleClick}
+        isActive={active}
+        icon={<ImageRoundedIcon />}
+        label="Image (cmd+L)"
+        isDisabled={false}
+      />
+      {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
+    </>
+  );
+};
+
+export default ImageButton;

package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx

@@ -0,0 +1,83 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import ImageModal from './ImageModal';
+
+const mockSubmitFunction = jest.fn();
+const mockCancelFunction = jest.fn();
+const setup = () => {
+  const utils = renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  const sourceInput = screen.getByRole('textbox', { name: /source/i }) as HTMLInputElement;
+  const altInput = screen.getByRole('textbox', { name: /alt/i }) as HTMLInputElement;
+  const widthInput = screen.getByRole('spinbutton', { name: /Width/i }) as HTMLInputElement;
+  const heightInput = screen.getByRole('spinbutton', { name: /Height/i }) as HTMLInputElement;
+  return {
+    sourceInput,
+    altInput,
+    widthInput,
+    heightInput,
+    ...utils,
+  };
+};
+
+describe('ImageModal', () => {
+  it('Renders the modal with title', async () => {
+    await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+    const modalHeading = screen.getByRole('heading', { name: 'Image' });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Populates the source field when a source is supplied', async () => {
+    const { sourceInput } = setup();
+    fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
+    expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+  });
+
+  it('Renders empty width and height fields if the image source is empty', async () => {
+    const { sourceInput, widthInput, heightInput } = setup();
+    fireEvent.change(sourceInput, { target: { value: '' } });
+    expect(widthInput.value).toBe('');
+    expect(heightInput.value).toBe('');
+  });
+
+  it('Updates the height field with aspect ratio based value from width', async () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(widthInput, { target: { value: '300' } });
+    expect(widthInput.value).toBe('300');
+    expect(heightInput.value).toBe('168.75');
+  });
+  it('Updates the width field with aspect ratio based value from height', async () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(heightInput, { target: { value: '100' } });
+    expect(heightInput.value).toBe('100');
+    expect(widthInput.value).toBe('177.78');
+  });
+  it('Does not change the width when height is changed and aspect ratio link is off', () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(heightInput, { target: { value: '100' } });
+    expect(heightInput.value).toBe('100');
+    expect(widthInput.value).toBe('177.78');
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    fireEvent.change(heightInput, { target: { value: '200' } });
+    expect(heightInput.value).toBe('200');
+    expect(widthInput.value).toBe('177.78');
+  });
+  it('Does not change the height when width is changed and aspect ratio link is off', () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(widthInput, { target: { value: '450' } });
+    expect(widthInput.value).toBe('450');
+    expect(heightInput.value).toBe('253.13');
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    fireEvent.change(widthInput, { target: { value: '600' } });
+    expect(widthInput.value).toBe('600');
+    expect(heightInput.value).toBe('253.13');
+  });
+  it('Changes the icon when aspect ratio button is toggled', () => {
+    renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+    expect(screen.getByTestId('InsertLinkRoundedIcon')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    expect(screen.queryByTestId('InsertLinkRoundedIcon')).not.toBeInTheDocument();
+    expect(screen.getByTestId('LinkOffIcon')).toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Image/ImageModal.tsx

@@ -0,0 +1,29 @@
+import { getMarkRanges } from 'remirror';
+import ImageForm, { ImageFormData } from './Form/ImageForm';
+import React from 'react';
+import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+
+type ImageModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+
+const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
+  const {
+    helpers,
+    view: { state },
+  } = useRemirrorContext();
+  const selection = useCurrentSelection();
+  const currentImage = getMarkRanges(selection, 'image')[0];
+  const selectedImage = helpers.getTextBetween(selection.from, selection.to, state.doc);
+
+  return (
+    <FormModal title="Image" onCancel={onCancel}>
+      <ImageForm data={{ ...currentImage?.mark.attrs, src: selectedImage }} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default ImageModal;

package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx

@@ -14,6 +14,6 @@ describe('Italic button', () => {
     expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
     const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
     fireEvent.click(italic);
-    expect(italic.classList.contains('is-active')).toBeTruthy();
+    expect(italic.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { ItalicExtension } from '@remirror/extension-italic';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
 
 const ItalicButton = () => {
@@ -17,7 +17,7 @@ const ItalicButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active.italic()}

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
-import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
-import { Select, SelectOptions } from '../../../../ui/Inputs/Select/Select';
+import { Input } from '../../../../ui/Fields/Input/Input';
+import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
 
@@ -24,13 +24,13 @@ const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="URL" {...register('href')} />
+        <Input label="URL" {...register('href')} />
       </div>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Text" {...register('text')} />
+        <Input label="Text" {...register('text')} />
       </div>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Title" {...register('title')} />
+        <Input label="Title" {...register('title')} />
       </div>
       <div className="squiz-fte-form-group mb-0">
         <Select

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
 
@@ -42,7 +42,7 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
 
   return (
     <>
-      <ToolbarButton
+      <Button
         handleOnClick={handleClick}
         isActive={active.link()}
         icon={<InsertLinkRoundedIcon />}

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRemirrorContext, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 
 const RemoveLinkButton = () => {
@@ -14,7 +14,7 @@ const RemoveLinkButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleClick}
       isActive={false}
       isDisabled={!enabled}

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
 
 const RedoButton = () => {
@@ -17,7 +17,7 @@ const RedoButton = () => {
   const enabled = redoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 
 const CenterAlignButton = () => {
@@ -18,7 +18,7 @@ const CenterAlignButton = () => {
   const enabled = centerAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
 
 const JustifyAlignButton = () => {
@@ -18,7 +18,7 @@ const JustifyAlignButton = () => {
   const enabled = justifyAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 
 const LeftAlignButton = () => {
@@ -18,7 +18,7 @@ const LeftAlignButton = () => {
   const enabled = leftAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 
 const RightAlignButton = () => {
@@ -18,7 +18,7 @@ const RightAlignButton = () => {
   const enabled = rightAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx

@@ -14,6 +14,6 @@ describe('Underline button', () => {
     expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
     const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
     fireEvent.click(underline);
-    expect(underline.classList.contains('is-active')).toBeTruthy();
+    expect(underline.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { UnderlineExtension } from '@remirror/extension-underline';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
 
 const UnderlineButton = () => {
@@ -17,7 +17,7 @@ const UnderlineButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active.underline()}

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
 
 const UndoButton = () => {
@@ -17,7 +17,7 @@ const UndoButton = () => {
   const enabled = undoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/_floating-toolbar.scss

@@ -1,4 +1,10 @@
 /// This class is excluded from the scope of squiz-fte-scope as it is outside of the scoped element
 .squiz-fte-scope__floating-popover {
   @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
+  .squiz-fte-btn {
+    @apply p-1;
+    ~ .squiz-fte-btn {
+      margin-left: 2px;
+    }
+  }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -7,10 +7,16 @@
   > *:not(:first-child, .editor-divider) {
     margin: 0 0 0 2px;
   }
-}
 
-.editor-divider {
-  @apply -my-1 mx-1 border;
-  margin-right: 2px;
-  height: auto;
+  .editor-divider {
+    @apply -my-1 mx-1 border;
+    margin-right: 2px;
+    height: auto;
+  }
+  .squiz-fte-btn {
+    @apply p-1;
+    ~ .squiz-fte-btn {
+      margin-left: 2px;
+    }
+  }
 }

package/src/Extensions/Extensions.ts

@@ -9,6 +9,7 @@ import {
 } from 'remirror/extensions';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
 import { LinkExtension } from './LinkExtension/LinkExtension';
+import { ImageExtension } from './ImageExtension/ImageExtension';
 
 export const Extensions = () => [
   new BoldExtension(),
@@ -19,6 +20,7 @@ export const Extensions = () => [
   new PreformattedExtension(),
   new UnderlineExtension(),
   new HistoryExtension(),
+  new ImageExtension(),
   new LinkExtension({
     supportedTargets: [
       // '_self' is the browser default and will be used when encountering a link with a

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -0,0 +1,3 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+
+export class ImageExtension extends RemirrorImageExtension {}

package/src/index.scss

@@ -4,15 +4,15 @@
 @import 'tailwindcss/utilities';
 
 /* Global */
+@import './ui/typography';
 @import './ui/forms';
-@import './ui/buttons';
 
 /* Components */
 @import './Editor/editor';
 @import './EditorToolbar/toolbar';
 @import './EditorToolbar/floating-toolbar';
 
-@import './ui/ToolbarButton/toolbar-button';
+@import './ui/Button/button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 

package/src/ui/Button/Button.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Button from './Button';
+import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
+
+describe('Button', () => {
+  const mockOnClick = jest.fn();
+
+  const ButtonComponent = () => {
+    return (
+      <Button
+        handleOnClick={mockOnClick}
+        isDisabled
+        isActive
+        label="Am a button"
+        text="Hello"
+        icon={<AccessTimeRoundedIcon />}
+      />
+    );
+  };
+
+  it('Renders the label, text and icon', () => {
+    render(<ButtonComponent />);
+    const label = screen.getByLabelText('Am a button');
+    expect(label).toBeInTheDocument();
+    const text = screen.getByText('Hello');
+    expect(text).toBeInTheDocument();
+    const icon = screen.getByTestId('AccessTimeRoundedIcon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Renders the button in a disabled state if set to be disabled', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toBeDisabled();
+  });
+
+  it('Adds the active class is set to be active', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toHaveClass('squiz-fte-btn--is-active');
+  });
+});

package/src/ui/Button/Button.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+type ButtonProps = {
+  handleOnClick: () => void;
+  isDisabled?: boolean;
+  isActive: boolean;
+  label: string;
+  text?: string;
+  icon?: ReactElement;
+};
+
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+    >
+      <>
+        {text && <span>{text}</span>}
+        {icon && icon}
+      </>
+    </button>
+  );
+};
+
+export default Button;

package/src/ui/{_buttons.scss → Button/_button.scss}

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all duration-150;
+  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;
@@ -11,9 +11,27 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 
+  &--is-icon {
+    padding: 6px;
+  }
+
+  ~ .squiz-fte-btn {
+    margin-left: 2px;
+  }
+
   &.disabled,
   &[disabled] {
     cursor: not-allowed;
     @apply opacity-50;
   }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &--is-active,
+  &:active {
+    @apply text-blue-300 bg-blue-100;
+  }
 }

package/src/ui/{Inputs/Text/TextInput.spec.tsx → Fields/Input/Input.spec.tsx}

@@ -1,30 +1,30 @@
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { TextInput } from './TextInput';
+import { Input } from './Input';
 
-describe('Text input', () => {
+describe('Input', () => {
   const mockOnChange = jest.fn();
 
-  const TextInputComponent = () => {
-    return <TextInput name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+  const InputComponent = () => {
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
   };
 
   it('Renders the label', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that the supplied label renders
     const inputLabel = screen.getByLabelText('Text input');
     expect(inputLabel).toBeInTheDocument();
   });
 
   it('Renders the default value', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that default value supplied renders
     expect(screen.getByDisplayValue('Water')).toBeInTheDocument();
   });
 
   it('Changes the value when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');
@@ -33,7 +33,7 @@ describe('Text input', () => {
   });
 
   it('Fires the change function when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');