beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [AboutComponent, HighlightDirective],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  }).createComponent(AboutComponent);
  fixture.detectChanges(); // initial binding
});

it("should have skyblue 
", () => {
  const h2: HTMLElement =
    fixture.nativeElement.querySelector("h2");
  const bgColor = h2.style.backgroundColor;
  expect(bgColor).toBe("skyblue");
});

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [HighlightDirective, TestComponent],
  }).createComponent(TestComponent);

  fixture.detectChanges(); // initial binding

  // all elements with an attached HighlightDirective
  des = fixture.debugElement.queryAll(
    By.directive(HighlightDirective)
  );

  // the h2 without the HighlightDirective
  bareH2 = fixture.debugElement.query(
    By.css("h2:not([highlight])")
  );
});

// color tests
it("should have three highlighted elements", () => {
  expect(des.length).toBe(3);
});

it('should color 1st 
 background "yellow"', () => {
  const bgColor =
    des[0].nativeElement.style.backgroundColor;
  expect(bgColor).toBe("yellow");
});

it("should color 2nd 
 background w/ default color", () => {
  const dir = des[1].injector.get(
    HighlightDirective
  ) as HighlightDirective;
  const bgColor =
    des[1].nativeElement.style.backgroundColor;
  expect(bgColor).toBe(dir.defaultColor);
});

it("should bind  background to value color", () => {
  // easier to work with nativeElement
  const input = des[2].nativeElement as HTMLInputElement;
  expect(input.style.backgroundColor).toBe(
    "cyan",
    "initial backgroundColor"
  );

  input.value = "green";

  // Dispatch a DOM event so that Angular responds to the input value change.
  // In older browsers, such as IE, you might need a CustomEvent instead. See
  // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
  input.dispatchEvent(new Event("input"));
  fixture.detectChanges();

  expect(input.style.backgroundColor).toBe(
    "green",
    "changed backgroundColor"
  );
});

it("bare 
 should not have a customProperty", () => {
  expect(bareH2.properties.customProperty).toBeUndefined();
});

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [AboutComponent, HighlightDirective],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  }).createComponent(AboutComponent);
  fixture.detectChanges(); // initial binding
});

it("should have skyblue 
", () => {
  const h2: HTMLElement =
    fixture.nativeElement.querySelector("h2");
  const bgColor = h2.style.backgroundColor;
  expect(bgColor).toBe("skyblue");
});

let masterService: MasterService;
let valueServiceSpy: jasmine.SpyObj;

beforeEach(() => {
  const spy = jasmine.createSpyObj("ValueService", [
    "getValue",
  ]);

  TestBed.configureTestingModule({
    // Provide both the service-to-test and its (spy) dependency
    providers: [
      MasterService,
      { provide: ValueService, useValue: spy },
    ],
  });
  // Inject both the service-to-test and its (spy) dependency
  masterService = TestBed.inject(MasterService);
  valueServiceSpy = TestBed.inject(
    ValueService
  ) as jasmine.SpyObj;
});

let service: ValueService;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [ValueService],
  });
});

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [HighlightDirective, TestComponent],
  }).createComponent(TestComponent);

  fixture.detectChanges(); // initial binding

  // all elements with an attached HighlightDirective
  des = fixture.debugElement.queryAll(
    By.directive(HighlightDirective)
  );

  // the h2 without the HighlightDirective
  bareH2 = fixture.debugElement.query(
    By.css("h2:not([highlight])")
  );
});

// color tests
it("should have three highlighted elements", () => {
  expect(des.length).toBe(3);
});

it('should color 1st 
 background "yellow"', () => {
  const bgColor =
    des[0].nativeElement.style.backgroundColor;
  expect(bgColor).toBe("yellow");
});

it("should color 2nd 
 background w/ default color", () => {
  const dir = des[1].injector.get(
    HighlightDirective
  ) as HighlightDirective;
  const bgColor =
    des[1].nativeElement.style.backgroundColor;
  expect(bgColor).toBe(dir.defaultColor);
});

it("should bind  background to value color", () => {
  // easier to work with nativeElement
  const input = des[2].nativeElement as HTMLInputElement;
  expect(input.style.backgroundColor).toBe(
    "cyan",
    "initial backgroundColor"
  );

  input.value = "green";

  // Dispatch a DOM event so that Angular responds to the input value change.
  // In older browsers, such as IE, you might need a CustomEvent instead. See
  // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
  input.dispatchEvent(new Event("input"));
  fixture.detectChanges();

  expect(input.style.backgroundColor).toBe(
    "green",
    "changed backgroundColor"
  );
});

it("bare 
 should not have a customProperty", () => {
  expect(bareH2.properties.customProperty).toBeUndefined();
});

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [ValueService],
  });
  service = TestBed.inject(ValueService);
});

it("should use ValueService", () => {
  service = TestBed.inject(ValueService);
  expect(service.getValue()).toBe("real value");
});

let masterService: MasterService;
let valueServiceSpy: jasmine.SpyObj;

beforeEach(() => {
  const spy = jasmine.createSpyObj("ValueService", [
    "getValue",
  ]);

  TestBed.configureTestingModule({
    // Provide both the service-to-test and its (spy) dependency
    providers: [
      MasterService,
      { provide: ValueService, useValue: spy },
    ],
  });
  // Inject both the service-to-test and its (spy) dependency
  masterService = TestBed.inject(MasterService);
  valueServiceSpy = TestBed.inject(
    ValueService
  ) as jasmine.SpyObj;
});

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [ValueService],
  });
  service = TestBed.inject(ValueService);
});

const handler = jest.fn();

const {
  container: { firstChild: input },
} = render();

fireEvent.input(input, { target: { value: "a" } });

expect(handler).toHaveBeenCalledTimes(1);

const ref = createRef();
const spy = jest.fn();

render(
  h(elementType, {
    onDblClick: spy,
    ref,
  })
);

fireEvent["onDblClick"](ref.current);

expect(spy).toHaveBeenCalledTimes(1);

const { getByLabelText, queryAllByTestId } =
  render(Component);

// With options.
const { results } = render(YourComponent, {
  target: MyTarget,
  props: { myProp: "value" },
});

// Props only.
const { results } = render(YourComponent, {
  myProp: "value",
});

const cb = jest.fn();


function Counter() {
  useEffect(cb);


  const [count, setCount] = useState(0);


  return  setCount(count + 1)}>{count};
}


const { container: { firstChild: buttonNode }, } = render();


// Clear the first call to useEffect that the initial render triggers.
cb.mockClear();


// Fire event Option 1.
fireEvent.click(buttonNode);


// Fire event Option 2.
fireEvent(
buttonNode,
new Event('MouseEvent', {
  bubbles: true,
  cancelable: true,
  button: 0,
});


expect(buttonNode).toHaveTextContent('1');
expect(cb).toHaveBeenCalledTimes(1);

const table = document.createElement("table");

const { container } = render(TableBody, {
  props,
  container: document.body.appendChild(table),
});

const { getByDataCy } = render();

expect(getByDataCy("my-component")).toHaveTextContent(
  "Hello"
);

test("has correct welcome text", () => {
  render();
  expect(screen.getByRole("heading")).toHaveTextContent(
    "Welcome, John Doe"
  );
});

render();

test("handles click correctly", () => {
  render();

  userEvent.click(screen.getByText("Check"));
  expect(screen.getByLabelText("Check")).toBeChecked();
});

// Example, a function to traverse table contents
import * as tableQueries from "my-table-query-library";
import { queries } from "@testing-library/react";

const { getByRowColumn, getByText } = render(, {
  queries: { ...queries, ...tableQueries },
});

test("has correct input value", () => {
  render();
  expect(screen.getByRole("form")).toHaveFormValues({
    firstName: "John",
    lastName: "Doe",
  });
});

const table = document.createElement("table");

const { container } = render(, {
  container: document.body.appendChild(table),
});

// @testing-library/react
const { container } = render();
const foo = container.querySelector('[data-foo="bar"]');

const { getByLabelText, queryAllByTestId } = render(
  
);

// 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,
};