Tauri-demo: add yag-app with yag-greet to main

app.spec.ts

import { App } from './app';

customElements.define('yag-app', App);

describe('app', () => {
    let app: App;
    beforeEach(() => {
        app = document.createElement('yag-app') as App;
        document.body.appendChild(app);
    });
    
    afterEach(() => {
        app.remove();
    });

    it('should be have an open shadow root', () => {
        expect(app.shadowRoot?.mode).toBe('open');        
    });

    it('should set yag-greeter inside the shadow root', () => {
        expect(app.shadowRoot?.querySelector('yag-greeter')).toBeTruthy();
    });
});

app.ts

export const template = `
                <yag-greeter></yag-greeter>
        `;
const templateElement = document.createElement('template');
templateElement.innerHTML = template;

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

main.spec.ts

describe('main', () => {
  it ('should define yag-greeter', () => {
    expect(customElements.get('yag-greeter')).toBeDefined();
  });

  it ('should define yag-app', () => {
    expect(customElements.get('yag-app')).toBeDefined();
  });

  it('should set yag-app inside the body', () => {
    expect(document.body.innerHTML).toBe('<yag-app></yag-app>');
  });
});

main.ts

import { App } from "./components/app";
import { Greeter } from "./components/greeter";

customElements.define("yag-app", App);
customElements.define("yag-greeter", Greeter);

document.body.innerHTML = "<yag-app></yag-app>";