diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx
index e01c04e57d..6cfcc96a6d 100644
--- a/packages/react/src/Button/Button.test.tsx
+++ b/packages/react/src/Button/Button.test.tsx
@@ -1,3 +1,4 @@
+import { ShareIcon } from '@amsterdam/design-system-react-icons'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import { createRef } from 'react'
@@ -5,7 +6,7 @@ import { Button } from './Button'
describe('Button', () => {
it('renders an element with role button', () => {
- render()
+ render()
const button = screen.getByRole('button', {
name: 'Click me!',
@@ -16,7 +17,7 @@ describe('Button', () => {
})
it('renders an additional class name', () => {
- render()
+ render()
const button = screen.getByRole('button', {
name: 'Click me!',
@@ -26,7 +27,7 @@ describe('Button', () => {
})
it('renders a default button with variant primary', () => {
- render()
+ render()
const button = screen.getByRole('button', {
name: 'primary',
@@ -40,9 +41,9 @@ describe('Button', () => {
it('renders a button with a specified variant', () => {
render(
<>
-
-
-
+
+
+
>,
)
@@ -69,9 +70,15 @@ describe('Button', () => {
it('renders a disabled button with a specified variant', () => {
render(
<>
-
-
-
+
+
+
>,
)
@@ -98,10 +105,26 @@ describe('Button', () => {
it('is able to pass a React ref', () => {
const ref = createRef()
- const { container } = render()
+ const { container } = render()
const button = container.querySelector(':only-child')
expect(ref.current).toBe(button)
})
+
+ it('renders a button with an icon', () => {
+ render(
+ ,
+ )
+
+ const button = screen.getByRole('button', {
+ name: 'Share',
+ })
+
+ expect(button).toBeInTheDocument()
+ const icon = button.querySelector('.ams-icon')
+ expect(icon).toBeInTheDocument()
+ })
})
diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx
index 3b9eca36ac..4606e12238 100644
--- a/storybook/src/components/Button/Button.stories.tsx
+++ b/storybook/src/components/Button/Button.stories.tsx
@@ -16,6 +16,9 @@ const meta = {
disabled: false,
},
argTypes: {
+ icon: {
+ table: { disable: true },
+ },
disabled: {
description: 'Prevents interaction. Avoid if possible.',
},