@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/Window/__tests__/ContainerShell.test.ts

@@ -12,47 +12,72 @@ jest.mock('@shell/utils/crypto', () => {
   return {
     __esModule:   true,
     ...originalModule,
-    base64Decode: jest.fn().mockImplementation((str:String) => str)
+    base64Decode: jest.fn().mockImplementation((str:string) => str)
   };
 });
 
+const mockOnData = jest.fn();
+const mockLoadAddon = jest.fn();
+const mockOpen = jest.fn();
+const mockFocus = jest.fn();
+const mockWrite = jest.fn();
+const mockWriteln = jest.fn();
+const mockReset = jest.fn();
+const mockOnResize = jest.fn();
+const mockPaste = jest.fn();
+const mockDispose = jest.fn();
+const mockClear = jest.fn();
+
+jest.mock(/* webpackChunkName: "xterm" */ '@xterm/xterm', () => {
+  return {
+    Terminal: class {
+      onData = mockOnData;
+      loadAddon = mockLoadAddon;
+      open = mockOpen;
+      focus = mockFocus;
+      write = mockWrite;
+      writeln = mockWriteln;
+      reset = mockReset;
+      onResize = mockOnResize;
+      paste = mockPaste;
+      dispose = mockDispose;
+      clear = mockClear;
+    }
+  };
+});
+
+const mockFit = jest.fn();
+const mockProposeDimensions = jest.fn().mockImplementation(() => ({ rows: 1, cols: 1 }));
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-fit', () => {
+  return {
+    FitAddon: class {
+      fit = mockFit;
+      proposeDimensions = mockProposeDimensions;
+    }
+  };
+});
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-web-links', () => {
+  return { WebLinksAddon: class {} };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-search', () => {
+  return {
+    SearchAddon: class {
+ findNext = jest.fn(); findPrevious = jest.fn();
+    }
+  };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-webgl', () => {
+  return { WebglAddon: class {} };
+}, { virtual: true });
+
 describe('component: ContainerShell', () => {
   const action = jest.fn();
   const translate = jest.fn();
   const schemaFor = jest.fn();
-  const onData = jest.fn();
-  const loadAddon = jest.fn();
-  const open = jest.fn();
-  const focus = jest.fn();
-  const fit = jest.fn();
-  const proposeDimensions = jest.fn().mockImplementation(() => {
-    return { rows: 1 };
-  });
-  const write = jest.fn();
-  const writeln = jest.fn();
-  const reset = jest.fn();
-
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm', () => {
-    return {
-      Terminal: class {
-        onData = onData;
-        loadAddon = loadAddon;
-        open = open;
-        focus = focus;
-        write = write;
-        writeln = writeln;
-        reset = reset
-      }
-    };
-  });
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm-addon-fit', () => {
-    return {
-      FitAddon: class {
-        fit = fit
-        proposeDimensions = proposeDimensions
-      }
-    };
-  });
 
   const defaultContainerShellParams = {
     propsData: {
@@ -77,7 +102,8 @@ describe('component: ContainerShell', () => {
           dispatch: action,
           getters:  {
             'i18n/t':            translate,
-            'cluster/schemaFor': schemaFor
+            'cluster/schemaFor': schemaFor,
+            'prefs/theme':       jest.fn().mockReturnValue('dark')
           }
         }
       },
@@ -87,6 +113,7 @@ describe('component: ContainerShell', () => {
   const resetMocks = () => {
     // Clear all instances and calls to constructor and all methods:
     jest.clearAllMocks();
+    jest.restoreAllMocks();
     defaultContainerShellParams.propsData.pod.os = 'linux';
   };
 
@@ -99,7 +126,14 @@ describe('component: ContainerShell', () => {
     return wrapper;
   };
 
-  it.todo('test that we are calling the xterm terminal and fitAddon class method mocks correctly');
+  it('test that we are calling the xterm terminal and fitAddon class method mocks correctly', async() => {
+    resetMocks();
+    await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(mockLoadAddon).toHaveBeenCalledWith(expect.any(Object));
+    expect(mockOpen).toHaveBeenCalledWith(expect.any(HTMLElement));
+    expect(mockFit).toHaveBeenCalledWith();
+  });
 
   it('creates a window on the page', async() => {
     resetMocks();
@@ -110,6 +144,26 @@ describe('component: ContainerShell', () => {
     expect(windowComponent.isVisible()).toBe(true);
   });
 
+  it('does not load webgl addon on Safari browser', async() => {
+    resetMocks();
+
+    const originalUserAgent = window.navigator.userAgent;
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15',
+      configurable: true
+    });
+
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(wrapper.vm.webglAddon).toBeNull();
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        originalUserAgent,
+      configurable: true
+    });
+  });
+
   it('the find action for the node is called if schemaFor finds a schema for NODE', async() => {
     resetMocks();
     const testSchemaFindsSchemaParams = {
@@ -242,7 +296,23 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.os).toBe('linux');
   });
 
-  it.todo('test that fit and flush are operating properly');
+  it('test that fit and flush are operating properly', async() => {
+    resetMocks();
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    mockFit.mockClear();
+
+    if (typeof wrapper.vm.fit === 'function') {
+      wrapper.vm.fit();
+    }
+
+    expect(mockFit).toHaveBeenCalledWith();
+
+    if (typeof wrapper.vm.flush === 'function') {
+      wrapper.vm.flush();
+    }
+  });
+
   it.todo('test that we are properly feeding the terminal the commandOnFirstConnect prop correctly on connected');
 
   it('the socket message event sets data props correctly', async() => {

package/components/Wizard.vue

@@ -2,6 +2,7 @@
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
+import { RcButton } from '@components/RcButton';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
 import LazyImage from '@shell/components/LazyImage';
@@ -28,6 +29,7 @@ export default {
   components: {
     AsyncButton,
     Banner,
+    RcButton,
     Loading,
     LazyImage,
   },
@@ -44,7 +46,6 @@ export default {
     loading: Wizard will block until all steps are not loading
     nextButton?: {
       labelKey?: default to `wizard.next`
-      style?:  defaults to `btn role-primary`
     },
     previousButton: {
       disable: defaults to false
@@ -108,6 +109,11 @@ export default {
       default: null
     },
 
+    showStepHeader: {
+      type:    Boolean,
+      default: true
+    },
+
     // The set of labels to display for the finish AsyncButton
     finishMode: {
       type:    String,
@@ -185,9 +191,6 @@ export default {
       return this.steps.filter((step) => !step.hidden);
     },
 
-    nextButtonStyle() {
-      return this.activeStep.nextButton?.style || `btn role-primary`;
-    },
     nextButtonLabel() {
       return this.activeStep.nextButton?.labelKey || `wizard.next`;
     }
@@ -291,7 +294,7 @@ export default {
     >
       <div>
         <div class="header">
-          <div class="title">
+          <div :class="['title', !showStepHeader ? 'mmb-4' : '']">
             <div
               v-if="showBanner"
               class="top choice-banner"
@@ -330,7 +333,7 @@ export default {
               </slot>
               <!-- Step number with subtext -->
               <div
-                v-if="activeStep && showSteps"
+                v-if="activeStep && showSteps && showStepHeader"
                 class="subtitle"
               >
                 <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
@@ -444,13 +447,14 @@ export default {
             name="cancel"
             :cancel="cancel"
           >
-            <button
+            <RcButton
               type="button"
-              class="btn role-secondary"
+              variant="secondary"
+              size="large"
               @click="cancel"
             >
               <t k="generic.cancel" />
-            </button>
+            </RcButton>
           </slot>
           <div class="controls-steps">
             <slot
@@ -458,14 +462,15 @@ export default {
               name="back"
               :back="back"
             >
-              <button
+              <RcButton
                 :disabled="!canPrevious || (!editFirstStep && activeStepIndex===1)"
                 type="button"
-                class="btn role-secondary"
+                variant="secondary"
+                size="large"
                 @click="back()"
               >
                 <t k="wizard.previous" />
-              </button>
+              </RcButton>
             </slot>
             <slot
               v-if="activeStepIndex === visibleSteps.length-1"
@@ -484,14 +489,15 @@ export default {
               name="next"
               :next="next"
             >
-              <button
+              <RcButton
                 :disabled="!canNext"
                 type="button"
-                :class="nextButtonStyle"
+                variant="primary"
+                size="large"
                 @click="next()"
               >
                 <t :k="nextButtonLabel" />
-              </button>
+              </RcButton>
             </slot>
           </div>
         </div>
@@ -595,10 +601,10 @@ $spacer: 10px;
         flex-basis: 100%;
         border-top: 1px solid var(--border);
         position: relative;
-        top: 17px;
+        top: 23px;
 
         .cru__content & {
-          top: 13px;
+          top: 17px;
         }
       }
     }