From b866e6109459d969be7e444eb96f3d1f7f2c1e9c Mon Sep 17 00:00:00 2001 From: ATHULKNAIR Date: Tue, 23 Nov 2021 14:18:04 +0530 Subject: [PATCH] fix: Bug fixes in mb-proportion --- medblocks.ts | 3 +- src/medblocks/proportion/MbProportion.ts | 68 +++++++++++ src/medblocks/proportion/percent.ts | 52 ++------- src/medblocks/proportion/proportion.ts | 81 ++----------- test/mb-proportion.test.ts | 106 ++++++++++++++++++ .../percent-validation.test.ts | 74 ++++++------ .../proportion-validation.test.ts | 60 ++++++++++ 7 files changed, 291 insertions(+), 153 deletions(-) create mode 100644 src/medblocks/proportion/MbProportion.ts create mode 100644 test/mb-proportion.test.ts create mode 100644 test/validation-test/proportion-validation.test.ts diff --git a/medblocks.ts b/medblocks.ts index 93e6fc0..1945c4e 100644 --- a/medblocks.ts +++ b/medblocks.ts @@ -25,4 +25,5 @@ import './src/medblocks/context/checkboxAny'; import './src/medblocks/text/text-select'; import './src/medblocks/text/input-multiple'; import './src/medblocks/duration/duration'; -import './src/medblocks/proportion/proportion' \ No newline at end of file +import './src/medblocks/proportion/proportion'; + diff --git a/src/medblocks/proportion/MbProportion.ts b/src/medblocks/proportion/MbProportion.ts new file mode 100644 index 0000000..b7a9595 --- /dev/null +++ b/src/medblocks/proportion/MbProportion.ts @@ -0,0 +1,68 @@ +import {html, property } from 'lit-element'; +import EhrElement from '../EhrElement'; +import SlInput from '@shoelace-style/shoelace/dist/components/input/input'; +import { ifDefined } from 'lit-html/directives/if-defined'; + +export default abstract class MbProportion extends EhrElement { + abstract type : string; + abstract max : number |string; + abstract min : number |string ; + @property({ type: Object }) data: + | { + denominator: number; + numerator: number; + type: number; + } + | undefined = undefined; + + @property({ type: Boolean, reflect: true }) required: boolean = false; + + @property({ type: String, reflect: true }) step: string; + + + _handleChange(e: CustomEvent) { + const inputElement = e.target as SlInput; + if (inputElement.value === '') { + this.data = undefined; + } else { + this.data = { + numerator: parseFloat(inputElement.value), + denominator: this.type === 'unitary' ? 1 : 100, + type: this.type === 'unitary' ? 1 : 2, + }; + } + this._mbInput.emit(); + } + + reportValidity() { + const input = this.shadowRoot!.querySelector('sl-input') as SlInput; + return input.reportValidity(); + } + + getStep() { + if (this.step) { + return this.step + } else { + if (this.type === 'unitary') { + return "0.01" + } else { + return + } + } + } + + render() { + return html` + + `; + } +} diff --git a/src/medblocks/proportion/percent.ts b/src/medblocks/proportion/percent.ts index ed3819b..6eac639 100644 --- a/src/medblocks/proportion/percent.ts +++ b/src/medblocks/proportion/percent.ts @@ -1,46 +1,12 @@ -import { customElement, html, property } from 'lit-element'; -import EhrElement from '../EhrElement'; -import SlInput from '@shoelace-style/shoelace/dist/components/input/input'; +import { customElement, property } from 'lit-element'; import '@shoelace-style/shoelace/dist/components/input/input'; -import { ifDefined } from 'lit-html/directives/if-defined'; -import './proportion' -@customElement('mb-percent') -export default class MbPercent extends EhrElement { - @property({ type: Object }) data: - | { - denominator: number; - numerator: number; - type: number; - } - | undefined = undefined; - @property({ type: Boolean, reflect: true }) required: boolean = false; - - @property({ type: Number, reflect: true }) max: number | string; - - @property({ type: Number, reflect: true }) min: number | string; - - // _handleChange(e: CustomEvent) { - // const inputElement = e.target as SlInput; - // if (inputElement.value === '') { - // this.data = undefined; - // } else { - // this.data = { - // numerator: parseFloat(inputElement.value), - // denominator: 100, - // type: 2, - // }; - // } - // this._mbInput.emit(); - // } - - reportValidity() { - const input = this.shadowRoot!.querySelector('mb-proportion') as SlInput; - return input.reportValidity(); - } - - render() { - return html``; - } +import './MbProportion' +import MbProportion from './MbProportion'; +@customElement('mb-percent') +export default class MbPercent extends MbProportion { + @property() type = 'percent' + @property({ type: String, reflect: true })min = '0' + @property({ type: String, reflect: true })max = '100' + } diff --git a/src/medblocks/proportion/proportion.ts b/src/medblocks/proportion/proportion.ts index 4285540..7bae836 100644 --- a/src/medblocks/proportion/proportion.ts +++ b/src/medblocks/proportion/proportion.ts @@ -1,73 +1,12 @@ -import { customElement, html, property } from 'lit-element'; -import EhrElement from '../EhrElement'; -import SlInput from '@shoelace-style/shoelace/dist/components/input/input'; -import '@shoelace-style/shoelace/dist/components/input/input'; -import { ifDefined } from 'lit-html/directives/if-defined'; - -@customElement('mb-proportion') -export default class MbProportion extends EhrElement { - @property({ type: Object }) data: - | { - denominator: number; - numerator: number; - type: number; - } - | undefined = undefined; - - @property({ type: Boolean, reflect: true }) required: boolean = false; - - @property({ type: Number, reflect: true }) max: number | string; - - @property({ type: Number, reflect: true }) min: number | string; - - @property({ type: String, reflect: true }) step: string; +import { customElement,property } from 'lit-element'; - @property({type: String, reflect: true}) type: 'percent' | 'unitary' = 'percent' - - _handleChange(e: CustomEvent) { - const inputElement = e.target as SlInput; - if (inputElement.value === '') { - this.data = undefined; - } else { - this.data = { - numerator: parseFloat(inputElement.value), - denominator: this.type === 'unitary' ? 1 : 100, - type: this.type === 'unitary' ? 1 : 2, - }; - } - this._mbInput.emit(); - } - - reportValidity() { - const input = this.shadowRoot!.querySelector('sl-input') as SlInput; - console.log({data: this.data},{required: this.required}, {report: input.reportValidity()}, {inputValue: input.value}) - return input.reportValidity(); - } - - getStep() { - if (this.step) { - return this.step - } else { - if (this.type === 'unitary') { - return "0.01" - } else { - return - } - } - } - - render() { - return html` - - `; - } -} +import './MbProportion' +import MbProportion from './MbProportion'; +@customElement('mb-proportion') +export default class MbPercent extends MbProportion { + @property() type = 'unitary' + @property({ type: String, reflect: true })min = '0' + @property({ type: String, reflect: true })max = '1' +} \ No newline at end of file diff --git a/test/mb-proportion.test.ts b/test/mb-proportion.test.ts new file mode 100644 index 0000000..0d68700 --- /dev/null +++ b/test/mb-proportion.test.ts @@ -0,0 +1,106 @@ +import { + html, + fixture, + expect, + oneEvent, + elementUpdated, + } from '@open-wc/testing'; + import MbPercent from '../src/medblocks/proportion/proportion'; + import '../src/medblocks/proportion/proportion'; + import { querySelectorDeep } from 'query-selector-shadow-dom'; +import MbForm from '../src/medblocks/form/form' +import '../medblocks' + + + + + describe('MbProportion', () => { + + it('data if not provided', async () => { + const mbPercent = await fixture( + html`` + ); + const input = querySelectorDeep('input') as HTMLInputElement + setTimeout(() => { + input.dispatchEvent(new Event('input')); + }); + const event: any = await oneEvent(mbPercent, 'mb-input'); + expect(event.target.data).to.eq(undefined); + }); + + + it('emits data on input', async () => { + const mbPercent = await fixture( + html`` + ); + const input = querySelectorDeep('input') as HTMLInputElement + setTimeout(() => { + input.value = '0.2'; + input.dispatchEvent(new Event('input')); + }); + const event: any = await oneEvent(mbPercent, 'mb-input'); + expect(event.target.data).to.eql({ numerator: 0.2, denominator: 1, type: 1 }); + }); + + + it('changes input on setting data', async () => { + const mbPercent = await fixture( + html`` + ); + const input = querySelectorDeep('input') as HTMLInputElement + setTimeout(()=>{ + mbPercent.data = { numerator: 0.3, denominator: 1, type: 1 }; + },0) + await oneEvent(mbPercent, 'mb-input'); + await elementUpdated(mbPercent); + expect(input.value).to.eq('0.3'); + }); + + it('SpO2 template data loading', async ()=>{ + const form = await fixture(html` + + + + + + + + + + + + + + + + `) + form.import( + { + "ncd/language|code": "en", + "ncd/language|terminology": "ISO_639-1", + "ncd/territory|code": "IN", + "ncd/territory|terminology": "ISO_3166-1", + "ncd/context/start_time": "2021-11-05T04:50:52.727Z", + "ncd/context/setting|code": "238", + "ncd/context/setting|value": "other care", + "ncd/context/setting|terminology": "openehr", + "ncd/pulse_oximetry/any_event:0/spo|numerator": 0.2, + "ncd/pulse_oximetry/any_event:0/spo|denominator": 1, + "ncd/pulse_oximetry/any_event:0/spo|type": 1, + "ncd/pulse_oximetry/any_event:0/spo": 0.2, + "ncd/pulse_oximetry/any_event:0/time": "2021-11-05T05:11:05.498Z", + "ncd/pulse_oximetry/language|code": "en", + "ncd/pulse_oximetry/language|terminology": "ISO_639-1", + "ncd/pulse_oximetry/encoding|code": "UTF-8", + "ncd/pulse_oximetry/encoding|terminology": "IANA_character-sets", + "ncd/category|code": "433", + "ncd/category|value": "event", + "ncd/category|terminology": "openehr", + "ncd/composer|name": "Medblocks UI" + } + ) + const mbPercent = document.getElementById('percentage') as MbPercent; + expect(mbPercent.data).to.eql({ _root: 0.2, numerator: 0.2, denominator: 1, type: 1 }) + }) + }); + \ No newline at end of file diff --git a/test/validation-test/percent-validation.test.ts b/test/validation-test/percent-validation.test.ts index 5a3dd92..fc6e32e 100644 --- a/test/validation-test/percent-validation.test.ts +++ b/test/validation-test/percent-validation.test.ts @@ -8,41 +8,41 @@ import MbForm from '../../src/medblocks/form/form' describe('percent validation test',()=>{ - // it('empty',async ()=>{ - // const form = await fixture( - // html` - // - // - // - // ` - // ) - // await elementUpdated(form); - // expect(form.validate()).to.be.true - // }) - // it('data',async ()=>{ - // const form = await fixture( - // html` - // - // - // - // ` - // ) - // const percent = querySelectorDeep('mb-percent') as any; - // percent.data = {numerator: 123, denominator: 100, type: 2} - // await elementUpdated(form); - // expect(form.validate()).to.be.true - // }) - // it('required but empty',async ()=>{ - // const form = await fixture( - // html` - // - // - // - // ` - // ) - // await elementUpdated(form) - // expect(form.validate()).to.be.false - // }) + it('empty',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + await elementUpdated(form); + expect(form.validate()).to.be.true + }) + it('data',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + const percent = querySelectorDeep('mb-percent') as any; + percent.data = {numerator: 12, denominator: 100, type: 2} + await elementUpdated(form); + expect(form.validate()).to.be.true + }) + it('required but empty',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + await elementUpdated(form) + expect(form.validate()).to.be.false + }) it('required with data',async ()=>{ const form = await fixture( html` @@ -55,8 +55,6 @@ describe('percent validation test',()=>{ percent.data = {numerator: 123, denominator: 100, type: 2} await elementUpdated(form) const validation = form.validate() - const input = querySelectorDeep('input') as HTMLInputElement; - console.log(input.validationMessage) - expect(validation).to.be.true + expect(validation).to.be.false }) }) \ No newline at end of file diff --git a/test/validation-test/proportion-validation.test.ts b/test/validation-test/proportion-validation.test.ts new file mode 100644 index 0000000..98e0dd1 --- /dev/null +++ b/test/validation-test/proportion-validation.test.ts @@ -0,0 +1,60 @@ +import '../../medblocks' +import { expect } from '@open-wc/testing' +import { elementUpdated, fixture } from '@open-wc/testing-helpers' +import { html } from 'lit-html' +import { querySelectorDeep } from 'query-selector-shadow-dom' +import MbForm from '../../src/medblocks/form/form' + + + +describe('proportion validation test',()=>{ + it('empty',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + await elementUpdated(form); + expect(form.validate()).to.be.true + }) + it('data',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + const percent = querySelectorDeep('mb-proportion') as any; + percent.data = {numerator: 0.5, denominator: 1, type: 1} + await elementUpdated(form); + expect(form.validate()).to.be.true + }) + it('required but empty',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + await elementUpdated(form) + expect(form.validate()).to.be.false + }) + it('required with data',async ()=>{ + const form = await fixture( + html` + + + + ` + ) + const proportion = querySelectorDeep('mb-proportion') as any; + proportion.data = {numerator: 123, denominator: 100, type: 2} + await elementUpdated(form) + const validation = form.validate() + expect(validation).to.be.false + }) +}) \ No newline at end of file