/**

* 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.
*
* @flow
*/

const {printOwnersList} = require('../devtools/utils');

describe('Store owners list', () => {

let React;
let act;
let legacyRender;
let store;

beforeEach(() => {
store = global.store;
store.collapseNodesByDefault = false;

React = require('react');

const utils = require('./utils');

act = utils.act;
legacyRender = utils.legacyRender;
});

function getFormattedOwnersList(elementID) {
const ownersList = store.getOwnersListForElement(elementID);
return printOwnersList(ownersList);
}

it('should drill through intermediate components', () => {

const Root = () => (
<Intermediate>
<div>
<Leaf />
</div>
</Intermediate>
);
const Wrapper = ({children}) => children;
const Leaf = () => <div>Leaf</div>;
const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;

act(() => legacyRender(<Root />, document.createElement('div')));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);

const rootID = store.getElementIDAtIndex(0);

expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
 `);

const intermediateID = store.getElementIDAtIndex(1);

expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
" ▾ <Intermediate>
▾ <Wrapper>"
`);
});

it('should drill through interleaved intermediate components', () => {

const Root = () => [
<Intermediate key="intermediate">
<Leaf />
</Intermediate>,
<Leaf key="leaf" />,
];
const Wrapper = ({children}) => children;
const Leaf = () => <div>Leaf</div>;
const Intermediate = ({children}) => [
<Leaf key="leaf" />,
<Wrapper key="wrapper">{children}</Wrapper>,
];

act(() => legacyRender(<Root />, document.createElement('div')));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate key="intermediate">
<Leaf key="leaf">
▾ <Wrapper key="wrapper">
<Leaf>
<Leaf key="leaf">
`);

const rootID = store.getElementIDAtIndex(0);

expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate key="intermediate">
<Leaf>
<Leaf key="leaf">"
`);

const intermediateID = store.getElementIDAtIndex(1);

expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
" ▾ <Intermediate key="intermediate">
<Leaf key="leaf">
▾ <Wrapper key="wrapper">"
`);
});

it('should show the proper owners list order and contents after insertions and
deletions', () => {
const Root = ({includeDirect, includeIndirect}) => (
<div>
{includeDirect ? <Leaf /> : null}
{includeIndirect ? (
<Intermediate>
<Leaf />
</Intermediate>
 ) : null}
</div>
);
const Wrapper = ({children}) => children;
const Leaf = () => <div>Leaf</div>;
const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;

const container = document.createElement('div');

act(() =>
legacyRender(
<Root includeDirect={false} includeIndirect={true} />,
container,
),
);

const rootID = store.getElementIDAtIndex(0);

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
`);

act(() =>
legacyRender(
<Root includeDirect={true} includeIndirect={true} />,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf>
▾ <Intermediate>
<Leaf>"
`);

act(() =>
legacyRender(
<Root includeDirect={true} includeIndirect={false} />,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
 ▾ <Root>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf>"
`);

act(() =>
legacyRender(
<Root includeDirect={false} includeIndirect={false} />,
container,
),
);
expect(store).toMatchInlineSnapshot(`
[root]
<Root>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
`" <Root>"`,
);
});

it('should show the proper owners list ordering after reordered children', () =>
{
const Root = ({ascending}) =>
ascending
? [<Leaf key="A" />, <Leaf key="B" />, <Leaf key="C" />]
: [<Leaf key="C" />, <Leaf key="B" />, <Leaf key="A" />];
const Leaf = () => <div>Leaf</div>;

const container = document.createElement('div');

act(() => legacyRender(<Root ascending={true} />, container));

const rootID = store.getElementIDAtIndex(0);

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf key="A">
<Leaf key="B">
<Leaf key="C">
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf key="A">
<Leaf key="B">
<Leaf key="C">"
`);

act(() => legacyRender(<Root ascending={false} />, container));

expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf key="C">
<Leaf key="B">
<Leaf key="A">
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
 <Leaf key="C">
<Leaf key="B">
<Leaf key="A">"
`);
});
});