Tauri-demo - adding the DOM elements

greeter.spec.ts

import { Greeter } from './index';

describe('greeter', () => {
    it('should be defined', () => {
        expect(Greeter).toBeDefined();
    });

    it ('should set a shadow DOM with mode open', () => {
        customElements.define('yag-greeter', Greeter);
        const greeter = document.createElement('yag-greeter');
        expect(greeter.shadowRoot).toBeDefined();
        expect(greeter.shadowRoot?.mode).toBe('open');
    });


    it ('should have a shadow root with mode open', () => {
        const greeter = document.createElement('yag-greeter');
        expect(greeter.shadowRoot?.mode).toBe('open');
    });

    it ('should have greet button inside', () => {
        const greeter = document.createElement('yag-greeter');
        expect(greeter.shadowRoot?.querySelector('#greet-form button')).toBeTruthy();
    });


    it ('should have greet form inside', () => {
        const greeter = document.createElement('yag-greeter');
        expect(greeter.shadowRoot?.querySelector('#greet-form')).toBeTruthy();
    });

    it ('should have greet input inside', () => {
        const greeter = document.createElement('yag-greeter');
        const greetInput = greeter.shadowRoot?.querySelector('#greet-input');
        expect(greetInput?.form).toEqual(greeter.shadowRoot?.querySelector('#greet-form'));
    });

    it ('should have greet message area', () => {
        const greeter = document.createElement('yag-greeter');
        expect(greeter.shadowRoot?.querySelector('#greet-msg')).toBeTruthy();
    });
});

greeter.ts

export const template = `
                <form class="row" id="greet-form">
                    <input id="greet-input" placeholder="Enter a name..." />
                    <button type="submit">Greet</button>
                </form>
        
                <p id="greet-msg"></p>
        `;
const templateElement = document.createElement('template');
templateElement.innerHTML = template;

export class Greeter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    const templateHTML = templateElement.content.cloneNode(true);
    this.shadowRoot?.appendChild(templateHTML);
  }
}