@axinom/mosaic-ui 0.44.0-rc.0 → 0.44.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.44.0-rc.0",
+  "version": "0.44.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.17-rc.0",
+    "@axinom/mosaic-core": "^0.4.17-rc.2",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c53cc8faf7c63180e79abff852c4eae456cd8da6"
+  "gitHead": "dcf763ea92712ac3e3c7056fbad9cfc603bf7246"
 }

package/src/components/EmptyStation/EmptyStation.spec.tsx

@@ -1,8 +1,8 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { MessageBar } from '../MessageBar';
-import { StationError } from '../models';
 import { PageHeader } from '../PageHeader';
+import { StationError } from '../models';
 import { EmptyStation, EmptyStationProps } from './EmptyStation';
 
 describe('EmptyStation', () => {

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -6,6 +6,8 @@ import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
 import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
 
+jest.mock('../../hooks/useTabTitle/useTabTitle');
+
 const defaultbulkActions: PageHeaderActionProps[] = [
   {
     label: 'Bulk Action 1',

package/src/hooks/useTabTitle/useTabTitle.spec.tsx

@@ -1,9 +1,12 @@
 import { mount } from 'enzyme';
 import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { useHistory } from 'react-router-dom';
 import { setTitle } from '../../initialize';
 import { useTabTitle } from './useTabTitle';
 
 jest.mock('../../initialize');
+jest.mock('react-router-dom');
 
 const TestWrapper: React.FC<{ title?: string; setTabTitle: boolean }> = ({
   title,
@@ -16,19 +19,32 @@ const TestWrapper: React.FC<{ title?: string; setTabTitle: boolean }> = ({
 
 describe('useTabTitle', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
+    (useHistory as jest.Mock) = jest.fn().mockReturnValue({
+      location: {
+        pathname: '/test',
+      },
+    });
   });
 
-  it('should set the title when setTabTitle is true', () => {
-    const title = 'Test Title';
+  it('should set the tab title when setTabTitle is true', () => {
+    const firstTitle = 'First Title';
+    const secondTitle = 'Second Title';
+
     const setTabTitle = true;
 
-    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+    const wrapper = mount(
+      <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
+    );
 
-    expect(setTitle).toHaveBeenCalledWith('Test Title');
+    expect(setTitle).toHaveBeenCalledWith(firstTitle);
+
+    wrapper.setProps({ title: secondTitle });
+
+    expect(setTitle).toHaveBeenNthCalledWith(2, secondTitle);
   });
 
-  it('should not set the title when setTabTitle is false', () => {
+  it('should not set the tab title when setTabTitle is false', () => {
     const title = 'Test Title';
     const setTabTitle = false;
 
@@ -36,4 +52,44 @@ describe('useTabTitle', () => {
 
     expect(setTitle).not.toHaveBeenCalled();
   });
+
+  it('should not set the tab title when the URL has changed', () => {
+    (useHistory as jest.Mock) = jest
+      .fn()
+      .mockReturnValueOnce({
+        location: {
+          pathname: '/test',
+        },
+      })
+      .mockReturnValueOnce({
+        location: {
+          pathname: '/test2',
+        },
+      });
+
+    const firstTitle = 'First Title';
+    const secondTitle = 'Second Title';
+    const setTabTitle = true;
+
+    const wrapper = mount(
+      <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
+    );
+
+    expect(setTitle).toHaveBeenCalledWith(firstTitle);
+
+    wrapper.setProps({ title: secondTitle });
+
+    expect(setTitle).toHaveBeenCalledTimes(1);
+  });
+
+  it('should set the tab title outside a react router context', () => {
+    (useHistory as jest.Mock) = jest.fn().mockReturnValue(undefined);
+
+    const title = 'Test Title';
+    const setTabTitle = true;
+
+    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+
+    expect(setTitle).toHaveBeenCalled();
+  });
 });

package/src/hooks/useTabTitle/useTabTitle.tsx

@@ -1,13 +1,16 @@
-import { useEffect } from 'react';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { setTitle } from '../../initialize';
 
 export const useTabTitle = (
   title: string | undefined,
   setTabTitle: boolean | undefined,
 ): void => {
-  useEffect(() => {
-    if (setTabTitle) {
-      setTitle(title);
-    }
-  }, [setTabTitle, title]);
+  // useTabTitle should work outside a react router context
+  const { location } = useHistory() ?? {};
+  const [initialLocation] = useState(location);
+
+  if (setTabTitle && location?.pathname === initialLocation?.pathname) {
+    setTitle(title);
+  }
 };