@open-wc/testing

import { expect, fixture, html, chai, assert, should } from '@open-wc/testing/pure';

import { expect, fixture, html, chai, assert, should } from '@open-wc/testing';

const { expect, fixture, html, chai, assert, should } = require('@open-wc/testing/pure');

import { expect, fixture, html, elementUpdated } from '@open-wc/testing/pure';

describe('MyElement', () => {
  it('renders correctly', async () => {
    // Create a fixture with lit-html template
    const el = await fixture(html`<my-element name="test"></my-element>`);
    
    // Test DOM structure with semantic comparison (requires main import for plugin)
    // expect(el).dom.to.equal('<my-element name="test"></my-element>');
    
    // Test accessibility (requires main import for plugin)
    // await expect(el).to.be.accessible();
    
    // Basic DOM testing (always works)
    expect(el.tagName.toLowerCase()).to.equal('my-element');
    expect(el.getAttribute('name')).to.equal('test');
    
    // Test element behavior
    el.name = 'updated';
    await elementUpdated(el);
    expect(el.textContent).to.include('updated');
  });
  
  it('handles events', async () => {
    const el = await fixture(html`<button>Click me</button>`);
    let clicked = false;
    
    el.addEventListener('click', () => clicked = true);
    el.click();
    
    expect(clicked).to.be.true;
  });
});

const chai: typeof Chai;
const expect: typeof Chai.expect;
const assert: typeof Chai.assert;
const should: typeof Chai.should;

import { expect, assert, should } from '@open-wc/testing/pure';

// Expect style
expect(value).to.equal(42);
expect(element).to.have.class('active');

// Assert style  
assert.equal(value, 42);
assert.isAccessible(element);

// Should style
value.should.equal(42);
element.should.have.class('active');

/**
 * Asynchronously renders template and puts it in DOM, awaiting element updates
 */
function fixture<T extends Element>(
  template: LitHTMLRenderable, 
  options?: FixtureOptions
): Promise<T>;

/**
 * Synchronously renders template and puts it in DOM
 */
function fixtureSync<T extends Element>(
  template: LitHTMLRenderable, 
  options?: FixtureOptions
): T;

/**
 * Specifically handles lit-html templates for async fixture setup
 */
function litFixture<T extends Element>(
  template: LitHTMLRenderable, 
  options?: FixtureOptions
): Promise<T>;

/**
 * Synchronous version of litFixture
 */
function litFixtureSync<T extends Element>(
  template: LitHTMLRenderable, 
  options?: FixtureOptions
): T;

/**
 * Cleans up all defined fixtures by removing wrapper nodes from DOM
 */
function fixtureCleanup(): void;

interface FixtureOptions {
  render?: Function;
  parentNode?: Element;
  scopedElements?: ScopedElementsMap;
}

type LitHTMLRenderable = 
  | TemplateResult 
  | TemplateResult[]
  | Node | Node[]
  | string | string[]
  | number | number[]
  | boolean | boolean[];

import { fixture, fixtureSync, fixtureCleanup, html } from '@open-wc/testing/pure';

// Async fixture creation
const el = await fixture(html`<div>Hello World</div>`);
const el2 = await fixture('<span>Text content</span>');

// Sync fixture creation
const syncEl = fixtureSync(html`<p>Immediate render</p>`);

// Custom parent node
const customEl = await fixture(html`<div>Child</div>`, {
  parentNode: document.getElementById('container')
});

// Clean up all fixtures (usually in afterEach)
afterEach(() => {
  fixtureCleanup();
});

/**
 * Creates lit-html templates for testing (tagged template literal)
 */
const html: (strings: TemplateStringsArray, ...values: any[]) => TemplateResult;

/**
 * Allows dynamic tag names in lit-html templates (for testing only)
 */
function unsafeStatic(value: string): StaticValue;

import { fixture, html, unsafeStatic } from '@open-wc/testing/pure';

// Basic template
const el = await fixture(html`<div class="test">Content</div>`);

// Template with expressions
const name = 'Alice';
const el2 = await fixture(html`<span>Hello ${name}</span>`);

// Dynamic tag names (use carefully)
const tagName = unsafeStatic('my-element');
const el3 = await fixture(html`<${tagName} prop="value"></${tagName}>`);

/**
 * Awaits element update completion (supports Lit, Stencil, generic elements)
 */
function elementUpdated<T extends Element>(el: T): Promise<T>;

/**
 * Registers new custom element with auto-generated unique name
 */
function defineCE<T extends HTMLElement>(klass: Constructor<T>): string;

type Constructor<T = {}> = new (...args: any[]) => T;

import { fixture, elementUpdated, defineCE, html } from '@open-wc/testing/pure';

// Wait for element updates
const el = await fixture(html`<my-element></my-element>`);
el.someProperty = 'new value';
await elementUpdated(el); // Waits for Lit/Stencil updates

// Register custom element for testing
class TestElement extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Test Element';
  }
}
const tagName = defineCE(TestElement); // Returns 'test-0', 'test-1', etc.
const el2 = await fixture(`<${tagName}></${tagName}>`);

/**
 * Listens for one event and resolves with the event object
 */
function oneEvent(
  eventTarget: EventTarget, 
  eventName: string
): Promise<Event>;

/**
 * Like oneEvent but automatically calls preventDefault() on the event
 */
function oneDefaultPreventedEvent(
  eventTarget: EventTarget, 
  eventName: string
): Promise<Event>;

/**
 * Focuses element with IE11 compatibility workarounds
 */
function triggerFocusFor(element: HTMLElement): Promise<void>;

/**
 * Blurs element with IE11 compatibility workarounds
 */
function triggerBlurFor(element: HTMLElement): Promise<void>;

import { fixture, oneEvent, oneDefaultPreventedEvent, triggerFocusFor } from '@open-wc/testing/pure';

// Listen for custom events
const el = await fixture(html`<my-button></my-button>`);
const eventPromise = oneEvent(el, 'my-custom-event');
el.dispatchEvent(new CustomEvent('my-custom-event', { detail: 'data' }));
const event = await eventPromise;
console.log(event.detail); // 'data'

// Prevent default behavior
const link = await fixture(html`<a href="/test">Link</a>`);
const clickPromise = oneDefaultPreventedEvent(link, 'click');
link.click();
await clickPromise; // Event was prevented

// Focus management
const input = await fixture(html`<input type="text">`);
await triggerFocusFor(input);
expect(document.activeElement).to.equal(input);

/**
 * Resolves after specified milliseconds using setTimeout
 */
function aTimeout(ms: number): Promise<void>;

/**
 * Resolves after requestAnimationFrame
 */
function nextFrame(): Promise<void>;

/**
 * Waits until predicate returns truthy value, polling at intervals
 */
function waitUntil(
  predicate: () => unknown | Promise<unknown>, 
  message?: string, 
  options?: { interval?: number; timeout?: number }
): Promise<void>;

import { aTimeout, nextFrame, waitUntil } from '@open-wc/testing/pure';

// Simple timeout
await aTimeout(100); // Wait 100ms

// Wait for animation frame
await nextFrame(); // Wait for next render cycle

// Wait for condition with polling
const el = await fixture(html`<div></div>`);
setTimeout(() => el.classList.add('loaded'), 50);

await waitUntil(
  () => el.classList.contains('loaded'),
  'Element should be loaded',
  { interval: 10, timeout: 1000 }
);

/**
 * Detects Internet Explorer browser
 */
function isIE(): boolean;

import { isIE } from '@open-wc/testing/pure';

if (isIE()) {
  // Skip test or use IE-specific behavior
  console.log('Running in Internet Explorer');
}

// Available on any DOM element via expect()
interface Assertion {
  dom: Assertion;      // Compare full DOM trees semantically
  lightDom: Assertion; // Compare light DOM only
}

// Additional methods on dom/lightDom assertions
interface Assertion {
  equal(expected: string): Assertion;         // Semantic equality
  equalSnapshot(name?: string): Assertion;   // Snapshot testing
}

import { expect, fixture } from '@open-wc/testing/pure';

// Semantic DOM comparison ignores formatting
const el = await fixture(`<div><!-- comment --><h1>  Hello  </h1>  </div>`);
expect(el).dom.to.equal('<div><h1>Hello</h1></div>');

// Light DOM comparison (excludes shadow DOM)
expect(el).lightDom.to.equal('<h1>Hello</h1>');

// Snapshot testing (when supported by test runner)
expect(el).dom.to.equalSnapshot();
expect(el).dom.to.equalSnapshot('custom-name');

interface Assertion {
  accessible(options?: A11yOptions): Promise<Assertion>;
}

interface A11yOptions {
  ignoredRules?: string[];  // Skip specific axe rules
  done?: Function;          // Callback for async testing patterns
}

// Also available on assert interface
declare namespace assert {
  function isAccessible(
    element: Element, 
    options?: A11yOptions
  ): Promise<void>;
}

import { expect, assert, fixture, html } from '@open-wc/testing/pure';

// Basic accessibility testing
const button = await fixture(html`<button>Click me</button>`);
await expect(button).to.be.accessible();

// Ignore specific rules
const problematicEl = await fixture(html`<div aria-labelledby="missing-id"></div>`);
await expect(problematicEl).to.be.accessible({
  ignoredRules: ['aria-allowed-attr']
});

// Assert style
const form = await fixture(html`<form><label>Name <input></label></form>`);
await assert.isAccessible(form);

// Negation for expected failures
const badEl = await fixture(html`<div aria-labelledby="missing"></div>`);
await expect(badEl).not.to.be.accessible();

// Re-exported from @esm-bundle/chai
type Chai = typeof import('chai');

// Fixture configuration
interface FixtureOptions {
  render?: Function;
  parentNode?: Element;
  scopedElements?: ScopedElementsMap;
}

// Template types for fixture creation
type LitHTMLRenderable = 
  | TemplateResult 
  | TemplateResult[]
  | Node | Node[]
  | string | string[]
  | number | number[]
  | boolean | boolean[];

// Event handling types
type OneEventFn = <TEvent extends Event = CustomEvent>(
  eventTarget: EventTarget, 
  eventName: string
) => Promise<TEvent>;

// Element constructor type
type Constructor<T = {}> = new (...args: any[]) => T;

// Accessibility testing options
interface A11yOptions {
  ignoredRules?: string[];
  done?: Function;
}

// Timing utility options
interface WaitUntilOptions {
  interval?: number;    // Polling interval in ms (default: 50)
  timeout?: number;     // Total timeout in ms (default: 1000)
}

import { expect, fixture, html, elementUpdated } from '@open-wc/testing/pure';

describe('Component Tests', () => {
  it('creates fixtures and tests elements', async () => {
    const el = await fixture(html`<div class="test">Hello</div>`);
    expect(el.textContent).to.equal('Hello');
    expect(el.className).to.equal('test');
  });
});