Skip to content

Commit

Permalink
Fixing openByDefault option on repeating groups (#317)
Browse files Browse the repository at this point in the history 
Co-authored-by: Ole Martin Handeland <[email protected]>
  • Loading branch information
@olemartinorg
olemartinorg and Ole Martin Handeland authored Jul 7, 2022
1 parent 0ca70bb commit 8738fb3
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 56 deletions.
11 changes: 1 addition & 10 deletions src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,18 +220,9 @@ export function GroupContainer({
layoutElementId: id,
remove: true,
index: groupIndex,
leaveOpen: container.edit?.openByDefault,
}),
);

if (
container.edit?.openByDefault &&
groupIndex === 0 &&
repeatingGroups[id].index === 0
) {
dispatch(
FormLayoutActions.updateRepeatingGroups({ layoutElementId: id }),
);
}
};

const onClickSave = () => {
Expand Down
1 change: 1 addition & 0 deletions src/altinn-app-frontend/src/features/form/layout/formLayoutTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export interface IUpdateRepeatingGroups {
layoutElementId: string;
remove?: boolean;
index?: number;
leaveOpen?: boolean;
}

export interface IUpdateRepeatingGroupsFulfilled {
Expand Down
8 changes: 7 additions & 1 deletion src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ function* updateFocus({
}

export function* updateRepeatingGroupsSaga({
payload: { layoutElementId, remove, index },
payload: { layoutElementId, remove, index, leaveOpen },
}: PayloadAction<IUpdateRepeatingGroups>) {
try {
const formLayoutState: ILayoutState = yield select(selectFormLayoutState);
Expand Down Expand Up @@ -279,6 +279,12 @@ export function* updateRepeatingGroupsSaga({
(value) => value !== index,
);
updatedRepeatingGroups[layoutElementId].editIndex = -1;

if (leaveOpen && index === 0) {
updatedRepeatingGroups[layoutElementId].index = 0;
updatedRepeatingGroups[layoutElementId].editIndex = 0;
}

yield put(
FormLayoutActions.updateRepeatingGroupsFulfilled({
repeatingGroups: updatedRepeatingGroups,
Expand Down
115 changes: 74 additions & 41 deletions test/cypress/e2e/integration/app-frontend/group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,60 +9,92 @@ const appFrontend = new AppFrontend();
const mui = new Common();

describe('Group', () => {
beforeEach(() => {
const init = () => {
cy.navigateToTask3();
cy.get(appFrontend.group.showGroupToContinue).should('be.visible');
});
};

it('Dynamics on group', () => {
init();
cy.get(appFrontend.group.addNewItem).should('not.exist');
cy.get(appFrontend.group.showGroupToContinue).find('input').check();
cy.get(appFrontend.group.addNewItem).should('exist').and('be.visible');
});

it('Add and delete items on main and nested group', () => {
cy.get(appFrontend.group.showGroupToContinue).find('input').check();
cy.addItemToGroup(1, 2, 'automation');
cy.get(appFrontend.group.mainGroup)
.find(mui.tableBody)
.then((table) => {
cy.get(table).find(mui.tableElement).first().invoke('text').should('equal', '1');
cy.get(table).find(mui.tableElement).eq(1).invoke('text').should('equal', '2');
cy.get(table).find(mui.tableElement).find(mui.buttonIcon).should('be.visible').click();
});
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.next)
.should('be.visible')
.click();
cy.get(appFrontend.group.subGroup)
.find(mui.tableBody)
.then((table) => {
cy.get(table).find(mui.tableElement).first().invoke('text').should('equal', 'automation');
cy.get(table).find(mui.tableElement).find(mui.buttonIcon).should('be.visible').click();
[true, false].forEach((openByDefault) => {
it(`Add and delete items on main and nested group (openByDefault = ${openByDefault ? 'true' : 'false'})`, () => {
cy.intercept('**/api/layouts/group', (req) => {
req.reply(res => {
const modified = JSON.parse(res.body);
modified.repeating.data.layout = modified.repeating.data.layout.map((component) => {
if (component.edit && typeof component.edit.openByDefault === 'boolean') {
component.edit.openByDefault = openByDefault;
}
return component;
});

res.send(JSON.stringify(modified));
});
});
cy.get(appFrontend.group.subGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.delete)
.should('be.visible')
.click();
cy.get(appFrontend.group.subGroup).find(mui.tableElement).eq(0).should('not.contain.text', 'automation');
cy.get(appFrontend.group.comments).should('not.exist');
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.back)
.should('be.visible')
.click();
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.delete)
.should('be.visible')
.click();
cy.get(appFrontend.group.saveMainGroup).should('not.exist');
cy.get(appFrontend.group.mainGroup).find(mui.tableElement).should('have.length', 0);
init();

cy.get(appFrontend.group.showGroupToContinue).find('input').check();
cy.addItemToGroup(1, 2, 'automation', openByDefault);
cy.get(appFrontend.group.mainGroup)
.find(mui.tableBody)
.then((table) => {
cy.get(table).find(mui.tableElement).first().invoke('text').should('equal', '1');
cy.get(table).find(mui.tableElement).eq(1).invoke('text').should('equal', '2');
cy.get(table).find(mui.tableElement).find(mui.buttonIcon).should('be.visible').click();
});
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.next)
.should('be.visible')
.click();
cy.get(appFrontend.group.subGroup)
.find(mui.tableBody)
.then((table) => {
cy.get(table).find(mui.tableElement).first().invoke('text').should('equal', 'automation');
cy.get(table).find(mui.tableElement).find(mui.buttonIcon).should('be.visible').click();
});
cy.get(appFrontend.group.subGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.delete)
.should('be.visible')
.click();

if (openByDefault) {
cy.get(appFrontend.group.subGroup).find(mui.tableElement).eq(0).should('not.contain.text', 'automation');
cy.get(appFrontend.group.comments).should('be.visible');
} else {
cy.get(appFrontend.group.subGroup).find(mui.tableElement).should('have.length', 0);
cy.get(appFrontend.group.comments).should('not.exist');
}

cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.back)
.should('be.visible')
.click();
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.delete)
.should('be.visible')
.click();

if (openByDefault) {
cy.get(appFrontend.group.saveMainGroup).should('be.visible');
cy.get(appFrontend.group.mainGroup).find(mui.tableElement).should('have.length.greaterThan', 0);
} else {
cy.get(appFrontend.group.saveMainGroup).should('not.exist');
cy.get(appFrontend.group.mainGroup).find(mui.tableElement).should('have.length', 0);
}
});
});

it('Calculation on Item in Main Group should update value', () => {
init();
cy.get(appFrontend.group.showGroupToContinue).find('input').check();
cy.get(appFrontend.group.addNewItem).focus().should('be.visible').click();
cy.get(appFrontend.group.currentValue).should('be.visible').type('1337').blur().tab();
Expand All @@ -72,6 +104,7 @@ describe('Group', () => {
});

it('Validation on group', () => {
init();
cy.get(appFrontend.group.showGroupToContinue).find('input').check();
cy.get(appFrontend.group.addNewItem).should('exist').and('be.visible').focus().click();
cy.get(appFrontend.group.currentValue).should('be.visible').type('1').blur();
Expand Down
15 changes: 12 additions & 3 deletions test/cypress/e2e/support/app-frontend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,16 +115,25 @@ Cypress.Commands.add('navigateToTask4', () => {
});
});

Cypress.Commands.add('addItemToGroup', (oldValue, newValue, comment) => {
cy.get(appFrontend.group.addNewItem).should('be.visible').focus().click();
Cypress.Commands.add('addItemToGroup', (oldValue, newValue, comment, openByDefault) => {
if (openByDefault !== true) {
cy.get(appFrontend.group.addNewItem).should('be.visible').focus().click();
}

cy.get(appFrontend.group.currentValue).should('be.visible').type(oldValue).blur();
cy.get(appFrontend.group.newValue).should('be.visible').type(newValue).blur();
cy.get(appFrontend.group.mainGroup)
.siblings(appFrontend.group.editContainer)
.find(appFrontend.group.next)
.should('be.visible')
.click();
cy.get(appFrontend.group.addNewItem).should('not.exist');

if (openByDefault === true || typeof openByDefault === 'undefined') {
cy.get(appFrontend.group.addNewItem).should('not.exist');
} else {
cy.get(appFrontend.group.addNewItem).click();
}

cy.get(appFrontend.group.comments).should('be.visible').type(comment).blur();
cy.get(appFrontend.group.saveSubGroup).should('be.visible').click().should('not.exist');
cy.get(appFrontend.group.saveMainGroup).should('be.visible').click().should('not.exist');
Expand Down
2 changes: 1 addition & 1 deletion test/cypress/e2e/support/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ declare namespace Cypress {
* Add an item to group component with an item in nested group
* @example cy.addItemToGroup(1, 2, 'automation')
*/
addItemToGroup(oldValue: Number, newValue: Number, comment: string): Chainable<Element>;
addItemToGroup(oldValue: Number, newValue: Number, comment: string, openByDefault?:boolean): Chainable<Element>;

/**
* Test for WCAG violations of impact critical, serious, moderate
Expand Down

0 comments on commit 8738fb3

Please sign in to comment.