[QCollapse, QCollapseItem] Refactoring + snapshots

src/qComponents/QCollapse/QCollapse.test.js

@@ -0,0 +1,12 @@
+import Component from './src/QCollapse';
+
+describe('QCollapse', () => {
+  it('should match snapshot', () => {
+    const { element } = mount(Component);
+    expect(element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QCollapse/__snapshots__/QCollapse.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QCollapse data should match snapshot 1`] = `
+Object {
+  "activeNames": Array [],
+  "uniqueId": [Function],
+}
+`;
+
+exports[`QCollapse should match snapshot 1`] = `
+<div
+  class="q-collapse"
+/>
+`;

src/qComponents/QCollapse/src/QCollapse.vue

@@ -11,6 +11,12 @@ export default {
   name: 'QCollapse',
   componentName: 'QCollapse',
 
+  provide() {
+    return {
+      qCollapse: this
+    };
+  },
+
   model: {
     prop: 'value',
     event: 'change'
@@ -39,10 +45,10 @@ export default {
 
   watch: {
     value: {
+      immediate: true,
       handler(value) {
         this.activeNames = [].concat(value);
-      },
-      immediate: true
+      }
     }
   },
 

src/qComponents/QCollapseItem/QCollapseItem.test.js

@@ -0,0 +1,12 @@
+import Component from './src/QCollapseItem';
+
+describe('QCollapseItem', () => {
+  it('should match snapshot', () => {
+    const { element } = mount(Component);
+    expect(element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QCollapseItem/__snapshots__/QCollapseItem.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QCollapseItem data should match snapshot 1`] = `
+Object {
+  "activeNames": Array [],
+}
+`;
+
+exports[`QCollapseItem should match snapshot 1`] = `
+<div
+  class="q-collapse-item"
+>
+  <button
+    class="q-collapse-item__header"
+  >
+    <div
+      class="q-collapse-item__title"
+    >
+
+    </div>
+
+    <div
+      class="q-collapse-item__icon q-icon-plus"
+    />
+  </button>
+
+  <transition-stub>
+    <div
+      class="q-collapse-item__body"
+      style="display: none;"
+    >
+      <div
+        class="q-collapse-item__content"
+      />
+    </div>
+  </transition-stub>
+</div>
+`;

src/qComponents/QCollapseItem/src/QCollapseItem.vue

@@ -40,6 +40,12 @@ export default {
 
   components: { QCollapseTransition },
 
+  inject: {
+    qCollapse: {
+      default: null
+    }
+  },
+
   props: {
     title: {
       type: String,
@@ -59,11 +65,11 @@ export default {
 
   computed: {
     preparedName() {
-      return this.name ?? this.$parent?.uniqueId('default-collapse-name-');
+      return this.name ?? this.qCollapse?.uniqueId('default-collapse-name-');
     },
 
     isActive() {
-      return this.$parent.activeNames?.includes(this.preparedName) ?? false;
+      return this.qCollapse?.activeNames?.includes(this.preparedName) ?? false;
     },
 
     icon() {
@@ -73,7 +79,7 @@ export default {
 
   methods: {
     handleTabClick() {
-      this.$parent.updateValue(this.preparedName);
+      this.qCollapse?.updateValue(this.preparedName);
     }
   }
 };