Skip to content

Commit

Permalink
Fixed all but one test
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Jan 15, 2021
1 parent 5365a04 commit 50ba982
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 59 deletions.
11 changes: 10 additions & 1 deletion packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import {meta} from 'react-devtools-shared/src/hydration';
/**
* 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
*/

// test() is part of Jest's serializer API
export function test(maybeDehydratedValue) {
const {meta} = require('react-devtools-shared/src/hydration');
return (
maybeDehydratedValue !== null &&
typeof maybeDehydratedValue === 'object' &&
Expand All @@ -12,6 +20,7 @@ export function test(maybeDehydratedValue) {

// print() is part of Jest's serializer API
export function print(dehydratedValue, serialize, indent) {
const {meta} = require('react-devtools-shared/src/hydration');
const indentation = Math.max(indent('.').indexOf('.') - 2, 0);
const paddingLeft = ' '.repeat(indentation);
return (
Expand Down
178 changes: 133 additions & 45 deletions packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@ describe('InspectedElement', () => {
jest.restoreAllMocks();
});

const ViewElementSource = {};

const Contexts = ({
children,
defaultSelectedElementID = null,
Expand Down Expand Up @@ -99,10 +97,6 @@ describe('InspectedElement', () => {
return inspectPaths;
}

function useStoreAsGlobal() {
// TODO (cache)
}

it('should inspect the currently selected element', async done => {
const Example = () => {
const [count] = React.useState(1);
Expand Down Expand Up @@ -331,9 +325,6 @@ describe('InspectedElement', () => {
),
false,
);
// console.log('::::: await?');
// jest.runOnlyPendingTimers();
// await Promise.resolve()
expect(inspectedElement.props).toMatchInlineSnapshot(`
Object {
"a": 2,
Expand Down Expand Up @@ -1168,7 +1159,7 @@ describe('InspectedElement', () => {
done();
});

fit('should not dehydrate nested values until explicitly requested', async done => {
it('should not dehydrate nested values until explicitly requested', async done => {
const Example = () => {
const [state] = React.useState({
foo: {
Expand Down Expand Up @@ -1358,7 +1349,7 @@ describe('InspectedElement', () => {
done();
});

xit('should dehydrate complex nested values when requested', async done => {
it('should dehydrate complex nested values when requested', async done => {
const Example = () => null;

const container = document.createElement('div');
Expand Down Expand Up @@ -1438,9 +1429,10 @@ describe('InspectedElement', () => {
"1": 2,
"2": 3,
},
"1": Dehydrated {
"preview_short": Set(3),
"preview_long": Set(3) {"a", "b", "c"},
"1": Object {
"0": "a",
"1": "b",
"2": "c",
},
},
}
Expand All @@ -1449,7 +1441,7 @@ describe('InspectedElement', () => {
done();
});

xit('should include updates for nested values that were previously hydrated', async done => {
it('should include updates for nested values that were previously hydrated', async done => {
const Example = () => null;

const container = document.createElement('div');
Expand Down Expand Up @@ -1546,9 +1538,12 @@ describe('InspectedElement', () => {
},
"value": 1,
},
"c": Dehydrated {
"preview_short": {…},
"preview_long": {d: {…}, value: 1},
"c": Object {
"d": Dehydrated {
"preview_short": {…},
"preview_long": {e: {…}, value: 1},
},
"value": 1,
},
},
}
Expand Down Expand Up @@ -1637,7 +1632,7 @@ describe('InspectedElement', () => {
done();
});

xit('should not tear if hydration is requested after an update', async done => {
it('should not tear if hydration is requested after an update', async done => {
const Example = () => null;

const container = document.createElement('div');
Expand Down Expand Up @@ -1766,7 +1761,28 @@ describe('InspectedElement', () => {

function Suspender({target}) {
const inspectedElement = useInspectedElement(id);
expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
expect(inspectedElement).toMatchInlineSnapshot(`
Object {
"context": null,
"events": undefined,
"hooks": Array [
Object {
"id": null,
"isStateEditable": false,
"name": "Context",
"subHooks": Array [],
"value": true,
},
],
"id": 2,
"owners": null,
"props": Object {
"a": 1,
"b": "abc",
},
"state": null,
}
`);
didFinish = true;
return null;
}
Expand Down Expand Up @@ -1816,8 +1832,20 @@ describe('InspectedElement', () => {
let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);

function Suspender({target}) {
// const context = React.useContext(InspectedElementContext);
// storeAsGlobal = context.storeAsGlobal;
storeAsGlobal = (elementID: number, path: Array<string | number>) => {
const rendererID = store.getRendererIDForElement(elementID);
if (rendererID !== null) {
const {
storeAsGlobal: storeAsGlobalAPI,
} = require('react-devtools-shared/src/backendAPI');
storeAsGlobalAPI({
bridge,
id: elementID,
path,
rendererID,
});
}
};
return null;
}

Expand All @@ -1834,23 +1862,22 @@ describe('InspectedElement', () => {
),
false,
);
expect(storeAsGlobal).not.toBeNull();

jest.spyOn(console, 'log').mockImplementation(() => {});

// Should store the whole value (not just the hydrated parts)
storeAsGlobal(id, ['props', 'nestedObject']);
jest.runOnlyPendingTimers();
expect(console.log).toHaveBeenCalledWith('$reactTemp1');
expect(global.$reactTemp1).toBe(nestedObject);
expect(console.log).toHaveBeenCalledWith('$reactTemp0');
expect(global.$reactTemp0).toBe(nestedObject);

console.log.mockReset();

// Should store the nested property specified (not just the outer value)
storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);
jest.runOnlyPendingTimers();
expect(console.log).toHaveBeenCalledWith('$reactTemp2');
expect(global.$reactTemp2).toBe(nestedObject.a.b);
expect(console.log).toHaveBeenCalledWith('$reactTemp1');
expect(global.$reactTemp1).toBe(nestedObject.a.b);

done();
});
Expand Down Expand Up @@ -1882,8 +1909,20 @@ describe('InspectedElement', () => {
let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);

function Suspender({target}) {
// const context = React.useContext(InspectedElementContext);
// copyPath = context.copyInspectedElementPath;
copyPath = (elementID: number, path: Array<string | number>) => {
const rendererID = store.getRendererIDForElement(elementID);
if (rendererID !== null) {
const {
copyInspectedElementPath,
} = require('react-devtools-shared/src/backendAPI');
copyInspectedElementPath({
bridge,
id: elementID,
path,
rendererID,
});
}
};
return null;
}

Expand Down Expand Up @@ -1974,8 +2013,20 @@ describe('InspectedElement', () => {
let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);

function Suspender({target}) {
// const context = React.useContext(InspectedElementContext);
// copyPath = context.copyInspectedElementPath;
copyPath = (elementID: number, path: Array<string | number>) => {
const rendererID = store.getRendererIDForElement(elementID);
if (rendererID !== null) {
const {
copyInspectedElementPath,
} = require('react-devtools-shared/src/backendAPI');
copyInspectedElementPath({
bridge,
id: elementID,
path,
rendererID,
});
}
};
return null;
}

Expand Down Expand Up @@ -2023,12 +2074,9 @@ describe('InspectedElement', () => {
});

it('should display complex values of useDebugValue', async done => {
let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
let inspectedElement = null;
function Suspender({target}) {
// const context = React.useContext(InspectedElementContext);
// getInspectedElementPath = context.getInspectedElementPath;
// inspectedElement = context.useInspectedElement(target);
inspectedElement = useInspectedElement(target);
return null;
}

Expand Down Expand Up @@ -2065,9 +2113,27 @@ describe('InspectedElement', () => {
),
false,
);
expect(getInspectedElementPath).not.toBeNull();
expect(inspectedElement).not.toBeNull();
expect(inspectedElement).toMatchSnapshot('DisplayedComplexValue');
expect(inspectedElement.hooks).toMatchInlineSnapshot(`
Array [
Object {
"id": null,
"isStateEditable": false,
"name": "DebuggableHook",
"subHooks": Array [
Object {
"id": 0,
"isStateEditable": true,
"name": "State",
"subHooks": Array [],
"value": 1,
},
],
"value": Object {
"foo": 2,
},
},
]
`);

done();
});
Expand Down Expand Up @@ -2299,7 +2365,11 @@ describe('InspectedElement', () => {
);
});

store.clearErrorsAndWarnings();
const {
clearErrorsAndWarnings,
} = require('react-devtools-shared/src/backendAPI');
clearErrorsAndWarnings({bridge, store});

// Flush events to the renderer.
jest.runOnlyPendingTimers();

Expand All @@ -2312,7 +2382,7 @@ describe('InspectedElement', () => {
`);
});

it('can be cleared for a particular Fiber (only errors)', async () => {
it('can be cleared for a particular Fiber (only warnings)', async () => {
const Example = ({id}) => {
console.error(`test-only: render error #${id}`);
console.warn(`test-only: render warning #${id}`);
Expand All @@ -2332,7 +2402,14 @@ describe('InspectedElement', () => {
);
});

store.clearWarningsForElement(2);
let id = ((store.getElementIDAtIndex(1): any): number);
const rendererID = store.getRendererIDForElement(id);

const {
clearWarningsForElement,
} = require('react-devtools-shared/src/backendAPI');
clearWarningsForElement({bridge, id, rendererID});

// Flush events to the renderer.
jest.runOnlyPendingTimers();

Expand Down Expand Up @@ -2368,7 +2445,9 @@ describe('InspectedElement', () => {
]
`);

store.clearWarningsForElement(1);
id = ((store.getElementIDAtIndex(0): any): number);
clearWarningsForElement({bridge, id, rendererID});

// Flush events to the renderer.
jest.runOnlyPendingTimers();

Expand Down Expand Up @@ -2400,7 +2479,7 @@ describe('InspectedElement', () => {
`);
});

it('can be cleared for a particular Fiber (only warnings)', async () => {
it('can be cleared for a particular Fiber (only errors)', async () => {
const Example = ({id}) => {
console.error(`test-only: render error #${id}`);
console.warn(`test-only: render warning #${id}`);
Expand All @@ -2420,7 +2499,14 @@ describe('InspectedElement', () => {
);
});

store.clearErrorsForElement(2);
let id = ((store.getElementIDAtIndex(1): any): number);
const rendererID = store.getRendererIDForElement(id);

const {
clearErrorsForElement,
} = require('react-devtools-shared/src/backendAPI');
clearErrorsForElement({bridge, id, rendererID});

// Flush events to the renderer.
jest.runOnlyPendingTimers();

Expand Down Expand Up @@ -2456,7 +2542,9 @@ describe('InspectedElement', () => {
]
`);

store.clearErrorsForElement(1);
id = ((store.getElementIDAtIndex(0): any): number);
clearErrorsForElement({bridge, id, rendererID});

// Flush events to the renderer.
jest.runOnlyPendingTimers();

Expand Down
Loading

0 comments on commit 50ba982

Please sign in to comment.