Rendering

This article contains information and guidelines for kendo components rendering in the kendo-themes repository.

In This Article

• Overview
• Contribution Guidelines
  • Specs
  • Templates
  • Tests
• Inspect Markup
• Discussion Group

Overview

The rendering of each Kendo Component is defined in the /packages/html/src/{component} folders through specs, templates, and tests. The layout of each component folder is as follows:

├── templates/
│   └── template.tsx (templates)
├── tests/
│   └── test.tsx (tests)
├── component.spec.tsx (specs)
├── index.ts (index)

Contribution Guidelines

Specs

Specifications (specs) are the fundamental elements that define a component's rendering. They outline the options, states, and properties of the component's elements, including their classes, default options, and HTML structure under various conditions and their behavior. Specs serve as the building blocks for the overall structure of the component.

Example: button spec

Templates

Templates are the key blocks of the rendering test process and are located in the templates/ folder of each component. They utilize the specs to provide practical examples of the components. The purpose of templates is to define various component examples that serve as reference points for rendering tests. The testing suites use these templates, and their rendering results are compared to the actual rendering of the components.

When creating templates for in the kendo-themes repository, follow these guidelines to ensure quality and consistency:

1. Realistic and Applicable Templates:

   • Ensure templates reflect scenarios that are achievable using the actual suites' component initialization.
   • Avoid introducing states or configurations that cannot be replicated in the suite's component.

2. Keep It Simple and Specific:

   • Templates should be straightforward, focused on a single purpose, and designed to test one specific example or scenario.
   • Avoid overcomplicating templates with multiple test cases inside them.

3. Consistency in Data and Configuration:

   • Use consistent data and item configuration across templates to enhance simplicity and maintainability.
   • Standardize naming conventions and properties to avoid confusion.

4. Debug and Validate Template Output:

   • Ensure that templates provide valid and valuable rendering content for the test scenarios they cover.
   • Debug the output HTML of the template to confirm it renders as intended.

Example: icon button template, text button template

Tests

The main purpose of the tests is to utilize the specs and templates in different scenarios, where all options, states, fillModes, sizes, props, and other configurable properties test cases are covered. The test's rendering is used for the Visual Tests of the kendo-themes repo.

Example: button test

Inspect Markup

There are several methods for inspecting the component's html markup rendering.

1. The first method involves directly inspecting the markup in the browser using kendo-themes local server. To do this, follow these steps:

   • Download the kendo-themes repository.
   • Install the necessary Node modules by running npm install.
   • Compile the themes with the command npm run sass.
   • Start the development server using npm start.

   Once these steps are complete, you can access the localhost development server in your browser at the following URL: http://localhost:3000/packages/html/dist/{component}/tests/{test-name}. From there, navigate through each component and test to inspect the markup directly in the browser.

2. Another method is to locate the HTML markup for a specific component test directly in the /tests/{component}/{test-name} folder of the Kendo Themes repository. This folder contains the most up-to-date HTML markups for all component tests, serving as a reliable source of truth. The visual representation of this markup can be found in the /tests/_output/{theme}/{component}/{test-name} folders, where a snapshot is included for every theme and component test.

Discussion Group

The kendo-themes repository features a dedicated discussion category for HTML component specifications. You can add feedback, raise discrepancies, and provide suggestions there.

HTML Component Specs