testing a component of setting modal (taniarascia#465)

Co-authored-by: Tania Rascia <[email protected]>

src/resources/TestID.ts

@@ -47,6 +47,8 @@ export enum TestID {
   UUID_MENU_BAR_COPY_ICON = 'uuid-menu-bar-copy-icon',
   PREVIEW_MODE = 'preview-mode',
   COPY_REFERENCE_TO_NOTE = 'copy-reference-to-note',
+  ICON_BUTTON = 'icon-button',
+  ICON_BUTTON_UPLOADER = 'icon-button-uploader',
   LAST_SYNCED_NOTIFICATION_SYNCING = 'last-synced-notification-syncing',
   LAST_SYNCED_NOTIFICATION_UNSAVED = 'last-synced-notification-unsaved',
   LAST_SYNCED_NOTIFICATION_DATE = 'last-synced-notification-date',

tests/unit/client/components/SettingsModal/IconButton.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import 'jest-extended'
+import { Camera } from 'react-feather'
+
+import { TestID } from '@resources/TestID'
+import { IconButton, IconButtonProps } from '@/components/SettingsModal/IconButton'
+
+describe('<IconButton />', () => {
+  it('renders the IconButton component', () => {
+    const enabledProps: IconButtonProps = {
+      handler: jest.fn,
+      dataTestID: TestID.ICON_BUTTON,
+      icon: Camera,
+      text: 'takeNote',
+    }
+
+    const component = render(<IconButton {...enabledProps} />)
+
+    expect(component).toBeTruthy()
+  })
+
+  it('renders the IconButton component as disabled', () => {
+    const disabledProps: IconButtonProps = {
+      handler: jest.fn,
+      dataTestID: TestID.ICON_BUTTON,
+      disabled: true,
+      icon: Camera,
+      text: 'takeNote',
+    }
+
+    const component = render(<IconButton {...disabledProps} />)
+    const button = component.queryByTestId(TestID.ICON_BUTTON)
+
+    expect(button).toBeDisabled()
+  })
+})

tests/unit/client/components/SettingsModal/IconButtonUploader.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import 'jest-extended'
+import { Camera } from 'react-feather'
+
+import { TestID } from '@resources/TestID'
+import {
+  IconButtonUploader,
+  IconButtonUploaderProps,
+} from '@/components/SettingsModal/IconButtonUploader'
+
+describe('<IconButtonUploader />', () => {
+  it('renders the IconButtonUploader component', () => {
+    const enabledProps: IconButtonUploaderProps = {
+      handler: jest.fn,
+      dataTestID: TestID.ICON_BUTTON_UPLOADER,
+      icon: Camera,
+      text: 'takeNote',
+      accept: 'takeNote',
+    }
+
+    const component = render(<IconButtonUploader {...enabledProps} />)
+
+    expect(component).toBeTruthy()
+  })
+})