5069cd681a
* rough starting point, roving tabindex in toolbar, bold and italic buttons * refactor, add link * add ul * add ordered list * core formatters in place, wip * overflow options * add keyboard shortcuts * tidy up some dodgy classes * add mocks for runtime in test and storybook, use correct modifier key for tooltip * style tweaks * refactor tooltips * add markdown formatters tests * add tests for toolbar component, fix mistake in overflow menu tooltips * undo change no longer needed to button * fix issue accessing runtime in formatters file * only show darkened buttons and tooltips when focus-visible is true * mobile view * fix for responsive buttons & roving tabindex * tweaks from PR review * update cursor position on link insertion * add a new line after block selection formatting * align icons in center * tidy up overflow menu listeners * small refactors * test for new text area util * tidy up new lines after syntaxes * fix logic in cursor offsets for links * prevent scroll jumps after inserting syntax * some style tweaks * insert level 2 heading with new lines above and below * update icons * use margin instead of gap
55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
import { h } from 'preact';
|
|
import { render, waitFor } from '@testing-library/preact';
|
|
import { axe } from 'jest-axe';
|
|
import '@testing-library/jest-dom';
|
|
import { MarkdownToolbar } from '../MarkdownToolbar';
|
|
|
|
describe('<MarkdownToolbar />', () => {
|
|
beforeEach(() => {
|
|
global.Runtime = {
|
|
currentOS: jest.fn(() => 'macOS'),
|
|
};
|
|
|
|
global.window.matchMedia = jest.fn((query) => {
|
|
return {
|
|
matches: false,
|
|
media: query,
|
|
addListener: jest.fn(),
|
|
removeListener: jest.fn(),
|
|
};
|
|
});
|
|
});
|
|
|
|
it('should have no a11y violations when rendered', async () => {
|
|
const { container } = render(<MarkdownToolbar />);
|
|
const results = await axe(container);
|
|
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should render core syntax formatters in main toolbar', () => {
|
|
const { getByLabelText } = render(<MarkdownToolbar />);
|
|
|
|
expect(getByLabelText('Bold')).toBeInTheDocument();
|
|
expect(getByLabelText('Italic')).toBeInTheDocument();
|
|
expect(getByLabelText('Ordered list')).toBeInTheDocument();
|
|
expect(getByLabelText('Unordered list')).toBeInTheDocument();
|
|
expect(getByLabelText('Heading')).toBeInTheDocument();
|
|
expect(getByLabelText('Quote')).toBeInTheDocument();
|
|
expect(getByLabelText('Code')).toBeInTheDocument();
|
|
expect(getByLabelText('Code block')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render an overflow menu with secondary formatters and help link', async () => {
|
|
const { getByLabelText } = render(<MarkdownToolbar />);
|
|
|
|
getByLabelText('More options').click();
|
|
|
|
await waitFor(() =>
|
|
expect(getByLabelText('Underline')).toBeInTheDocument(),
|
|
);
|
|
expect(getByLabelText('Strikethrough')).toBeInTheDocument();
|
|
expect(getByLabelText('Line divider')).toBeInTheDocument();
|
|
expect(getByLabelText('Help')).toBeInTheDocument();
|
|
});
|
|
});
|