Add contenteditable change event test
This commit is contained in:
@ -0,0 +1,24 @@
|
|||||||
|
import EditableCell from '../EditableCell';
|
||||||
|
import { ThemeProvider } from '@emotion/react';
|
||||||
|
import { lightTheme } from '../../../layout/styles/themes';
|
||||||
|
|
||||||
|
const component = {
|
||||||
|
title: 'EditableCell',
|
||||||
|
component: EditableCell,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default component;
|
||||||
|
|
||||||
|
type OwnProps = {
|
||||||
|
changeHandler: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RegularEditableCell = ({ changeHandler }: OwnProps) => {
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={lightTheme}>
|
||||||
|
<div data-testid="content-editable-parent">
|
||||||
|
<EditableCell content={''} changeHandler={changeHandler} />,
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
17
front/src/components/table/__tests__/EditableCell.test.tsx
Normal file
17
front/src/components/table/__tests__/EditableCell.test.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
import { RegularEditableCell } from '../__stories__/EditableCell.stories';
|
||||||
|
|
||||||
|
it('Checks the EditableCell editing event bubbles up', async () => {
|
||||||
|
const func = jest.fn(() => null);
|
||||||
|
const { getByTestId } = render(<RegularEditableCell changeHandler={func} />);
|
||||||
|
|
||||||
|
const parent = getByTestId('content-editable-parent');
|
||||||
|
expect(parent).not.toBeNull();
|
||||||
|
const editable = parent.querySelector('[contenteditable]');
|
||||||
|
expect(editable).not.toBeNull();
|
||||||
|
editable && userEvent.click(editable);
|
||||||
|
userEvent.keyboard('a');
|
||||||
|
expect(func).toBeCalled();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user