@@ -21,3 +26,98 @@ it('renders portal with siblings', async () => { expect(toJSON()).toMatchSnapshot(); }); + +it('renders portals in source order when mounted in the same commit', async () => { + await render( + + + first + + + second + + + third + + + ); + + const portals = screen.getAllByTestId('portal-content'); + + expect(portals).toHaveLength(3); + expect(portals[0]).toBe(screen.getByText('first')); + expect(portals[1]).toBe(screen.getByText('second')); + expect(portals[2]).toBe(screen.getByText('third')); +}); + +it('stacks components mounted in the same commit in source order', async () => { + await render( + + + {}}> + modal + + + + + + + ); + + // The last portal in source order is painted on top, so `dialog` has to come + // after `modal` in the rendered tree. + const layers = await screen.findAllByTestId('layer'); + + expect(layers).toHaveLength(2); + expect(layers[0]).toBe(screen.getByText('modal')); + expect(layers[1]).toBe(screen.getByText('dialog')); +}); + +it('keeps queued mounts of other portals when one of them is updated', async () => { + // Mirrors `PortalConsumer`: mounts from `componentDidMount`, then updates its + // own key. Both calls land before `PortalHost` attaches its manager, so they + // go through the queue. + class QueuedConsumer extends React.Component<{ + manager: PortalMethods; + label: string; + update?: boolean; + }> { + componentDidMount() { + const key = this.props.manager.mount( + {this.props.label} + ); + + if (this.props.update) { + this.props.manager.update( + key, + {`${this.props.label} (updated)`} + ); + } + } + + render() { + return null; + } + } + + await render( + + + {(manager) => ( + <> + + + + )} + + + ); + + // Deliberately order-independent: this asserts that no portal is lost, which + // is a separate concern from the order the queue is replayed in. + expect(screen.getAllByTestId('queued')).toHaveLength(2); + expect(screen.getByText('first')).toBeTruthy(); + expect(screen.getByText('second (updated)')).toBeTruthy(); +});

giaBaoJS analysis page

Bao Nguyen