YonatanKra

import { Firebase } from './firebase';

describe('firebase', () => {
    let firebase: Firebase;

    beforeAll(() => {
        vi.mock('firebase/app', () => {
            return {
                initializeApp: () => 'MockFirebaseApp'
            }

YonatanKra

const numberInput = document.createElement('input');
numberInput.type = 'number';
export function getValidValue(value: string) {
	if (!this.isUserInput) {
		numberInput.value = value;
		return numberInput.value;
	}

	if (value === '' || value === '-' || value === '.') {
		return value;

YonatanKra

import { Auth } from './auth';

describe('login', () => {
    let auth: Auth;

    beforeAll(() => {
        customElements.define('yag-auth', Auth);
    });

    beforeEach(() => {

YonatanKra

  get #loginElement () {
      return this.shadowRoot!.querySelector('yag-login') as HTMLElement;
  }
  #setLoginListener = () => {
      this.#loginElement.addEventListener('login-attempt', this.#handleLoginAttempt);
  }

  #unsetLoginListener = () => {
      this.#loginElement?.removeEventListener('login-attempt', this.#handleLoginAttempt);

YonatanKra

    #handleLoginAttempt = (e: Event) => {
        const { email, password } = (<CustomEvent>e).detail;
        this.#authComponent?.login(email, password);
    }
    #setViewAccordingToUserStatus = () => {
        
        if (!this.#authComponent!.isLoggedIn || this.#authComponent!.isLoggedIn?.() === false) {
            this.shadowRoot!.innerHTML = `<yag-login></yag-login>`;
            const loginElement = this.shadowRoot!.querySelector('yag-login') as HTMLElement;
            loginElement.addEventListener('login-attempt', this.#handleLoginAttempt);

YonatanKra

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

    isLoggedIn?() {
        return isLoggedIn;
    }

YonatanKra

it('should evoke the login function from Auth on `login-attempt` event', () => {
    isLoggedIn = false;
    app.connectedCallback();
    const email = '[email protected]';
    const password = '123456';
    const loginComponent = app.shadowRoot?.querySelector('yag-login');
    const spy = vi.spyOn(authComponent, 'login');
    loginComponent!.dispatchEvent(new CustomEvent('login-attempt', {detail: {email, password}}));
    expect(spy).toHaveBeenCalledWith(email, password);
});

YonatanKra

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "*****************************",
  authDomain: "Your-Project-ID.firebaseapp.com",
  projectId: "Your-Project-ID",

YonatanKra

    #setViewAccordingToUserStatus = () => {
        if (!this.#authComponent!.isLoggedIn || this.#authComponent!.isLoggedIn?.() === false) {
            this.shadowRoot!.innerHTML = `<yag-login></yag-login>`;
        } else {
            this.shadowRoot!.innerHTML = `<yag-greeter></yag-greeter>`;
        }
    }

YonatanKra

it('should display login screen if auth component is not initialized', () => {
      isLoggedIn = true;
      const originalIsLoggedIn = MockAuth.prototype.isLoggedIn;
      MockAuth.prototype.isLoggedIn = undefined;
      app.connectedCallback();
      MockAuth.prototype.isLoggedIn = originalIsLoggedIn;
      expect(getElementInView('yag-login')).toBeTruthy();
});