/**
* 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">"
`);
});
});
