Tauri-demo: logout button appearance

app.spec.ts

describe('logout button', () => {
    it('should add a logout button to the header when user is logged in', () => {
        isLoggedIn = true;
        app.connectedCallback();
        expect(isLoginButtonVisible()).toBe(true);
    });

    it('should remove the logout button from the header when user is logged out', () => {
        isLoggedIn = true;
        app.connectedCallback();
        isLoggedIn = false;
        app.connectedCallback();
        expect(isLoginButtonHidden()).toBe(true);
    });    

    it('should add a logout button to the header when user logs in', () => {
        isLoggedIn = false;
        app.connectedCallback();
        isLoggedIn = true;
        authComponent.dispatchEvent(new CustomEvent('user-status-change'));
        expect(isLoginButtonVisible()).toBe(true);
    });
    
    it('should remove the logout button from the header when user logs out', () => {
        isLoggedIn = true;
        app.connectedCallback();
        isLoggedIn = false;
        authComponent.dispatchEvent(new CustomEvent('user-status-change'));
        expect(isLoginButtonHidden()).toBe(true);
    });
});

app.ts

get #loginButton() {
    return this.shadowRoot!.getElementById('login-button') as HTMLElement;
}

#setViewAccordingToUserStatus = () => {
    if (!this.#authComponent!.isLoggedIn || this.#authComponent!.isLoggedIn?.() === false) {
        this.#loginButton.setAttribute('slot', 'hidden');
        this.#mainContent.innerHTML = `<yag-login></yag-login>`;
        this.#setLoginListener();
    } else {
        this.#loginButton.setAttribute('slot', 'action-items');
        this.#unsetLoginListener();
        this.#mainContent.innerHTML = `<yag-greeter></yag-greeter>`;
    }
}

constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot!.innerHTML = `
        <vwc-header>
            <h1>Your Awesome Game!</h1> (yag... dah...)
            <vwc-button id="login-button" slot="hidden" appearance="filled" connotation="alert" label="Sign out"></vwc-button>
            <main slot="app-content">
                <vwc-layout gutters="small" id="main-content">
                    Application content
                </vwc-layout>
            </main>
        </vwc-header>
    `;
}