Add Profile screen e2e test

resources/assets/js/components/main-wrapper/main-content/profile.vue

@@ -8,12 +8,12 @@
       <form @submit.prevent="update">
         <div class="form-row">
           <label for="inputProfileName">Name</label>
-          <input type="text" id="inputProfileName" v-model="state.current.name">
+          <input type="text" name="name" id="inputProfileName" v-model="state.current.name">
         </div>
 
         <div class="form-row">
           <label for="inputProfileEmail">Email Address</label>
-          <input type="email" id="inputProfileEmail" v-model="state.current.email">
+          <input type="email" name="email" id="inputProfileEmail" v-model="state.current.email">
         </div>
 
         <div class="change-pwd">
@@ -24,30 +24,30 @@
 
           <div class="form-row">
             <label for="inputProfilePassword">New Password</label>
-            <input v-model="pwd" type="password" id="inputProfilePassword" autocomplete="off">
+            <input v-model="pwd" name="password" type="password" id="inputProfilePassword" autocomplete="off">
           </div>
 
           <div class="form-row">
             <label for="inputProfileConfirmPassword">Confirm Password</label>
-            <input v-model="confirmPwd" type="password" id="inputProfileConfirmPassword" autocomplete="off">
+            <input v-model="confirmPwd" name="confirmPassword" type="password" id="inputProfileConfirmPassword" autocomplete="off">
           </div>
         </div>
 
         <div class="form-row">
-          <button type="submit">Save</button>
+          <button type="submit" class="btn btn-submit">Save</button>
         </div>
       </form>
 
       <div class="preferences">
         <div class="form-row">
           <label>
-            <input type="checkbox" v-model="prefs.notify" @change="savePreference">
+            <input type="checkbox" name="notify" v-model="prefs.notify" @change="savePreference">
             Show “Now Playing” song notification
           </label>
         </div>
         <div class="form-row">
           <label>
-            <input type="checkbox" v-model="prefs.confirmClosing" @change="savePreference">
+            <input type="checkbox" name="confirmClosing" v-model="prefs.confirmClosing" @change="savePreference">
             Confirm before closing Koel
           </label>
         </div>

tests/e2e/ProfileScreenTest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace E2E;
+
+use Facebook\WebDriver\WebDriverExpectedCondition;
+use Facebook\WebDriver\WebDriverKeys;
+
+class ProfileScreenTest extends TestCase
+{
+    public function testProfileScreen()
+    {
+        $this->loginAndWait();
+        $this->click('a.view-profile');
+        $this->see('#profileWrapper');
+        // Now we change some user profile details
+        $this->typeIn('#profileWrapper input[name="name"]', 'Mr Bar');
+        $this->typeIn('#profileWrapper input[name="email"]', 'bar@koel.net');
+        $this->enter();
+        $this->see('.sweet-alert');
+        // Dismiss the alert first
+        $this->press(WebDriverKeys::ESCAPE);
+        $this->notSee('.sweet-alert');
+
+        $avatar = $this->el('a.view-profile img');
+        // Expect the Gravatar to be updated
+        static::assertEquals('https://www.gravatar.com/avatar/36df72b4484fed183fad058f30b55d21?s=256', $avatar->getAttribute('src'));
+        // Check "Confirm Closing" and validate its functionality
+        $this->click('#profileWrapper input[name="confirmClosing"]');
+        $this->refresh();
+        $this->waitUntil(WebDriverExpectedCondition::alertIsPresent());
+        $this->driver->switchTo()->alert()->accept();
+    }
+}

tests/e2e/WebDriverShortcuts.php

@@ -133,6 +133,4 @@ trait WebDriverShortcuts
     {
         return $this->driver->navigate()->refresh();
     }
-
-
 }