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();
});

YonatanKra

export * from './login';

YonatanKra

it('should remove `user-status-change` listener to the old authComponent', () => {
    const addEventListenerSpy = vi.spyOn(HTMLElement.prototype, 'addEventListener');
    app.connectedCallback();
    const oldAuthComponent = authComponent;  
    const removeEventListenerSpy = vi.spyOn(oldAuthComponent, 'removeEventListener');   
    app.disconnectedCallback();
    app.connectedCallback();
    expect(addEventListenerSpy).toHaveBeenCalledWith('user-status-change', expect.any(Function));
    expect(removeEventListenerSpy).toHaveBeenCalledWith('user-status-change', expect.any(Function));
    expect(removeEventListenerSpy.mock.calls[0][1]).toBe(addEventListenerSpy.mock.calls[0][1]);

YonatanKra

export class App extends HTMLElement{

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

YonatanKra

import { App } from './app';

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

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

YonatanKra

import { App } from './app';

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

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

YonatanKra

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);
    });