imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add placeholder for rich text editor (#9613)

Browse source 
* Add placeholder for rich text editor
This commit is contained in:
Florian Duros 2022-11-24 11:31:56 +01:00 • committed by GitHub
parent 8b8d24c24c
commit 7c63d52500
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 109 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

62
test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View file

@ -51,11 +51,12 @@ describe('SendWysiwygComposer', () => {
onChange = (_content: string) => void 0,
onSend = () => void 0,
disabled = false,
isRichTextEnabled = true) => {
isRichTextEnabled = true,
placeholder?: string) => {
return render(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={defaultRoomContext}>
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })} />
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })} placeholder={placeholder} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
@ -164,5 +165,62 @@ describe('SendWysiwygComposer', () => {
expect(screen.getByRole('textbox')).not.toHaveFocus();
});
});
describe.each([
{ isRichTextEnabled: true },
{ isRichTextEnabled: false },
])('Placeholder when %s',
({ isRichTextEnabled }) => {
afterEach(() => {
jest.resetAllMocks();
});
it('Should not has placeholder', async () => {
// When
console.log('here');
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
// Then
expect(screen.getByRole('textbox')).not.toHaveClass("mx_WysiwygComposer_Editor_content_placeholder");
});
it('Should has placeholder', async () => {
// When
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, 'my placeholder');
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
// Then
expect(screen.getByRole('textbox')).toHaveClass("mx_WysiwygComposer_Editor_content_placeholder");
});
it('Should display or not placeholder when editor content change', async () => {
// When
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, 'my placeholder');
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
screen.getByRole('textbox').innerHTML = 'f';
fireEvent.input(screen.getByRole('textbox'), {
data: 'f',
inputType: 'insertText',
});
// Then
await waitFor(() =>
expect(screen.getByRole('textbox'))
.not.toHaveClass("mx_WysiwygComposer_Editor_content_placeholder"),
);
// When
screen.getByRole('textbox').innerHTML = '';
fireEvent.input(screen.getByRole('textbox'), {
inputType: 'deleteContentBackward',
});
// Then
await waitFor(() =>
expect(screen.getByRole('textbox')).toHaveClass("mx_WysiwygComposer_Editor_content_placeholder"),
);
});
});
});