Add e2e tests for On Demand OPT

resources/js/components/FormToggle.vue

@@ -3,6 +3,7 @@
         <label v-if="label" :id="inputId('label', fieldName)" class="label" v-html="label"></label>
         <div class="is-toggle buttons">
             <button 
+                :id="inputId('button',fieldName + choice.value)"
                 role="radio" 
                 type="button"
                 class="button" 

resources/js/views/Accounts.vue

@@ -70,7 +70,7 @@
                             <input ref="searchBox" id="txtSearch" type="search" tabindex="1" :aria-label="$t('commons.search')" :title="$t('commons.search')" class="input is-rounded is-search" v-model="search">
                             <span class="icon is-small is-right">
                                 <font-awesome-icon :icon="['fas', 'search']"  v-if="!search" />
-                                <button tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" v-if="search" @click="search = '' "></button>
+                                <button id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" v-if="search" @click="search = '' "></button>
                             </span>
                         </div>
                     </div>

resources/js/views/settings/Options.vue

@@ -4,6 +4,7 @@
         <div class="options-tabs">
             <form-wrapper>
                 <form>
+                    <input type="hidden" name="isReady" id="isReady" :value="isReady" />
                     <!-- user preferences -->
                     <div class="block">
                         <h4 class="title is-4 has-text-grey-light">{{ $t('settings.general') }}</h4>
@@ -111,6 +112,7 @@
     export default {
         data(){
             return {
+                isReady: false,
                 preferencesForm: new Form({
                     lang: '',
                     showOtpAsDot: null,
@@ -214,6 +216,10 @@
             })
 
             this.fetchGroups()
+
+            this.$nextTick(function () {
+                this.isReady = true
+            })
         },
 
         methods : {

tests/EndToEnd/Pages/accounts_page.robot

@@ -8,6 +8,8 @@ Resource          ../common.resource
 ${ACCOUNTS PAGE URL}    ${ROOT URL}/accounts
 
 ${GROUP SWITCH}    groupSwitch
+${SEARCH FIELD}    txtSearch
+${MODAL OTP}    class:modal-otp
 ${SHOW GROUP SWITCH BUTTON}    btnShowGroupSwitch
 ${HIDE GROUP SWITCH BUTTON}    btnHideGroupSwitch
 
@@ -18,12 +20,16 @@ Accounts Page Should Be Open
 Go To Accounts Page
     Go Authenticated To    ${ACCOUNTS PAGE URL}
 
-Show First Totp In Modal
+Show An Otp In Modal
     Wait Until Page Contains Element    class:tfa-cell
     ${account} =    Get WebElement    class:tfa-cell:first-child
     Click Element    ${account}
     Wait Until Element Is Visible    ${OTP}
 
+Get OTP Value Shown In Modal
+    ${string}=    Get Text    ${OTP}
+    [return]  ${string}
+
 Show Group Switch
     Wait Until Page Contains Element    ${SHOW GROUP SWITCH BUTTON}
     Click Element    ${SHOW GROUP SWITCH BUTTON}
@@ -32,3 +38,37 @@ Show Group Switch
 Hide Group Switch
     Click Element    ${HIDE GROUP SWITCH BUTTON}
     Wait Until Page Does Not Contain Element    ${GROUP SWITCH}
+
+Click Otp To Copy It
+    Click Element    ${OTP}
+    A Success Notification Should Appear
+
+Clipboard Should Contain
+    [Arguments]    ${expected}
+    Close Modal Otp
+    Wait Until Element Is Visible    ${SEARCH FIELD}
+    Press Keys    ${SEARCH FIELD}    CTRL+v
+    ${clipboard} =    Get Value    ${SEARCH FIELD}
+    Should Be Equal    ${expected}    ${clipboard}
+    Input Text    ${SEARCH FIELD}    ${CLEARED CLIPBOARD VALUE}
+    Press Keys    ${SEARCH FIELD}    CTRL+c
+    Clear Search
+
+Clear Search
+    Run Keyword And Ignore Error    Click Element    btnClearSearch
+
+Copy To Clipboard
+    [Arguments]    ${string}
+    Close Modal Otp
+    Wait Until Element Is Visible    ${SEARCH FIELD}
+    Input Text    ${SEARCH FIELD}    ${string}
+    Set Focus To Element    ${SEARCH FIELD}
+    Press Keys    None    CTRL+a
+    Press Keys    None    CTRL+c
+    Clear Search
+
+Close Modal Otp
+    ${modal is open} =    Run Keyword And Return Status    Element Should Be Visible    ${MODAL OTP}
+    Run Keyword If    ${modal is open}    Click Element    ${CLOSE BUTTON}
+    Wait Until Element Is Not Visible    ${MODAL OTP}
+

tests/EndToEnd/Pages/settings.resource

@@ -13,7 +13,7 @@ Exit Settings
     Wait Until Page Contains Element    ${CLOSE BUTTON}
     Click Link    ${CLOSE BUTTON}
 
-Activate Settings Tab
+Browse To Settings Tab
     [Arguments]    ${tab}
     Wait Until Page Contains Element    ${tab}
     ${requested tab is active}=  Run Keyword And Return Status    Element Attribute Value Should Be    .tabs > li.is-active a    id    ${tab} 

tests/EndToEnd/Pages/settings_account_page.robot

@@ -19,8 +19,8 @@ Account Settings Page Should Be Open
 Go To Account Settings Page
     Go Authenticated To    ${ACCOUNT SETTINGS PAGE URL}
 
-Activate Account Settings Tab
+Browse To Account Settings Tab
-    Activate Settings Tab    ${ACCOUNT TAB}
+    Browse To Settings Tab    ${ACCOUNT TAB}
     
 Delete User Account
     Scroll To Bottom

tests/EndToEnd/Pages/settings_oauth_page.robot

@@ -15,5 +15,5 @@ OAuth Settings Page Should Be Open
 Go To OAuth Settings Page
     Go Authenticated To    ${OAUTH SETTINGS PAGE URL}
 
-Activate OAuth Settings Tab
+Browse To OAuth Settings Tab
-    Activate Settings Tab    ${OAUTH TAB}
+    Browse To Settings Tab    ${OAUTH TAB}

tests/EndToEnd/Pages/settings_options_page.robot

@@ -8,12 +8,102 @@ Resource          ../common.resource
 *** Variables ***
 ${OPTIONS SETTINGS PAGE URL}    ${ROOT URL}/settings/options
 
+${ACTIVE BUTTON CLASS}    is-link
+
 *** Keywords ***
+Run Set Option Keyword And Come Back
+    [Arguments]    ${set option keyword}
+    ${current url} =    Get Location
+    Go To Options Settings Page
+    Run Keyword    ${set option keyword}
+    Go To    ${current url}
+
+Options Tab Is Active
+    Run Keyword And Return Status    Element Should Have Class    lnkTabOptions    router-link-active
+
 Options Settings Page Should Be Open
     Location Should Be    ${OPTIONS SETTINGS PAGE URL}
 
 Go To Options Settings Page
     Go Authenticated To    ${OPTIONS SETTINGS PAGE URL}
+    Set Footer As Static
 
-Activate Options Settings Tab
+Browse To Options Settings Tab
-    Activate Settings Tab    ${OPTIONS TAB}
+    Browse To Settings Tab    ${OPTIONS TAB}
+
+
+# Show Password
+Set Option Show Password To On Demand
+    Activate Option Button    btnGetotponrequesttrue
+
+Set Option Show Password To Constantly
+    Activate Option Button    btnGetotponrequestfalse
+
+
+# Show OTP as dots
+Enable Option Show Otp As Dot
+    Set Option Checkbox As    showOtpAsDot    True
+
+Disable Option Show Otp As Dot
+    Set Option Checkbox As    showOtpAsDot    False
+
+
+# Password formatting
+Enable Option Password Formatting
+    Set Option Checkbox As    formatPassword    True
+    
+Disable Option Password Formatting
+    Set Option Checkbox As    formatPassword    False
+
+Set Option Password Formatting By Pair
+    Activate Option Button    btnFormatpasswordby2
+
+Set Option Password Formatting By Trio
+    Activate Option Button    btnFormatpasswordby3
+
+Set Option Password Formatting By Half
+    Activate Option Button    btnFormatpasswordby0.5
+
+
+# Close OTP after copy
+Enable Option Close Otp After Copy
+    Set Option Checkbox As    closeOtpOnCopy    True
+    
+Disable Option Close Otp After Copy
+    Set Option Checkbox As    closeOtpOnCopy    False
+
+
+# Copy OTP on display
+Enable Option Copy Otp On Display
+    Set Option Checkbox As    copyOtpOnDisplay    True
+    
+Disable Option Copy Otp On Display
+    Set Option Checkbox As    copyOtpOnDisplay    False
+
+
+# ---------------------------------------------------
+
+Set Option Checkbox As
+    [Arguments]    ${checkbox}    ${checked}
+    execute javascript  
+    ...  document.querySelector('#${checkbox}').classList.remove('is-checkradio');
+    Wait For Condition    return document.querySelector('#isReady').value == 'true'
+    ${current_state}=  Run Keyword And Return Status    Checkbox Should Be Selected    ${checkbox}
+    IF    ${current_state} != ${checked}
+        IF    ${checked}
+            Select Checkbox    ${checkbox}
+        ELSE
+            Unselect Checkbox    ${checkbox}
+        END
+        A Success Notification Should Appear
+    END
+
+Activate Option Button
+    [Arguments]    ${button}
+    Wait For Condition    return document.querySelector('#isReady').value == 'true'
+    Wait Until Page Contains Element    ${button}
+    ${is active} =    Run Keyword And Return Status    Element Should Have Class    ${button}    ${ACTIVE BUTTON CLASS}
+    IF    ${is active} == False
+        Click Element    ${button}
+        A Success Notification Should Appear
+    END

tests/EndToEnd/Pages/settings_webauthn_page.robot

@@ -15,6 +15,6 @@ Webauthn Settings Page Should Be Open
 Go To Webauthn Settings Page
     Go Authenticated To    ${WEBAUTHN SETTINGS PAGE URL}
 
-Activate Webauthn Settings Tab
+Browse To Webauthn Settings Tab
-    Activate Settings Tab    ${WEBAUTHN TAB}
+    Browse To Settings Tab    ${WEBAUTHN TAB}
     Wait Until Page Does Not Contain Element    icnSpinner

tests/EndToEnd/Tests/Navigation/close_and_back_buttons.robot

@@ -49,7 +49,7 @@ Cancel Button From Import Page Should Send To Accounts Page
 
 Close Button Should Close Modal Window
     Go To    ${ACCOUNTS PAGE URL}
-    Show First Totp In Modal
+    Show An Otp In Modal
     Click Element    ${CLOSE BUTTON}
     Wait Until Element Is Not Visible    class:modal-otp
 
@@ -76,7 +76,7 @@ Close Button From Settings Should Send To Page Before Settings Browsing
 Visiting About Page Via Settings Pages Should End To Starting Page
     Go To Groups Page
     Browse To Settings
-    Activate Webauthn Settings Tab
+    Browse To Webauthn Settings Tab
     Browse To About Page
     Exit About Page
     Webauthn Settings Page Should Be Open
@@ -89,6 +89,6 @@ Close Button From A Settings Tab Should Send To Previous Page
     [Arguments]    ${tab}
     Go To Groups Page
     Browse To Settings
-    Activate Settings Tab    ${tab}
+    Browse To Settings Tab    ${tab}
     Exit Settings
     Groups Page Should Be Open

tests/EndToEnd/Tests/Otps/on_demand.robot

@@ -0,0 +1,123 @@
+*** Settings ***
+Documentation     A test suite containing tests related to OTP generation and display.
+Suite Setup       Run Keywords
+...                   Open Custom Browser
+...                   AND    Play Admin Sign In Workflow
+...                   AND    Run Set Option Keyword And Come Back    Set Option Show Password To On Demand
+Suite Teardown    Close All Browsers
+Library           String
+Resource          ../../Pages/accounts_page.robot
+Resource          ../../Pages/settings_options_page.robot
+Resource          ../../common.resource
+
+*** Test Cases ***
+Readable Otp Should Be Displayed
+    Run Set Option Keyword And Come Back    Disable Option Show Otp As Dot
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Not Match Regexp    ${otp value}    ^[\\s${OTP OBFUSCATOR SYMBOL}]*$
+
+Obfuscated Otp Should Be Displayed
+    Run Set Option Keyword And Come Back    Enable Option Show Otp As Dot
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Match Regexp    ${otp value}    ^[\\s${OTP OBFUSCATOR SYMBOL}]*$
+
+Otp Digits Should Not Be Grouped
+    Run Set Option Keyword And Come Back    Disable Option Password Formatting
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Match Regexp    ${otp value}    ^\\S+$
+
+Otp Digits Should Be Grouped By Pair
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Set Option Password Formatting By Pair
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Match Regexp    ${otp value}    ^\\S{2}(\\s{1}\\S{2})+$
+
+Otp Digits Should Be Grouped By Trio
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Set Option Password Formatting By Trio
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Match Regexp    ${otp value}    ^\\S{3}(\\s{1}\\S{3})+$
+
+Otp Digits Should Be Grouped By Half
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Set Option Password Formatting By Half
+    Show An Otp In Modal
+    ${otp value}=    Get OTP Value Shown In Modal
+    Should Match Regexp    ${otp value}    ^\\S+(\\s{1}\\S+)$
+
+Modal Should Be Closed After Otp Copy
+    Run Set Option Keyword And Come Back    Enable Option Close Otp After Copy
+    Show An Otp In Modal
+    Click Otp To Copy It
+    Wait Until Element Is Not Visible    ${OTP}
+
+Modal Should Not Be Closed After Otp Copy
+    Run Set Option Keyword And Come Back    Disable Option Close Otp After Copy
+    Show An Otp In Modal
+    Click Otp To Copy It
+    Element Should Be Visible    ${OTP}
+
+Readable Otp Should Be Copied On Click
+    Run Set Option Keyword And Come Back    Disable Option Show Otp As Dot
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Disable Option Copy Otp On Display
+    Show An Otp In Modal
+    Click Otp To Copy It
+    A Success Notification Should Appear
+    On Screen Otp Notified As Copied Should Be In Clipboard
+
+Obfuscated Otp Should Be Copied On Click
+    ${random value} =    Generate Random String    8    [LETTERS]
+    Copy To Clipboard    ${random value}
+    Run Set Option Keyword And Come Back    Enable Option Show Otp As Dot
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Enable Option Copy Otp On Display
+    Show An Otp In Modal
+    Click Otp To Copy It
+    A Success Notification Should Appear
+    Close Modal Otp
+    Wait Until Element Is Visible    ${SEARCH FIELD}
+    Press Keys    ${SEARCH FIELD}    CTRL+v
+    ${clipboard} =    Get Value    ${SEARCH FIELD}
+    Should Match Regexp    ${clipboard}    ^\\d+$
+
+Readable Otp Should Be Copied On Display
+    Run Set Option Keyword And Come Back    Disable Option Show Otp As Dot
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Enable Option Copy Otp On Display
+    Show An Otp In Modal
+    A Success Notification Should Appear
+    On Screen Otp Notified As Copied Should Be In Clipboard
+
+Obfuscated Otp Should Be Copied On Display
+    ${random value} =    Generate Random String    8    [LETTERS]
+    Copy To Clipboard    ${random value}
+    Run Set Option Keyword And Come Back    Enable Option Show Otp As Dot
+    Run Set Option Keyword And Come Back    Enable Option Password Formatting
+    Run Set Option Keyword And Come Back    Enable Option Copy Otp On Display
+    Show An Otp In Modal
+    A Success Notification Should Appear
+    Close Modal Otp
+    Wait Until Element Is Visible    ${SEARCH FIELD}
+    Press Keys    ${SEARCH FIELD}    CTRL+v
+    ${clipboard} =    Get Value    ${SEARCH FIELD}
+    Should Match Regexp    ${clipboard}    ^\\d+$
+
+Otp Should Not Be Copied On Display
+    ${random value} =    Generate Random String
+    Copy To Clipboard    ${random value}
+    Run Set Option Keyword And Come Back    Disable Option Copy Otp On Display
+    Show An Otp In Modal
+    Clipboard Should Contain    ${random value}
+
+*** Keywords ***
+
+On Screen Otp Notified As Copied Should Be In Clipboard
+    ${displayed otp}=    Get OTP Value Shown In Modal
+    ${otp} =    Replace String    ${displayed otp}    ${SPACE}    ${EMPTY}
+    Clipboard Should Contain    ${otp}

tests/EndToEnd/common.resource

@@ -26,6 +26,9 @@ ${OTP}              otp
 ${SUCCESS NOTIFICATION}    css:#vueNotification .is-success
 ${ALERT NOTIFICATION}    css:#vueNotification .is-danger
 
+${OTP OBFUSCATOR SYMBOL}    ●
+${CLEARED CLIPBOARD VALUE}    -clear-
+
 *** Keywords ***
 Open Custom Browser
     [Arguments]    ${url}=${ROOT URL}
@@ -73,6 +76,7 @@ Element Should Not Have Class
     Should Not Contain    ${class}    ${className}
 
 Set Footer As Static
+    Wait Until Page Contains Element    tag:footer
     execute javascript  
     ...  document.querySelector('footer').style = 'position: static';