YonatanKra

<div id="buttons-wrapper" class="vvd-root">
            <vwc-button label="ghost" appearance="ghost" role="presentation"><input style="display: none;" slot="form-associated-proxy" type="undefined">
		<!----> <button class="control appearance-ghost" value="">
		<!----><slot name="icon" aria-hidden="true"></slot>
		<!----><span class="text" role="presentation">ghost</span>
	</button>
		
	<style class="fast-style-class-1">:host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-

YonatanKra

const script = document.createElement('script');
script.type = 'module';
script.src = 'https://unpkg.com/@vonage/vivid@latest/button';
const div = document.createElement('div');
div.innerHTML = `
<style>
            @import "https://unpkg.com/@vonage/vivid@latest/styles/tokens/theme-light.css";
            @import "https://unpkg.com/@vonage/vivid@latest/styles/core/all.css";
            @import "https://unpkg.com/@vonage/vivid@latest/styles/fonts/spezia-variable.css";

YonatanKra

import 'global-jsdom/register';
import '@vonage/vivid/button';

function getAllNestedShadowRootsParents(element) {
    const nestedShadowRoots = [];

    function traverseShadowRoot(node) {
        if (node.shadowRoot) {
            nestedShadowRoots.push(node);
            node.shadowRoot.querySelectorAll('*').forEach(child => {

YonatanKra

import http from 'http';
import fs from 'fs';
import path from 'path';

const CONTENT_TYPES = {
    '.js': 'text/javascript',
    '.css': 'text/css',
    '.png': 'image/png',
    '.jpg': 'image/png',
    '.gif': 'image/png',

YonatanKra

import http from 'http';
import fs from 'fs';
import path from 'path';

import * as routes from './routes/index.mjs';
const CONTENT_TYPES = {
    '.js': 'text/javascript',
    '.mjs': 'text/javascript',
    '.css': 'text/css',
    '.png': 'image/png',

YonatanKra

it('should display an alert if user is logged in and email not verified', () => {
    app.connectedCallback();
    authComponent.isUserEmailVerified.mockReturnValue(false);
    const spy = vi.spyOn(app, 'alert');
    setLoginStatus(true);
    expect(spy).toHaveBeenCalledWith({message: 'Please verify your email address', title: 'Email not verified'});
});

YonatanKra

describe('alert', () => {
    it('should display an alert with given message and title', () => {
        app.connectedCallback();
        const message = 'some message';
        const title = 'some title';
        app.alert({message, title});
        const alert = app.shadowRoot?.querySelector('#alert');
        expect(alert?.getAttribute('Headline')).toBe(title);
        expect(alert?.getAttribute('text')).toBe(message);
    });

YonatanKra

    async #isUserRegistered(email: string) {
        const signInMethods = await fetchSignInMethodsForEmail(getAuth(), email);
        return signInMethods.length > 0;
    }

    async #registerUser(email: string, password: string) {
        await createUserWithEmailAndPassword(getAuth(), email, password);
        await sendEmailVerification(getAuth().currentUser!);
    }

YonatanKra

import { App } from './app';

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

class MockAuth extends HTMLElement {
    constructor() {
        super();
        authComponent = this;
    }

YonatanKra

#handleAuthChange = () => {
    this.dispatchEvent(new CustomEvent('user-status-change'));
}
constructor() {
    super();
    onAuthStateChanged(getAuth(), this.#handleAuthChange);
}