From 477b190d19d56b0c32bea3fdfd8c1a5219beb3ff Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Wed, 19 Jan 2022 17:48:30 +0100 Subject: [PATCH] refactor(range): removed complex code from dual range moves --- cypress/integration/components/range.spec.ts | 84 ++++++++++---------- src/components/range.ts | 65 +++++---------- 2 files changed, 64 insertions(+), 85 deletions(-) diff --git a/cypress/integration/components/range.spec.ts b/cypress/integration/components/range.spec.ts index 8358a31..2d2b0af 100644 --- a/cypress/integration/components/range.spec.ts +++ b/cypress/integration/components/range.spec.ts @@ -24,55 +24,57 @@ const selectorAndValues: Array<{ }, ]; -selectorAndValues.forEach((selectorAndValue) => { - describe(selectorAndValue.selector, () => { - beforeEach(() => { - cy.visit('./'); - }); +describe('using valid valid ranges', () => { + beforeEach(() => { + cy.visit('./'); + }); - it('can be changed by set value', () => { - cy.get(selectorAndValue.selector).should((item$) => { - expect(stringify((item$[0]).value)).not.to.eq( - stringify(selectorAndValue.wantedValue) + selectorAndValues.forEach((selectorAndValue) => { + describe(selectorAndValue.selector, () => { + it('can be changed by set value', () => { + cy.get(selectorAndValue.selector).should((item$) => { + expect(stringify((item$[0]).value)).not.to.eq( + stringify(selectorAndValue.wantedValue) + ); + }); + + ionRangeCypress.setValue( + selectorAndValue.selector, + selectorAndValue.wantedValue ); - }); - ionRangeCypress.setValue( - selectorAndValue.selector, - selectorAndValue.wantedValue - ); + cy.get(selectorAndValue.selector).should((item$) => { + expect(stringify((item$[0]).value)).to.eq( + stringify(selectorAndValue.wantedValue) + ); + }); - cy.get(selectorAndValue.selector).should((item$) => { - expect(stringify((item$[0]).value)).to.eq( - stringify(selectorAndValue.wantedValue) + getIonRangeEndSlotElements(selectorAndValue.selector).contains( + selectorAndValue.wantedLabel ); }); - getIonRangeEndSlotElements(selectorAndValue.selector).contains( - selectorAndValue.wantedLabel - ); - }); + it('can be changed by move value', () => { + cy.get(selectorAndValue.selector).should((item$) => { + expect(stringify((item$[0]).value)).not.to.eq( + stringify(selectorAndValue.wantedValue) + ); + }); - it('can be changed by move value', () => { - cy.get(selectorAndValue.selector).should((item$) => { - expect(stringify((item$[0]).value)).not.to.eq( - stringify(selectorAndValue.wantedValue) - ); - }); + ionRangeCypress.moveToValue(selectorAndValue.selector, { + targetValue: selectorAndValue.wantedValue, + }); - ionRangeCypress.moveToValue(selectorAndValue.selector, { - targetValue: selectorAndValue.wantedValue, - }); + cy.get(selectorAndValue.selector).should((item$) => { + expect(stringify((item$[0]).value)).to.eq( + stringify(selectorAndValue.wantedValue) + ); + }); - cy.get(selectorAndValue.selector).should((item$) => { - expect(stringify((item$[0]).value)).to.eq( - stringify(selectorAndValue.wantedValue) + getIonRangeEndSlotElements(selectorAndValue.selector).contains( + selectorAndValue.wantedLabel ); }); - - getIonRangeEndSlotElements(selectorAndValue.selector).contains( - selectorAndValue.wantedLabel - ); }); }); }); @@ -122,11 +124,11 @@ describe('using it to values beyond their supported max/min does not hangs', () }, ]; - outOfRangeValues.forEach((selectorAndValue) => { - beforeEach(() => { - cy.visit('./'); - }); + beforeEach(() => { + cy.visit('./'); + }); + outOfRangeValues.forEach((selectorAndValue) => { describe(`${selectorAndValue.selector}, target: ${stringify( selectorAndValue.outOfRangeValue )}`, () => { diff --git a/src/components/range.ts b/src/components/range.ts index f098d3e..feaae84 100644 --- a/src/components/range.ts +++ b/src/components/range.ts @@ -116,13 +116,8 @@ class IonRangeCypress const handle = ionRange.shadowRoot?.querySelector(knobSelector); if (!handle) { - return cy.wait(100).then(() => - this.moveToNumberValue({ - ionRange, - currentValue, - knobSelector, - options, - }) + throw new Error( + 'No Handle was found in th shadow root. Is the element hydrated?' ); } @@ -169,26 +164,19 @@ class IonRangeCypress ionRange: GenericIonRange, options: IonRangeCypressMoveToValueOptions ): Cypress.Chainable> { - const cypressFunctions: Array<() => Cypress.Chainable>> = - []; - - if (ionRange.value.upper !== options.targetValue.upper) { - cypressFunctions.push(() => - this.moveToNumberValue({ - ionRange, - currentValue: ionRange.value.upper as number, - knobSelector: RangeKnobSelector.Upper, - options: { - ...options, - targetValue: options.targetValue.upper, - }, - }) - ); - } - - if (ionRange.value.lower !== options.targetValue.lower) { - cypressFunctions.push(() => - this.moveToNumberValue({ + // Move upper + return this.moveToNumberValue({ + ionRange, + currentValue: ionRange.value.upper as number, + knobSelector: RangeKnobSelector.Upper, + options: { + ...options, + targetValue: options.targetValue.upper, + }, + }) + .then(() => { + // Move lower + return this.moveToNumberValue({ ionRange, currentValue: ionRange.value.lower, knobSelector: RangeKnobSelector.Lower, @@ -196,24 +184,13 @@ class IonRangeCypress ...options, targetValue: options.targetValue.lower, }, - }) - ); - } - - if (!cypressFunctions.length) { - return cy.wrap(ionRange); - } - - const cypressCall: () => Cypress.Chainable> = - cypressFunctions.reduce((prev, curr) => { - return () => prev().then(() => curr()); + }); + }) + .then(() => { + cy.log(`ion range new value: ${JSON.stringify(ionRange.value)}`).wrap( + ionRange + ); }); - - return cypressCall().then(() => { - cy.log(`ion range new value: ${JSON.stringify(ionRange.value)}`).wrap( - ionRange - ); - }); } private getFixTargetValue(