-
Notifications
You must be signed in to change notification settings - Fork 47k
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 (#16878)
* Update useEditableValue to mirror value cahnges Previously, the hook initialized local state (in useState) to mirror the prop/state value. Updates to the value were ignored though. (Once the state was initialized, it was never updated.) The new hook updates the local/editable state to mirror the external value unless there are already pending, local edits being made. * Optimistic CHANGELOG update * Added additional useEditableValue() unit test cases
- Loading branch information
Brian Vaughn
authored
Sep 25, 2019
1 parent
57bf275
commit fa1a326
Showing
8 changed files
with
295 additions
and
83 deletions.
There are no files selected for viewing
173 changes: 173 additions & 0 deletions
173
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,173 @@ | ||
/** | ||
* 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={1} />, container); | ||
expect(state.editableValue).toEqual('1'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).toBe(true); | ||
|
||
// If there are NO pending changes, | ||
// an update to the external prop value should override the local/pending value. | ||
ReactDOM.render(<Example value={2} />, container); | ||
expect(state.editableValue).toEqual('2'); | ||
expect(state.externalValue).toEqual(2); | ||
expect(state.parsedValue).toEqual(2); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).toBe(true); | ||
}); | ||
|
||
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={1} />, container); | ||
expect(state.editableValue).toEqual('1'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).toBe(true); | ||
|
||
// Update (local) editable state. | ||
act(() => | ||
dispatch({ | ||
type: 'UPDATE', | ||
editableValue: '2', | ||
externalValue: 1, | ||
}), | ||
); | ||
expect(state.editableValue).toEqual('2'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(2); | ||
expect(state.hasPendingChanges).toBe(true); | ||
expect(state.isValid).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={3} />, container); | ||
expect(state.editableValue).toEqual('2'); | ||
expect(state.externalValue).toEqual(3); | ||
expect(state.parsedValue).toEqual(2); | ||
expect(state.hasPendingChanges).toBe(true); | ||
expect(state.isValid).toBe(true); | ||
}); | ||
|
||
it('should parse edits to ensure valid JSON', () => { | ||
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={1} />, container); | ||
expect(state.editableValue).toEqual('1'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).toBe(true); | ||
|
||
// Update (local) editable state. | ||
act(() => | ||
dispatch({ | ||
type: 'UPDATE', | ||
editableValue: '"a', | ||
externalValue: 1, | ||
}), | ||
); | ||
expect(state.editableValue).toEqual('"a'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(true); | ||
expect(state.isValid).toBe(false); | ||
}); | ||
|
||
it('should reset to external value upon request', () => { | ||
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={1} />, container); | ||
expect(state.editableValue).toEqual('1'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).toBe(true); | ||
|
||
// Update (local) editable state. | ||
act(() => | ||
dispatch({ | ||
type: 'UPDATE', | ||
editableValue: '2', | ||
externalValue: 1, | ||
}), | ||
); | ||
expect(state.editableValue).toEqual('2'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(2); | ||
expect(state.hasPendingChanges).toBe(true); | ||
expect(state.isValid).toBe(true); | ||
|
||
// Reset editable state | ||
act(() => | ||
dispatch({ | ||
type: 'RESET', | ||
externalValue: 1, | ||
}), | ||
); | ||
expect(state.editableValue).toEqual('1'); | ||
expect(state.externalValue).toEqual(1); | ||
expect(state.parsedValue).toEqual(1); | ||
expect(state.hasPendingChanges).toBe(false); | ||
expect(state.isValid).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
Oops, something went wrong.