diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js index 681ebca092..2862b50aea 100644 --- a/core/fundamentalStyleClasses.js +++ b/core/fundamentalStyleClasses.js @@ -45,7 +45,7 @@ module.exports = [ './node_modules/fundamental-styles/dist/product-switch.css', // './node_modules/fundamental-styles/dist/radio.css', //'./node_modules/fundamental-styles/dist/section.css', - //'./node_modules/fundamental-styles/dist/segmented-button.css', + './node_modules/fundamental-styles/dist/segmented-button.css', './node_modules/fundamental-styles/dist/select.css', './node_modules/fundamental-styles/dist/shellbar.css', './node_modules/fundamental-styles/dist/side-nav.css', diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html index 8437c81d35..fa40151bf4 100644 --- a/core/src/UserSettingsEditor.html +++ b/core/src/UserSettingsEditor.html @@ -53,6 +53,20 @@ function updateComboBox(key, option) { storedUserSettingData[userSettingGroup[0]][key] = option; } + + function updateEnumButton(key, option) { + document + .querySelectorAll('.enum-buttons-container-' + key + ' button') + .forEach(button => { + const buttonId = button.getAttribute('id'); + const optionId = `lui-us-enum_button_${key}_option`; + buttonId === optionId + ? button.classList.add('fd-button--emphasized') + : button.classList.remove('fd-button--emphasized'); + }); + + storedUserSettingData[userSettingGroup[0]][key] = option; + }
{#if userSettingGroup && userSettingGroup[0] && userSettingGroup[1]} @@ -128,7 +146,7 @@

data-testid="lui-us-input{i}" bind:value="{storedUserSettingData[userSettingGroup[0]][key]}" disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"> {/if} - {#if schemaItem.type==='enum'} + {#if schemaItem.type==='enum' && (schemaItem.style === undefined || schemaItem.style === 'list')}
@@ -169,6 +187,26 @@

{/if} + {#if schemaItem.type==='enum' && schemaItem.style === 'button'} +
+
+
+ {#each schemaItem.options as option, optionIndex} + + {/each} +
+
+
+ {/if} {#if schemaItem.type==='boolean'}

{/if} - \ No newline at end of file + diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js new file mode 100644 index 0000000000..cfd293f92b --- /dev/null +++ b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js @@ -0,0 +1,253 @@ +describe('Navigation', () => { + const clearStorage = () => + cy.clearLocalStorage('luigi.preferences.userSettings'); + + const openSettingsDialogBox = () => { + //Click on User Icon (top menu right) + cy.get('.fd-user-menu button') + .should('exist') + .click(); + + //Click on Setting link and open Dialog Box + cy.get('[data-testid="settings-link"]') + .should('exist') + .click(); + + //Check Dialog is open + cy.get('[data-testid="lui-us-header"]').should('exist'); + + //Check we have 3 left bar items + cy.get('.lui-usersettings-body .fd-nested-list__link') + .children() + .should('have.length', 4); + }; + + const saveSettings = () => { + //Check save button and click + cy.get('.lui-usersettings-dialog [data-testid="lui-us-saveBtn"]') + .should('exist') + .click(); + + //Check settings dialog box is closed... + cy.get('[data-testid="lui-us-header"]').should('not.exist'); + }; + + const closeSettings = () => { + //Check cancel button and click + cy.get('.lui-usersettings-dialog [data-testid="lui-us-dismissBtn"]') + .should('exist') + .click(); + + //Check settings dialog box is closed... + cy.get('[data-testid="lui-us-header"]').should('not.exist'); + }; + + beforeEach(() => { + cy.visitLoggedIn('/'); + openSettingsDialogBox(); + }); + + describe('User Account Configuration', () => { + const setting_name = 'name_' + new Date().getTime(); + const setting_date_format = 'df_' + new Date().getTime(); + const setting_privacy_policy = 'privacy_policy_' + new Date().getTime(); + + it('Fill Account and save; reopen and check saved value', () => { + //Clear storage before to save it + clearStorage(); + + //Click on User Account + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(0) + .click(); + + //Check User Account is selected + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(0) + .should('have.class', 'is-selected'); + + //Check Name Input field and type a new name + cy.get('[data-testid="lui-us-input0"]') + .should('exist') + .type(setting_name); + + //Email Input field should be disabled + cy.get('[data-testid="lui-us-input1"]') + .should('exist') + .should('be.disabled'); + + //Click on Checkbox + cy.get('.lui-usersettings-content .fd-container .lui-value-container') + .eq(3) + .find('.fd-checkbox') + .check(); + + //Check Checkbox is checked + cy.get('.lui-usersettings-content .fd-container .lui-value-container') + .eq(3) + .find('.fd-checkbox') + .should('be.checked'); + + //Save Settings + saveSettings(); + + //Re-open Setting Dialog Box + openSettingsDialogBox(); + + //Check Name Input field and type a new name + cy.get('[data-testid="lui-us-input0"]').should( + 'have.value', + setting_name + ); + + //Check Checkbox is checked + cy.get('.lui-usersettings-content .fd-container .lui-value-container') + .eq(3) + .find('.fd-checkbox') + .should('be.checked'); + + //Close settings + closeSettings(); + }); + + it('Fill Language and Reason and save; reopen and check saved values', () => { + //Clear storage before to save it + clearStorage(); + + //Click on Language & Region + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(1) + .click(); + + //Check Language & Region is selected + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(1) + .should('have.class', 'is-selected'); + + //Check Language & Region Input field exist + cy.get('[data-testid="lui-us-input0"]').should('exist'); + + //Open button to show enumeration list options + cy.get('.lui-usersettings-content .fd-page__content .fd-form-item') + .eq(0) + .find('.fd-input-group__button') + .click(); + + //Check we should have 4 options + cy.get('.lui-usersettings-content .fd-page__content .fd-form-item') + .eq(0) + .find(' .fd-list--dropdown .fd-list__item') + .children() + .should('have.length', 4); + + //Click on Spanish list item + cy.get('[data-testid="lui-us-option0_2"]') + .should('exist') + .click(); + + //Check Placeholder of input field is Spanish + cy.get('[data-testid="lui-us-input0"]') + .should('exist') + .should('have.attr', 'placeholder', 'Spanish'); + + //Check Date Formant Input field and type a new format + cy.get('[data-testid="lui-us-input1"]') + .should('exist') + .type(setting_date_format); + + //Save Settings + saveSettings(); + + //Re-open Setting Dialog Box + openSettingsDialogBox(); + + //Click on Language & Region (left menu) + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(1) + .click(); + + //Check Placeholder of input field is Spanish + cy.get('[data-testid="lui-us-input0"]') + .should('exist') + .should('have.attr', 'placeholder', 'Spanish'); + + //Check Name Input field and type a new name + cy.get('[data-testid="lui-us-input1"]').should( + 'have.value', + setting_date_format + ); + + //Close settings + closeSettings(); + }); + + it('Fill Privacy and save; reopen and check saved value', () => { + //Clear storage before to save it + clearStorage(); + + //Click on Privacy + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(2) + .click(); + + //Check Private Policy Input field exist and placeholder is + cy.get('[data-testid="lui-us-input0"]') + .should('exist') + .should('have.attr', 'placeholder', 'Field placeholder text'); + + //Check Private Policy Input field exist and placeholder is + cy.get('[data-testid="lui-us-input0"]').type(setting_privacy_policy); + + //Check Time Format has two buttons with no selected class + cy.get( + '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button' + ) + .eq(0) + .should('not.have.class', 'fd-button--emphasized'); + cy.get( + '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button' + ) + .eq(1) + .should('not.have.class', 'fd-button--emphasized'); + + //Click Time Format 12h + cy.get( + '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button' + ) + .eq(0) + .click(); + + //Check Time Format 12h is selected + cy.get( + '.lui-usersettings-content .enum-buttons-container-time .lui-fd-enum-button' + ) + .eq(0) + .should('have.class', 'is-selected'); + + //Save Settings + saveSettings(); + + //Re-open Setting Dialog Box + openSettingsDialogBox(); + + //Click on Privacy + cy.get('.lui-usersettings-body .fd-nested-list__link') + .eq(2) + .click(); + + //Check Private Policy Input field has saved value + cy.get('[data-testid="lui-us-input0"]').should( + 'have.value', + setting_privacy_policy + ); + + //Check Time Format 12h is selected + cy.get('.lui-usersettings-content .enum-buttons-container-time button') + .eq(0) + .should('have.class', 'is-selected'); + + //Close settings + closeSettings(); + }); + }); +}); diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js index caacf70e77..998c70d298 100644 --- a/test/e2e-test-application/src/luigi-config/extended/settings.js +++ b/test/e2e-test-application/src/luigi-config/extended/settings.js @@ -66,52 +66,7 @@ class Settings { saveBtn: 'SaveKaese', dismissBtn: 'Abbreche' }, - //functions to use a custom storage like sessionStorage - // storeUserSettings: (obj, previous) => { - // return new Promise((resolve, reject) => { - // if (JSON.stringify(obj) !== JSON.stringify(previous)) { - // const settings = { - // header: "Confirmation", - // body: "Are you sure you want to do this?", - // buttonConfirm: "Yes", - // buttonDismiss: "No" - // } - // Luigi - // .ux() - // .showConfirmationModal(settings).then(() => { - // sessionStorage.setItem('test', JSON.stringify(obj)); - // resolve(); - // }).catch(() => { - // reject({ closeDialog: true, message: 'error ' }); - // }); - // } - // }); - // }, - // readUserSettings: () => { - // return new Promise((resolve, reject) => { - // try{ - // if(sessionStorage.getItem('test')){ - // resolve(JSON.parse(sessionStorage.getItem('test'))); - // }else{ - // resolve(JSON.parse(sessionStorage.getItem('test'))); - // } - // }catch{ - // reject({ closeDialog: true, message: 'some error' }); - // } - // }) - // }, userSettingGroups: { - theming: { - label: 'Theming', - title: 'Theming', - icon: 'private', - viewUrl: 'http://localhost:8081/index.html', - settings: { - theme: { - type: 'enum', label: 'theme', options: ['red', 'green'] - } - } - }, userAccount: { label: 'User Account', sublabel: 'username', @@ -136,26 +91,48 @@ class Settings { type: 'enum', label: 'Language and Region', options: ['German', 'English', 'Spanish', 'French'], - description: 'After you save your settings, the browser will refresh for the new language to take effect.' + description: + 'After you save your settings, the browser will refresh for the new language to take effect.' }, date: { type: 'string', label: 'Date Format' }, - time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] } + time: { + type: 'enum', + style: 'button', + label: 'Time Format', + options: ['12 h', '24 h'] + } } }, privacy: { label: 'Privacy', title: 'Privacy', icon: 'private', - viewUrl: 'http://localhost:8080/index2.html', settings: { policy: { - type: 'string', label: 'Privacy policy has not been defined.' + type: 'string', + label: 'Privacy policy has not been defined.' }, - time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] } + time: { + type: 'enum', + style: 'button', + label: 'Time Format', + options: ['12 h', '24 h'] + } + } + }, + theming: { + label: 'Theming', + title: 'Theming', + icon: 'private', + viewUrl: 'http://localhost:8081/index.html', + settings: { + theme: { + type: 'enum', label: 'theme', options: ['red', 'green'] + } } } } - } + }; } export const settings = new Settings();