/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import * as React from "react";
import { render } from "@testing-library/react";
import { expectLogsAndClear, log } from "./expectLogs";

function Hello({ name }) {
  const items = [1, 2, 3].map((item) => {
    log(`recomputing ${item}`);
    return <div key={item}>Item {item}</div>;
  });
  return (
    <div>
      Hello<b>{name}</b>
      {items}
    </div>
  );
}

test("hello", () => {
  const { asFragment, rerender } = render(<Hello name="World" />);

  expect(asFragment()).toMatchInlineSnapshot(`
    <DocumentFragment>
      <div>
        Hello
        <b>
          World
        </b>
        <div>
          Item 1
        </div>
        <div>
          Item 2
        </div>
        <div>
          Item 3
        </div>
      </div>
    </DocumentFragment>
  `);

  expectLogsAndClear(["recomputing 1", "recomputing 2", "recomputing 3"]);

  rerender(<Hello name="Universe" />);

  expect(asFragment()).toMatchInlineSnapshot(`
    <DocumentFragment>
      <div>
        Hello
        <b>
          Universe
        </b>
        <div>
          Item 1
        </div>
        <div>
          Item 2
        </div>
        <div>
          Item 3
        </div>
      </div>
    </DocumentFragment>
  `);

  expectLogsAndClear(
    __FORGET__ ? [] : ["recomputing 1", "recomputing 2", "recomputing 3"]
  );
});