How to use @open-wc/testing-helpers - 10 common examples

it('upgrades elements inserted via importNode to detached element', async () => {
      const name = generateName();

      const iframe = await fixture('');
      const foreignDocument = iframe.contentWindow.document;
      foreignDocument.body.innerHTML = `<div><a is=""></a></div>`;

      // eslint-disable-next-line prefer-destructuring
      const nodeToImport = foreignDocument.body.children[0];

      class Foo extends HTMLAnchorElement {}
      defineCBE(Foo, 'a', name);

      const wrapper = document.importNode(nodeToImport, true);
      expect(wrapper.children[0] instanceof Foo).toBeTruthy();
    });
  });

this.attachShadow({mode: 'open'});
        }

        public connectedCallback(): void {
          // tslint:disable-next-line:no-inner-html
          this.shadowRoot!.innerHTML = `
            <div></div>
            <div class="wrapper">
              <div>Test text</div>
            </div>
          `;
        }
      }

      const tag = defineCE(Test);
      const test = await fixture(`&lt;${tag}&gt;`);

      expect(test.target).toEqual(jasmine.any(HTMLElement));
      expect(test.target.textContent).toBe('Test text');
    });

public [propertyChangedCallback](...args: unknown[]): void {
          propertyChangedCallbackSpy(...args);
        }

        public [internalChangedCallback](...args: unknown[]): void {
          internalChangedCallbackSpy(...args);
        }

        protected [render](): null {
          return null;
        }
      }

      await customElements.whenDefined(tag);

      const test = fixtureSync(`<${tag}>`);

      test.attributeChangedCallback('attr', 'old', 'new');
      test[propertyChangedCallback]('attr', 'old', 'new');
      test[internalChangedCallback]('attr', 'old', 'new');

      await test.updateComplete;

      expect(attributeChangedCallbackSpy).not.toHaveBeenCalled();
      expect(propertyChangedCallbackSpy).not.toHaveBeenCalled();
      expect(internalChangedCallbackSpy).not.toHaveBeenCalled();
      // only during the connection
      expect(schedulerSpy).toHaveBeenCalledTimes(1);
    });

class Bar extends HTMLAnchorElement {
        disconnectedCallback() {
          disconnectedCallbackSpy();
        }
      }
      const name = defineCBE(Bar, 'a');

      class Foo extends HTMLElement {
        constructor() {
          super();
          const root = this.attachShadow({mode: 'open'});
          root.innerHTML = `<a is=""></a>`;
        }
      }

      const tag = defineCE(Foo);
      const foo = await fixture(`&lt;${tag}&gt;`);

      // eslint-disable-next-line prefer-destructuring
      const bar = foo.shadowRoot.children[0];

      const promise = waitForMutationObserverChange(
        foo.shadowRoot,
        observeChildren,
      );
      bar.parentNode.removeChild(bar);

      await promise;

      expect(disconnectedCallbackSpy).toHaveBeenCalledTimes(1);
    });

afterEach(() => {
    if (cachedWrappers) {
      cachedWrappers.forEach(wrapper => {
        document.body.removeChild(wrapper);
      });
    }
    cachedWrappers.length = 0; // reset it like this as we can't reassign it
  });
}

afterEach(() => {
    if (cachedWrappers) {
      cachedWrappers.forEach(wrapper => {
        document.body.removeChild(wrapper);
      });
    }
    cachedWrappers.length = 0; // reset it like this as we can't reassign it
  });
}

it('throws an error if no provider exists for context', done => {
    @consumer
    class Consumer extends CustomElement {
      @value public contextValue!: number;
    }

    const tag = defineCE(Consumer);

    window.onerror = message => {
      expect(message).toContain('No provider found for Consumer');
      done();
    };

    fixture(`<${tag}>`);
  });

it('initializes and fills "observedAttributes"', () => {
      class Test extends CustomElement {
        public static readonly observedAttributes: ReadonlyArray = [];

        @attribute('a1', Boolean)
        public attr1: boolean | null = null;

        @attribute('a2', String)
        public attr2: string | null = null;
      }

      defineCE(Test);
      expect(Test.observedAttributes).toEqual(['a1', 'a2']);
    });

@gear() public readonly state!: FormState;

          @option()
          public onSubmit(): void {}
        }

        @field()
        class Field extends CustomElement {
          @gear() public readonly formApi!: FormApi;
          @gear() public readonly input!: FieldInputProps;
          @gear() public readonly meta!: FieldMetaProps;

          @option() public readonly name: string = 'test';
        }

        const fieldTag = defineCE(Field);
        const formTag = defineCE(Form);

        const formElement = await fixture(`
          <${formTag}>
            <${fieldTag}>
              <input type="text">
            
          
        `);

        const inputElement = formElement.querySelector('input')!;

        inputElement.dispatchEvent(new Event('focusin', {bubbles: true}));

        expect(state.focus).toHaveBeenCalled();
      });

it('provides context for all consumers', async () => {
    @provider
    class Provider extends CustomElement {
      @value public providingValue: number = 2;
    }

    @consumer
    class Consumer extends CustomElement {
      @value public contextValue!: number;
    }

    const providerTag = defineCE(Provider);
    const consumerTag = defineCE(Consumer);

    const providerElement = await fixture(`
        <${providerTag}>
          <${consumerTag}>
          <${consumerTag}>
        
      `);

    const [consumerElement1, consumerElement2] = Array.from(
      providerElement.children as any,
    );

    expect(consumerElement1.contextValue).toBe(2);
    expect(consumerElement2.contextValue).toBe(2);
  });