Add e2e tests for accounts display options

resources/js/views/Accounts.vue

@@ -143,7 +143,7 @@
         	                    </transition>
                                 <div tabindex="0" class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click.exact="showOrCopy(account)" @keyup.enter="showOrCopy(account)" @click.ctrl="getAndCopyOTP(account)" role="button">  
                                     <div class="tfa-text has-ellipsis">
-                                        <img :src="$root.appConfig.subdirectory + '/storage/icons/' + account.icon" v-if="account.icon && $root.userPreferences.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
+                                        <img class="tfa-icon" :src="$root.appConfig.subdirectory + '/storage/icons/' + account.icon" v-if="account.icon && $root.userPreferences.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
                                         {{ displayService(account.service) }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.account === $t('errors.indecipherable')" :icon="['fas', 'exclamation-circle']" />
                                         <span class="has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
                                     </div>

tests/EndToEnd/Pages/accounts_page.robot

@@ -10,25 +10,32 @@ ${ACCOUNTS PAGE URL}    ${ROOT URL}/accounts
 
 ${GROUP SWITCH}    groupSwitch
 ${SEARCH FIELD}    txtSearch
+${GRID CLASS}    tfa-grid
+${LIST CLASS}    tfa-list
+${ACCOUNTS CONTAINER}    .accounts > span
 ${2FA ACCOUNT}    class:tfa-cell
 ${MODAL OTP}    class:modal-otp
 ${ALWAYS ON OTP}    class:always-on-otp
 ${SHOW GROUP SWITCH BUTTON}    btnShowGroupSwitch
 ${HIDE GROUP SWITCH BUTTON}    btnHideGroupSwitch
 
-*** Keywords ***
-Accounts Page Should Be Open
-    Wait Until Location Is    ${ACCOUNTS PAGE URL}
-    
+*** Keywords ***    
 Go To Accounts Page
     Go Authenticated To    ${ACCOUNTS PAGE URL}
 
+Wait Until Accounts Are Loaded
+    Wait Until Page Contains Element    class:accounts
+
 Show An Otp In Modal
     Wait Until Page Contains Element    ${2FA ACCOUNT}
     ${account} =    Get WebElement    ${2FA ACCOUNT}:first-child
     Click Element    ${account}
     Wait Until Element Is Visible    ${OTP}
 
+Get TwoFAccounts Elements
+    @{twofaccounts} =    Get WebElements    ${ACCOUNTS CONTAINER} > div
+    [return]  ${twofaccounts}
+
 Get OTP Value Shown In Modal
     ${string}=    Get Text    ${OTP}
     [return]  ${string}

tests/EndToEnd/Pages/settings_options_page.robot

@@ -42,6 +42,20 @@ Browse To Options Settings Tab
     Browse To Settings Tab    ${OPTIONS TAB}
 
 
+# Display Mode
+Set Option Display Mode To List
+    Activate Option Button    btnDisplaymodelist
+
+Set Option Display Mode To Grid
+    Activate Option Button    btnDisplaymodegrid
+
+# Show icons
+Enable Option Show Icons
+    Set Option Checkbox As    showAccountsIcons    True
+    
+Disable Option Show Icons
+    Set Option Checkbox As    showAccountsIcons    False
+
 # Show Password
 Set Option Show Password To On Demand
     Activate Option Button    btnGetotponrequesttrue

tests/EndToEnd/Tests/TwoFAccounts/display_options.robot

@@ -0,0 +1,36 @@
+*** Settings ***
+Documentation     A test suite containing tests related to 2FAccounts display.
+Suite Setup       Run Keywords
+...                   Open Custom Browser
+...                   AND    Play Admin Sign In Workflow
+Suite Teardown    Close All Browsers
+Resource          ../../Pages/accounts_page.robot
+Resource          ../../Pages/settings_options_page.robot
+Resource          ../../common.resource
+
+*** Variables ***
+
+*** Test Cases ***
+Grid Mode Should Display TwoFAccounts In Grid
+    Run Set Option Keyword And Come Back    Set Option Display Mode To Grid
+    @{twofaccounts} =    Get TwoFAccounts Elements
+    FOR    ${twofaccount}    IN    @{twofaccounts}
+        Element Should Have Class    ${twofaccount}    ${GRID CLASS}
+    END
+
+List Mode Should Display TwoFAccounts In List
+    Run Set Option Keyword And Come Back    Set Option Display Mode To Grid
+    @{twofaccounts} =    Get TwoFAccounts Elements
+    FOR    ${twofaccount}    IN    @{twofaccounts}
+        Element Should Have Class    ${twofaccount}    ${LIST CLASS}
+    END
+
+Icons Should Be Visible
+    Run Set Option Keyword And Come Back    Enable Option Show Icons
+    Wait Until Accounts Are Loaded
+    Page Should Contain Image    class:tfa-icon
+
+Icons Should Not Be Visible
+    Run Set Option Keyword And Come Back    Disable Option Show Icons
+    Wait Until Accounts Are Loaded
+    Page Should Not Contain Image    class:tfa-icon