Fix tests

frontend/app/components/wp-edit-form/single-view-edit-context.ts

@@ -62,8 +62,8 @@ export class SingleViewEditContext implements WorkPackageEditContext {
       'FocusHelper', '$q', '$timeout', 'templateRenderer');
   }
 
-  public activateField(form:WorkPackageEditForm, field:EditField, errors:string[]):ng.IPromise<WorkPackageEditFieldHandler> {
-    const ctrl = this.fieldCtrl(field.name);
+  public async activateField(form:WorkPackageEditForm, field:EditField, errors:string[]):Promise<WorkPackageEditFieldHandler> {
+    const ctrl = await this.fieldCtrl(field.name);
     const container = ctrl.editContainer;
 
     // Create a field handler for the newly active field
@@ -89,17 +89,21 @@ export class SingleViewEditContext implements WorkPackageEditContext {
       }
     );
 
-    return promise.then(() => {
+    return new Promise<WorkPackageEditFieldHandler>((resolve, reject) => {
+      promise
+        .then(() => {
           // Assure the element is visible
-      return this.$timeout(() => {
+          this.$timeout(() => {
             ctrl.editContainer.show();
-        return fieldHandler;
+            resolve(fieldHandler);
           });
+        })
+        .catch(reject);
     });
   }
 
-  public reset(workPackage:WorkPackageResourceInterface, fieldName:string, focus:boolean = false) {
-    const ctrl = this.fieldCtrl(fieldName);
+  public async reset(workPackage:WorkPackageResourceInterface, fieldName:string, focus:boolean = false) {
+    const ctrl = await this.fieldCtrl(fieldName);
     ctrl.reset(workPackage);
     ctrl.deactivate(focus);
   }
@@ -113,8 +117,8 @@ export class SingleViewEditContext implements WorkPackageEditContext {
     return 'subject';
   }
 
-  public fieldCtrl(name:string) {
-    return this.fieldGroup.fields[name] as WorkPackageEditFieldController;
+  private async fieldCtrl(name:string):Promise<WorkPackageEditFieldController> {
+    return this.fieldGroup.waitForField(name);
   }
 
   public onSaved(workPackage:WorkPackageResource) {

frontend/app/components/wp-edit-form/work-package-edit-context.ts

@@ -35,7 +35,7 @@ export interface WorkPackageEditContext {
   /**
    * Activate the field, returning the element and associated field handler
    */
-  activateField(form:WorkPackageEditForm, field:EditField, errors:string[]):ng.IPromise<WorkPackageEditFieldHandler>;
+  activateField(form:WorkPackageEditForm, field:EditField, errors:string[]):Promise<WorkPackageEditFieldHandler>;
 
   /**
    * Show this required field. E.g., add the necessary column

frontend/app/components/wp-edit-form/work-package-edit-form.ts

@@ -82,7 +82,7 @@ export class WorkPackageEditForm {
    * Active the edit field upon user's request.
    * @param fieldName
    */
-  public activate(fieldName:string, noWarnings:boolean = false):ng.IPromise<WorkPackageEditFieldHandler> {
+  public activate(fieldName:string, noWarnings:boolean = false):Promise<WorkPackageEditFieldHandler> {
     return this.workPackage.loadFormSchema().then((schema:SchemaResource) => {
       const field = this.wpEditField.getField(
         this.workPackage,
@@ -237,7 +237,7 @@ export class WorkPackageEditForm {
     }
   }
 
-  private buildField(fieldName:string, field:EditField):ng.IPromise<WorkPackageEditFieldHandler> {
+  private buildField(fieldName:string, field:EditField):Promise<WorkPackageEditFieldHandler> {
     const promise = this.editContext.activateField(this,
       field,
       this.errorsPerAttribute[fieldName] || []);

frontend/app/components/wp-edit-form/wp-edit-form.template.html

@@ -1,4 +1,5 @@
-<div class="wp-inline-edit--active-field wp-edit-field inplace-edit {{ ::vm.field.name }}">
+<div class="wp-inline-edit--active-field wp-edit-field inplace-edit {{ ::vm.field.name }}"
+     ng-class="{'-error': vm.isErrorenous }">
   <form ng-click="vm.stopPropagation($event)"
         ng-dblclick="vm.stopPropagation($event)"
         ng-submit="vm.handleUserSubmit()"

frontend/app/components/wp-edit/wp-edit-field/wp-edit-field-group.directive.ts

@@ -32,11 +32,13 @@ import {opWorkPackagesModule} from '../../../angular-modules';
 import {WorkPackageEditingService} from '../../wp-edit-form/work-package-editing-service';
 import {WorkPackageEditForm} from '../../wp-edit-form/work-package-edit-form';
 import {SingleViewEditContext} from '../../wp-edit-form/single-view-edit-context';
+import {input} from 'reactivestates';
 
 export class WorkPackageEditFieldGroupController {
   public workPackageId:string;
   public inEditMode:boolean;
   public fields:{ [attribute:string]:WorkPackageEditFieldController } = {};
+  private registeredFields = input<string[]>();
 
   constructor(protected $scope:ng.IScope,
               protected states:States,
@@ -75,6 +77,7 @@ export class WorkPackageEditFieldGroupController {
 
   public register(field:WorkPackageEditFieldController) {
     this.fields[field.fieldName] = field;
+    this.registeredFields.putValue(_.keys(this.fields));
     const form = this.editingForm;
 
     if (form && form.editMode) {
@@ -82,6 +85,15 @@ export class WorkPackageEditFieldGroupController {
     }
   }
 
+  public waitForField(name:string):Promise<WorkPackageEditFieldController> {
+    return this.registeredFields
+      .values$()
+      .filter(keys => keys.indexOf(name) >= 0)
+      .take(1)
+      .map(() => this.fields[name])
+      .toPromise();
+  }
+
   public start() {
     const form = this.wpEditing.startEditing(this.workPackageId, this.editContext, true);
     _.each(this.fields, ctrl => form.activate(ctrl.fieldName));

spec/features/work_packages/edit_work_package_spec.rb

@@ -173,17 +173,18 @@ describe 'edit work package', js: true do
     let!(:type2) { FactoryGirl.create(:type, custom_fields: [custom_field]) }
 
     it 'shows the required field when switching' do
-      page.click_button(I18n.t('js.button_edit'))
       type_field = wp_page.edit_field(:type)
 
+      type_field.activate!
       type_field.set_value type2.name
-      expect(type_field.input_element).to have_selector('option:checked', text: type2.name)
+
+      wp_page.expect_notification message: "Custom Field Nr. #{custom_field.id} can't be blank.",
+                                  type: 'error'
+
 
       cf_field = wp_page.edit_field("customField#{custom_field.id}")
       cf_field.expect_active!
       cf_field.expect_value('')
-
-      find('#work-packages--edit-actions-cancel').click
     end
   end
 
@@ -229,9 +230,9 @@ describe 'edit work package', js: true do
   end
 
   it 'submits the edit mode when pressing enter' do
-    page.click_button(I18n.t('js.button_edit'))
     subject_field = wp_page.edit_field(:subject)
 
+    subject_field.activate!
     subject_field.set_value 'My new subject!'
     subject_field.input_element.send_keys(:return)
 

spec/features/work_packages/table/switch_types_spec.rb

@@ -94,7 +94,7 @@ describe 'Switching types in work package table', js: true do
       )
 
       # Old text field should disappear
-      text_field.expect_state_text ''
+      expect { text_field.display_element }.to raise_error(Capybara::ElementNotFound)
 
       # Required CF requires activation
       req_text_field.activate!
@@ -124,7 +124,7 @@ describe 'Switching types in work package table', js: true do
         message: 'Successful update. Click here to open this work package in fullscreen view.'
       )
 
-      req_text_field.expect_state_text ''
+      expect { req_text_field.display_element }.to raise_error(Capybara::ElementNotFound)
     end
   end
 
@@ -193,7 +193,7 @@ describe 'Switching types in work package table', js: true do
       type_field = wp_page.edit_field :type
       type_field.set_value type_with_cf.name
 
-      cf_edit_field.element.find('.wp-inline-edit--toggle-multiselect').click
+      cf_edit_field.field_container.find('.wp-inline-edit--toggle-multiselect').click
       sel = cf_edit_field.input_element
       sel.select "pineapple"
       sel.select "mushrooms"

spec/support/rspec_retry.rb

@@ -31,6 +31,7 @@ end
 Retriable.configure do |c|
   # Three tries in that block
   c.tries = 3
+  c.base_interval = 1
 end
 
 ##

spec/support/work_packages/work_package_field.rb

@@ -22,12 +22,16 @@ class WorkPackageField
     @context.find @selector
   end
 
+  def display_selector
+    '.wp-edit-field--display-field'
+  end
+
   def display_element
-    field_container.find '.wp-edit-field--display-field'
+    @context.find "#{@selector} #{display_selector}"
   end
 
   def input_element
-    field_container.find input_selector
+    @context.find "#{@selector} #{input_selector}"
   end
 
   def expect_state_text(text)
@@ -63,20 +67,18 @@ class WorkPackageField
   end
 
   def active?
-    input_element.present?
-  rescue Capybara::ElementNotFound
-    false
+    @context.has_selector? "#{@selector} #{input_selector}", wait: 1
   end
   alias :editing? :active?
 
   def expect_active!
-    expect(element)
+    expect(field_container)
       .to have_selector(field_type, wait: 10),
           "Expected WP field input type '#{field_type}' for attribute '#{property_name}'."
   end
 
   def expect_inactive!
-    expect(page).to have_no_selector("#{@selector} #{field_type}", wait: 10)
+    expect(page).to have_no_selector("#{@selector} #{field_type}")
   end
 
   def expect_invalid
@@ -127,7 +129,7 @@ class WorkPackageField
   end
 
   def editable?
-    @context.find("#{@selector}.-editable")
+    field_container.find "#{display_selector}.-editable"
     true
   rescue Capybara::ElementNotFound
     false