Skip to content

Commit

Permalink
test(toolbar): use toolbar html helper in visual tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoomFX @joneff
JoomFX authored and joneff committed Dec 8, 2022
1 parent 5373b45 commit b1686d2
Show file tree
Hide file tree
Showing 68 changed files with 671 additions and 417 deletions.
5 changes: 3 additions & 2 deletions packages/html/src/chat/tests/chat.tsx
View file
Expand Up @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client';
import { Avatar } from '../../avatar';
import { Button } from '../../button';
import { Textbox } from '../../textbox';
import { Toolbar } from '../../toolbar';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand Down Expand Up @@ -98,7 +99,7 @@ root.render(
</>
}
/>
<div className="k-chat-toolbar k-toolbar">
<Toolbar className="k-chat-toolbar">
<Button className="k-scroll-button k-scroll-button-left k-hidden" fillMode="flat" rounded={null} size={null} icon="arrow-chevron-left"></Button>
<div className="k-toolbar-group k-button-list">
<Button fillMode="flat" icon="reload"></Button>
Expand All @@ -112,7 +113,7 @@ root.render(
<Button fillMode="flat" icon="trash"></Button>
</div>
<Button className="k-scroll-button k-scroll-button-right" fillMode="flat" rounded={null} size={null} icon="arrow-chevron-right"></Button>
</div>
</Toolbar>
</div>
</section>

Expand Down
21 changes: 11 additions & 10 deletions packages/html/src/editor/tests/editor-angular.tsx
View file
Expand Up @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import { Button } from '../../button';
import { ButtonGroup } from '../../button-group';
import { DropdownList } from '../../dropdownlist';
import { Toolbar } from '../../toolbar';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -26,31 +27,31 @@ root.render(
<span>Angular Editor without iFrame; responsive toolbar</span>
<section>
<div style={{ height: "200px" }} className="k-widget k-editor">
<div className="k-editor-toolbar k-toolbar k-toolbar-resizable">
<Toolbar className="k-editor-toolbar" resizable>
<div>
<ButtonGroup>
<Button icon="undo"></Button>
<Button icon="redo"></Button>
</ButtonGroup>
</div>
<Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
</div>
<Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
</Toolbar>
<div className="k-editor-content">
<iframe className="k-iframe" frameBorder="0" src="editor-iFrameContent.html"></iframe>
</div>
</div>
</section>
<section>
<div style={{ height: "200px" }} className="k-widget k-editor">
<div className="k-editor-toolbar k-toolbar k-toolbar-resizable">
<Toolbar className="k-editor-toolbar" resizable>
<div>
<ButtonGroup>
<Button icon="undo"></Button>
<Button icon="redo"></Button>
</ButtonGroup>
</div>
<Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
</div>
<Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
</Toolbar>
<div className="k-editor-content">
<div className="ProseMirror">
<div style={{ position: "relative" }}>
Expand All @@ -77,7 +78,7 @@ root.render(
<span>Angular Editor without iFrame; NO-responsive toolbar</span>
<section>
<div className="k-widget k-editor" style={{ height: "200px" }}>
<div className="k-editor-toolbar k-toolbar">
<Toolbar className="k-editor-toolbar">
<div>
<ButtonGroup>
<Button icon="bold"></Button>
Expand Down Expand Up @@ -113,7 +114,7 @@ root.render(
<div>
<Button icon="image"></Button>
</div>
</div>
</Toolbar>
<div className="k-editor-content k-focus">
<iframe className="k-iframe" frameBorder="0" src="editor-iFrameContent.html"></iframe>
</div>
Expand All @@ -122,7 +123,7 @@ root.render(

<section>
<div className="k-widget k-editor k-readonly" style={{ height: "200px" }}>
<div className="k-editor-toolbar k-toolbar">
<Toolbar className="k-editor-toolbar">
<div>
<ButtonGroup>
<Button icon="bold"></Button>
Expand Down Expand Up @@ -158,7 +159,7 @@ root.render(
<div>
<Button icon="image"></Button>
</div>
</div>
</Toolbar>
<div className="k-editor-content k-focus"><div className="ProseMirror"><p>The Kendo UI Angular Editor allows your users to edit HTML in a familiar, user-friendly way.</p><p>In this version, the Editor provides the core HTML editing engine which includes basic text formatting, hyperlinks, and lists. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li>Text formatting</li><li>Bulleted and numbered lists</li><li>Hyperlinks</li><li>Cross-browser support</li><li>Identical HTML output across browsers</li></ul></div></div>
</div>
</section>
Expand Down
5 changes: 3 additions & 2 deletions packages/html/src/editor/tests/editor-find-replace.tsx
View file
Expand Up @@ -4,6 +4,7 @@ import { ActionButtons } from '../../action-buttons';
import { Button } from '../../button';
import { Checkbox } from '../../checkbox';
import { Textbox } from '../../textbox';
import { Toolbar } from '../../toolbar';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand Down Expand Up @@ -179,7 +180,7 @@ root.render(

<section>
<div className="k-widget k-editor" style={{ height: "150px" }}>
<div className="k-widget k-toolbar">
<Toolbar>
<span className="k-tool-group">
<div className="k-button-group">
<Button icon="bold"></Button>
Expand All @@ -188,7 +189,7 @@ root.render(
<Button icon="find" selected></Button>
</div>
</span>
</div>
</Toolbar>
<div className="k-editor-content"><div className="ProseMirror"><span className="k-text-selected">Word</span> and few more <span className="k-text-highlighted">word</span>s. And yet again. <span className="k-text-highlighted">Word</span>.</div></div>
</div>
</section>
Expand Down
28 changes: 11 additions & 17 deletions packages/html/src/editor/tests/editor-jquery.tsx
View file
Expand Up @@ -4,20 +4,14 @@ import { Button } from '../../button';
import { ColorPicker } from '../../colorpicker';
import { Combobox } from '../../combobox';
import { DropdownList } from '../../dropdownlist';
import { Toolbar } from '../../toolbar';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
);

const styles = `
.k-editor-toolbar .k-overflow-anchor {
position: absolute;
}
`;

root.render(
<>
<style>{styles}</style>
<div id="test-area" className="k-d-grid k-grid-cols-2">

<span>jQuery Editor with iFrame; responsive toolbar</span>
Expand All @@ -28,7 +22,7 @@ root.render(
<tbody>
<tr>
<td className="k-editor-toolbar-wrap">
<div className="k-toolbar k-editor-toolbar k-toolbar-resizable">
<Toolbar className="k-editor-toolbar" resizable>
<div className="k-tool-group k-button-group">
<Button icon="bold"></Button>
<Button icon="italic"></Button>
Expand All @@ -41,8 +35,8 @@ root.render(
<Button icon="align-right"></Button>
<Button icon="align-justify"></Button>
</div>
<Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
</div>
<Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
</Toolbar>
</td>
</tr>
<tr>
Expand All @@ -59,7 +53,7 @@ root.render(
<tbody>
<tr>
<td className="k-editor-toolbar-wrap">
<div className="k-toolbar k-editor-toolbar k-toolbar-resizable">
<Toolbar className="k-editor-toolbar" resizable>
<div className="k-tool-group k-button-group">
<Button icon="bold"></Button>
<Button icon="italic"></Button>
Expand All @@ -72,8 +66,8 @@ root.render(
<Button icon="align-right"></Button>
<Button icon="align-justify"></Button>
</div>
<Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
</div>
<Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
</Toolbar>
</td>
</tr>
<tr>
Expand All @@ -93,7 +87,7 @@ root.render(
<tbody>
<tr>
<td className="k-editor-toolbar-wrap">
<div className="k-toolbar k-editor-toolbar">
<Toolbar className="k-editor-toolbar">
<div className="k-tool-group k-button-group">
<Button icon="bold"></Button>
<Button icon="italic"></Button>
Expand Down Expand Up @@ -152,7 +146,7 @@ root.render(
<div className="k-tool-group k-button-group">
<Button icon="clear-css"></Button>
</div>
</div>
</Toolbar>
</td>
</tr>
<tr>
Expand All @@ -169,7 +163,7 @@ root.render(
<tbody>
<tr>
<td className="k-editor-toolbar-wrap">
<div className="k-toolbar k-editor-toolbar">
<Toolbar className="k-editor-toolbar">
<div className="k-tool-group k-button-group">
<Button icon="bold"></Button>
<Button icon="italic"></Button>
Expand Down Expand Up @@ -228,7 +222,7 @@ root.render(
<div className="k-tool-group k-button-group">
<Button icon="clear-css"></Button>
</div>
</div>
</Toolbar>
</td>
</tr>
<tr>
Expand Down
13 changes: 7 additions & 6 deletions packages/html/src/editor/tests/editor-react.tsx
View file
Expand Up @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import { Button } from '../../button';
import { ColorPicker } from '../../colorpicker';
import { DropdownList } from '../../dropdownlist';
import { Toolbar } from '../../toolbar';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -23,7 +24,7 @@ root.render(
<span>React Editor without iFrame</span>
<section>
<div className="k-widget k-editor" style={{ height: "400px" }}>
<div className="k-editor-toolbar k-toolbar">
<Toolbar className="k-editor-toolbar">
<div className="k-tool-group">
<div className="k-button-group">
<Button icon="bold"></Button>
Expand Down Expand Up @@ -116,14 +117,14 @@ root.render(
<div className="k-tool-group">
<Button icon="clear-css"></Button>
</div>
</div>
</Toolbar>
<div className="k-editor-content"><iframe frameBorder="0" className="k-iframe" src="editor-iFrameContent.html"></iframe></div>
</div>
</section>

<section>
<div className="k-widget k-editor" style={{ height: "400px" }}>
<div className="k-editor-toolbar k-toolbar">
<Toolbar className="k-editor-toolbar">
<div className="k-tool-group">
<div className="k-button-group">
<Button icon="bold"></Button>
Expand Down Expand Up @@ -216,23 +217,23 @@ root.render(
<div className="k-tool-group">
<Button icon="clear-css"></Button>
</div>
</div>
</Toolbar>
<div className="k-editor-content"><div className="ProseMirror"><p>The Kendo React Editor allows your users to edit HTML in a familiar, user-friendly way.</p><p>In this version, the Editor provides the core HTML editing engine which includes basic text formatting, hyperlinks, and lists. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li>Text formatting</li><li>Bulleted and numbered lists</li><li>Hyperlinks</li><li>Cross-browser support</li><li>Identical HTML output across browsers</li></ul></div></div>
</div>
</section>

<section></section>
<section>
<div className="k-widget k-editor">
<div className="k-editor-toolbar k-toolbar">
<Toolbar className="k-editor-toolbar">
<div className="k-tool-group">
<div className="k-button-group">
<Button icon="bold"></Button>
<Button icon="italic"></Button>
<Button icon="underline"></Button>
</div>
</div>
</div>
</Toolbar>
<div className="k-editor-content"><div contentEditable="true" className="ProseMirror"><p data-placeholder="Enter some content ..." className="k-placeholder"><br /></p></div></div>
</div>
</section>
Expand Down
5 changes: 3 additions & 2 deletions packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
View file
Expand Up @@ -4,6 +4,7 @@ import { Button } from '../../button';
import { Icon } from '../../icon';
import { MenuItem, MenuList } from '../../menu';
import { Popup } from '../../popup';
import { Toolbar } from '../../toolbar';
import { Treeview, TreeviewItem } from '../../treeview';

const root = ReactDOM.createRoot(
Expand All @@ -29,10 +30,10 @@ root.render(
<div className="k-widget k-filemanager">
{/* Header */}
<div className="k-filemanager-header">
<div className="k-filemanager-toolbar k-toolbar k-widget">
<Toolbar className="k-filemanager-toolbar">
<Button>New Folder</Button>
<Button>Upload</Button>
</div>
</Toolbar>
</div>

<div className="k-filemanager-content-container">
Expand Down
5 changes: 3 additions & 2 deletions packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
View file
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import { Button } from '../../button';
import { Icon } from '../../icon';
import { Toolbar } from '../../toolbar';
import { Treeview, TreeviewItem } from '../../treeview';

const root = ReactDOM.createRoot(
Expand All @@ -26,10 +27,10 @@ root.render(
<div className="k-widget k-filemanager">
{/* Header */}
<div className="k-filemanager-header">
<div className="k-filemanager-toolbar k-toolbar k-widget">
<Toolbar className="k-filemanager-toolbar">
<Button>New Folder</Button>
<Button>Upload</Button>
</div>
</Toolbar>
</div>

<div className="k-filemanager-content-container" >
Expand Down
9 changes: 5 additions & 4 deletions packages/html/src/filemanager/tests/filemanager-gridview.tsx
View file
Expand Up @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import { Button } from '../../button';
import { ButtonGroup } from '../../button-group';
import { Icon } from '../../icon';
import { Toolbar } from '../../toolbar';
import { Treeview, TreeviewItem } from '../../treeview';

const root = ReactDOM.createRoot(
Expand All @@ -17,14 +18,14 @@ root.render(
<div className="k-widget k-filemanager">
{/* Header */}
<div className="k-filemanager-header">
<div className="k-filemanager-toolbar k-toolbar k-widget k-toolbar-resizable">
<Toolbar className="k-filemanager-toolbar" resizable>
<Button>New Folder</Button>
<Button>Upload</Button>
<ButtonGroup>
<Button icon="grid-layout"></Button>
<Button icon="grid" selected></Button>
</ButtonGroup>
</div>
</Toolbar>
</div>

<div className="k-filemanager-content-container">
Expand Down Expand Up @@ -113,14 +114,14 @@ root.render(
<div className="k-widget k-filemanager">
{/* Header */}
<div className="k-filemanager-header">
<div className="k-filemanager-toolbar k-toolbar k-widget k-toolbar-resizable">
<Toolbar className="k-filemanager-toolbar" resizable>
<Button>New Folder</Button>
<Button>Upload</Button>
<ButtonGroup>
<Button icon="grid-layout"></Button>
<Button icon="grid" selected></Button>
</ButtonGroup>
</div>
</Toolbar>
</div>

<div className="k-filemanager-content-container">
Expand Down

0 comments on commit b1686d2

Please sign in to comment.