Merge pull request #2453 from axa-ch-webhub-cloud/bugfix/GITHUB-2452-…

…axa-footer-broken-when-versioned

fix: fix broken axa-footer when versioned

src/components/30-organisms/footer/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.2.3
+
+Fix broken footer when versioned (e.g. as axa-footer-aem). #2452
+
 ## 6.2.0
 
 Changed the color of the footer. #2435

src/components/30-organisms/footer/demo.js

@@ -1,8 +1,10 @@
 import changelog from './CHANGELOG.md';
 import readme from './README.md';
-import './index';
+import createVersionedFooter from './index.react';
 import '../../10-atoms/text';
 
+createVersionedFooter(null, 'aem');
+
 export default {
   title: 'Examples/Footer/Pure HTML',
   parameters: {
@@ -17,9 +19,9 @@ export default {
 export const Callbacks = () => {
   const wrapper = document.createElement('div');
   const footerMarkup = `
-    <axa-footer clickevents>
+    <axa-footer-aem clickevents>
       <h2 slot="column-title">axa & you</h2>
-      <a slot="column-item" href="#https://axa.ch/en/private-customers.html">Contact</a>
+      <div class="nested-child"><a slot="column-item" href="#https://axa.ch/en/private-customers.html">Contact</a></div>
       <a slot="column-item" href="https://axa.ch/en/private-customers/claims/everything-about-claiming/file-claim.html" target="_blank">Report a claim</a>
       <a slot="column-item" href="https://axa.ch/en/information/broker-services.html" target="_blank">Broker</a>
       <a slot="column-item" href="https://axa.ch/en/about-axa/jobs-career/job-vacancies/job-vacancies.html" target="_blank">Job vacancies</a>
@@ -46,7 +48,7 @@ export const Callbacks = () => {
       <a slot="social-item" href="https://www.linkedin.com/company/axa/" target="_blank">
       <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path d="M6.519 4.183A2.146 2.146 0 0 1 4.354 6.3a2.147 2.147 0 0 1-2.121-2.16A2.147 2.147 0 0 1 4.376 2a2.14 2.14 0 0 1 1.527.641c.403.41.625.966.616 1.542zm0 3.9H2.216V22h4.32L6.519 8.083zm6.878 0h-4.27V22h4.287v-7.3c0-4.05 5.2-4.383 5.2 0V22h4.303v-8.817c0-6.833-7.692-6.666-9.503-3.216l-.017-1.884z" fill="#FFFFFF"/></svg>
       </a>
-    </axa-footer>`;
+    </axa-footer-aem>`;
 
   wrapper.innerHTML = footerMarkup;
 

src/components/30-organisms/footer/index.js

@@ -120,26 +120,27 @@ class AXAFooter extends InlineStyles {
   }
 
   /**
-   * A slot element needs to be a direct child of a web component. Since AEM
-   * (and potentially other systems) wrap those children, they are no longer
-   * direct children of a component. We work around this problem by
-   * copying the slot-attribute to the direct children of the component.
+   * A slot element needs to be a direct child of a web component. In case AEM
+   * (and potentially other systems) would wrap those children (individually, say under a <div>),
+   * they would no longer be direct children of a component. We work around this problem by
+   * copying such nested slot attribute values upwards to the direct children of the component.
    *
-   * @param {*} nestedChild A direct child of the component, which has a slot
-   * element nested somewhere lower, which would properly belong to the top component.
+   * @param {*} nestedChild A possibly nested child of the component, which - if truly nested - would properly belong to a direct child.
    */
   _setSlotNameFromNestedChildToDirectChildNodeOfComponent(nestedChild) {
-    let currentNode = nestedChild;
-    const domTree = [currentNode];
-    while (
-      AXAFooter.tagName.toUpperCase() !== currentNode.tagName.toUpperCase()
-    ) {
-      currentNode = currentNode.parentNode;
-      domTree.push(currentNode);
+    let directChild = nestedChild;
+    for (
+      let parent;
+      // eslint-disable-next-line no-cond-assign
+      (parent = directChild.parentNode) && parent !== this; // is this still a *nested* child, whose parent node is not yet host element 'this'?
+      directChild = parent // yes, so move 1 step up towards the direct child
+    );
+    // we established a nested-child situation and identified its corresponding, but distinct direct child?
+    if (directChild && directChild !== nestedChild) {
+      // yes, so copy the nested slot attribute value to the direct-child slot
+      directChild.setAttribute('slot', nestedChild.getAttribute('slot'));
     }
-    const slotElement = domTree[domTree.length - 2];
-    slotElement.setAttribute('slot', nestedChild.getAttribute('slot'));
-    return slotElement;
+    return directChild;
   }
 
   /**

src/components/30-organisms/footer/ui.test.accessor.js

@@ -1,13 +1,14 @@
 import { Selector } from 'testcafe';
 
-class FooterAccessor {
-  constructor() {
+export class FooterAccessorClass {
+  constructor(name = 'axa-footer') {
     this._getSlotNode = Selector(
       slotName =>
         document
-          .querySelector('axa-footer')
+          .querySelector(name)
           .shadowRoot.querySelector(`slot[name='${slotName}']`)
-          .assignedNodes()[0]
+          .assignedNodes()[0],
+      { dependencies: { name } }
     );
   }
 
@@ -22,4 +23,4 @@ class FooterAccessor {
   }
 }
 
-export default new FooterAccessor();
+export default new FooterAccessorClass();

src/components/30-organisms/footer/ui.test.js

@@ -1,17 +1,17 @@
 import { Selector } from 'testcafe';
-import FooterAccessor from './ui.test.accessor';
+import FooterAccessor, { FooterAccessorClass } from './ui.test.accessor';
 
 const host = process.env.TEST_HOST_STORYBOOK_URL;
-const TAG = 'axa-footer';
 const CLASS = '.o-footer';
+const versionedFooterAccessor = new FooterAccessorClass('axa-footer-aem');
 
 fixture('Footer - React Smoketest').page(
   `${host}/iframe.html?id=examples-footer-react--callbacks&viewMode=story`
 );
 
 test('should render footer with working react callbacks', async t => {
   await t.setTestSpeed(0.5);
-  const $axaElem = await Selector(TAG);
+  const $axaElem = await Selector('axa-footer');
   await t.expect($axaElem.exists).ok();
   const $axaElemShadow = await Selector(
     () => document.querySelector('axa-footer').shadowRoot
@@ -55,17 +55,17 @@ fixture('Footer - Demo Smoketest').page(
 );
 
 test('should render footer with working native callbacks', async t => {
-  const $axaElem = await Selector(TAG);
+  const $axaElem = await Selector('axa-footer-aem');
   await t.expect($axaElem.exists).ok();
   const $axaElemShadow = await Selector(
-    () => document.querySelector('axa-footer').shadowRoot
+    () => document.querySelector('axa-footer-aem').shadowRoot
   );
   const $axaElemShadowEl = await $axaElemShadow.find(CLASS);
   await t.expect($axaElemShadowEl.exists).ok();
 
-  await FooterAccessor.assertBackgroundColor(t, $axaElemShadowEl);
+  await versionedFooterAccessor.assertBackgroundColor(t, $axaElemShadowEl);
 
-  const $contactLink = FooterAccessor.getSlotNode('column-0-item-0');
+  const $contactLink = versionedFooterAccessor.getSlotNode('column-0-item-0');
 
   await t.expect($contactLink.textContent).eql('Contact');
   await t.expect($contactLink.visible).ok();
@@ -75,7 +75,7 @@ test('should render footer with working native callbacks', async t => {
 
   await t.click($contactLink);
 
-  const $facebookButton = FooterAccessor.getSlotNode('social-item-0');
+  const $facebookButton = versionedFooterAccessor.getSlotNode('social-item-0');
 
   await t.expect($facebookButton.visible).ok();
   await t.click($facebookButton);