0fe879c838
Summary: Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/ Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible. Changelog: [Layout] Make the layer selection more prominent Reviewed By: priteshrnandgaonkar Differential Revision: D27708650 fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f
108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
/**
|
|
* 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.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {render, fireEvent} from '@testing-library/react';
|
|
|
|
import {Element} from 'flipper';
|
|
import MultipleSelectorSection from '../MultipleSelectionSection';
|
|
|
|
const TITLE_STRING = 'Multiple elements found at the target coordinates';
|
|
const dummyElmentData: Omit<Element, 'id' | 'name'> = {
|
|
expanded: false,
|
|
children: [],
|
|
attributes: [],
|
|
data: {},
|
|
decoration: '',
|
|
extraInfo: {},
|
|
};
|
|
|
|
test('rendering a single element', () => {
|
|
const id = 'id1';
|
|
const name = 'id_name';
|
|
const element: Element = {...dummyElmentData, id, name};
|
|
const res = render(
|
|
<MultipleSelectorSection
|
|
initialSelectedElement={null}
|
|
elements={{[id]: element}}
|
|
onElementSelected={() => {}}
|
|
onElementHovered={null}
|
|
/>,
|
|
);
|
|
|
|
expect(res.queryByText(TITLE_STRING)).toBeDefined();
|
|
expect(res.queryAllByText(name).length).toBe(1);
|
|
});
|
|
|
|
test('clicking on elements', () => {
|
|
const ids = ['id1', 'id2', 'id3'];
|
|
const names = ['id_name_first', 'id_name_second', 'id_name_third'];
|
|
const elements: {[id: string]: Element} = ids.reduce(
|
|
(acc: {[id: string]: Element}, id, idx) => {
|
|
acc[id] = {...dummyElmentData, id, name: names[idx]};
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
const mockOnElementSelected = jest.fn((_key: string) => {});
|
|
window.scrollTo = () => {};
|
|
const res = render(
|
|
<MultipleSelectorSection
|
|
initialSelectedElement={null}
|
|
elements={elements}
|
|
onElementSelected={mockOnElementSelected}
|
|
onElementHovered={null}
|
|
/>,
|
|
);
|
|
|
|
const clickingIdx = [0, 1, 2, 1, 0];
|
|
clickingIdx.forEach((idx) => fireEvent.click(res.getByText(names[idx])));
|
|
|
|
// expect all click to call the function
|
|
expect(mockOnElementSelected.mock.calls.length).toBe(clickingIdx.length);
|
|
clickingIdx.forEach((valIdx, idx) =>
|
|
expect(mockOnElementSelected.mock.calls[idx][0]).toBe(ids[valIdx]),
|
|
);
|
|
});
|
|
|
|
test('hovering on elements', () => {
|
|
const ids = ['id1', 'id2', 'id3'];
|
|
const names = ['id_name_first', 'id_name_second', 'id_name_third'];
|
|
const elements: {[id: string]: Element} = ids.reduce(
|
|
(acc: {[id: string]: Element}, id, idx) => {
|
|
acc[id] = {...dummyElmentData, id, name: names[idx]};
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
const mockOnElementSelected = jest.fn((_key: string) => {});
|
|
const mockOnElementHovered = jest.fn((_key: string | null | undefined) => {});
|
|
window.scrollTo = () => {};
|
|
const res = render(
|
|
<MultipleSelectorSection
|
|
initialSelectedElement={null}
|
|
elements={elements}
|
|
onElementSelected={mockOnElementSelected}
|
|
onElementHovered={mockOnElementHovered}
|
|
/>,
|
|
);
|
|
|
|
const clickingIdx = [0, 1, 2, 1, 0];
|
|
clickingIdx.forEach((idx) => fireEvent.mouseOver(res.getByText(names[idx])));
|
|
|
|
// expect all hover to call the function
|
|
expect(mockOnElementHovered.mock.calls.length).toBe(clickingIdx.length);
|
|
clickingIdx.forEach((valIdx, idx) =>
|
|
expect(mockOnElementHovered.mock.calls[idx][0]).toBe(ids[valIdx]),
|
|
);
|
|
|
|
// expect no click to be called
|
|
expect(mockOnElementSelected.mock.calls.length).toBe(0);
|
|
});
|