imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make TabbedView a controlled component (#12480)

Browse source 
* Convert tabbedview to functional component

The 'Tab' is still a class, so now it's a functional component that
has a supporting class, which is maybe a bit... jarring, but I think
is actually perfectly logical.

* put comment back

* Fix bad tab ID behaviour

* Make TabbedView a controlled component

This does mean the logic of keeping what tab is active is now in each
container component, but for a functional component, this is a single
line. It makes TabbedView simpler and the container components always
know exactly what tab is being displayed rather than having to effectively
keep the state separately themselves if they wanted it.

Based on https://github.com/matrix-org/matrix-react-sdk/pull/12478

* Fix some types & unused prop

* Remove weird behaviour of using first tab is active isn't valid

* Don't pass initialTabID here now it no longer has the prop

* Fix test

* bleh... id, not icon

* Change to sub-components

and use contitional call syntax

* Comments

* Fix element IDs

* Fix merge

* Test DesktopCapturerSourcePicker

to make sonarcloud the right colour

* Use custom hook for the fllback tab behaviour
This commit is contained in:
David Baker 2024-05-03 16:01:01 +01:00 • committed by GitHub
parent 2f3c84f1f4
commit 9684dd5145
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 170 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

62
test/components/structures/TabbedView-test.tsx
View file

@ -28,8 +28,17 @@ describe("<TabbedView />", () => {
const defaultProps = {
tabLocation: TabLocation.LEFT,
tabs: [generalTab, labsTab, securityTab] as NonEmptyArray<Tab<any>>,
onChange: () => {},
};
const getComponent = (props = {}): React.ReactElement => <TabbedView {...defaultProps} {...props} />;
const getComponent = (
props: {
activeTabId: "GENERAL" | "LABS" | "SECURITY";
onChange?: () => any;
tabs?: NonEmptyArray<Tab<any>>;
} = {
activeTabId: "GENERAL",
},
): React.ReactElement => <TabbedView {...defaultProps} {...props} />;
const getTabTestId = (tab: Tab<string>): string => `settings-tab-${tab.id}`;
const getActiveTab = (container: HTMLElement): Element | undefined =>
@ -42,38 +51,15 @@ describe("<TabbedView />", () => {
expect(container).toMatchSnapshot();
});
it("renders first tab as active tab when no initialTabId", () => {
const { container } = render(getComponent());
expect(getActiveTab(container)?.textContent).toEqual(_t(generalTab.label));
expect(getActiveTabBody(container)?.textContent).toEqual("general");
});
it("renders first tab as active tab when initialTabId is not valid", () => {
const { container } = render(getComponent({ initialTabId: "bad-tab-id" }));
expect(getActiveTab(container)?.textContent).toEqual(_t(generalTab.label));
expect(getActiveTabBody(container)?.textContent).toEqual("general");
});
it("renders initialTabId tab as active when valid", () => {
const { container } = render(getComponent({ initialTabId: securityTab.id }));
expect(getActiveTab(container)?.textContent).toEqual(_t(securityTab.label));
expect(getActiveTabBody(container)?.textContent).toEqual("security");
});
it("sets active tab on tab click", () => {
const { container, getByTestId } = render(getComponent());
act(() => {
fireEvent.click(getByTestId(getTabTestId(securityTab)));
});
it("renders activeTabId tab as active when valid", () => {
const { container } = render(getComponent({ activeTabId: securityTab.id }));
expect(getActiveTab(container)?.textContent).toEqual(_t(securityTab.label));
expect(getActiveTabBody(container)?.textContent).toEqual("security");
});
it("calls onchange on on tab click", () => {
const onChange = jest.fn();
const { getByTestId } = render(getComponent({ onChange }));
const { getByTestId } = render(getComponent({ activeTabId: "GENERAL", onChange }));
act(() => {
fireEvent.click(getByTestId(getTabTestId(securityTab)));
@ -84,31 +70,13 @@ describe("<TabbedView />", () => {
it("keeps same tab active when order of tabs changes", () => {
// start with middle tab active
const { container, rerender } = render(getComponent({ initialTabId: labsTab.id }));
const { container, rerender } = render(getComponent({ activeTabId: labsTab.id }));
expect(getActiveTab(container)?.textContent).toEqual(_t(labsTab.label));
rerender(getComponent({ tabs: [labsTab, generalTab, securityTab] }));
rerender(getComponent({ tabs: [labsTab, generalTab, securityTab], activeTabId: labsTab.id }));
// labs tab still active
expect(getActiveTab(container)?.textContent).toEqual(_t(labsTab.label));
});
it("does not reactivate inititalTabId on rerender", () => {
const { container, getByTestId, rerender } = render(getComponent());
expect(getActiveTab(container)?.textContent).toEqual(_t(generalTab.label));
// make security tab active
act(() => {
fireEvent.click(getByTestId(getTabTestId(securityTab)));
});
expect(getActiveTab(container)?.textContent).toEqual(_t(securityTab.label));
// rerender with new tab location
rerender(getComponent({ tabLocation: TabLocation.TOP }));
// still security tab
expect(getActiveTab(container)?.textContent).toEqual(_t(securityTab.label));
});
});