@madgex/design-system 1.44.3 → 1.46.0

package/.vscode/launch.json

@@ -4,6 +4,7 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+
     {
       "type": "node",
       "request": "launch",
@@ -13,15 +14,34 @@
       "port": 9229
     },
     {
-      "name": "GulpTester",
       "type": "node",
       "request": "launch",
-      "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
-      "stopOnEntry": false,
-      "args": [],
-      "cwd": "${workspaceRoot}",
-      "runtimeArgs": ["--nolazy"],
-      "console": "internalConsole"
+      "name": "Jest All",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": [
+        "${fileBasenameNoExtension}",
+        "--config",
+        "jest.config.js"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      }
     }
   ]
 }

package/__tests__/unit/src/components/multiselect.spec.js

@@ -0,0 +1,91 @@
+/* eslint-disable prettier/prettier */
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import MultiSelect from '../../../../src/components/inputs/multi-select/vue-components/MultiSelect.vue';
+import MultiSelectCheckbox from '../../../../src/components/inputs/multi-select/vue-components/MultiSelectCheckbox.vue';
+import MultiSelectCheckboxGroup from '../../../../src/components/inputs/multi-select/vue-components/MultiSelectCheckboxGroup.vue';
+
+describe('Multiselect', () => {
+  let wrapper;
+  let childGroups;
+
+  beforeEach(() => {
+    wrapper = mount(MultiSelect, {
+      propsData: {
+        labeltext: "Choose your test",
+        name: "test-chooser",
+        options: [
+          {
+            "id": "test-1",
+            "name": "tests",
+            "value": "test-group-1",
+            "label": "Test group one",
+            "checked": false,
+            "children": [
+              {
+                "id": "test-1-01",
+                "name": "tests",
+                "value": "test-1-1",
+                "label": "Test one one",
+                "children": null,
+                "checked": false
+              },
+              {
+                "id": "test-1-02",
+                "name": "tests",
+                "value": "test-1-2",
+                "label": "Test one two",
+                "children": null,
+                "checked": true
+              }
+            ]
+          },
+          {
+            "id": "test-2",
+            "name": "tests",
+            "value": "test-group-2",
+            "label": "Test group two",
+            "checked": false,
+            "children": null
+          },
+          {
+            "id": "test-3",
+            "name": "tests",
+            "value": "test-group-3",
+            "label": "Test group three",
+            "checked": false,
+            "children": null
+          }
+        ]
+      },
+    });
+  });
+
+  it('is a vue instance', () => {
+    expect.assertions(1);
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+
+  describe('Checkbox list', () => {
+    it('renders the parent checkboxes', () => {
+      const parents = wrapper.find(MultiSelectCheckboxGroup);
+      expect.assertions(1);
+      expect(parents.vm.$children).toHaveLength(3);
+    });
+
+    it('has children where applicable', () => {
+      expect.assertions(1);
+      const parent = wrapper.find('[data-multiselect-id="tests-checkbox"]');
+      expect(parent.vm.$children[0].$children.length).toBe(2);
+    });
+
+    it('expands when clicked', () => {
+      const triggerButton = wrapper.find('[data-multiselect-id="tests-checkbox"] > .mds-button');
+      const childGroup = wrapper.find('[data-multiselect-id="test-chooser-test-1-group"]');
+      expect(childGroup.isVisible()).toBe(false);
+      triggerButton.trigger('click');
+      expect(wrapper.isVisible()).toBe(true);
+      expect.assertions(2);
+    });
+  });
+});