Include CustomViewSelector component in page components VRTs (#3246)

* test(vrt): custom views selectors

* docs: changesets

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>

.changeset/chatty-grapes-destroy.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Missing prop

.changeset/two-rats-kiss.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-local/visual-testing-app': patch
+---
+
+Test Custom Views selector

packages/application-components/src/components/modal-pages/form-modal-page/form-modal-page.tsx

@@ -22,6 +22,10 @@ type Props = {
   title: string;
   isOpen: boolean;
   onClose?: (event: SyntheticEvent) => void;
+  /**
+   * This code is used to configure which Custom Views are available for this page.
+   */
+  customViewLocatorCode?: string;
   children: ReactNode;
   zIndex?: number;
   /**
@@ -83,6 +87,7 @@ const FormModalPage = (props: Props) => (
         />
       </>
     }
+    customViewLocatorCode={props.customViewLocatorCode}
   >
     {props.children}
   </CustomFormModalPage>

visual-testing-app/package.json

@@ -9,8 +9,11 @@
     "preview": "vite preview --port 3000"
   },
   "dependencies": {
+    "@apollo/client": "3.7.14",
     "@commercetools-frontend/application-components": "workspace:*",
     "@commercetools-frontend/application-config": "workspace:*",
+    "@commercetools-frontend/application-shell": "workspace:*",
+    "@commercetools-frontend/application-shell-connectors": "workspace:*",
     "@commercetools-frontend/assets": "workspace:*",
     "@commercetools-frontend/constants": "workspace:*",
     "@commercetools-frontend/react-notifications": "workspace:*",
@@ -27,18 +30,22 @@
     "@commercetools-uikit/text-input": "16.7.3",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
+    "@rollup/plugin-graphql": "2.0.3",
     "@types/react": "^17.0.56",
     "@types/react-dom": "^17.0.19",
     "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^9.0.3",
     "@vitejs/plugin-react": "4.1.0",
     "formik": "2.2.9",
+    "graphql": "^16.8.1",
     "jest": "29.5.0",
     "jest-each": "29.5.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-intl": "^6.4.5",
     "react-redux": "7.2.9",
     "react-router-dom": "5.3.4",
+    "uuid": "9.0.0",
     "vite": "4.4.9"
   }
 }

visual-testing-app/src/apollo-client.ts

@@ -0,0 +1,72 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { v4 as uuidv4 } from 'uuid';
+// @ts-ignore
+import FetchCustomViewsQuery from '../../packages/application-components/src/components/custom-views/custom-views-selector/fetch-custom-views-by-locator.settings.graphql';
+import { CUSTOM_VIEW_LOCATORS } from './constants';
+
+export const customView1 = {
+  id: uuidv4(),
+  defaultLabel: 'Avengers',
+  labelAllLocales: [],
+  url: 'https://avengers.app',
+  type: 'CustomPanel',
+  typeSettings: {
+    size: 'LARGE',
+  },
+  locators: [CUSTOM_VIEW_LOCATORS.productDetails],
+  permissions: [
+    {
+      name: 'view',
+      oAuthScopes: ['view_products'],
+    },
+  ],
+};
+
+export const customView2 = {
+  id: uuidv4(),
+  defaultLabel: 'Justice League',
+  labelAllLocales: [],
+  url: 'https://justice-league.app',
+  type: 'CustomPanel',
+  typeSettings: {
+    size: 'SMALL',
+  },
+  locators: [CUSTOM_VIEW_LOCATORS.productDetails],
+  permissions: [
+    {
+      name: 'view',
+      oAuthScopes: ['view_products'],
+    },
+  ],
+};
+
+const cache = new InMemoryCache();
+cache.writeQuery({
+  query: FetchCustomViewsQuery,
+  variables: {
+    customViewLocatorCode: CUSTOM_VIEW_LOCATORS.productDetails,
+  },
+  data: {
+    allCustomViewsInstallationsByLocator: [
+      {
+        id: uuidv4(),
+        customView: customView1,
+      },
+      {
+        id: uuidv4(),
+        customView: customView2,
+      },
+    ],
+  },
+});
+
+const apolloClient = new ApolloClient({
+  cache,
+  defaultOptions: {
+    query: {
+      fetchPolicy: 'cache-only',
+    },
+  },
+});
+
+export default apolloClient;

visual-testing-app/src/application.tsx

@@ -2,7 +2,9 @@
 
 import './globals.css';
 import { type ComponentType, Suspense } from 'react';
+import { ApolloProvider } from '@apollo/client';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import apolloClient from './apollo-client';
 
 type TVisualRouteSpec = {
   routePath: string;
@@ -29,29 +31,31 @@ const allSortedComponents = Object.keys(allUniqueVisualRouteComponents)
   .map<TVisualRouteSpec>((key) => allUniqueVisualRouteComponents[key]);
 
 const App = () => (
-  <Router>
-    <Switch>
-      <Route path="/" exact>
-        <div>
-          <h1>Visual Testing App</h1>
-          <ul>
-            {allSortedComponents.map(({ routePath }) => (
-              <li key={routePath}>
-                <a href={routePath}>{routePath}</a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </Route>
-      {allSortedComponents.map(({ routePath, Component }) => (
-        <Route key={routePath} path={routePath}>
-          <Suspense fallback={'Loading...'}>
-            <Component />
-          </Suspense>
+  <ApolloProvider client={apolloClient}>
+    <Router>
+      <Switch>
+        <Route path="/" exact>
+          <div>
+            <h1>Visual Testing App</h1>
+            <ul>
+              {allSortedComponents.map(({ routePath }) => (
+                <li key={routePath}>
+                  <a href={routePath}>{routePath}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </Route>
-      ))}
-    </Switch>
-  </Router>
+        {allSortedComponents.map(({ routePath, Component }) => (
+          <Route key={routePath} path={routePath}>
+            <Suspense fallback={'Loading...'}>
+              <Component />
+            </Suspense>
+          </Route>
+        ))}
+      </Switch>
+    </Router>
+  </ApolloProvider>
 );
 
 export default App;

visual-testing-app/src/components/custom-form-detail-page/custom-form-detail-page.visualroute.tsx

@@ -7,6 +7,7 @@ import {
   BinLinearIcon,
 } from '@commercetools-uikit/icons';
 import TextField from '@commercetools-uikit/text-field';
+import { CUSTOM_VIEW_LOCATORS } from '../../constants';
 import { Suite, Spec } from '../../test-utils';
 
 export const routePath = '/custom-form-detail-page';
@@ -122,5 +123,10 @@ export const Component = () => (
         }
       />
     </Spec>
+    <Spec label="CustomFormDetailPage - Custom Views selector" size="xl">
+      <CustomFormDetailPageContainer
+        customViewLocatorCode={CUSTOM_VIEW_LOCATORS.productDetails}
+      />
+    </Spec>
   </Suite>
 );

visual-testing-app/src/components/custom-form-main-page/custom-form-main-page.visualroute.tsx

@@ -3,12 +3,14 @@ import { CustomFormMainPage } from '@commercetools-frontend/application-componen
 import { RevertIcon } from '@commercetools-uikit/icons';
 import Spacings from '@commercetools-uikit/spacings';
 import TextField from '@commercetools-uikit/text-field';
+import { CUSTOM_VIEW_LOCATORS } from '../../constants';
 import { Suite, Spec } from '../../test-utils';
 
 export const routePath = '/custom-form-main-page';
 
 type CustomFormMainPageContainerProps = {
   customTitleRow?: ReactNode;
+  customViewLocatorCode?: string;
 };
 
 const CustomFormMainPageContainer = (
@@ -18,6 +20,7 @@ const CustomFormMainPageContainer = (
     <CustomFormMainPage
       title="Lorem Ipsum"
       subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+      customViewLocatorCode={props.customViewLocatorCode}
       formControls={
         <>
           <CustomFormMainPage.FormSecondaryButton
@@ -54,5 +57,10 @@ export const Component = () => (
     <Spec label="CustomFormMainPage with customTitleRow">
       <CustomFormMainPageContainer customTitleRow={<h2>John Doe</h2>} />
     </Spec>
+    <Spec label="CustomFormMainPage with Custom Views selector">
+      <CustomFormMainPageContainer
+        customViewLocatorCode={CUSTOM_VIEW_LOCATORS.productDetails}
+      />
+    </Spec>
   </Suite>
 );

visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualroute.tsx

@@ -8,6 +8,7 @@ import {
   BinLinearIcon,
 } from '@commercetools-uikit/icons';
 import TextField from '@commercetools-uikit/text-field';
+import { CUSTOM_VIEW_LOCATORS } from '../../constants';
 import { NestedPages, Suite } from '../../test-utils';
 
 export const routePath = '/custom-form-modal-page';
@@ -130,6 +131,14 @@ export const Component = () => (
             />
           ),
         },
+        {
+          path: 'custom-form-modal-page-custom-views-selector',
+          spec: (
+            <ModalPageWithPortalParentSelector
+              customViewLocatorCode={CUSTOM_VIEW_LOCATORS.productDetails}
+            />
+          ),
+        },
       ]}
     />
   </Suite>

visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualspec.ts

@@ -7,6 +7,7 @@ describe.each`
   ${'custom-form-modal-page-default-controls'}
   ${'custom-form-modal-page-custom-controls'}
   ${'custom-form-modal-page-hidden-controls'}
+  ${'custom-form-modal-page-custom-views-selector'}
 `('CustomFormModalPage $path', ({ path }) => {
   beforeAll(async () => {
     await page.goto(`${HOST}/custom-form-modal-page/${path}`);