als-component/tests/test.js

lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.

const {describe,it} = require('node:test')
const assert = require('node:assert')
const Component = require('../index')
describe("Component Class Tests", () => {
   // Тест на создание экземпляра
   it("should create an instance of Component", () => {
      class TestComponent extends Component {
         render() {
            return `<div>Hello World</div>`;
         }
      }

      const instance = new TestComponent();
      assert(instance instanceof Component, "Instance is not of type Component");
   });

   // Тест на асинхронность метода render
   it("should correctly detect if render method is async", () => {
      class SyncComponent extends Component {
         render() {
            return `<div>Sync Render</div>`;
         }
      }

      class AsyncComponent extends Component {
         async render() {
            return `<div>Async Render</div>`;
         }
      }

      assert.strictEqual(SyncComponent.isAsync, false, "SyncComponent should not be async");
      assert.strictEqual(AsyncComponent.isAsync, true, "AsyncComponent should be async");
   });

   // Тест на метод call()
   it("should call the render method and return HTML", () => {
      class SimpleComponent extends Component {
         constructor() {super()}
         render() {
            return `<div>Simple Render</div>`;
         }
      }

      const instance = new SimpleComponent();
      const html = instance.call();
      assert.strictEqual(html, `<div component="SimpleComponent">Simple Render</div>`, "call() did not return expected HTML");
   });

   // Тест на метод action()
   it("should add an action and return an ID", () => {
      class ButtonComponent extends Component {
         render() {
            return `<button click="${this.action('click', () => this.update())}">Click Me</button>`;
         }
      }

      const instance = new ButtonComponent();
      const actionId = instance.action('click', () => { });
      assert(actionId.startsWith("ButtonComponent"), "Action ID does not start with component name");
   });

   it("should use the inner content correctly", () => {
      class InnerComponent extends Component {
         render(props, inner) {
            return `<div>${inner}</div>`;
         }
      }

      const instance = new InnerComponent({}, "Inner Content");
      const html = instance.call();
      assert.strictEqual(html, `<div component="InnerComponent">Inner Content</div>`, "Inner content was not rendered correctly");
   });

});

describe("Nested Components Tests", () => {
   // Тест на рендеринг вложенных компонентов
   it("should render nested components correctly", () => {
      class ChildComponent extends Component {
         render() { return `<span>Child</span>` }
      }

      class ParentComponent extends Component {
         render() { return `<div><h1>Parent</h1>${new ChildComponent().call()}</div>` }
      }

      const expected = /*html*/`<div component="ParentComponent"><h1>Parent</h1><span component="ChildComponent">Child</span></div>`
      assert(new ParentComponent().build() === expected)
   });

   // Тест на обновление вложенных компонентов
   it("should update nested components when parent component is updated", () => {
      class ChildComponent extends Component {
         constructor(props) {super(props)}
         render({ count }) {
            return `<span>Child Count: ${count}</span>`;
         }
      }

      class ParentComponent extends Component {
         constructor(props) {super(props)}
         render({ count }) {
            return `<div><h1>Parent</h1>${new ChildComponent({ count }).call()}</div>`;
         }
      }

      const result = new ParentComponent({ count: 1 }).update({ count: 2 });
      const expected = /*html*/`<div component="ParentComponent"><h1>Parent</h1><span component="ChildComponent">Child Count: 2</span></div>`
      assert(result === expected)
   });

   it("should handle nested components with the same class name correctly", () => {
      class ChildComponent extends Component {
         render() {
            return `<span>Child</span>`;
         }
      }
   
      class ParentComponent extends Component {
         render() {
            return `<div>${new ChildComponent().call()}${new ChildComponent().call()}</div>`;
         }
      }
   
      const result = new ParentComponent().update();
      assert(result.match(/span/g).length === 4)
   });

   it("should handle async render method in update", async () => {
   
      class AsyncRenderComponent extends Component {
         constructor(props) {super(props)}
         async render() {
            return new Promise((resolve) => setTimeout(() => resolve(`<div>Async Render</div>`), 100));
         }
      }
   
      const instance = new AsyncRenderComponent();
      const result = await instance.update();
   
      assert(result === /*html*/`<div component="AsyncRenderComponent">Async Render</div>`)
   });

   it("should not throw error if element is not found", () => {
      class MissingElementComponent extends Component {
         render() {
            return `<div>Missing Element</div>`;
         }
      }
   
      const instance = new MissingElementComponent();
      try {
         instance.update()
         assert(true);
      } catch (error) {
         assert(false, "Update method threw an error when element was not found");
      }
   });
});