fix: enable routing in manage (#474)

* chore: initial setup for routing in manage WIP * chore: router progress WIP * chore: refactored activeRoute to include url vars + code review WIP * chore: added createRoute function WIP * test: partially updated tests WIP * chore: merge branch 'develop' into 'fix/routing-manage' WIP * fix: removed routes, kept basic routing functionality WIP * chore: fix build errors WIP * test: fix tests * chore: fixed runtime error * test: coverage for core * chore: coverage * chore: fix build errors in presentation * fix: create app machine after translations have loaded * test: coverage
netwerk-digitaal-erfgoed · Nov 30, 2021 · a992be9 · a992be9
1 parent b6c8c43
commit a992be9
Show file tree

Hide file tree

Showing 39 changed files with 1,705 additions and 1,156 deletions.
diff --git a/packages/solid-crs-components/lib/alerts/alert.component.spec.ts b/packages/solid-crs-components/lib/alerts/alert.component.spec.ts
@@ -1,4 +1,4 @@
-import { ArgumentError, MemoryTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
+import { ArgumentError, MockTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
 import { Alert } from './alert';
 import { AlertComponent } from './alert.component';
 
@@ -48,14 +48,14 @@ describe('AlertComponent', () => {
       message: 'foo',
     };
 
-    component.translator = new MemoryTranslator('en-GB');
+    component.translator = new MockTranslator('nl-NL');
 
     window.document.body.appendChild(component);
     await component.updateComplete;
 
     const message = window.document.body.getElementsByTagName('nde-alert')[0].shadowRoot.querySelector('.message').innerHTML.replace(/<!---->/g, '');
 
-    expect(message).toBe('[foo]');
+    expect(message).toBe('foo');
 
   });
 

diff --git a/packages/solid-crs-components/lib/collections/collection-card.component.spec.ts b/packages/solid-crs-components/lib/collections/collection-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { ArgumentError, Collection, MemoryTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
+import { Collection, MockTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
 import { CollectionCardComponent } from './collection-card.component';
 
 describe('AlertComponent', () => {
@@ -16,14 +16,14 @@ describe('AlertComponent', () => {
 
     component = window.document.createElement('nde-collection-card') as CollectionCardComponent;
 
-    component.translator = new MemoryTranslator('en-GB');
+    component.translator = new MockTranslator('nl-NL');
 
     fetchMock.resetMocks();
 
     fetchMock.mockResponseOnce(JSON.stringify({
       'collections': {
         'card': {
-          'name-unavailable': 'Name unavailable',
+          'name-unavailable': component.translator.translate('collections.card.name-unavailable'),
         },
       },
     }));
@@ -77,7 +77,7 @@ describe('AlertComponent', () => {
     const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
 
     expect(html).not.toContain(testCollection.name);
-    expect(html).toContain('Name unavailable');
+    expect(html).toContain(component.translator.translate('collections.card.name-unavailable'));
     expect(html).toContain(testCollection.description);
 
   });
@@ -91,7 +91,7 @@ describe('AlertComponent', () => {
 
     expect(html).not.toContain(testCollection.name);
     expect(html).not.toContain(testCollection.description);
-    expect(html).toContain('Name unavailable');
+    expect(html).toContain(component.translator.translate('collections.card.name-unavailable'));
 
   });
 

diff --git a/packages/solid-crs-components/lib/collections/object-card.component.spec.ts b/packages/solid-crs-components/lib/collections/object-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { CollectionObject, MemoryTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
+import { CollectionObject, MockTranslator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
 import { ObjectCardComponent } from './object-card.component';
 
 describe('ObjectCardComponent', () => {
@@ -21,23 +21,7 @@ describe('ObjectCardComponent', () => {
 
     component = window.document.createElement('nde-object-card') as ObjectCardComponent;
 
-    component.translator = new MemoryTranslator('en-GB');
-
-    fetchMock.resetMocks();
-
-    fetchMock.mockResponseOnce(JSON.stringify({
-      'collections': {
-        'card': {
-          'name-unavailable': 'Name unavailable',
-          'additionalType-unavailable': 'Type unavailable',
-        },
-      },
-      'common': {
-        'date': {
-          'just-now': 'Just Now',
-        },
-      },
-    }));
+    component.translator = new MockTranslator('nl-NL');
 
   });
 
@@ -63,9 +47,9 @@ describe('ObjectCardComponent', () => {
 
     expect(html).toContain(testObject.name);
     expect(html).toContain(testObject.additionalType[0].name);
-    expect(html).not.toContain('Name unavailable');
-    expect(html).not.toContain('Type unavailable');
-    expect(html).toContain('- Just Now');
+    expect(html).not.toContain(component.translator.translate('collections.card.name-unavailable'));
+    expect(html).not.toContain(component.translator.translate('collections.card.additionalType-unavailable'));
+    expect(html).toContain(component.translator.translate('common.date.just-now'));
 
   });
 
@@ -78,10 +62,10 @@ describe('ObjectCardComponent', () => {
     const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
 
     expect(html).not.toContain(testObject.name);
-    expect(html).toContain('Name unavailable');
+    expect(html).toContain(component.translator.translate('collections.card.name-unavailable'));
     expect(html).toContain(testObject.additionalType[0].name);
-    expect(html).not.toContain('Type unavailable');
-    expect(html).toContain('- Just Now');
+    expect(html).not.toContain(component.translator.translate('collections.card.additionalType-unavailable'));
+    expect(html).toContain(component.translator.translate('common.date.just-now'));
 
   });
 
@@ -93,10 +77,10 @@ describe('ObjectCardComponent', () => {
 
     const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
     expect(html).toContain(testObject.name);
-    expect(html).not.toContain('Name unavailable');
     expect(html).not.toContain(testObject.additionalType[0].name);
-    expect(html).toContain('Type unavailable');
-    expect(html).toContain('- Just Now');
+    expect(html).not.toContain(component.translator.translate('collections.card.name-unavailable'));
+    expect(html).toContain(component.translator.translate('collections.card.additionalType-unavailable'));
+    expect(html).toContain(component.translator.translate('common.date.just-now'));
 
   });
 
@@ -109,10 +93,10 @@ describe('ObjectCardComponent', () => {
     const html = window.document.body.getElementsByTagName(tag)[0].shadowRoot.innerHTML;
 
     expect(html).toContain(testObject.name);
-    expect(html).not.toContain('Name unavailable');
+    expect(html).not.toContain(component.translator.translate('collections.card.name-unavailable'));
     expect(html).toContain(testObject.additionalType[0].name);
-    expect(html).not.toContain('Type unavailable');
-    expect(html).not.toContain('- Just Now');
+    expect(html).not.toContain(component.translator.translate('collections.card.additionalType-unavailable'));
+    expect(html).not.toContain(component.translator.translate('common.date.just-now'));
 
   });
 

diff --git a/packages/solid-crs-components/package.json b/packages/solid-crs-components/package.json
@@ -82,7 +82,7 @@
         "branches": 93.17,
         "functions": 98.97,
         "lines": 100,
-        "statements": 99.68
+        "statements": 99.69
       }
     },
     "coveragePathIgnorePatterns": [
@@ -100,6 +100,7 @@
           "warnOnly": true
         }
       }
-    }
+    },
+    "maxWorkers": 6
   }
-}
+}
diff --git a/packages/solid-crs-core/lib/logging/console-logger.spec.ts b/packages/solid-crs-core/lib/logging/console-logger.spec.ts
@@ -161,4 +161,36 @@ describe('ConsoleLogger', () => {
 
   });
 
+  describe('warn', () => {
+
+    it('should throw when typename is undefined', async() => {
+
+      expect(() => service.warn(undefined, 'message')).toThrow(ArgumentError);
+
+    });
+
+    it('should throw when message is undefined', async() => {
+
+      expect(() => service.warn('ConsoleLoggerTests', undefined)).toThrow(ArgumentError);
+
+    });
+
+  });
+
+  describe('error', () => {
+
+    it('should throw when typename is undefined', async() => {
+
+      expect(() => service.error(undefined, 'message')).toThrow(ArgumentError);
+
+    });
+
+    it('should throw when message is undefined', async() => {
+
+      expect(() => service.error('ConsoleLoggerTests', undefined)).toThrow(ArgumentError);
+
+    });
+
+  });
+
 });
diff --git a/packages/solid-crs-core/lib/router/router.spec.ts b/packages/solid-crs-core/lib/router/router.spec.ts
@@ -1,4 +1,4 @@
-import { matchPath, activeRoute, Route, urlVariables, updateHistory, updateTitle, routerStateConfig, ROUTER, RouterStates, NavigateEvent, NavigatedEvent } from './router';
+import { matchPath, activeRoute, Route, urlVariables, updateHistory, updateTitle, routerStateConfig, ROUTER, RouterStates, NavigateEvent, NavigatedEvent, routerEventsConfig, RouterEvents, createRoute } from './router';
 
 describe('Router', () => {
 
@@ -55,41 +55,83 @@ describe('Router', () => {
         { path: '/test/{{numbers}}/testing', targets: [] },
       ];
 
-      expect(activeRoute(routes)).toEqual(routes[0]);
+      expect(activeRoute(routes)).toEqual(expect.objectContaining(routes[0]));
 
     });
 
-    it('should return undefined when no match is found', () => {
+    it('should error when no match is found', () => {
 
       const routes: Route[] = [
         { path: '/test/testing', targets: [] },
         { path: '/test', targets: [] },
       ];
 
-      expect(activeRoute(routes)).toEqual(undefined);
+      expect(() => activeRoute(routes)).toThrow('No route match found for this URL');
 
     });
 
   });
 
   describe('urlVariables', () => {
 
-    it('should return a correct map of URL variables', () => {
+    const route: Route = {
+      path: '/{{partOne}}/{{numbers}}/{{partTwo}}',
+      targets: [],
+    };
+
+    beforeEach(() => {
+
+      delete window.location;
+      (window.location as any) = new URL('http://localhost/test/12345/testing?search=test#test');
+
+    });
+
+    it('should return a correct map of path params', () => {
 
       // window.location.pathname = '/test/12345/testing'
-      const resultMap = urlVariables('/{{partOne}}/{{numbers}}/{{partTwo}}');
+      const result = urlVariables(route);
+
+      expect(result.pathParams.get('partOne')).toEqual('test');
+      expect(result.pathParams.get('numbers')).toEqual('12345');
+      expect(result.pathParams.get('partTwo')).toEqual('testing');
+
+    });
+
+    it('should return correct searchParams', () => {
 
-      expect(resultMap.get('partOne')).toEqual('test');
-      expect(resultMap.get('numbers')).toEqual('12345');
-      expect(resultMap.get('partTwo')).toEqual('testing');
+      const result = urlVariables(route);
+      expect(result.searchParams.get('search')).toEqual('test');
+
+    });
+
+    it('should return correct hash', () => {
+
+      const result = urlVariables(route);
+      expect(result.hash).toEqual('#test');
+
+    });
+
+    it('should return empty map when no path variable exists', () => {
+
+      const routeWithoutParams: Route = {
+        path: '/path/without/variables',
+        targets: [],
+      };
+
+      expect(urlVariables(routeWithoutParams).pathParams.size).toEqual(0);
 
     });
 
     it('should error when no match was found for every variable', () => {
 
+      const invalidRoute: Route = {
+        path: '/{{partOne}}//{{numbers}}/{{partTwo}}',
+        targets: [],
+      };
+
       // usually happens when an invalid path was provided (here: double slashes)
       // or when the regex is made incorrect matches (should not happen)
-      expect(() => urlVariables('/{{partOne}}//{{numbers}}/{{partTwo}}')).toThrow('No match for every variable');
+      expect(() => urlVariables(invalidRoute)).toThrow('No match for every variable');
 
     });
 
@@ -167,6 +209,7 @@ describe('Router', () => {
       {
         path,
         targets: [ 'target' ],
+        title: 'test title',
       },
     ];
 
@@ -191,6 +234,13 @@ describe('Router', () => {
       expect(config[ROUTER].states[RouterStates.NAVIGATING].invoke.onDone.actions[0]())
         .toEqual(updateTitle(activeRoute(routes).title));
 
+      // dont update title when it is undefined in activeroute
+      const routesWithoutTitle = routes.map((rte) => ({ path: rte.path, targets: rte.targets }));
+      const configWithoutTitle = routerStateConfig(routesWithoutTitle);
+
+      expect(configWithoutTitle[ROUTER].states[RouterStates.NAVIGATING].invoke.onDone.actions[0]())
+        .toEqual(updateTitle(activeRoute(routesWithoutTitle).title));
+
     });
 
     it('invoke.onDone.target should always contain RouterStates.IDLE', () => {
@@ -231,4 +281,39 @@ describe('Router', () => {
 
   });
 
+  describe('routerEventsConfig', () => {
+
+    it('should return NAVIGATE event config', () => {
+
+      const result = routerEventsConfig();
+      expect(result).toEqual(expect.objectContaining({ [RouterEvents.NAVIGATE]: expect.objectContaining({}) }));
+      expect(result[RouterEvents.NAVIGATE].target).toContain(`#${RouterStates.NAVIGATING}`);
+      expect((result[RouterEvents.NAVIGATE].actions[0].assignment as any).path(undefined, new NavigateEvent('path'))).toEqual('path');
+
+      expect((result[RouterEvents.NAVIGATE].actions[0].assignment as any).path(undefined, new NavigateEvent()))
+        .toEqual(window.location.pathname);
+
+    });
+
+    it('should return NAVIGATED event config', () => {
+
+      const result = routerEventsConfig();
+      expect(result).toEqual(expect.objectContaining({ [RouterEvents.NAVIGATED]: expect.objectContaining({}) }));
+      expect(result[RouterEvents.NAVIGATED].actions[0](undefined, new NavigatedEvent('test', 'test'))).toEqual(undefined);
+
+    });
+
+  });
+
+  describe('createRoute', () => {
+
+    it('should return correct route object', () => {
+
+      expect(createRoute('path', [])).toEqual({ path: 'path', targets: [], title: undefined });
+      expect(createRoute('path', [], 'title')).toEqual({ path: 'path', targets: [], title: 'title' });
+
+    });
+
+  });
+
 });