From 8f2c6f3562bcb5d569cb6db46dd18a4bf61fe77c Mon Sep 17 00:00:00 2001
From: ATHULKNAIR <athul2639@gmail.com>
Date: Tue, 31 Aug 2021 14:37:36 +0530
Subject: [PATCH] Failing tests added

---
 src/medblocks/form/form.ts |  1 +
 test/mb-form.test.ts       | 52 +++++++++++++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/medblocks/form/form.ts b/src/medblocks/form/form.ts
index 2216748..97ccae6 100644
--- a/src/medblocks/form/form.ts
+++ b/src/medblocks/form/form.ts
@@ -160,6 +160,7 @@ export default class MedblockForm extends LitElement {
 
   handleChildDisconnect(e: CustomEvent) {
     const path = e.detail;
+    console.log("disconnected this path",path)
     // delete this.mbElements[path]
     const { [path]: _, ...rest } = this.mbElements;
     this.mbElements = rest;
diff --git a/test/mb-form.test.ts b/test/mb-form.test.ts
index b0ef021..2e88c91 100644
--- a/test/mb-form.test.ts
+++ b/test/mb-form.test.ts
@@ -14,12 +14,21 @@ class BaseEhrElement extends EhrElement {
 class TestComponent extends LitElement {
     @property({type: Array}) paths: string[]
     render(){
-        return html`<mb-form>
-        ${this.paths.map(path=>html`<base-ehr path=${path}></base-ehr>`)}
+        return html`<mb-form >
+        ${this.paths.map(path=>html`<base-ehr @mb-disconnect=${(e:CustomEvent)=>console.log(e.detail)} path=${path}></base-ehr>`)}
     </mb-form>`
     }
 }
-
+class RepeateableTest extends LitElement{
+    @property({type:Number}) i:number=2;
+    render(){
+        return html `<mb-form>
+            ${[...Array(this.i)].map((_,i)=>html`
+            <base-ehr @mb-disconnect=${(e:CustomEvent)=>console.log(e.detail)} path=${`path/${i}`}></base-ehr>`)}
+        </mb-form>`
+    }
+}
+customElements.define('repeat-element',RepeateableTest)
 customElements.define('base-ehr', BaseEhrElement)
 customElements.define('reactive-path', TestComponent)
 
@@ -33,16 +42,41 @@ describe('Form', ()=>{
         expect(Object.keys(form.mbElements)).to.eql(["test/path"])
     })
 
-    it('should react to change in path', async ()=>{
+    // it('should react to change in path', async ()=>{
+    //     let paths = ['hello/there', 'another/path']
+    //     const component = await fixture<TestComponent>(html`<reactive-path .paths=${paths}></reactive-path>`)
+    //     const form = querySelectorDeep('mb-form') as MbForm
+    //     expect(Object.keys(form.mbElements)).to.eql(["hello/there", "another/path"])
+    //     component.paths = ['test2/another', 'changed/path']
+    //     await elementUpdated(component)
+    //     expect(Object.keys(form.mbElements)).to.eql(['test2/another', 'changed/path'])
+    //     component.paths = ['test2/another', 'changed/path2']
+    //     await elementUpdated(component)
+    //     expect(Object.keys(form.mbElements)).to.eql(['test2/another', 'changed/path2'])
+    // })
+    it('should react to deletion in path', async ()=>{
         let paths = ['hello/there', 'another/path']
         const component = await fixture<TestComponent>(html`<reactive-path .paths=${paths}></reactive-path>`)
         const form = querySelectorDeep('mb-form') as MbForm
         expect(Object.keys(form.mbElements)).to.eql(["hello/there", "another/path"])
-        component.paths = ['test2/another', 'changed/path']
+        console.log('------------------')
+        component.paths = ['hello/there']
         await elementUpdated(component)
-        expect(Object.keys(form.mbElements)).to.eql(['test2/another', 'changed/path'])
-        component.paths = ['test2/another', 'changed/path2']
-        await elementUpdated(component)
-        expect(Object.keys(form.mbElements)).to.eql(['test2/another', 'changed/path2'])
+        expect(Object.keys(form.mbElements)).to.eql(['hello/there'])
+        // component.paths = ['test2/another', 'changed/path2']
+        // await elementUpdated(component)
+        // expect(Object.keys(form.mbElements)).to.eql(['test2/another', 'changed/path2'])
     })
+
+    // it('should remove children elements properly',async()=>{
+    //     const component = await fixture<RepeateableTest>(html`<repeat-element ></repeat-element>`)
+    //     const form = querySelectorDeep('mb-form') as MbForm
+    //     console.log(form.mbElements)
+    //     expect(Object.keys(form.data).length).to.eql(2)
+    //     component.i = 1
+    //     await elementUpdated(component)
+    //     console.log(form.mbElements)
+    //     expect(Object.keys(form.data).length).to.eql(1)
+    // })
+
 })
\ No newline at end of file