Fix specs with invalid file types

frontend/module/avatar-upload-form/avatar-upload-form.component.ts

@@ -46,6 +46,7 @@ export class AvatarUploadFormComponent implements OnInit {
   public avatarFile:any;
   public avatarPreviewUrl:any;
   public busy:boolean = false;
+  public fileInvalid = false;
 
   @ViewChild('avatarFilePicker') public avatarFilePicker:ElementRef;
 
@@ -72,15 +73,21 @@ export class AvatarUploadFormComponent implements OnInit {
     this.method = element.getAttribute('method');
   }
 
-  public onFilePickerChanged() {
+  public onFilePickerChanged(_evt:Event) {
     const files:UploadFile[] = Array.from(this.avatarFilePicker.nativeElement.files);
     if (files.length === 0) {
       return;
     }
 
-    ImageHelpers.resizeFile(128, files[0]).then(([dataURL, blob]) => {
+    const file = files[0];
+    if (['image/jpeg', 'image/png', 'image/gif'].indexOf(file.type) === -1) {
+      this.fileInvalid = true;
+      return;
+    }
+
+    ImageHelpers.resizeFile(128, file).then(([dataURL, blob]) => {
       // Create resized file
-      blob.name = files[0].name;
+      blob.name = file.name;
       this.avatarFile = blob;
       this.avatarPreviewUrl = dataURL;
     });

frontend/module/avatar-upload-form/avatar-upload-form.html

@@ -1,18 +1,22 @@
 <div class="form--field">
     <label class="form--label"
-           [ngClass]="{ '-error':  isInvalid }"
+           [ngClass]="{ '-error':  fileInvalid }"
            [textContent]="text.label_choose_avatar"
            for="avatar_file_input">
     </label>
     <div class="form--field-container">
         <input #avatarFilePicker
                type="file"
+               accept="image/jpeg,image/png,image/gif"
                id="avatar_file_input"
                name="avatar_file_input"
                (change)="onFilePickerChanged($event)" />
     </div>
     <div class="form--field-instructions">
         <span [textContent]="text.upload_instructions"></span>
+          <div class="avatars--error-pane">
+            <span *ngIf="fileInvalid" [textContent]="text.wrong_file_format"></span>
+          </div>
     </div>
 </div>
 <fieldset class="preview" *ngIf="avatarPreviewUrl">

frontend/module/main.ts

@@ -55,7 +55,7 @@ export function initializeAvatarsPlugin(injector:Injector) {
         AvatarUploadFormComponent
     ]
 })
-export default class OpenProjectAvatarsModule {
+export class PluginModule {
 }
 
 

spec/features/shared_avatar_examples.rb

@@ -47,7 +47,7 @@ shared_examples 'avatar management' do
       expect(page).to have_no_selector('.form--fieldset-legend', text: 'GRAVATAR')
 
       # Attach a new invalid image
-      find('#avatar_file_input').set File.join(image_base_path, 'invalid.jpg')
+      find('#avatar_file_input').set File.join(image_base_path, 'invalid.txt')
 
       # Expect error
       expect(page).to have_selector('.form--label.-error')