let httpClientSpy: { get: jasmine.Spy };
let heroService: HeroService;

beforeEach(() => {
  // TODO: spy on other methods too
  httpClientSpy = jasmine.createSpyObj("HttpClient", [
    "get",
  ]);
  heroService = new HeroService(httpClientSpy as any);
});

it("should return expected heroes (HttpClient called once)", (done: DoneFn) => {
  const expectedHeroes: Hero[] = [
    { id: 1, name: "A" },
    { id: 2, name: "B" },
  ];

  httpClientSpy.get.and.returnValue(
    asyncData(expectedHeroes)
  );

  heroService.getHeroes().subscribe((heroes) => {
    expect(heroes).toEqual(
      expectedHeroes,
      "expected heroes"
    );
    done();
  }, done.fail);
  expect(httpClientSpy.get.calls.count()).toBe(
    1,
    "one call"
  );
});

it("should return an error when the server returns a 404", (done: DoneFn) => {
  const errorResponse = new HttpErrorResponse({
    error: "test 404 error",
    status: 404,
    statusText: "Not Found",
  });

  httpClientSpy.get.and.returnValue(
    asyncError(errorResponse)
  );

  heroService.getHeroes().subscribe(
    (heroes) => done.fail("expected an error, not heroes"),
    (error) => {
      expect(error.message).toContain("test 404 error");
      done();
    }
  );
});

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("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 and return the element
  const movie = await findByText("the lion king");
});

getByRole("heading", { level: 1 });
// 
Heading Level One

getAllByRole("heading", { level: 2 });
// [
//   
First Heading Level Two
,
//   
Second Heading Level Two
// ]