Tallyb

test.use({
  storyPath: 'story name on storybook', // uses to load the component and set the base locators
  fakeTime: '01/01/2023', // fakes time using sinon in the browser
});

test('Should make sure event was fired', async ({ 
 componentLocators, // automatic locators to go to the comget the component root element 
 attachEvent, //automatic event attachement to the component and counting the times it was fired
 getEventMockCallsCount, // returns the number of time the event was called (should be moved to custom expect)
 getEventMockCallsData // returns the data the event was called with 

Tallyb

import { test as base } from '@playwright/test';

const setFakeTime = async (dateTime: string, page: Page): Promise<void> => {
  const fakeNow = new Date(dateTime).valueOf();
  const setFakeTime = async (dateTime: string, page: Page): Promise<void> => {
  const fakeNow = new Date(dateTime).valueOf();
  await page.addInitScript(`{
    // Extend Date constructor to default to fakeNow
    Date = class extends Date {
      constructor(...args) {

Tallyb

await page.goto('your url')

await page.locator('username').fill('username');
await page.locator('password').fill('123456');
await page.locator('text="Submit").click();

// use this to wait for something to show up that the page has completed loading
await page.locator('some locator').waitFor();

// From your example it is not clear what is the selector logic

Tallyb

import {newSpecPage} from '@stencil/core/testing';

import {MyInput} from './input';

describe('MyInput', () => {
   
  it('Should emit thisHappened when input entered', async() => {
    const TEST_VALUE = 'Test Value'
    const page = await newSpecPage({
      components: [ MyInput ],

Tallyb

import { Component, Prop, h, JSX, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'input.css',
  shadow: true
})
export class MyInput {
  @Prop() header: string;

Tallyb

import { newSpecPage } from '@stencil/core/testing';

import { MyFetchComponent } from './fetch';

describe('fetch', () => {

    it('should render with language', async () => {
        const fetchMock = jest.fn().mockImplementation( v => {
            return Promise.resolve({
                ok: true,

Tallyb

import { Component, h, JSX,  Prop, Watch } from '@stencil/core';

@Component({
    tag: 'my-fetch',
    styleUrl: 'fetch.css'
})
export class MyFetchComponent {

    @Prop() language: string;

Tallyb

import { newSpecPage } from '@stencil/core/testing';
import { MyEvent } from './event';

describe('Event', () => {
    let page;
    beforeEach(async () => {
        page = await newSpecPage({
            components: [MyEvent],
            html: `<my-event></my-event>`
        });

Tallyb

import { Component, State, Event, Method, EventEmitter, h , JSX } from '@stencil/core';

@Component({
    tag: 'my-event',
    styleUrl: 'event.css'
})
export class MyEvent {
    @State() buttonFace: string = 'Click Me!';
    @State() clicked: boolean;
  

Tallyb

import { newSpecPage } from '@stencil/core/testing';

import { MyComplexPropComponent } from './complex-prop';

describe('complex prop', () => {

    it ('should change to upper case', () => {
        let cmp = new MyComplexPropComponent();
        let res = cmp.toUpper(['aaa', 'bbb', 'ccc']);
        expect(res).toEqual(['AAA', 'BBB', 'CCC']);