@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight("yellow");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
} from "@angular/core";

@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  @Input("appHighlight") highlightColor = "";

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.highlightColor || "cyan");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight('');
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
}

import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(
      40,
      Math.max(8, +this.size + delta)
    );
    this.sizeChange.emit(this.size);
  }
}

@Output() newItemEvent = new EventEmitter();

@Component({
  selector: "app-zippy",
  template: `
    

      
Toggle
      

        
      
    
  `,
})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter();
  @Output() close = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

test("loads items eventually", async () => {
  // Click button
  fireEvent.click(getByText(node, "Load"));

  // Wait for page to update with query text
  const items = await findByText(node, /Item #[0-9]: /);
  expect(items).toHaveLength(10);
});

test("movie title appears", async () => {
  // element is initially not present...

  // wait for appearance inside an assertion
  await waitFor(() => {
    expect(getByText("the lion king")).toBeInTheDocument();
  });
});

const puppeteer = require("puppeteer");
const {
  getDocument,
  queries,
  waitFor,
} = require("pptr-testing-library");

const { getByTestId, getByLabelText } = queries;

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Grab ElementHandle for document
const $document = await getDocument(page);
// Your favorite query methods are available
const $form = await getByTestId($document, "my-form");
// returned elements are Puppeteer ElementHandles too!
const $email = await getByLabelText($form, "Email");
// interact with puppeteer like usual
await $email.type("pptr@example.com");
// waiting works too!
await waitFor(() => getByText("Loading..."));

await fireEvent.click(getByText("Click me"));

test("movie title goes away", async () => {
  // element is initially present...
  // note use of queryBy instead of getBy to return null
  // instead of throwing in the query itself
  await waitFor(() => {
    expect(queryByText("i, robot")).not.toBeInTheDocument();
  });
});

expect(queryByText("submit")).toBeNull();

// or, if using jest-dom:
import "@testing-library/jest-dom";
expect(queryByText("submit")).not.toBeInTheDocument();

test("movie title no longer present in DOM", async () => {
  // element is removed
  await waitForElementToBeRemoved(() =>
    queryByText("the mummy")
  );
});

// test-utils.js
const domTestingLib = require("@testing-library/dom");
const { queryHelpers } = domTestingLib;

export const queryByTestId =
  queryHelpers.queryByAttribute.bind(null, "data-test-id");
export const queryAllByTestId =
  queryHelpers.queryAllByAttribute.bind(
    null,
    "data-test-id"
  );

export function getAllByTestId(container, id, ...rest) {
  const els = queryAllByTestId(container, id, ...rest);
  if (!els.length) {
    throw queryHelpers.getElementError(
      `Unable to find an element by: [data-test-id="${id}"]`,
      container
    );
  }
  return els;
}

export function getByTestId(...args) {
  // result >= 1
  const result = getAllByTestId(...args);
  if (result.length > 1) {
    throw queryHelpers.getElementError(
      `Found multiple elements with the [data-test-id="${id}"]`,
      container
    );
  }
  return result[0];
}

// re-export with overrides
module.exports = {
  ...domTestingLib,
  getByTestId,
  getAllByTestId,
  queryByTestId,
  queryAllByTestId,
};