Feature/breadcrumbs

.github/workflows/tests.yml

@@ -29,6 +29,8 @@ jobs:
     - name: Installing modules
       id: install_modules
       run: |
+        yarn cache clean
+        rm -rf node_modules
         yarn install
     - name: Build test
       id: build_test

__tests__/breadcrumbs.test.tsx

@@ -0,0 +1,83 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import {
+  ReqoreBreadcrumbs,
+  ReqoreLayoutContent,
+  ReqoreUIProvider,
+} from '../src';
+
+test('Renders full <Breadcrumbs /> properly', () => {
+  render(
+    <div style={{ width: '1000px' }}>
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreBreadcrumbs
+            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>
+    </div>
+  );
+
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(
+    1
+  );
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(5);
+});
+
+test('Renders shortened <Breadcrumbs /> properly', () => {
+  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>
+    );
+  });
+
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(
+    1
+  );
+  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);
+});

__tests__/sidebar.test.tsx

@@ -1,13 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { ReqoreUIProvider } from '../src';
-import QorusSidebar from '../src/components/Sidebar';
+import ReqoreSidebar from '../src/components/Sidebar';
 import { qorusSidebarItems } from '../src/mock/menu';
 
 test('Renders sidebar', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/' />
     </ReqoreUIProvider>
   );
 
@@ -20,7 +20,7 @@ test('Sidebar can be collapsed', () => {
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         onCollapseChange={handleClick}
@@ -40,7 +40,7 @@ test('Sidebar can be collapsed', () => {
 test('Can open submenu manually', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/' />
     </ReqoreUIProvider>
   );
 
@@ -53,7 +53,7 @@ test('Can open submenu manually', () => {
 test('Submenu opens automatically if path matches', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar items={qorusSidebarItems} path='/item-3/item-1' />
+      <ReqoreSidebar items={qorusSidebarItems} path='/item-3/item-1' />
     </ReqoreUIProvider>
   );
 
@@ -67,7 +67,7 @@ test('Bookmarks can be added and removed', () => {
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         onBookmarksChange={handleBookmarksChange}
@@ -93,12 +93,49 @@ test('Bookmarks can be added and removed', () => {
   expect(document.querySelectorAll('.sidebarSection').length).toBe(3);
 });
 
+test('Bookmarks clicks are not propagated through', () => {
+  const handleBookmarksChange = jest.fn();
+  const handleClick = jest.fn();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreSidebar
+        items={{
+          Menu: {
+            title: 'Menu',
+            items: [
+              {
+                name: 'Menu item 1',
+                as: 'p',
+                icon: 'home',
+                id: 'menu-item-1',
+                props: {
+                  onClick: handleClick,
+                },
+              },
+            ],
+          },
+        }}
+        path='/'
+        onBookmarksChange={handleBookmarksChange}
+      />
+    </ReqoreUIProvider>
+  );
+
+  const addBookmarkButton = document.querySelector('.favorite');
+
+  fireEvent.click(addBookmarkButton);
+
+  expect(handleBookmarksChange).toHaveBeenCalledWith(['menu-item-1']);
+  expect(handleClick).toHaveBeenCalledTimes(0);
+});
+
 test('Renders item as <p> element with onClick', () => {
   const handleItemClick = jest.fn();
 
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={{
           ...qorusSidebarItems,
           TestItems: {
@@ -107,7 +144,9 @@ test('Renders item as <p> element with onClick', () => {
               {
                 name: 'Test',
                 as: 'p',
-                onClick: handleItemClick,
+                props: {
+                  onClick: handleItemClick,
+                },
                 id: 'test-item-1',
                 icon: 'add',
               },
@@ -134,7 +173,7 @@ test('Renders item as <p> element with onClick', () => {
 test('Renders custom item at the top', () => {
   render(
     <ReqoreUIProvider>
-      <QorusSidebar
+      <ReqoreSidebar
         items={qorusSidebarItems}
         path='/'
         customItems={[

jest.config.js

@@ -3,6 +3,8 @@ module.exports = {
   // `<rootDir>` is a token Jest substitutes
   roots: ['<rootDir>/__tests__'],
 
+  testMatch: ['<rootDir>/__tests__/**/*.test.(ts|tsx)'],
+
   // Jest transformations -- this adds support for TypeScript
   // using ts-jest
   transform: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,6 +54,7 @@
     "react-test-renderer": "^17.0.1",
     "styled-components": "^5.2.1",
     "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {