MWPW-150610: implement partial load options in configurator (#3010)

* Saving WIP * Temporarily adding mock endpoint to test e2e * Making panel for partial load settings toggle * Removing accidentally commited code * Fixing linting issue * Updating config to fix unit tests * Fixing linting + more test stuff * Next attempt at fixing linting + tests
adobecom · Oct 22, 2024 · deae355 · deae355
1 parent dccf0b2
commit deae355
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 1 deletion.
diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js
@@ -219,6 +219,10 @@ const defaultOptions = {
     default: 'Default',
     grow: 'Grow',
   },
+  partialLoadEnabled: {
+    true: 'Enabled',
+    false: 'Disabled',
+  },
 };
 
 const getTagList = (root) => Object.entries(root).reduce((options, [, tag]) => {
@@ -344,6 +348,9 @@ const BasicsPanel = ({ tagsData }) => {
     <${Select} options=${countryTags} prop="country" label="Country" sort />
     <${Select} options=${languageTags} prop="language" label="Language" sort />`;
 
+  const partialLoadOptions = html`
+    <${Input} label="Partial Load Count" prop="partialLoadCount" type="number" />`;
+
   return html`
   <${Input} label="Collection Name" placeholder="Only used in the author link" prop="collectionName" type="text" />
   <${Input} label="Collection Title" prop="collectionTitle" type="text" title="Enter a title, {placeholder}, or leave empty "/>
@@ -353,7 +360,8 @@ const BasicsPanel = ({ tagsData }) => {
     <${Input} label="Total Cards to Show" prop="totalCardsToShow" type="number" />
     <${Input} label="Auto detect country & lang" prop="autoCountryLang" type="checkbox" />
     ${!state.autoCountryLang && countryLangOptions}
-
+  <${Input} label="Partial Load Enabled" prop="partialLoadEnabled" options="${defaultOptions.partialLoadEnabled}" type="checkbox"  />
+    ${state.partialLoadEnabled && partialLoadOptions}
   `;
 };
 

diff --git a/libs/blocks/caas/utils.js b/libs/blocks/caas/utils.js
@@ -603,6 +603,10 @@ export const getConfig = async (originalState, strs = {}) => {
       setCardBorders: state.setCardBorders,
       showFooterDivider: state.showFooterDivider,
       useOverlayLinks: state.useOverlayLinks,
+      partialLoadWithBackgroundFetch: {
+        enabled: state.partialLoadEnabled,
+        partialLoadCount: state.partialLoadCount,
+      },
       collectionButtonStyle: state.collectionBtnStyle,
       banner: {
         register: {
@@ -819,6 +823,8 @@ export const defaultState = {
   paginationQuantityShown: false,
   paginationType: 'paginator',
   paginationUseTheme3: false,
+  partialLoadEnabled: false,
+  partialLoadCount: 100,
   placeholderUrl: '',
   resultsPerPage: 5,
   searchFields: [],

diff --git a/test/blocks/caas-config/expectedConfigs/defaultConfig.js b/test/blocks/caas-config/expectedConfigs/defaultConfig.js
@@ -1,6 +1,10 @@
 const defaultConfig = {
   collection: {
     mode: 'lightest',
+    partialLoadWithBackgroundFetch: {
+      enabled: false,
+      partialLoadCount: 100,
+    },
     layout: { type: '4up', gutter: '4x', container: '1200MaxWidth' },
     button: { style: 'primary' },
     collectionButtonStyle: 'primary',

diff --git a/test/blocks/caas/caas.test.html b/test/blocks/caas/caas.test.html
@@ -109,6 +109,7 @@
           expect(loadStyle.callCount).to.equal(1);
           expect(caasEl).to.equal(document.getElementById('caas'));
         });
+
       });
     });
   </script>

diff --git a/test/blocks/caas/utils.test.js b/test/blocks/caas/utils.test.js
@@ -161,6 +161,10 @@ describe('getConfig', () => {
     expect(config).to.be.eql({
       collection: {
         mode: 'lightest',
+        partialLoadWithBackgroundFetch: {
+          enabled: false,
+          partialLoadCount: 100,
+        },
         layout: { type: '4up', gutter: '4x', container: '1200MaxWidth' },
         button: { style: 'primary' },
         collectionButtonStyle: 'primary',
@@ -426,6 +430,10 @@ describe('getConfig', () => {
     expect(config).to.be.eql({
       collection: {
         mode: 'lightest',
+        partialLoadWithBackgroundFetch: {
+          enabled: false,
+          partialLoadCount: 100,
+        },
         layout: { type: '4up', gutter: '4x', container: '1200MaxWidth' },
         button: { style: 'primary' },
         collectionButtonStyle: 'primary',
@@ -740,6 +748,21 @@ describe('getCountryAndLang', () => {
       locales: '',
     });
   });
+
+  it('should include partial load settings in the config', async () => {
+    const state = {
+      ...defaultState,
+      partialLoadEnabled: true,
+      partialLoadCount: 75,
+    };
+
+    const config = await getConfig(state, strings);
+
+    expect(config.collection.partialLoadWithBackgroundFetch).to.deep.equal({
+      enabled: true,
+      partialLoadCount: 75,
+    });
+  });
 });
 
 describe('getFloodgateCaasConfig', () => {
@@ -752,6 +775,10 @@ describe('getFloodgateCaasConfig', () => {
     expect(caasFgConfig).to.be.eql({
       collection: {
         mode: 'lightest',
+        partialLoadWithBackgroundFetch: {
+          enabled: false,
+          partialLoadCount: 100,
+        },
         layout: { type: '4up', gutter: '4x', container: '1200MaxWidth' },
         button: { style: 'primary' },
         collectionButtonStyle: 'primary',