-
Notifications
You must be signed in to change notification settings - Fork 47.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update useEditableValue hook to sync external value changes
- Loading branch information
Brian Vaughn
committed
Sep 24, 2019
1 parent
911104a
commit 52c17d5
Showing
9 changed files
with
192 additions
and
63 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/react-devtools-shared/src/__tests__/jestCssTransform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// This is a custom Jest transformer turning style imports into empty objects. | ||
|
||
module.exports = {}; |
84 changes: 84 additions & 0 deletions
84
packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
describe('useEditableValue', () => { | ||
let act; | ||
let React; | ||
let ReactDOM; | ||
let useEditableValue; | ||
|
||
beforeEach(() => { | ||
const utils = require('./utils'); | ||
act = utils.act; | ||
|
||
React = require('react'); | ||
ReactDOM = require('react-dom'); | ||
|
||
useEditableValue = require('../devtools/views/hooks').useEditableValue; | ||
}); | ||
|
||
it('should override editable state when external props are updated', () => { | ||
let state; | ||
|
||
function Example({value}) { | ||
const tuple = useEditableValue(value); | ||
state = tuple[0]; | ||
return null; | ||
} | ||
|
||
const container = document.createElement('div'); | ||
ReactDOM.render(<Example value="foo" />, container); | ||
expect(state.editableValue).toEqual('"foo"'); | ||
expect(state.externalValue).toEqual('foo'); | ||
expect(state.hasPendingChanges).toBe(false); | ||
|
||
// If there are NO pending changes, | ||
// an update to the external prop value should override the local/pending value. | ||
ReactDOM.render(<Example value="bar" />, container); | ||
expect(state.editableValue).toEqual('"bar"'); | ||
expect(state.externalValue).toEqual('bar'); | ||
expect(state.hasPendingChanges).toBe(false); | ||
}); | ||
|
||
it('should not override editable state when external props are updated if there are pending changes', () => { | ||
let dispatch, state; | ||
|
||
function Example({value}) { | ||
const tuple = useEditableValue(value); | ||
state = tuple[0]; | ||
dispatch = tuple[1]; | ||
return null; | ||
} | ||
|
||
const container = document.createElement('div'); | ||
ReactDOM.render(<Example value="foo" />, container); | ||
expect(state.editableValue).toEqual('"foo"'); | ||
expect(state.externalValue).toEqual('foo'); | ||
expect(state.hasPendingChanges).toBe(false); | ||
|
||
// Update (local) editable state. | ||
act(() => | ||
dispatch({ | ||
type: 'UPDATE', | ||
editableValue: 'not-foo', | ||
externalValue: 'foo', | ||
}), | ||
); | ||
expect(state.editableValue).toEqual('not-foo'); | ||
expect(state.externalValue).toEqual('foo'); | ||
expect(state.hasPendingChanges).toBe(true); | ||
|
||
// If there ARE pending changes, | ||
// an update to the external prop value should NOT override the local/pending value. | ||
ReactDOM.render(<Example value="bar" />, container); | ||
expect(state.editableValue).toEqual('not-foo'); | ||
expect(state.externalValue).toEqual('bar'); | ||
expect(state.hasPendingChanges).toBe(true); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters