Rendering

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

In This Article

• Overview
  • Specs
  • Templates
  • Tests
• Contribution Guidelines

Overview

The rendering of each Kendo Component is defined in the /packages/html/{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

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, as well as 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 the results of their rendering are compared to the actual rendering of the components. 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

Contribution Guidelines

When creating Templates for rendering tests 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.