Remake profile picture saving with Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

3 files changed, 58 insertions, 17 deletions

diff --git a/build/integration/data/coloured-pattern.png b/build/integration/data/coloured-pattern-non-square.png
index cf43787f3fd..cf43787f3fd 100644
--- a/build/integration/data/coloured-pattern.png
+++ b/build/integration/data/coloured-pattern-non-square.png
diff --git a/build/integration/features/avatar.feature b/build/integration/features/avatar.feature
index 2d6cb66548f..06135a25693 100644
--- a/build/integration/features/avatar.feature
+++ b/build/integration/features/avatar.feature
@@ -21,20 +21,20 @@ Feature: avatar
 
 
 
-  Scenario: get temporary user avatar before cropping it
+  Scenario: get temporary non-square user avatar before cropping it
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/green-square-256.png"
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     When logged in user gets temporary avatar
     Then The following headers should be set
       | Content-Type | image/png |
     # "last avatar" also includes the last temporary avatar
-    And last avatar is a square of size 256
-    And last avatar is a single "#00FF00" color
+    And last avatar is not a square
+    And last avatar is not a single color
 
-  Scenario: get user avatar before cropping it
+  Scenario: get non-square user avatar before cropping it
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/green-square-256.png"
-    # Avatar needs to be cropped to finish setting it even if it is squared
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
+    # Avatar needs to be cropped to finish setting it
     When user "user0" gets avatar for user "user0"
     Then The following headers should be set
       | Content-Type | image/png |
@@ -42,11 +42,43 @@ Feature: avatar
     And last avatar is a square of size 512
     And last avatar is not a single color
 
+  Scenario: set square user avatar from file
+    Given Logging in using web as "user0"
+    When logged in user posts temporary avatar from file "data/green-square-256.png"
+    And user "user0" gets avatar for user "user0"
+    And The following headers should be set
+      | Content-Type | image/png |
+      | X-NC-IsCustomAvatar | 1 |
+    # Last avatar size is 512 by default when getting avatar without size parameter
+    And last avatar is a square of size 512
+    And last avatar is a single "#00FF00" color
+    And user "anonymous" gets avatar for user "user0"
+    And The following headers should be set
+      | Content-Type | image/png |
+      | X-NC-IsCustomAvatar | 1 |
+    And last avatar is a square of size 512
+    And last avatar is a single "#00FF00" color
 
+  Scenario: set square user avatar from internal path
+    Given user "user0" uploads file "data/green-square-256.png" to "/internal-green-square-256.png"
+    And Logging in using web as "user0"
+    When logged in user posts temporary avatar from internal path "internal-green-square-256.png"
+    And user "user0" gets avatar for user "user0" with size "64"
+    And The following headers should be set
+      | Content-Type | image/png |
+      | X-NC-IsCustomAvatar | 1 |
+    And last avatar is a square of size 64
+    And last avatar is a single "#00FF00" color
+    And user "anonymous" gets avatar for user "user0" with size "64"
+    And The following headers should be set
+      | Content-Type | image/png |
+      | X-NC-IsCustomAvatar | 1 |
+    And last avatar is a square of size 64
+    And last avatar is a single "#00FF00" color
 
-  Scenario: set user avatar from file
+  Scenario: set non-square user avatar from file
     Given Logging in using web as "user0"
-    When logged in user posts temporary avatar from file "data/coloured-pattern.png"
+    When logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     And logged in user crops temporary avatar
       | x | 384 |
       | y | 256 |
@@ -66,10 +98,10 @@ Feature: avatar
     And last avatar is a square of size 512
     And last avatar is a single "#FF0000" color
 
-  Scenario: set user avatar from internal path
-    Given user "user0" uploads file "data/coloured-pattern.png" to "/internal-coloured-pattern.png"
+  Scenario: set non-square user avatar from internal path
+    Given user "user0" uploads file "data/coloured-pattern-non-square.png" to "/internal-coloured-pattern-non-square.png"
     And Logging in using web as "user0"
-    When logged in user posts temporary avatar from internal path "internal-coloured-pattern.png"
+    When logged in user posts temporary avatar from internal path "internal-coloured-pattern-non-square.png"
     And logged in user crops temporary avatar
       | x | 704 |
       | y | 320 |
@@ -91,7 +123,7 @@ Feature: avatar
 
   Scenario: cropped user avatar needs to be squared
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/coloured-pattern.png"
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     When logged in user crops temporary avatar with 400
       | x | 384 |
       | y | 256 |
@@ -102,7 +134,7 @@ Feature: avatar
 
   Scenario: delete user avatar
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/coloured-pattern.png"
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     And logged in user crops temporary avatar
       | x | 384 |
       | y | 256 |
@@ -138,7 +170,7 @@ Feature: avatar
 
   Scenario: get user avatar with a larger size than the original one
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/coloured-pattern.png"
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     And logged in user crops temporary avatar
       | x | 384 |
       | y | 256 |
@@ -153,7 +185,7 @@ Feature: avatar
 
   Scenario: get user avatar with a smaller size than the original one
     Given Logging in using web as "user0"
-    And logged in user posts temporary avatar from file "data/coloured-pattern.png"
+    And logged in user posts temporary avatar from file "data/coloured-pattern-non-square.png"
     And logged in user crops temporary avatar
       | x | 384 |
       | y | 256 |
diff --git a/build/integration/features/bootstrap/Avatar.php b/build/integration/features/bootstrap/Avatar.php
index 6e59beeb7de..6f8b98ad605 100644
--- a/build/integration/features/bootstrap/Avatar.php
+++ b/build/integration/features/bootstrap/Avatar.php
@@ -174,11 +174,20 @@ trait Avatar {
 	public function lastAvatarIsASquareOfSize(string $size) {
 		[$width, $height] = getimagesizefromstring($this->lastAvatar);
 
-		Assert::assertEquals($width, $height, 'Avatar is not a square');
+		Assert::assertEquals($width, $height, 'Expected avatar to be a square');
 		Assert::assertEquals($size, $width);
 	}
 
 	/**
+	 * @Then last avatar is not a square
+	 */
+	public function lastAvatarIsNotASquare() {
+		[$width, $height] = getimagesizefromstring($this->lastAvatar);
+
+		Assert::assertNotEquals($width, $height, 'Expected avatar to not be a square');
+	}
+
+	/**
 	 * @Then last avatar is not a single color
 	 */
 	public function lastAvatarIsNotASingleColor() {