@rancher/shell 0.3.0 → 0.3.2

package/rancher-components/StringList/StringList.test.ts

@@ -1,455 +1,80 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { StringList } from './index';
 
 describe('StringList.vue', () => {
 
-  let wrapper: Wrapper<Vue>;
-
-  beforeEach(() => {
-    wrapper = mount(StringList, {
+  it('is empty', () => {
+    const wrapper = mount(StringList, { 
       propsData: { items: [] },
     });
-  });
-
-  describe('List box', () => {
-
-    it('is empty', () => {
-      const box = wrapper.find('[data-testid="div-string-list-box"]').element as HTMLElement;
-
-      expect(box.children.length).toBe(0);
-    });
-
-    it('show multiple items', async () => {
-      const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k' ];
-      await wrapper.setProps({ items });
-
-      const elements = wrapper.findAll('[data-testid^="div-item"]');
-
-      expect(elements.length).toBe(10);
-    });
-
-    it('double click triggers inline edit mode', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({ items });
-
-      const item = wrapper.find('[data-testid="div-item-test"]');
-      await item.trigger('dblclick');
-
-      const inputField = wrapper.find('[data-testid^="item-edit"]');
-
-      expect(inputField.element).toBeDefined();
-    });
-
-    it('double click on empty space triggers create mode', async () => {
-      await wrapper.setProps({ items: [] });
-
-      // double click on empty space
-      const box = wrapper.find('[data-testid="div-string-list-box"]');
-      await box.trigger('dblclick');
-
-      const inputField = wrapper.find('[data-testid="item-create"]');
-
-      expect(inputField.element).toBeDefined();
-    });
-
-    it('select item when click on it', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({ items });
-
-      // select item
-      const item = wrapper.find('[data-testid^="div-item"]');
-      await item.trigger('mousedown');
-
-      expect(item.element.className).toContain('selected');
-    });
-
-    it('double click to edit item not allowed when readonly', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
-        items,
-        readonly: true,
-      });
-
-      const item = wrapper.find('[data-testid="div-item-test"]');
-      await item.trigger('dblclick');
-
-      const inputField = wrapper.find('[data-testid^="item-edit"]');
-
-      expect(inputField.element).toBeUndefined();
-    });
-
-    it('double click on empty space to create item not allowed when readonly', async () => {
-      await wrapper.setProps({
-        items: [],
-        readonly: true,
-      });
-
-      // double click on empty space
-      const box = wrapper.find('[data-testid="div-string-list-box"]');
-      await box.trigger('dblclick');
-
-      const inputField = wrapper.find('[data-testid="item-create"]');
-
-      expect(inputField.element).toBeUndefined();
-    });
-
-    it('select item not allowed when readonly', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
-        items,
-        readonly: true,
-      });
-
-      // select item
-      const item = wrapper.find('[data-testid^="div-item"]');
-      await item.trigger('mousedown');
-
-      expect(item.element.className).not.toContain('selected');
-    });
+    const box = wrapper.find('[data-testid="div-string-list-box"]').element as HTMLElement;
 
+    expect(box.children.length).toBe(0);
   });
 
-  describe('Buttons', () => {
-
-    it('are visible by default', async () => {
-      const actionButtons = wrapper.find('[data-testid="div-action-buttons"]');
-
-      expect(actionButtons.element).toBeDefined();
-    });
-
-    it('are hidden when is view-only mode', async () => {
-      await wrapper.setProps({
-        readonly: true,
-      });
-      const actionButtons = wrapper.find('[data-testid="div-action-buttons"]');
-
-      expect(actionButtons.element).toBeUndefined();
-    });
-
-    describe('Add button', () => {
-
-      it('is enabled by default', async () => {  
-        const addButton = wrapper.find('[data-testid="button-add"]')?.element as HTMLButtonElement;
-  
-        expect(addButton.disabled).toBe(false);
-      });
-  
-      it('show the input field when is clicked', async () => {
-        // click add button
-        const addButton = wrapper.find('[data-testid="button-add"]');
-        await addButton.trigger('click');
-  
-        const inputField = wrapper.find('[data-testid="item-create"]');
-  
-        expect(inputField.element).toBeDefined();
-      });
-  
-      it('is disabled when create mode is active', async () => {
-        // click add button
-        const addButton = wrapper.find('[data-testid="button-add"]');
-        await addButton.trigger('click');
-  
-        wrapper.find('[data-testid="item-create"]');
-  
-        const buttonElem = addButton.element as HTMLButtonElement;
-  
-        expect(buttonElem.disabled).toBe(true);
-      });
-  
-    });
-  
-    describe('Remove button', () => {
-  
-      it('is disabled by default', async () => {  
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        const buttonElem = removeButton.element as HTMLButtonElement;
-  
-        expect(buttonElem.disabled).toBe(true);
-      });
-  
-      it('is enabled when create mode is active', async () => {  
-        // click add button
-        const addButton = wrapper.find('[data-testid="button-add"]');
-        await addButton.trigger('click');
-  
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        const buttonElem = removeButton.element as HTMLButtonElement;
-  
-        expect(buttonElem.disabled).toBe(false);
-      });
-  
-      it('is enabled when edit mode is active', async () => {
-        const items = [ 'test' ];
-        await wrapper.setProps({ items });
-  
-        // activate edit mode
-        await wrapper.setData({ editedItem: 'test' });
-  
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        const buttonElem = removeButton.element as HTMLButtonElement;
-  
-        expect(buttonElem.disabled).toBe(false);
-      });
-  
-      it('is enabled when an item is selected', async () => {
-        const items = [ 'test' ];
-        await wrapper.setProps({ items });
-  
-        // select item
-        await wrapper.setData({ selected: 'test' });
-  
-        // click remove button
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        const buttonElem = removeButton.element as HTMLButtonElement;
-  
-        expect(buttonElem.disabled).toBe(false);
-      });
-  
-      it('removes items when an item is selected', async () => {
-        const items = [ 'a' ];
-        await wrapper.setProps({ items });
-  
-        // select item
-        await wrapper.setData({ selected: 'a' });
-  
-        // click remove button
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        await removeButton.trigger('mousedown');
-  
-        await wrapper.vm.$nextTick();
-  
-        const itemsCount = (wrapper.emitted('change') as any)[0][0].length;
-  
-        expect(itemsCount).toBe(0);
-      });
-  
-      it('deactivates create mode', async () => {  
-        // activate create mode
-        await wrapper.setData({ isCreateItem: true });
-  
-        // click remove button
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        await removeButton.trigger('mousedown');
-  
-        const inputField = await wrapper.find('[data-testid="item-create"]');
-  
-        expect(inputField.element).toBeUndefined();
-      });
-  
-      it('deactivates edit mode', async () => {
-        const items = [ 'test' ];
-        await wrapper.setProps({ items });
-
-        // activate edit mode
-        await wrapper.setData({ editedItem: 'test' });
-  
-        // click remove button
-        const removeButton = wrapper.find('[data-testid="button-remove"]');
-        await removeButton.trigger('mousedown');
-  
-        const inputField = wrapper.find('[data-testid^="item-edit"]');
-  
-        expect(inputField.element).toBeUndefined();
-      });
-  
+  it('is showing one element', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
     });
+    const box = wrapper.find('.string-list-box').element as HTMLElement;
 
+    expect(box.children.length).toBe(1);
   });
 
-  describe('List edit', () => {
-
-    const validItem = '    item name   ';
-    const emptyItem = '  ';
-
-    it('save a new item in create mode by pressing Enter key', async () => {
-      // activate create mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue(validItem);
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
-
-      const emitted = (wrapper.emitted('change') as any)[0][0][0];
-
-      expect(emitted).toBe(validItem.trim());
-    });
-
-    it('save item in edit mode by pressing Enter key', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({ items });
-
-      // activate edit mode
-      await wrapper.setData({ editedItem: 'test' });
-      const inputField = wrapper.find('[data-testid^="item-edit"]');
-
-      // edit item name
-      await inputField.setValue(validItem);
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
-
-      const emitted = (wrapper.emitted('change') as any)[0][0][0];
-
-      expect(emitted).toBe(validItem.trim());
-    });
-
-    it('reject a new item in create mode when item name is empty', async () => {
-      // activate create mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue(emptyItem);
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('change')).toBeFalsy();
-    });
-
-    it('reject a new item in create mode when item name is duplicate', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({ items });
-
-      // activate create mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue('test');
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('change')).toBeFalsy();
+  it('action-buttons are visible', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
     });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
 
-    it('reject an item in edit mode when item name is empty', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({ items });
-
-      // activate edit mode
-      await wrapper.setData({ editedItem: 'test' });
-      const inputField = wrapper.find('[data-testid^="item-edit"]');
-
-      // edit item name
-      await inputField.setValue(emptyItem);
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('change')).toBeFalsy();
-    });
-
-    it('reject an item in edit mode when item name is duplicate', async () => {
-      const items = [ 'test', 'test-1' ];
-      await wrapper.setProps({ items });
-
-      // activate edit mode
-      await wrapper.setData({ editedItem: 'test' });
-      const inputField = wrapper.find('[data-testid^="item-edit"]');
-
-      // edit item name
-      await inputField.setValue('test-1');
-
-      // press enter
-      await inputField.trigger('keydown.enter');
-      await wrapper.vm.$nextTick();
+    expect(actionButtons).not.toBe(undefined);
+  });
 
-      expect(wrapper.emitted('change')).toBeFalsy();
+  it('action-buttons are hidden when is view-only mode', () => {
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items: ['test'],
+        readonly: true,
+      },
     });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
 
+    expect(actionButtons).toBe(undefined);
   });
 
-  describe('Errors handling', () => {
+  it('show new item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
 
-    it('show duplicate warning icon when errorMessages is defined', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
+    const wrapper = mount(StringList, { 
+      propsData: {
         items,
-        errorMessages: { duplicate: 'error, item is duplicate.' },
-      });
-
-      // activate edit mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue('test');
-
-      const icon = wrapper.find('[data-testid="i-warning-icon"]');
-  
-      expect(icon.element).toBeDefined();
+      },
     });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
 
-    it('show duplicate warning message when errorMessages is defined', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
-        items,
-        errorMessages: { duplicate: 'error, item is duplicate.' },
-      });
+    expect(elements.length).toBe(10);
 
-      // activate edit mode
-      await wrapper.setData({ isCreateItem: true });
+    await wrapper.setProps({ items: [ ...items, 'new' ] });
 
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue('test');
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(11);
+  });
 
-      const message = wrapper.find('[data-testid^="span-error-message"]');
-  
-      expect(message.element).toBeDefined();
-    });
+  it('remove item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
 
-    it('emit duplicate errors', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
+    const wrapper = mount(StringList, { 
+      propsData: {
         items,
-      });
-
-      // activate edit mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-      await inputField.setValue('test');
-  
-      const isDuplicate = (wrapper.emitted('errors') as any)[0][0].duplicate;
-  
-      expect(isDuplicate).toBe(true);
+      },
     });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(elements.length).toBe(10);
 
-    it('emit duplicate errors, reset error', async () => {
-      const items = [ 'test' ];
-      await wrapper.setProps({
-        items,
-      });
-
-      // activate edit mode
-      await wrapper.setData({ isCreateItem: true });
-
-      // type item name
-      const inputField = wrapper.find('[data-testid="item-create"]');
-
-      // emit duplicate errors
-      await inputField.setValue('test');
-
-      // it is not duplicate, reset duplicate error -> emit false
-      await inputField.setValue('test-1'); 
-
-      const isDuplicate = (wrapper.emitted('errors') as any)[0][0].duplicate;
-  
-      expect(isDuplicate).toBe(false);
-    });
+    await wrapper.setProps({ items: [ ...items.filter(f => f !== 'a') ] });
 
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(9);
   });
 
 });

package/rancher-components/StringList/StringList.vue

@@ -410,7 +410,6 @@ export default Vue.extend({
         <LabeledInput
           v-if="editedItem && editedItem === item"
           ref="item-edit"
-          :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
@@ -424,7 +423,6 @@ export default Vue.extend({
       >
         <LabeledInput
           ref="item-create"
-          data-testid="item-create"
           class="create-input static"
           type="text"
           :value="value"
@@ -445,7 +443,6 @@ export default Vue.extend({
         class="action-buttons"
       >
         <button
-          data-testid="button-remove"
           class="btn btn-sm role-tertiary remove-button"
           :disabled="!selected && !isCreateItem && !editedItem"
           @mousedown.prevent="onClickMinusButton"
@@ -453,7 +450,6 @@ export default Vue.extend({
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
-          data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
           :disabled="isCreateItem || editedItem"
           @click.prevent="onClickPlusButton"
@@ -462,15 +458,10 @@ export default Vue.extend({
         </button>
       </div>
       <div class="messages">
-        <i
-          v-if="errorMessagesArray.length > 0"
-          data-testid="i-warning-icon"
-          class="icon icon-warning icon-lg"
-        />
+        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
         <span
           v-for="(msg, idx) in errorMessagesArray"
           :key="idx"
-          :data-testid="`span-error-message-${msg}`"
           class="error"
         >
           {{ idx > 0 ? '; ' : '' }}

package/rancher-components/components/Banner/Banner.test.ts

@@ -10,4 +10,48 @@ describe('component: Banner', () => {
 
     expect(element.textContent).toBe(label);
   });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
 });