Fix Custom Views locator hook (#3280)

* fix(application-component): fix custom views locator hook * fix(visual-testing-app): fix custom views vrts * chore: changeset added
commercetools · Oct 19, 2023 · 0c49364 · 0c49364 · github-actions · Oct 19, 2023
1 parent 3e11bae
commit 0c49364
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/cool-flies-fail.md b/.changeset/cool-flies-fail.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Fix url matching in `useCustomViewLocator` hook.
diff --git a/...ents/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx b/...ents/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx
@@ -7,6 +7,7 @@ const mockConfig = {
   'locator-a': '/route/locator-a',
   'locator-b': '/route/locator-b',
   'locator-c': '/route/locator-c',
+  'locator-nested': '/route/locator-a/nested',
 };
 
 const createMockHistory = (location: string) =>
@@ -21,10 +22,11 @@ const render = (location: string) =>
 
 describe('useCustomViewLocatorSelector', () => {
   it.each`
-    location              | expectedLocator
-    ${'/route/locator-a'} | ${'locator-a'}
-    ${'/route/locator-b'} | ${'locator-b'}
-    ${'/route/locator-c'} | ${'locator-c'}
+    location                     | expectedLocator
+    ${'/route/locator-a'}        | ${'locator-a'}
+    ${'/route/locator-b'}        | ${'locator-b'}
+    ${'/route/locator-c'}        | ${'locator-c'}
+    ${'/route/locator-a/nested'} | ${'locator-nested'}
   `(
     'should return the view locator code based on the current location',
     ({

diff --git a/...components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts b/...components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts
@@ -14,7 +14,7 @@ const useCustomViewLocatorSelector = (
       return matchPath(location.pathname, {
         // strip the search, otherwise the path won't match
         path: pathWithoutSearch(locator),
-        exact: false,
+        exact: true,
         strict: false,
       });
     }

diff --git a/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx b/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx
@@ -232,7 +232,7 @@ export const Component = () => (
     <Spec label="TabularDetailPage - with Custom Views selector" size="xl">
       <TabularDetailPageContainer
         customViewLocatorCodes={{
-          [CUSTOM_VIEW_LOCATORS.productDetails]: routePath,
+          [CUSTOM_VIEW_LOCATORS.productDetails]: '/tabular-detail-page/tab-one',
         }}
       >
         <Content />

diff --git a/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx b/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx
@@ -231,7 +231,7 @@ export const Component = () => (
     <Spec label="TabularMainPage - with Custom Views selector" size="xl">
       <TabularMainPageContainer
         customViewLocatorCodes={{
-          [CUSTOM_VIEW_LOCATORS.productDetails]: routePath,
+          [CUSTOM_VIEW_LOCATORS.productDetails]: '/tabular-main-page/tab-one',
         }}
       >
         <Content />

diff --git a/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx b/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx
@@ -275,7 +275,8 @@ export const Component = () => (
           spec: (
             <ModalPageWithPortalParentSelector
               customViewLocatorCodes={{
-                [CUSTOM_VIEW_LOCATORS.productDetails]: routePath,
+                [CUSTOM_VIEW_LOCATORS.productDetails]:
+                  '/tabular-modal-page/tabular-modal-page-default-with-custom-views-selector/tab-one',
               }}
             >
               <Content />