DEV Community

Cover image for 🧪 Unit Testing Tools in WebForms Core 2
Elanat Framework
Elanat Framework

Posted on

🧪 Unit Testing Tools in WebForms Core 2

#testing #webdev #backend #webformscore

WebForms Core technology consists of a client-side library called WebFormsJS and a server-side class called WebForms and the connection between the two. In this technology, you only need to add the WebFormsJS library in the head section of HTML and do the development in the WebForms class on the server in a command-oriented way. So the WebFormsJS library only plays a communication role and you do not develop it! The connection between the two is automatic and has been tested in advance and the probability of errors is very low; However, we at Elanat have added the unit testing tool in version 2 of WebForms Core technology.

WebForms Core Unit Testing

Unit testing is a critical part of modern web development, ensuring that components behave as expected and changes don’t introduce regressions. Before release of WebForms Core 2, we introduce a lightweight and powerful unit testing toolset has been introduced to help developers validate their HTML output directly in the browser. At the heart of this system is the AssertEqual function — a deep comparison utility for DOM elements.

Unlike traditional test frameworks, WebForms Core 2 introduces a built-in testing utility that runs directly in your WebForms Core environment without needing additional dependencies.

🔧 What Is AssertEqual?

AssertEqual(InputPlace, Tag) is a server method in WebForms class, designed to compare two DOM elements — one actual and one expected — and determine whether they are structurally and visually equivalent. It supports both HTML strings and DOM nodes as input, making it flexible for various testing scenarios.

It is recommended to use the AssertEqualByOutputPlace function. This function targets an existing tag instead of the full tag string.

Structure:
AssertEqualByOutputPlace(InputPlace, OutputPlace)

🧠 How It Works

The function performs a multi-layered comparison:

  • Tag Name Matching: Ensures both elements use the same HTML tag.
  • Attribute Comparison: Checks for missing, mismatched, or unexpected attributes.
  • Class List Verification: Compares class names regardless of order.
  • Inline Style Matching: Verifies that inline styles are identical.
  • Form Value Validation: For form elements (input, textarea, select), it compares values and checked states.
  • Child Node Recursion: Performs a deep comparison of child nodes, including text content and nested elements.

All differences are logged using console.info and console.warn, providing clear feedback without interrupting execution.

✅ Key Advantages

Here’s why AssertEqual stands out as a unit testing tool:

Feature Benefit
🔍 Deep DOM Comparison Validates entire structure, including children and text nodes
📝 Form Support Handles values and states of form elements
🎨 Attribute & Style Checks Compares attributes, classes, and inline styles
📋 Clear Reporting Logs readable messages for each mismatch
🧠 Simple API Returns true or false for easy integration
⚙️ Minimalistic Design No extra parameters or configuration needed
🔧 Extensible Can be expanded to support events, computed styles, etc.

🚀 Getting Started

To use AssertEqual, simply pass the actual DOM element and the expected HTML string or node:

Testing with HTML string

form.AssertEqual("myButton", @"<button id="myButton" class="primary">Click Me</button>");
Enter fullscreen mode Exit fullscreen mode

Testing with element

form.AssertEqualByOutputPlace("myButton1", "myButton2");
Enter fullscreen mode Exit fullscreen mode

This makes it ideal for testing dynamic rendering, form generation, and component output in WebForms Core applications.

ℹ️ Big Test

HTML

<div id="actualElement">
    <form id="mainForm" class="form-container" style="background: white; padding: 20px;">
        <h2 class="form-title">User Registration</h2>
        <input type="text" id="username" class="form-input" value="john_doe" required>
        <input type="email" id="email" class="form-input" value="john@example.com">
        <div class="checkbox-group">
            <input type="checkbox" id="newsletter" checked>
            <label for="newsletter">Subscribe to newsletter</label>
        </div>
        <select id="country" class="form-select">
            <option value="us">United States</option>
            <option value="uk" selected>United Kingdom</option>
        </select>
        <textarea id="bio" class="form-textarea">Hello, I'm John!</textarea>
        <button type="submit" id="submitBtn" class="btn-primary" disabled>Register</button>
    </form>
</div>

<div id="differentElement">
    <form id="mainForm" class="form-wrapper" style="background: #f5f5f5; padding: 15px;">
        <h2 class="page-title">User Profile</h2>
        <input type="text" id="username" class="input-field" value="jane_smith">
        <input type="email" id="email" class="input-field" value="jane@test.com" required>
        <div class="options-group">
            <input type="checkbox" id="newsletter">
            <label for="newsletter">Get newsletter updates</label>
        </div>
        <select id="country" class="dropdown-select">
            <option value="us">United States</option>
            <option value="ca" selected>Canada</option>
        </select>
        <textarea id="bio" class="text-area">This is Jane's bio</textarea>
        <button type="button" id="saveBtn" class="btn-success">Save Changes</button>
        <span class="help-text">All fields are required</span>
    </form>
</div>
Enter fullscreen mode Exit fullscreen mode

Server code

form.AssertEqualByOutputPlace("actualElement", "differentElement");
Enter fullscreen mode Exit fullscreen mode

Result in console

🔍 Start unit testing assert equal
ℹ️ [ASSERT FAIL] Class list mismatch: expected [form-wrapper] but got [form-container]
ℹ️ [ASSERT FAIL] Style mismatch: expected "background: #f5f5f5; padding: 15px;" but got "background: white; padding: 20px;"
ℹ️ [ASSERT FAIL] Text mismatch at child index 0: expected "User Profile" but got "User Registration"
ℹ️ [ASSERT FAIL] Attribute mismatch on "required": expected "undefined" but got ""
ℹ️ [ASSERT FAIL] Class list mismatch: expected [input-field] but got [form-input]
ℹ️ [ASSERT FAIL] Value mismatch in <input>: expected "jane_smith" but got "john_doe"
ℹ️ [ASSERT FAIL] Attribute mismatch on "required": expected "" but got "undefined"
ℹ️ [ASSERT FAIL] Class list mismatch: expected [input-field] but got [form-input]
ℹ️ [ASSERT FAIL] Value mismatch in <input>: expected "jane@test.com" but got "john@example.com"
ℹ️ [ASSERT FAIL] Class list mismatch: expected [options-group] but got [checkbox-group]
ℹ️ [ASSERT FAIL] Value mismatch in <input>: expected false but got true
ℹ️ [ASSERT FAIL] Text mismatch at child index 1: expected "Get newsletter updates" but got "Subscribe to newsletter"
ℹ️ [ASSERT FAIL] Class list mismatch: expected [dropdown-select] but got [form-select]
ℹ️ [ASSERT FAIL] Value mismatch in <select>: expected "ca" but got "uk"
ℹ️ [ASSERT FAIL] Class list mismatch: expected [text-area] but got [form-textarea]
ℹ️ [ASSERT FAIL] Text mismatch at child index 0: expected "This is Jane's bio" but got "Hello, I'm John!"
ℹ️ [ASSERT FAIL] Attribute mismatch on "type": expected "button" but got "submit"
ℹ️ [ASSERT FAIL] Class list mismatch: expected [btn-success] but got [btn-primary]
ℹ️ [ASSERT FAIL] Attribute mismatch on "disabled": expected "undefined" but got ""
ℹ️ [ASSERT FAIL] Text mismatch at child index 0: expected "Save Changes" but got "Register"
ℹ️ [ASSERT FAIL] Different number of child nodes: expected 8, got 7
⚠️ [ASSERT FAIL] Differences found
🔍 End unit testing assert equal
Enter fullscreen mode Exit fullscreen mode

🧩 Conclusion

WebForms Core 2 introduces a practical and elegant approach to unit testing with tools like AssertEqual and AssertEqualByOutputPlace. It empowers developers to write meaningful tests for their UI logic without relying on heavy frameworks. Whether you're validating a simple button or a complex form, this tool provides clarity, precision, and flexibility — all within a few lines of code.

Top comments (0)