Musings on AtScript annotations with a Flux component.

item-component.js

import {Component} from 'angular'
import {template} from 'chat/message/item-template';


@Inject(['ChatActions', 'MessageStore'])
@Component({selector: 'messageItem', bindAs: 'state', template: template})
@IsolateScope({query: 'query'})
export class MessageItem {
  constructor(Actions: ChatActions, Store: MessageStore}) {
    this._Actions = Actions;
    this._Store = Store;
    this._Store.on(this._Store.Events.updated, (data)=> this.update(data));
    update(this._Store.messages);
  }

  update(data) {
    this.messages = data.slice();
  }

  sendMessage(text){
    (new this._Actions.SendMessage(
      text, new Date()
    )).dispatch();
  }
}

item-component_test.js

describe('MessageItem', function(){
  var sut = null;
  
  describe('Behaviors', function(){
    import {MockMessages} from '../messages/mocks';
    import {Actions} from '../actions';

    function InstantiateComponent(){
      import {MessageItem} from './item-component';
      sut = new MessageItem(Actions, MockMessages));
    }
    beforeEach(InstantiateComponent);

    it('load message from the store', function(){
      sut.messages.length.should.equal(MockMessages.messages.length);
    });
    
  });
  
  describe('Rendering', function(){
    import {MockMessages} from '../messages/mocks';
    
  });
});

item-template.jade

//- This will be compiled
div
  div.col-md-2
    form
      label(for="search") Search
      input.form-control(name="search", ng-model="state.query")
  div.col-md-10
    ol.messages
      li.message(ng-repeat=" message in state.messages | filter:state.query ")
        span.when {{ message.date | date:'medium' }}
        div {{ message.text }}

item-template.js

export template = '<div><div class="col-md-2">...ng-model="state.query"...</div>';