code cleanup + fix breaking logic on unit test with non-existance of nodes to clone + add unit test (#10737)

shell/components/Carousel.vue

@@ -121,18 +121,24 @@ export default {
     const slideTrack = document.getElementById('slide-track');
 
     if (this.slider.length === 1) {
-      // singleSlide.style = 'width: 100%; max-width: 100%';
       slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
     } else {
       const node = document.getElementById('slide0');
+
+      if (node) {
         const clone = node.cloneNode(true);
 
+        slideTrack.appendChild(clone);
+      }
+
       const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
+
+      if (nodeLast) {
         const cloneLast = nodeLast.cloneNode(true);
 
-      slideTrack.appendChild(clone);
         slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
       }
+    }
 
     const lastSeenCluster = sessionStorage.getItem(carouselSeenStorageKey);
 
@@ -142,7 +148,7 @@ export default {
     }
 
     this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
-  },
+  }
 
 };
 

shell/components/__tests__/Carousel.test.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import Carousel from '@shell/components/Carousel.vue';
+
+describe('component: Carousel', () => {
+  it('should render component with the correct data applied', async() => {
+    const sliders = [
+      {
+        key:              'key-0',
+        repoName:         'some-repo-name-0',
+        chartNameDisplay: 'chart-name-display-0',
+        chartDescription: 'chart-description-0'
+      },
+      {
+        key:              'key-1',
+        repoName:         'some-repo-name-1',
+        chartNameDisplay: 'chart-name-display-1',
+        chartDescription: 'chart-description-1'
+      },
+      {
+        key:              'key-2',
+        repoName:         'some-repo-name-2',
+        chartNameDisplay: 'chart-name-display-2',
+        chartDescription: 'chart-description-2'
+      },
+      {
+        key:              'key-3',
+        repoName:         'some-repo-name-3',
+        chartNameDisplay: 'chart-name-display-3',
+        chartDescription: 'chart-description-3'
+      }
+    ];
+
+    const wrapper = mount(Carousel, {
+      propsData: { sliders },
+      mocks:     { $store: { getters: { clusterId: () => 'some-cluster-id' } } }
+    });
+
+    // testing https://github.com/rancher/dashboard/issues/9975
+    sliders.forEach((slider, index) => {
+      expect(wrapper.find(`#slide${ index } h1`).html()).toContain(slider.chartNameDisplay);
+    });
+  });
+});