test: add tests for icon-button

Signed-off-by: Philip Molares <philip.molares@udo.edu>

src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton correctly uses the onClick callback 1`] = `
+<div>
+  <button
+    class="btn-icon p-0 d-inline-flex align-items-stretch   btn btn-primary"
+    data-testid="icon-button"
+    type="button"
+  >
+    <span
+      class="icon-part d-flex align-items-center"
+    >
+      <i
+        class="fa  fa-heart icon "
+      />
+    </span>
+    <span
+      class="text-part d-flex align-items-center"
+    >
+      test with onClick
+    </span>
+  </button>
+</div>
+`;
+
+exports[`IconButton renders heart icon 1`] = `
+<div>
+  <button
+    class="btn-icon p-0 d-inline-flex align-items-stretch   btn btn-primary"
+    data-testid="icon-button"
+    type="button"
+  >
+    <span
+      class="icon-part d-flex align-items-center"
+    >
+      <i
+        class="fa  fa-heart icon "
+      />
+    </span>
+    <span
+      class="text-part d-flex align-items-center"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`IconButton renders with additional className 1`] = `
+<div>
+  <button
+    class="btn-icon p-0 d-inline-flex align-items-stretch  testClass btn btn-primary"
+    data-testid="icon-button"
+    type="button"
+  >
+    <span
+      class="icon-part d-flex align-items-center"
+    >
+      <i
+        class="fa  fa-heart icon "
+      />
+    </span>
+    <span
+      class="text-part d-flex align-items-center"
+    >
+      test with additional className
+    </span>
+  </button>
+</div>
+`;
+
+exports[`IconButton renders with border 1`] = `
+<div>
+  <button
+    class="btn-icon p-0 d-inline-flex align-items-stretch with-border  btn btn-primary"
+    data-testid="icon-button"
+    type="button"
+  >
+    <span
+      class="icon-part d-flex align-items-center"
+    >
+      <i
+        class="fa  fa-heart icon "
+      />
+    </span>
+    <span
+      class="text-part d-flex align-items-center"
+    >
+      test with border
+    </span>
+  </button>
+</div>
+`;
+
+exports[`IconButton renders with fixed width icon 1`] = `
+<div>
+  <button
+    class="btn-icon p-0 d-inline-flex align-items-stretch   btn btn-primary"
+    data-testid="icon-button"
+    type="button"
+  >
+    <span
+      class="icon-part d-flex align-items-center"
+    >
+      <i
+        class="fa fa-fw fa-heart icon "
+      />
+    </span>
+    <span
+      class="text-part d-flex align-items-center"
+    >
+      test with fixed with icon
+    </span>
+  </button>
+</div>
+`;

src/components/common/icon-button/icon-button.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { IconName } from '../fork-awesome/types'
+import { IconButton } from './icon-button'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+describe('IconButton', () => {
+  const icon: IconName = 'heart'
+  it('renders heart icon', () => {
+    const view = render(<IconButton icon={icon}>test</IconButton>)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders with border', () => {
+    const view = render(
+      <IconButton icon={icon} border={true}>
+        test with border
+      </IconButton>
+    )
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders with fixed width icon', () => {
+    const view = render(
+      <IconButton icon={icon} iconFixedWidth={true}>
+        test with fixed with icon
+      </IconButton>
+    )
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders with additional className', () => {
+    const view = render(
+      <IconButton icon={icon} className={'testClass'}>
+        test with additional className
+      </IconButton>
+    )
+    expect(view.container).toMatchSnapshot()
+  })
+  it('correctly uses the onClick callback', async () => {
+    const onClick = jest.fn()
+    const view = render(
+      <IconButton icon={icon} onClick={onClick}>
+        test with onClick
+      </IconButton>
+    )
+    expect(view.container).toMatchSnapshot()
+    const iconButton = await screen.findByTestId('icon-button')
+    fireEvent(
+      iconButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      })
+    )
+    expect(onClick).toHaveBeenCalled()
+  })
+})

src/components/common/icon-button/icon-button.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -11,6 +11,7 @@ import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import type { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import styles from './icon-button.module.scss'
+import { testId } from '../../../utils/test-id'
 
 export interface IconButtonProps extends ButtonProps {
   icon: IconName
@@ -32,7 +33,8 @@ export const IconButton: React.FC<IconButtonProps> = ({
       {...props}
       className={`${styles['btn-icon']} p-0 d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
         className ?? ''
-      }`}>
+      }`}
+      {...testId('icon-button')}>
       <span className={`${styles['icon-part']} d-flex align-items-center`}>
         <ForkAwesomeIcon icon={icon} fixedWidth={iconFixedWidth} className={'icon'} />
       </span>