Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixed issue edit pattern not applied #1030

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

fixed issue edit pattern not applied #1030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3eb6153
fixed issue edit pattern not applied
Jan 5, 2024
a48c752
added undefined check
Jan 10, 2024
0d85b7e
added test cases
Jan 11, 2024
e0c4c3d
added and updated test cases
Jan 12, 2024
46883e6
resolved PR comments
Jan 12, 2024
8b4ab7e
updated failing test cases
Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions ...ontent/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml
View file
Open in desktop
Expand Up @@ -111,6 +111,15 @@
textIsRich="[true,true]"
unboundFormElement="{Boolean}false"
visible="{Boolean}true"/>
<dateinput8
jcr:primaryType="nt:unstructured"
jcr:title="Date Input 8 (Edit format with display format)"
sling:resourceType="forms-components-examples/components/form/datepicker"
displayFormat="MMMM d, y"
editFormat="d/M/y"
enabled="{Boolean}true"
fieldType="date-input"
name="dateinput8"/>
</guideContainer>
</jcr:content>
</jcr:root>
27 changes: 22 additions & 5 deletions ...pps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js
View file
Open in desktop
Expand Up @@ -60,36 +60,53 @@
}

updateValue(value) {
if (this.widgetObject) {
if (value && value.trim() != '' && this.widgetObject) {
if (this.isActive()) {
this.widgetObject.setValue(value);
} else {
this._model.value = this.widgetObject.getValue();
this.widgetObject.setDisplayValue(value);
}
} else {
super.updateValue(value);
}
}

getFormattedDate(value) {
if(!value || value.trim() === '') {
return '';
}
let editFormat = this._model.editFormat;
if(editFormat === 'date|short') {
editFormat = 'date|yyyy/mm/dd';
}
let currDate = FormView.Formatters.parse(value.toString(), this._model.locale, editFormat, null, false);
if (currDate && !isNaN(currDate) && value != null) {
return currDate.getFullYear() + "-" + (currDate.getMonth() + 1) +"-"+ currDate.getDate() + "";
} else return value;
}

setModel(model) {
super.setModel(model);
if (!this.#noFormats()) {
if (this.widgetObject == null) {
this.widgetObject = new DatePickerWidget(this, this.getWidget(), model);
}
if (this.widgetObject.getValue() !== '') {
this._model.value = this.widgetObject.getValue();
this._model.value = this.getFormattedDate(this.widgetObject.getValue());
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here, you are basically trying to get the data value which is in ISO format from a formatted value. We should have a function for this in af-core and direcly use it, rather than copying the entire logic of formatters here ? @vdua IIRC, we do have some utility for this ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not yet, but I asked @egmox to create it in runtime. I would suggest making editValue writable property and set this._model.editValue = user entered value
and the setter should parse it accordingly.

}
this.widgetObject.addEventListener('blur', (e) => {
this._model.value = this.widgetObject.getValue();
const {target:{value}} = e;
this._model.value = this.getFormattedDate(value);

//setDisplayValue is required for cases where value remains same while focussing in and out.
this.widgetObject.setDisplayValue(this._model.value);
this.widgetObject.setDisplayValue(value);

this.setInactive();
}, this.getWidget());
this.widgetObject.addEventListener('focus', (e) => {
this.widgetObject.setValue(e.target.value);
const value = this._model.value;
this.widgetObject.setValue(value);
this.setActive();
}, this.getWidget());
} else {
Expand Down
3 changes: 2 additions & 1 deletion ...s/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
View file
Open in desktop
Expand Up @@ -1164,7 +1164,8 @@ if (typeof window.DatePickerWidget === 'undefined') {
if (!this.#isEditValueOrDisplayValue(value)) {
this.#curInstance.selectedDate = value; // prevent edit/display value from getting set in calender
}
this.#curInstance.$field.value = this.#curInstance.editValue() || value;
this.#curInstance.$field.value = this.#isEditValueOrDisplayValue(value) ?
this.#model.editValue : this.#curInstance.editValue() || value;
} else {
this.#widget.value = this.#model.editValue || value;
}
Expand Down
4 changes: 2 additions & 2 deletions ui.frontend/src/index.js
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ import {FormField, FormContainer, FormFieldBase, FormPanel, FormTabs, FormFileIn
import {Constants} from "./constants.js";
import GuideBridge from "./GuideBridge.js";
import HTTPAPILayer from "./HTTPAPILayer.js";
import {formatDate, parseDate} from "@aemforms/af-formatters";
import {formatDate, parseDate, parse} from "@aemforms/af-formatters";
import {FunctionRuntime} from '@aemforms/af-core';

/**
Expand Down Expand Up @@ -57,7 +57,7 @@ const Actions = {
* @property {function} parseDate - The function for parsing a date.
*/
const Formatters = {
formatDate, parseDate
formatDate, parseDate, parse
}

/**
Expand Down
9 changes: 6 additions & 3 deletions ui.tests/test-module/specs/datepicker/datepicker.runtime.localisation.spec.js
View file
Open in desktop
Expand Up @@ -58,7 +58,8 @@ describe("Form Runtime with Date Picker", () => {
});

// choose a different date and check if its persisted
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").eq(0)
.click({force: true}).then(() => {
cy.get("#li-day-3").should("be.visible").click(); // clicking on the 2nd day of the month of October 2023
cy.get(`#${datePicker7}`).find("input").blur().should("have.value","mercredi, 2 août, 2023");
cy.get(`#${datePicker7}`).find("input").focus().should("have.value","02/08/2023");
Expand All @@ -68,14 +69,16 @@ describe("Form Runtime with Date Picker", () => {

it("Test order of the days", () => {
const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
cy.get(".header").invoke("text").should("eq", 'dim.lun.mar.mer.jeu.ven.sam.');
});
});

it("Test localisation for date picker", () => {
const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
cy.get(".header").invoke("text").should("eq", 'dim.lun.mar.mer.jeu.ven.sam.');
cy.get(".dp-clear").invoke("text").should("eq", 'Effacer');
});
Expand Down
52 changes: 49 additions & 3 deletions ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js
View file
Open in desktop
Expand Up @@ -178,15 +178,17 @@ describe("Form Runtime with Date Picker", () => {
});

// choose a different date and check if its persisted
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
cy.get("#li-day-3").should("be.visible").click(); // clicking on the 2nd day of the month of October 2023
cy.get(`#${datePicker7}`).find("input").blur().should("have.value","Wednesday, 2 August, 2023");
cy.get(`#${datePicker7}`).find("input").focus().should("have.value","2/8/2023");

});

// check clear option
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
cy.get(".dp-clear").click();
});

Expand All @@ -195,7 +197,8 @@ describe("Form Runtime with Date Picker", () => {

it("Test order of the days", () => {
const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why have you changed the existing test suite ? Isn't this a breaking change ? Ideally with your changes, you only need to add a new test spec. Please remove the changes to the existing test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some tests were failing because all the calendar icons are on top right of the page and overlapping each other.
They were failing after I added test cases and were probably flaky earlier also.

cy.get(".header").invoke("text").should("eq", 'SunMonTueWedThuFriSat');
});
});
Expand All @@ -221,4 +224,47 @@ describe("Form Runtime with Date Picker", () => {
});
});

it("input given as per edit pattern should be valid", () => {
const [datePicker8] = Object.entries(formContainer._fields)[7]
const incorrectInput = "01-01-2023";
const correctInput = "25/2/2023";
cy.get(`#${datePicker8}`).find("input").clear().type(incorrectInput).blur().then(x => {
cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"Specify the value in allowed format : date.")
});
cy.get(`#${datePicker8}`).find("input").clear().type(correctInput).blur().then(x => {
cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"");
});
});

it("Display pattern transforms to edit format when focused", () => {
const [datePicker8, fieldView] = Object.entries(formContainer._fields)[7]
const input = "25/2/2023", displayFormat = "February 25, 2023";
cy.get(`#${datePicker8}`).should('have.class', 'cmp-adaptiveform-datepicker--empty');
cy.get(`#${datePicker8}`).find("input").clear().type(input).blur().then(() => {
cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"");
cy.get(`#${datePicker8}`).find("input").should('have.value', displayFormat);
cy.get(`#${datePicker8}`).find("input").click().then(() => {
cy.get(`#${datePicker8}`).find("input").should('have.value',input);
})
});
});

it("Test changing dates in datePicker then typing manually updates model", () => {
const [datePicker7] = Object.entries(formContainer._fields)[6];

cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No use of force:true on runtime test

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

force true is used because the calendar icons are overlapping each other because the test collaterals do not have css

cy.get("#li-day-3").should("be.visible").click(); // clicking on the 2nd day of the month of October 2023
cy.get(`#${datePicker7}`).find("input").blur().should("have.value","Tuesday, 2 January, 2024");
cy.get(`#${datePicker7}`).find("input").focus().should("have.value","2/1/2024");
});

// choose a different date and check if its persisted
const date = '23/1/2024';
cy.get(`#${datePicker7}`).find("input").clear().type(date).then(() => {
cy.get(`#${datePicker7}`).find("input").blur().should("have.value", "Tuesday, 23 January, 2024");
cy.get(`#${datePicker7}`).find("input").focus().should("have.value",date);
});
});

})
3 changes: 2 additions & 1 deletion ui.tests/test-module/specs/datepicker/datepicker.runtime.thai.locale.spec.js
View file
Open in desktop
Expand Up @@ -29,7 +29,8 @@ describe("Form Runtime with Date Picker", () => {
// Year should be in Buddhist calendar year for Thai language
it("Test localisation for date picker for thai", () => {
const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible")
.eq(0).click({force: true}).then(() => {
let todayDate = new Date();

const dateFormat = new Intl.DateTimeFormat('th', {
Expand Down