Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs, tabs in breadcrumbs and popover now closes on click when menu i… #38

Merged
merged 3 commits into from
Feb 16, 2021
Merged

Tabs, tabs in breadcrumbs and popover now closes on click when menu i… #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6e281f
Tabs, tabs in breadcrumbs and popover now closes on click when menu i…
Foxhoundn Feb 16, 2021
bb903d4
TS Fixes.
Foxhoundn Feb 16, 2021
f887a1a
Fixed typescript errors and tabs sorting.
Foxhoundn Feb 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 1 addition & 26 deletions __tests__/breadcrumbs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { act, fireEvent, render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import React from 'react';
import {
ReqoreBreadcrumbs,
Expand Down Expand Up @@ -56,28 +56,3 @@ test('Renders shortened <Breadcrumbs /> properly', () => {
);
expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(3);
});

test('Shows hidden <Breadcrumbs /> items on click', () => {
act(() => {
render(
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreBreadcrumbs
_testWidth={300}
items={[
{ label: 'Page 1', icon: 'home' },
{ label: 'Page 2', icon: 'home' },
{ label: 'Page 3', icon: 'home' },
{ label: 'Page 4', icon: 'home' },
{ label: 'Page 5', icon: 'home' },
]}
/>
</ReqoreLayoutContent>
</ReqoreUIProvider>
);

fireEvent.click(document.querySelectorAll('.reqore-breadcrumbs-item')[1]);
});

expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(3);
});
176 changes: 176 additions & 0 deletions __tests__/tabs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import { act, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import {
ReqoreLayoutContent,
ReqoreTabs,
ReqoreTabsContent,
ReqoreUIProvider,
} from '../src';

test('Renders full <Tabs /> properly', () => {
render(
<div style={{ width: '1000px' }}>
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreTabs
tabs={[
{ label: 'Tab 1', icon: 'home', id: 'tab1' },
{ label: 'Tab 2', icon: 'home', id: 'tab2' },
{ label: 'Tab 3', icon: 'home', id: 'tab3' },
{ label: 'Tab 4', icon: 'home', id: 'tab4' },
{ label: 'Tab 5', icon: 'home', id: 'tab5' },
]}
>
<ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
</ReqoreTabs>
</ReqoreLayoutContent>
</ReqoreUIProvider>
</div>
);

expect(document.querySelectorAll('.reqore-tabs-list').length).toBe(1);
expect(document.querySelectorAll('.reqore-tabs').length).toBe(1);
expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(5);
expect(document.querySelectorAll('.reqore-tabs-content').length).toBe(1);
expect(screen.getByText('Tab 1 content')).toBeTruthy();
});

test('Renders shortened <Tabs /> properly', () => {
act(() => {
render(
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreTabs
_testWidth={300}
tabs={[
{ label: 'Tab 1', icon: 'home', id: 'tab1' },
{ label: 'Tab 2', icon: 'home', id: 'tab2' },
{ label: 'Tab 3', icon: 'home', id: 'tab3' },
{ label: 'Tab 4', icon: 'home', id: 'tab4' },
{ label: 'Tab 5', icon: 'home', id: 'tab5' },
]}
>
<ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
</ReqoreTabs>
</ReqoreLayoutContent>
</ReqoreUIProvider>
);
});

expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(3);
expect(
document.querySelectorAll('.reqore-tabs-list .reqore-popover-wrapper')
.length
).toBe(1);
});

test('Default active tab can be specified', () => {
act(() => {
render(
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreTabs
tabs={[
{ label: 'Tab 1', icon: 'home', id: 'tab1' },
{ label: 'Tab 2', icon: 'home', id: 'tab2' },
{ label: 'Tab 3', icon: 'home', id: 'tab3' },
{ label: 'Tab 4', icon: 'home', id: 'tab4' },
{ label: 'Tab 5', icon: 'home', id: 'tab5' },
]}
activeTab='tab4'
>
<ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
</ReqoreTabs>
</ReqoreLayoutContent>
</ReqoreUIProvider>
);
});

expect(screen.getByText('Tab 4 content')).toBeTruthy();
});

test('Changes tab and runs callback', () => {
const cb = jest.fn();

act(() => {
render(
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreTabs
tabs={[
{ label: 'Tab 1', icon: 'home', id: 'tab1' },
{ label: 'Tab 2', icon: 'home', id: 'tab2' },
{ label: 'Tab 3', icon: 'home', id: 'tab3' },
{ label: 'Tab 4', icon: 'home', id: 'tab4' },
{ label: 'Tab 5', icon: 'home', id: 'tab5' },
]}
onTabChange={cb}
>
<ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
</ReqoreTabs>
</ReqoreLayoutContent>
</ReqoreUIProvider>
);

fireEvent.click(document.querySelectorAll('.reqore-tabs-list-item')[2]);
});

expect(screen.getByText('Tab 3 content')).toBeTruthy();
expect(cb).toHaveBeenCalledWith('tab3');
expect(
document.querySelectorAll('.reqore-tabs-list-item__active').length
).toBe(1);
});

test('Does not change tab and run callback when disabled', () => {
const cb = jest.fn();

act(() => {
render(
<ReqoreUIProvider>
<ReqoreLayoutContent>
<ReqoreTabs
tabs={[
{ label: 'Tab 1', icon: 'home', id: 'tab1' },
{ label: 'Tab 2', icon: 'home', id: 'tab2' },
{ label: 'Tab 3', icon: 'home', id: 'tab3', disabled: true },
{ label: 'Tab 4', icon: 'home', id: 'tab4' },
{ label: 'Tab 5', icon: 'home', id: 'tab5' },
]}
onTabChange={cb}
>
<ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
<ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
</ReqoreTabs>
</ReqoreLayoutContent>
</ReqoreUIProvider>
);

fireEvent.click(document.querySelectorAll('.reqore-tabs-list-item')[2]);
});

expect(screen.getByText('Tab 1 content')).toBeTruthy();
expect(cb).not.toHaveBeenCalled();
expect(
document.querySelectorAll('.reqore-tabs-list-item__active').length
).toBe(1);
});
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@qoretechnologies/reqore",
"version": "0.2.8",
"version": "0.3.0",
"description": "ReQore is a UI library of components for Qorus connected apps",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
Loading