From acc7ed608a6e2d1db75b46a8642ea4a651f35afe Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Wed, 20 Jan 2021 14:36:23 +0300
Subject: [PATCH] update collapse

---
 src/qComponents/QCollapse/QCollapse.test.js   | 12 ++++++
 .../__snapshots__/QCollapse.test.js.snap      | 14 +++++++
 src/qComponents/QCollapse/src/QCollapse.vue   | 10 ++++-
 .../QCollapseItem/QCollapseItem.test.js       | 12 ++++++
 .../__snapshots__/QCollapseItem.test.js.snap  | 38 +++++++++++++++++++
 .../QCollapseItem/src/QCollapseItem.vue       | 12 ++++--
 6 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 src/qComponents/QCollapse/QCollapse.test.js
 create mode 100644 src/qComponents/QCollapse/__snapshots__/QCollapse.test.js.snap
 create mode 100644 src/qComponents/QCollapseItem/QCollapseItem.test.js
 create mode 100644 src/qComponents/QCollapseItem/__snapshots__/QCollapseItem.test.js.snap

diff --git a/src/qComponents/QCollapse/QCollapse.test.js b/src/qComponents/QCollapse/QCollapse.test.js
new file mode 100644
index 00000000..f398fed5
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/qComponents/QCollapse/__snapshots__/QCollapse.test.js.snap b/src/qComponents/QCollapse/__snapshots__/QCollapse.test.js.snap
new file mode 100644
index 00000000..62b43df1
--- /dev/null
+++ b/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"
+/>
+`;
diff --git a/src/qComponents/QCollapse/src/QCollapse.vue b/src/qComponents/QCollapse/src/QCollapse.vue
index 873e8e80..9dc72db8 100644
--- a/src/qComponents/QCollapse/src/QCollapse.vue
+++ b/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
+      }
     }
   },
 
diff --git a/src/qComponents/QCollapseItem/QCollapseItem.test.js b/src/qComponents/QCollapseItem/QCollapseItem.test.js
new file mode 100644
index 00000000..070fc2f8
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/qComponents/QCollapseItem/__snapshots__/QCollapseItem.test.js.snap b/src/qComponents/QCollapseItem/__snapshots__/QCollapseItem.test.js.snap
new file mode 100644
index 00000000..6b21f168
--- /dev/null
+++ b/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>
+`;
diff --git a/src/qComponents/QCollapseItem/src/QCollapseItem.vue b/src/qComponents/QCollapseItem/src/QCollapseItem.vue
index f2cddb74..563e67d6 100644
--- a/src/qComponents/QCollapseItem/src/QCollapseItem.vue
+++ b/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);
     }
   }
 };