@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/nav/__tests__/Type.test.ts

@@ -1,4 +1,5 @@
-import { shallowMount, RouterLinkStub, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import Type from '@shell/components/nav/Type.vue';
 import { createChildRenderingRouterLinkStub } from '@shell/utils/unit-tests/ChildRenderingRouterLinkStub';
 import { TYPE_MODES } from '@shell/store/type-map';
@@ -11,14 +12,9 @@ const favoriteClass = 'favorite';
 
 describe('component: Type', () => {
   describe('testing router-link type', () => {
-    const localVue = createLocalVue();
-
-    localVue.directive('cleanHtml', (identity) => identity);
-
     const defaultRouteTypeProp = {
       name:  'route-type',
       route: 'route',
-      exact: true,
       mode:  TYPE_MODES.FAVORITE
     };
 
@@ -33,24 +29,31 @@ describe('component: Type', () => {
     describe('should pass props correctly', () => {
       it('should forward Type props to router-link', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: RouterLinkStub },
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+            mocks:      { $store: storeMock },
+            stubs:      { routerLink: RouterLinkStub },
+          },
         });
 
         const linkStub = wrapper.findComponent(RouterLinkStub);
 
         expect(linkStub.props().to).toBe(defaultRouteTypeProp.route);
-        expect(linkStub.props().exact).toBe(defaultRouteTypeProp.exact);
       });
 
       it('should use router-link-slot href prop', () => {
         const fakeHref = 'fake-href';
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ href: fakeHref }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ href: fakeHref }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`a[href='${ fakeHref }']`);
@@ -61,10 +64,14 @@ describe('component: Type', () => {
       it('should use router-link-slot navigate prop', () => {
         const navigate = jest.fn();
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: true, navigate }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isActive: true, navigate }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ activeClass }`);
@@ -78,10 +85,14 @@ describe('component: Type', () => {
     describe('should not use classes if preconditions are not met', () => {
       it('should not use active class if the link is not active', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: false }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isActive: false }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ activeClass }`);
@@ -91,10 +102,14 @@ describe('component: Type', () => {
 
       it('should not use exact active class if the link is not active', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isExactActive: false }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isExactActive: false }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
@@ -104,10 +119,14 @@ describe('component: Type', () => {
 
       it('should not use root class if the isRoot prop is false', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp, isRoot: false },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp, isRoot: false },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ rootClass }`);
@@ -119,10 +138,14 @@ describe('component: Type', () => {
     describe('should use classes if preconditions are met', () => {
       it('should use active class if the link is active', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: true }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isActive: true }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ activeClass }`);
@@ -132,10 +155,14 @@ describe('component: Type', () => {
 
       it('should use exact active class if the link is active', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
@@ -145,10 +172,14 @@ describe('component: Type', () => {
 
       it('should use root class if the isRoot prop is true', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp, isRoot: true },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp, isRoot: true },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.${ rootClass }`);
@@ -158,10 +189,14 @@ describe('component: Type', () => {
 
       it('should show depth-0 class if depth prop is not defined', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.depth-0`);
@@ -171,10 +206,14 @@ describe('component: Type', () => {
 
       it('should show depth-1 class if depth prop is defined as 1', () => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp, depth: 1 },
-          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
-          mocks:     { $store: storeMock }
+          props: { type: defaultRouteTypeProp, depth: 1 },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
         });
 
         const elementWithSelector = wrapper.find(`.depth-1`);
@@ -186,19 +225,24 @@ describe('component: Type', () => {
     describe('should handle the favorite icon appropriately', () => {
       it('should show favorite icon if mouse is over and type is favorite', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const aElement = wrapper.find(`a`);
 
         aElement.trigger('mouseenter');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const favoriteElement = wrapper.find(`.${ favoriteClass }`);
 
@@ -207,13 +251,18 @@ describe('component: Type', () => {
 
       it('should not show favorite icon if mouse is not over and type is favorite', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const favoriteElement = wrapper.find(`.${ favoriteClass }`);
@@ -223,19 +272,24 @@ describe('component: Type', () => {
 
       it('should not show favorite icon if mouse is over and type is not favorite', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: { ...defaultRouteTypeProp, mode: null } },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: { ...defaultRouteTypeProp, mode: null } },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const aElement = wrapper.find(`a`);
 
         aElement.trigger('mouseenter');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const favoriteElement = wrapper.find(`.${ favoriteClass }`);
 
@@ -247,13 +301,18 @@ describe('component: Type', () => {
       it('should show count if on type', async() => {
         const count = 2;
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: { ...defaultRouteTypeProp, count } },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: { ...defaultRouteTypeProp, count } },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const typeCount = wrapper.find(`span[data-testid="type-count"]`);
@@ -263,13 +322,18 @@ describe('component: Type', () => {
 
       it('should show count if in store', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const typeCount = wrapper.find(`span[data-testid="type-count"]`);
@@ -279,21 +343,26 @@ describe('component: Type', () => {
 
       it('should not show count if not in type or store', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: defaultRouteTypeProp },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
-          },
-          mocks: {
+          props: { type: defaultRouteTypeProp },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
 
-            $store: {
-              getters: {
-                currentStore:    () => 'cluster',
-                'cluster/count': () => null,
+            mocks: {
+
+              $store: {
+                getters: {
+                  currentStore:    () => 'cluster',
+                  'cluster/count': () => null,
+                }
               }
-            }
-          }
+            },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
+          },
         });
 
         const typeCount = wrapper.find(`span[data-testid="type-count"]`);
@@ -305,13 +374,18 @@ describe('component: Type', () => {
     describe('should handle namespace appropriately', () => {
       it('should show namespace if on type', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: { ...defaultRouteTypeProp, namespaced: true } },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: { ...defaultRouteTypeProp, namespaced: true } },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const namespaced = wrapper.find(`i[data-testid="type-namespaced"]`);
@@ -321,13 +395,18 @@ describe('component: Type', () => {
 
       it('should not show namespace if not on type', async() => {
         const wrapper = shallowMount(Type as any, {
-          localVue,
-          propsData: { type: { ...defaultRouteTypeProp, namespaced: false } },
-          stubs:     {
-            routerLink: createChildRenderingRouterLinkStub(),
-            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          props: { type: { ...defaultRouteTypeProp, namespaced: false } },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: { $store: storeMock },
+
+            stubs: {
+              routerLink: createChildRenderingRouterLinkStub(),
+              Favorite:   { template: `<div class=${ favoriteClass } />` }
+            },
           },
-          mocks: { $store: storeMock }
         });
 
         const namespaced = wrapper.find(`i[data-testid="type-namespaced"]`);
@@ -346,10 +425,14 @@ describe('component: Type', () => {
       };
 
       const wrapper = shallowMount(Type as any, {
-        propsData: { type: defaultLinkTypeProp },
-        stubs:     {
-          routerLink: createChildRenderingRouterLinkStub(),
-          Favorite:   { template: `<div class=${ favoriteClass } />` }
+        props:  { type: defaultLinkTypeProp },
+        global: {
+          directives: { cleanHtml: (identity) => identity },
+
+          stubs: {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
         },
       });
 

package/components/nuxt/nuxt-build-indicator.vue

@@ -1,12 +1,33 @@
 <template>
   <transition appear>
-    <div v-if="building" class="nuxt__build_indicator" :style="indicatorStyle">
-      <svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
+    <div
+      v-if="building"
+      class="nuxt__build_indicator"
+      :style="indicatorStyle"
+    >
+      <svg
+        viewBox="0 0 96 72"
+        version="1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fill-rule="evenodd"
+        >
           <path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z" />
-          <path d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z" fill="#00C58E" />
-          <path d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z" fill="#00C58E" />
-          <path d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z" fill="#FFF" fill-rule="nonzero" />
+          <path
+            d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z"
+            fill="#00C58E"
+          />
+          <path
+            d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z"
+            fill="#00C58E"
+          />
+          <path
+            d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z"
+            fill="#FFF"
+            fill-rule="nonzero"
+          />
         </g>
       </svg>
       {{ animatedProgress }}%
@@ -17,97 +38,103 @@
 <script>
 export default {
   name: 'NuxtBuildIndicator',
-  data () {
+  data() {
     return {
-      building: false,
-      progress: 0,
-      animatedProgress: 0,
+      building:          false,
+      progress:          0,
+      animatedProgress:  0,
       reconnectAttempts: 0
-    }
+    };
   },
   computed: {
-    options: () => ({"position":"bottom-right","backgroundColor":"#2E495E","color":"#00C48D"}),
-    indicatorStyle () {
-      const [d1, d2] = this.options.position.split('-')
+    options: () => ({
+      position: 'bottom-right', backgroundColor: '#2E495E', color: '#00C48D'
+    }),
+    indicatorStyle() {
+      const [d1, d2] = this.options.position.split('-');
+
       return {
-        [d1]: '20px',
-        [d2]: '20px',
+        [d1]:               '20px',
+        [d2]:               '20px',
         'background-color': this.options.backgroundColor,
-        color: this.options.color
-      }
+        color:              this.options.color
+      };
     }
   },
   watch: {
-    progress (val, oldVal) {
+    progress(val, oldVal) {
       // Average progress may decrease but ignore it!
       if (val < oldVal) {
-        return
+        return;
       }
       // Cancel old animation
-      clearInterval(this._progressAnimation)
+      clearInterval(this._progressAnimation);
       // Jump to edge immediately
       if (val < 10 || val > 90) {
-        this.animatedProgress = val
-        return
+        this.animatedProgress = val;
+
+        return;
       }
       // Animate to value
       this._progressAnimation = setInterval(() => {
-        const diff = this.progress - this.animatedProgress
+        const diff = this.progress - this.animatedProgress;
+
         if (diff > 0) {
-          this.animatedProgress++
+          this.animatedProgress++;
         } else {
-          clearInterval(this._progressAnimation)
+          clearInterval(this._progressAnimation);
         }
-      }, 50)
+      }, 50);
     }
   },
-  mounted () {
+  mounted() {
     if (EventSource === undefined) {
-      return // Unsupported
+      return; // Unsupported
     }
-    this.sseConnect()
+    this.sseConnect();
   },
-  beforeDestroy () {
-    this.sseClose()
-    clearInterval(this._progressAnimation)
+  beforeUnmount() {
+    this.sseClose();
+    clearInterval(this._progressAnimation);
   },
   methods: {
-    sseConnect () {
+    sseConnect() {
       if (this._connecting) {
-        return
+        return;
       }
-      this._connecting = true
-      this.sse = new EventSource('/_loading/sse')
-      this.sse.addEventListener('message', event => this.onSseMessage(event))
+      this._connecting = true;
+      this.sse = new EventSource('/_loading/sse');
+      this.sse.addEventListener('message', (event) => this.onSseMessage(event));
     },
-    onSseMessage (message) {
-      const data = JSON.parse(message.data)
+    onSseMessage(message) {
+      const data = JSON.parse(message.data);
+
       if (!data.states) {
-        return
+        return;
       }
 
-      this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length)
+      this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length);
 
       if (!data.allDone) {
-        this.building = true
+        this.building = true;
       } else {
         this.$nextTick(() => {
-          this.building = false
-          this.animatedProgress = 0
-          this.progress = 0
-          clearInterval(this._progressAnimation)
-        })
+          this.building = false;
+          this.animatedProgress = 0;
+          this.progress = 0;
+          clearInterval(this._progressAnimation);
+        });
       }
     },
 
-    sseClose () {
+    sseClose() {
       if (this.sse) {
-        this.sse.close()
-        delete this.sse
+        this.sse.close();
+        delete this.sse;
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>