Skip to content

Fixing enabled and visible attributes of Button CC #1308

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

Merged
merged 2 commits into from
Jul 26, 2024
Merged

Fixing enabled and visible attributes of Button CC #1308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7730cb
Fixing enabled and visible attributes of Button CC
Jul 8, 2024
370d255
Updating test cases to check fieldType to support button attribute ch…
Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ....apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"></sly>
<div class="cmp-adaptiveform-button"
id="${button.id}"
data-cmp-visible="${button.visible}"
data-cmp-enabled="${button.enabled}"
data-cmp-visible="${button.visible ? 'true' : 'false'}"
data-cmp-enabled="${button.enabled ? 'true' : 'false'}"
data-cmp-is="adaptiveFormButton"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-button__help-container">
Expand Down
41 changes: 41 additions & 0 deletions ui.tests/test-module/specs/button/button.runtime.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,52 @@ describe("Form Runtime with Button Input", () => {
}

let formContainer = null
let toggle_array = [];

beforeEach(() => {
cy.previewForm(pagePath).then(p => {
formContainer = p;
})

cy.fetchFeatureToggles().then((response) => {
if (response.status === 200) {
toggle_array = response.body.enabled;
}
});
});

const checkHTML = (id, state) => {
const visible = state.visible;
const passVisibleCheck = `${visible === true ? "" : "not."}be.visible`;
const passDisabledAttributeCheck = `${state.enabled === false ? "" : "not."}have.attr`;
const value = state.value == null ? '' : state.value;
cy.get(`#${id}`)
.should(passVisibleCheck)
.invoke('attr', 'data-cmp-visible')
.should('eq', visible.toString());
cy.get(`#${id}`)
.invoke('attr', 'data-cmp-enabled')
.should('eq', state.enabled.toString());
return cy.get(`#${id}`).within((root) => {
cy.get('*').should(passVisibleCheck)
cy.get('button')
.should(passDisabledAttributeCheck, 'disabled')
cy.get('button')
.should('have.value', value);
})
}

it(" model's changes are reflected in the html ", () => {
const [id, fieldView] = Object.entries(formContainer._fields)[0]
const model = formContainer._model.getElement(id)
model.value = "some other value"
checkHTML(model.id, model.getState()).then(() => {
model.visible = false
return checkHTML(model.id, model.getState())
}).then(() => {
model.enabled = false
return checkHTML(model.id, model.getState())
})
});


Expand Down
2 changes: 1 addition & 1 deletion ui.tests/test-module/specs/customization/customtextinput.runtime.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe("Form Runtime with Custom Text Input", () => {
expect(formContainer, "formcontainer is initialized").to.not.be.null;
expect(formContainer._model.items.length, "model and view elements match").to.equal(Object.keys(formContainer._fields).length);
Object.entries(formContainer._fields).forEach(([id, field]) => {
if(field.options.visible === "true") {
if(field.options.visible === "true" && field.getModel()._jsonModel.fieldType==='text-input') {
Copy link
Collaborator

@rismehta rismehta Jul 23, 2024

Choose a reason for hiding this comment

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

Why is there a change in an existing test case ? This can impact backward compatibility

Copy link
Member Author

@muskgupta muskgupta Jul 24, 2024

Choose a reason for hiding this comment

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

Attributes 'data-cmp-enabled' and 'data-cmp-visible' are causing button to be present always in the form which is why the checkHTML will fail if we do not explicitly check for 'text-input'. I have confirmed all components in both textinput and customtextinput test files have all components with fieldType 'text-input' apart from a submit button.

expect(field.getId()).to.equal(id)
expect(formContainer._model.getElement(id), `model and view are in sync`).to.equal(field.getModel())
checkHTML(id, field.getModel().getState())
Expand Down
2 changes: 1 addition & 1 deletion ui.tests/test-module/specs/textinput/textinput.runtime.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe("Form Runtime with Text Input", () => {
expect(formContainer, "formcontainer is initialized").to.not.be.null;
expect(formContainer._model.items.length, "model and view elements match").to.equal(Object.keys(formContainer._fields).length);
Object.entries(formContainer._fields).forEach(([id, field]) => {
if(field.options.visible === "true") {
if(field.options.visible === "true" && field.getModel()._jsonModel.fieldType==='text-input') {
expect(field.getId()).to.equal(id)
expect(formContainer._model.getElement(id), `model and view are in sync`).to.equal(field.getModel())
checkHTML(id, field.getModel().getState())
Expand Down