Multiple path parameters do not get replaced in view url (#211)

Multiple path parameter replacement in the viewUrl fixed.
SAP · Nov 15, 2018 · d77cde4 · d77cde4
1 parent aec4a0a
commit d77cde4
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 18 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
@@ -119,20 +119,30 @@ const escapeRegExp = string => {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
 
-const replaceVars = (viewUrl, params, prefix) => {
+const replaceVars = (viewUrl, params, prefix, parenthesis = true) => {
   let processedUrl = viewUrl;
   if (params) {
     Object.entries(params).forEach(entry => {
       processedUrl = processedUrl.replace(
-        new RegExp(escapeRegExp('{' + prefix + entry[0] + '}'), 'g'),
+        new RegExp(
+          escapeRegExp(
+            (parenthesis ? '{' : '') +
+              prefix +
+              entry[0] +
+              (parenthesis ? '}' : '')
+          ),
+          'g'
+        ),
         encodeURIComponent(entry[1])
       );
     });
   }
-  processedUrl = processedUrl.replace(
-    new RegExp('\\{' + escapeRegExp(prefix) + '[^\\}]+\\}', 'g'),
-    ''
-  );
+  if (parenthesis) {
+    processedUrl = processedUrl.replace(
+      new RegExp('\\{' + escapeRegExp(prefix) + '[^\\}]+\\}', 'g'),
+      ''
+    );
+  }
   return processedUrl;
 };
 
@@ -141,6 +151,7 @@ const navigateIframe = (config, component, node) => {
   const componentData = component.get();
   let viewUrl = componentData.viewUrl;
   if (viewUrl) {
+    viewUrl = replaceVars(viewUrl, componentData.pathParams, ':', false);
     viewUrl = replaceVars(viewUrl, componentData.context, contextVarPrefix);
     viewUrl = replaceVars(
       viewUrl,

diff --git a/core/test/routing.spec.js b/core/test/routing.spec.js
@@ -70,6 +70,21 @@ describe('Routing', () => {
                     viewUrl: 't2.html'
                   }
                 ]
+              },
+              {
+                pathSegment: 'categories',
+                children: [
+                  {
+                    pathSegment: ':category',
+                    viewUrl: 'cats/:category#details',
+                    children: [
+                      {
+                        pathSegment: ':sub',
+                        viewUrl: 'cats/:category/:sub'
+                      }
+                    ]
+                  }
+                ]
               }
             ],
             context: {
@@ -376,6 +391,78 @@ describe('Routing', () => {
       );
     });
 
+    it('should set component data with path param', async () => {
+      // given
+      const path = '#/projects/categories/cat1';
+      const expectedViewUrl = 'cats/cat1#details';
+      const mockBrowser = new MockBrowser();
+      const window = mockBrowser.getWindow();
+      global.window = window;
+      const document = mockBrowser.getDocument();
+      global.document = document;
+
+      const node = {
+        style: {},
+        prepend: sinon.spy()
+      };
+
+      const config = {
+        iframe: null,
+        builderCompatibilityMode: false,
+        navigateOk: null
+      };
+
+      // when
+      window.Luigi = {};
+      window.Luigi.config = sampleLuigiConfig;
+      const iframeMock = { src: null };
+      sinon.stub(document, 'createElement').callsFake(() => iframeMock);
+      await routing.handleRouteChange(path, component, node, config, window);
+
+      // then
+      assert.equal(iframeMock.src, expectedViewUrl);
+      assert.equal(
+        component.get().hideNav,
+        window.Luigi.config.settings.hideNavigation
+      );
+    });
+
+    it('should set component data with multiple path params', async () => {
+      // given
+      const path = '#/projects/categories/cat1/sub23';
+      const expectedViewUrl = 'cats/cat1/sub23';
+      const mockBrowser = new MockBrowser();
+      const window = mockBrowser.getWindow();
+      global.window = window;
+      const document = mockBrowser.getDocument();
+      global.document = document;
+
+      const node = {
+        style: {},
+        prepend: sinon.spy()
+      };
+
+      const config = {
+        iframe: null,
+        builderCompatibilityMode: false,
+        navigateOk: null
+      };
+
+      // when
+      window.Luigi = {};
+      window.Luigi.config = sampleLuigiConfig;
+      const iframeMock = { src: null };
+      sinon.stub(document, 'createElement').callsFake(() => iframeMock);
+      await routing.handleRouteChange(path, component, node, config, window);
+
+      // then
+      assert.equal(iframeMock.src, expectedViewUrl);
+      assert.equal(
+        component.get().hideNav,
+        window.Luigi.config.settings.hideNavigation
+      );
+    });
+
     it('should get DefaultChildNode if viewUrl is not defined', async () => {
       // given
       const path = '#/projects/teams';