Name		Name	Last commit message	Last commit date
parent directory ..
_output		_output
action-buttons		action-buttons
action-sheet		action-sheet
appbar		appbar
autocomplete		autocomplete
avatar		avatar
badge		badge
barcode		barcode
bottom-nav		bottom-nav
breadcrumb		breadcrumb
button-group		button-group
button		button
calendar		calendar
captcha		captcha
card		card
chart		chart
chat		chat
checkbox		checkbox
chip		chip
coloreditor		coloreditor
colorgradient		colorgradient
colorpalette		colorpalette
colorpicker		colorpicker
column-menu		column-menu
combobox		combobox
context-menu		context-menu
dateinput		dateinput
datepicker		datepicker
daterangepicker		daterangepicker
datetime-selector		datetime-selector
datetimepicker		datetimepicker
dialog		dialog
dock-manager		dock-manager
drawer		drawer
drop-hint		drop-hint
dropdowngrid		dropdowngrid
dropdownlist		dropdownlist
dropdowntree		dropdowntree
dropzone		dropzone
editor		editor
expansion-panel		expansion-panel
fab		fab
filemanager		filemanager
filter		filter
floating-label		floating-label
form		form
gantt		gantt
grid		grid
html		html
icon		icon
imageeditor		imageeditor
layout		layout
list		list
listbox		listbox
listgroup		listgroup
listview		listview
loader		loader
loading		loading
map		map
maskedtextbox		maskedtextbox
mediaplayer		mediaplayer
menu-button		menu-button
menu		menu
message-box		message-box
multiselect		multiselect
multiselecttree		multiselecttree
multiviewcalendar		multiviewcalendar
notification		notification
numerictextbox		numerictextbox
orgchart		orgchart
pager		pager
panelbar		panelbar
pdf-viewer		pdf-viewer
pivotgrid		pivotgrid
popover		popover
popup		popup
progressbar		progressbar
prompt		prompt
qrcode		qrcode
quick-replies		quick-replies
radio		radio
rating		rating
scheduler		scheduler
scrollview		scrollview
searchbox		searchbox
signature		signature
skeleton		skeleton
slider		slider
split-button		split-button
splitter		splitter
spreadsheet		spreadsheet
stepper		stepper
switch		switch
table		table
tabstrip		tabstrip
taskboard		taskboard
tests		tests
textarea		textarea
textbox		textbox
tilelayout		tilelayout

README.md

Visual Tests

Overview

To guard against regressions and make pull request reviews easier, the CI build automatically generates:

an .html output page in tests/[component]/ for each visual test from packages/html/[component]/tests/. The generated page contains the vanilla HTML output of the source page.
screenshots of the sample pages in tests/[component]/. This happens automatically for all feature branches.

The output pages contain static HTML that represents:

The recommended rendering for components that use the theme.
Actual rendering in various suites that may not match the reference rendering.

Creating Images Locally

To generate screenshots for a specific theme:

Build the theme with npm run sass:flat or npm run dart:flat
Run npm run create-screenshots <theme>, substituting <theme> with a theme name.

These steps will create new screenshots in tests/_output. Note that due to platform differences, all of the files will be marked as changed.

Do not commit local changes to tests/.

Authoring Tests

The visual tests are created in the packages/html folder. For more information on how to create new ones check the packages/html/README.md file.

Folder Structure

tests
├── _output          # Output images
│   ├── bootstrap
│   │   ├── button
│   │   │   ├── button
│   │   │   ├── button-size
│   │   │   └── ...
│   │   ├─── dateinput
│   │   │   ├── dateinput
│   │   │   ├── dateinput-flat
│   │   │   └── ...
│   │   ├─── grid
│   │   │   ├── grid
│   │   │   ├── grid-grouping
│   │   │   └── ...
│   │   └── ...
│   ├── default
│   │   ├── button
│   │   │   ├── button
│   │   │   ├── button-size
│   │   │   └── ...
│   │   ├─── dateinput
│   │   │   ├── dateinput
│   │   │   ├── dateinput-flat
│   │   │   └── ...
│   │   ├─── grid
│   │   │   ├── grid
│   │   │   ├── grid-grouping
│   │   │   └── ...
│   │   └── ...
│   └── material
│   │   ├── button
│   │   │   ├── button
│   │   │   ├── button-size
│   │   │   └── ...
│   │   ├─── dateinput
│   │   │   ├── dateinput
│   │   │   ├── dateinput-flat
│   │   │   └── ...
│   │   ├─── grid
│   │   │   ├── grid
│   │   │   ├── grid-grouping
│   │   │   └── ...
│   │   └── ...
├── button                   # Automatically generated .html output pages organized in folders per component
│   ├── button.html          # Reference rendering
│   ├── button-size.html     # Reference rendering
│   └── ...
├── dateinput
└── grid
    ├── grid.html                   # Reference rendering
    ├── grid-angular.html           # Current rendering in KUI/Angular
    ├── grid-grouping.html          # Scenario, reference rendering
    ├── grid-grouping-blazor.html   # Scenario, as rendered in Blazor UI
    └── ...

Files

tests

Directory actions

More options

Directory actions

More options

Latest commit

History

tests

Folders and files

parent directory