[Fizz] Classes Follow Up (#21253)
* Port Classes from Fiber to Fizz * Test
This commit is contained in:
parent
84c06fef81
commit
dbadfa2c36
|
@ -16,6 +16,7 @@ let React;
|
|||
let ReactDOM;
|
||||
let ReactDOMFizzServer;
|
||||
let Suspense;
|
||||
let PropTypes;
|
||||
let textCache;
|
||||
let document;
|
||||
let writable;
|
||||
|
@ -36,6 +37,8 @@ describe('ReactDOMFizzServer', () => {
|
|||
}
|
||||
Stream = require('stream');
|
||||
Suspense = React.Suspense;
|
||||
PropTypes = require('prop-types');
|
||||
|
||||
textCache = new Map();
|
||||
|
||||
// Test Environment
|
||||
|
@ -655,4 +658,73 @@ describe('ReactDOMFizzServer', () => {
|
|||
'http://www.w3.org/2000/svg',
|
||||
);
|
||||
});
|
||||
|
||||
// @gate experimental
|
||||
it('should can suspend in a class component with legacy context', async () => {
|
||||
class TestProvider extends React.Component {
|
||||
static childContextTypes = {
|
||||
test: PropTypes.string,
|
||||
};
|
||||
state = {ctxToSet: null};
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
return {ctxToSet: props.ctx};
|
||||
}
|
||||
getChildContext() {
|
||||
return {
|
||||
test: this.state.ctxToSet,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
class TestConsumer extends React.Component {
|
||||
static contextTypes = {
|
||||
test: PropTypes.string,
|
||||
};
|
||||
render() {
|
||||
const child = (
|
||||
<b>
|
||||
<Text text={this.context.test} />
|
||||
</b>
|
||||
);
|
||||
if (this.props.prefix) {
|
||||
return [readText(this.props.prefix), child];
|
||||
}
|
||||
return child;
|
||||
}
|
||||
}
|
||||
|
||||
await act(async () => {
|
||||
const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
|
||||
<TestProvider ctx="A">
|
||||
<div>
|
||||
<Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
|
||||
<TestProvider ctx="B">
|
||||
<TestConsumer prefix="Hello: " />
|
||||
</TestProvider>
|
||||
<TestConsumer />
|
||||
</Suspense>
|
||||
</div>
|
||||
</TestProvider>,
|
||||
writable,
|
||||
);
|
||||
startWriting();
|
||||
});
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Loading: <b>A</b>
|
||||
</div>,
|
||||
);
|
||||
await act(async () => {
|
||||
resolveText('Hello: ');
|
||||
});
|
||||
expect(getVisibleChildren(container)).toEqual(
|
||||
<div>
|
||||
Hello: <b>B</b>
|
||||
<b>A</b>
|
||||
</div>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -47,8 +47,8 @@ export function getMaskedContext(type: any, unmaskedContext: Object): Object {
|
|||
}
|
||||
|
||||
export function processChildContext(
|
||||
type: any,
|
||||
instance: any,
|
||||
type: any,
|
||||
parentContext: Object,
|
||||
childContextTypes: Object,
|
||||
): Object {
|
||||
|
|
|
@ -461,7 +461,7 @@ function renderWithHooks<Props, SecondArg>(
|
|||
function finishClassComponent(
|
||||
request: Request,
|
||||
task: Task,
|
||||
instance: Object,
|
||||
instance: any,
|
||||
Component: any,
|
||||
props: any,
|
||||
): ReactNodeList {
|
||||
|
@ -518,7 +518,7 @@ function renderClassComponent(
|
|||
: undefined;
|
||||
const instance = constructClassInstance(Component, props, unmaskedContext);
|
||||
mountClassInstance(instance, Component, props, unmaskedContext);
|
||||
finishClassComponent(request, task, Component);
|
||||
finishClassComponent(request, task, instance, Component, props);
|
||||
}
|
||||
|
||||
const didWarnAboutBadClass = {};
|
||||
|
@ -617,7 +617,7 @@ function renderIndeterminateComponent(
|
|||
}
|
||||
|
||||
mountClassInstance(value, Component, props, legacyContext);
|
||||
finishClassComponent(request, task, value, Component);
|
||||
finishClassComponent(request, task, value, Component, props);
|
||||
} else {
|
||||
// Proceed under the assumption that this is a function component
|
||||
if (__DEV__) {
|
||||
|
|
Loading…
Reference in New Issue