<|start_filename|>app/components/mobiledoc-section-attribute-button.js<|end_filename|>
export { default } from 'ember-mobiledoc-editor/components/mobiledoc-section-attribute-button/component';


<|start_filename|>app/helpers/includes.js<|end_filename|>
export { default, includes } from 'ember-mobiledoc-editor/helpers/includes';


<|start_filename|>addon/components/mobiledoc-section-attribute-button/component.js<|end_filename|>
import { defineProperty, observer, computed } from '@ember/object';
import Component from '@ember/component';
import layout from './template';
import { camelize } from '@ember/string';
import { isEmpty } from '@ember/utils';

export default Component.extend({
  tagName: 'button',
  layout,
  attributeBindings: ['type', 'title'],
  classNameBindings: ['isActive:active'],
  type: 'button',
  init() {
    this._super(...arguments);
    this._updateIsActiveCP();
  },
  onNameOrValueDidChange: observer('attributeName', 'attributeValue', function() {
    this._updateIsActiveCP();
  }),
  _updateIsActiveCP() {
    let attributeName = this.get('attributeName');
    let fullPath = `editor.activeSectionAttributes.${camelize(attributeName)}`;
    let cp = computed(fullPath, 'attributeValue', function(){
      let activeValues = this.get(fullPath) || [];
      let attributeValue = this.get('attributeValue');
      return activeValues.includes(attributeValue) || (isEmpty(activeValues) && this.editor.isDefaultAttributeValue(attributeName, attributeValue));
    });
    defineProperty(this, 'isActive', cp);
  },
  click() {
    let editor = this.get('editor');
    let attributeName = this.get('attributeName');
    let attributeValue = this.get('attributeValue');
    editor.setAttribute(attributeName, attributeValue);
  }
});


<|start_filename|>tests/integration/components/mobiledoc-section-attribute-button/component-test.js<|end_filename|>
import { run } from '@ember/runloop';
import EObject from '@ember/object';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('mobiledoc-section-attribute-button', 'Integration | Component | mobiledoc section attribute button', {
  integration: true
});

test('it displays button', function(assert) {
  let editor = EObject.create({
    toggleSection() {},
    activeSectionAttributes: {},
    isDefaultAttributeValue(attributeName, attributeValue) {
      return (attributeName === 'text-align' && attributeValue === 'left');
    }
  });
  this.set('editor', editor);
  this.render(hbs`{{mobiledoc-section-attribute-button editor=editor attributeName="text-align" attributeValue="left"}}`);

  let button = this.$('button');
  assert.equal(
    button.html(), 'Left',
    'default text is capitalization of `attributeValue`');
  assert.ok(
    button.hasClass('active'),
    'button is active because editor isDefaultAttributeValue returns true in this case');

  run(() => {
    editor.set('activeSectionAttributes', { textAlign: ['center'] });
  });

  assert.ok(
  !button.hasClass('active'),
  'button is not active');

  run(() => {
    editor.set('activeSectionAttributes', { textAlign: ['left'] });
  });

  assert.ok(
    button.hasClass('active'),
    'button activates');
});

test('it includes `title` attribute when provided', function(assert) {
  let editor = EObject.create({
    toggleSection() {},
    activeSectionAttributes: {},
    isDefaultAttributeValue(attributeName, attributeValue) {
      return (attributeName === 'text-align' && attributeValue === 'left');
    }
  });
  this.set('editor', editor);
  this.render(hbs`{{mobiledoc-section-attribute-button editor=editor title=title attributeName="text-align" attributeValue="left"}}`);

  let button = this.$('button');
  assert.equal(
    button.attr('title'),
    undefined,
    'button does not have a `title` attribute by default');

  this.set('title', 'Align Left');

  assert.equal(
    button.attr('title'),
    'Align Left',
    'button has `title` attribute when provided');
});

test('it yields for html', function(assert) {
  this.set('editor', {
    toggleSection() {},
    activeSectionAttributes: {},
    isDefaultAttributeValue(attributeName, attributeValue) {
      return (attributeName === 'text-align' && attributeValue === 'left');
    }
  });
  this.render(hbs`
    {{~#mobiledoc-section-attribute-button editor=editor attributeName="text-align" attributeValue="left"~}}
      Izquierda
    {{~/mobiledoc-section-attribute-button~}}
  `);

  let button = this.$('button');
  assert.equal(
    button.html(), 'Izquierda',
    'text is yielded');
});

test('it calls setAttribute on click', function(assert) {
  assert.expect(3);
  this.set('editor', {
    setAttribute(name, value) {
      assert.ok(true, 'setAttribute called');
      assert.equal(name, 'text-align', 'setAttribute called with attributeName');
      assert.equal(value, 'left', 'setAttribute called with attributeValue');
    },
    activeSectionAttributes: {},
    isDefaultAttributeValue(attributeName, attributeValue) {
      return (attributeName === 'text-align' && attributeValue === 'left');
    }
  });
  this.render(hbs`
    {{~mobiledoc-section-attribute-button editor=editor attributeName="text-align" attributeValue="left"~}}
  `);

  let button = this.$('button');
  button.click();
});


<|start_filename|>tests/unit/utils/create-component-card-test.js<|end_filename|>
import createComponentCard from 'ember-mobiledoc-editor/utils/create-component-card';
import { module, test } from 'qunit';
import MobiledocDOMRenderer from 'mobiledoc-dom-renderer';

module('Unit | Utility | create component card');

test('it creates a card', function(assert) {
  let result = createComponentCard('foo-card');
  assert.ok(result.name === 'foo-card' &&
            result.type === 'dom' &&
            typeof result.render === 'function' &&
            typeof result.edit === 'function',
    'created a named card'
  );
});

test('it creates a renderable card', function(assert) {
  let card = createComponentCard('foo-card');
  let renderer = new MobiledocDOMRenderer({cards: [card]});

  let {result} = renderer.render({
    version: '0.3.2',
    cards: [
      ['foo-card', {}]
    ],
    sections: [
      [10, 0]
    ]
  });

  assert.ok(result, 'card rendered');
});


<|start_filename|>addon/helpers/includes.js<|end_filename|>
import { helper } from '@ember/component/helper';

export function includes([array, item] /* , attributeHash */) {
  if (!array || !array.includes) {
    return false;
  }
  return array.includes(item);
}

export default helper(includes);
