diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js index f5383f1a464..4b11c5b50b8 100644 --- a/packages/react/jest.config.js +++ b/packages/react/jest.config.js @@ -32,6 +32,7 @@ module.exports = { '/src/ActionBar/', '/src/AnchoredOverlay/', '/src/Banner/', + '/src/Blankslate/', '/src/DataTable/', '/src/FeatureFlags/', '/src/Stack/', diff --git a/packages/react/src/Blankslate/Blankslate.test.tsx b/packages/react/src/Blankslate/Blankslate.test.tsx new file mode 100644 index 00000000000..20ff82ff431 --- /dev/null +++ b/packages/react/src/Blankslate/Blankslate.test.tsx @@ -0,0 +1,120 @@ +import {describe, expect, it, vi} from 'vitest' +import {render, screen} from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import React from 'react' +import {Blankslate} from '../Blankslate' + +describe('Blankslate', () => { + it('should support a custom `className` on the outermost, non-container element', () => { + const {container} = render(Test content) + expect(container.firstChild!.firstChild).toHaveClass('test') + }) + + it('should render with border when border is true', () => { + const {container} = render(Test content) + expect(container.firstChild!.firstChild).toHaveAttribute('data-border', 'true') + }) + + it('should render with narrow style when narrow is true', () => { + const {container} = render(Test content) + expect(container.firstChild!.firstChild).toHaveAttribute('data-narrow', 'true') + }) + + it('should render with spacious style when spacious is true', () => { + const {container} = render(Test content) + expect(container.firstChild!.firstChild).toHaveAttribute('data-spacious', 'true') + }) + + describe('Blankslate.Visual', () => { + it('should render a visual element', () => { + render( + + + + + , + ) + expect(screen.getByTestId('test-icon')).toBeInTheDocument() + }) + }) + + describe('Blankslate.Heading', () => { + it('should render a heading with h2 by default', () => { + render( + + Test Heading + , + ) + expect(screen.getByRole('heading', {level: 2, name: 'Test Heading'})).toBeInTheDocument() + expect(screen.getByRole('heading', {level: 2})).toHaveClass('Blankslate-Heading') + }) + + it('should render with a custom heading level', () => { + render( + + Test Heading + , + ) + expect(screen.getByRole('heading', {level: 3, name: 'Test Heading'})).toBeInTheDocument() + }) + }) + + describe('Blankslate.Description', () => { + it('should render a description', () => { + render( + + Test description + , + ) + expect(screen.getByText('Test description')).toBeInTheDocument() + }) + }) + + describe('Blankslate.PrimaryAction', () => { + it('should render a primary action button', () => { + render( + + Primary action + , + ) + expect(screen.getByRole('button', {name: 'Primary action'})).toBeInTheDocument() + }) + + it('should handle click events on the button', async () => { + const user = userEvent.setup() + const onClick = vi.fn() + render( + + Primary action + , + ) + + await user.click(screen.getByRole('button', {name: 'Primary action'})) + expect(onClick).toHaveBeenCalledTimes(1) + }) + + it('should render as an anchor when href is provided', () => { + render( + + Primary action + , + ) + const link = screen.getByRole('link', {name: 'Primary action'}) + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute('href', 'https://example.com') + }) + }) + + describe('Blankslate.SecondaryAction', () => { + it('should render a secondary action link', () => { + render( + + Secondary action + , + ) + const link = screen.getByRole('link', {name: 'Secondary action'}) + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute('href', 'https://example.com') + }) + }) +}) diff --git a/packages/react/vitest.config.mts b/packages/react/vitest.config.mts index 344cf930700..fcf05c6bfad 100644 --- a/packages/react/vitest.config.mts +++ b/packages/react/vitest.config.mts @@ -18,6 +18,7 @@ export default defineConfig({ 'src/ActionBar/**/*.test.?(c|m)[jt]s?(x)', 'src/AnchoredOverlay/**/*.test.?(c|m)[jt]s?(x)', 'src/Banner/**/*.test.?(c|m)[jt]s?(x)', + 'src/Blankslate/**/*.test.?(c|m)[jt]s?(x)', 'src/DataTable/**/*.test.?(c|m)[jt]s?(x)', 'src/FeatureFlags/**/*.test.?(c|m)[jt]s?(x)', 'src/Stack/**/*.test.?(c|m)[jt]s?(x)',