New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flip the arguments of Blocks and make the query optional #18374
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,8 +49,30 @@ describe('ReactBlocks', () => { | |
}; | ||
}); | ||
|
||
it.experimental('renders a simple component', () => { | ||
function User(props, data) { | ||
return <div>{typeof data}</div>; | ||
} | ||
|
||
function App({Component}) { | ||
return ( | ||
<Suspense fallback={'Loading...'}> | ||
<Component name="Name" /> | ||
</Suspense> | ||
); | ||
} | ||
|
||
let loadUser = block(User); | ||
|
||
ReactNoop.act(() => { | ||
ReactNoop.render(<App Component={loadUser()} />); | ||
}); | ||
|
||
expect(ReactNoop).toMatchRenderedOutput(<div>undefined</div>); | ||
}); | ||
|
||
it.experimental('prints the name of the render function in warnings', () => { | ||
function Query(firstName) { | ||
function load(firstName) { | ||
return { | ||
name: firstName, | ||
}; | ||
|
@@ -69,7 +91,7 @@ describe('ReactBlocks', () => { | |
); | ||
} | ||
|
||
let loadUser = block(Query, User); | ||
let loadUser = block(User, load); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Unfortunate that the order gets reversed from the grammar. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's just a naming convention that we could change, though. It's probably helpful to use different names for the result of |
||
|
||
expect(() => { | ||
ReactNoop.act(() => { | ||
|
@@ -86,8 +108,8 @@ describe('ReactBlocks', () => { | |
); | ||
}); | ||
|
||
it.experimental('renders a component with a suspending query', async () => { | ||
function Query(id) { | ||
it.experimental('renders a component with a suspending load', async () => { | ||
function load(id) { | ||
return { | ||
id: id, | ||
name: readString('Sebastian'), | ||
|
@@ -102,7 +124,7 @@ describe('ReactBlocks', () => { | |
); | ||
} | ||
|
||
let loadUser = block(Query, Render); | ||
let loadUser = block(Render, load); | ||
|
||
function App({User}) { | ||
return ( | ||
|
@@ -128,7 +150,7 @@ describe('ReactBlocks', () => { | |
it.experimental( | ||
'does not support a lazy wrapper around a chunk', | ||
async () => { | ||
function Query(id) { | ||
function load(id) { | ||
return { | ||
id: id, | ||
name: readString('Sebastian'), | ||
|
@@ -143,7 +165,7 @@ describe('ReactBlocks', () => { | |
); | ||
} | ||
|
||
let loadUser = block(Query, Render); | ||
let loadUser = block(Render, load); | ||
|
||
function App({User}) { | ||
return ( | ||
|
@@ -187,7 +209,7 @@ describe('ReactBlocks', () => { | |
it.experimental( | ||
'can receive updated data for the same component', | ||
async () => { | ||
function Query(firstName) { | ||
function load(firstName) { | ||
return { | ||
name: firstName, | ||
}; | ||
|
@@ -203,7 +225,7 @@ describe('ReactBlocks', () => { | |
); | ||
} | ||
|
||
let loadUser = block(Query, Render); | ||
let loadUser = block(Render, load); | ||
|
||
function App({User}) { | ||
return ( | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the type signature for loadUser here would disallow args, though, right?