<commit_before>import {
  fakeAsync,
  flushMicrotasks,
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  ComponentFixture,
  TestComponentBuilder,
} from '@angular/core/testing';

import { Component, Input } from '@angular/core';

import {
  FORM_DIRECTIVES,
  disableDeprecatedForms,
  provideForms,
  FormControl,
  NgForm,
  FormGroup,
} from '@angular/forms';

import {
  Store,
  applyMiddleware,
  compose,
  combineReducers,
  createStore,
} from 'redux';

import { provideReduceForms } from './configure';
import { Connection } from './connection';

import { logger } from './tests.utilities';

const createControlFromTemplate = (key: string, template: string) => {
  @Component({
    selector: `test-form-${key}`,
    template,
    directives: [
      FORM_DIRECTIVES,
      Connection,
    ]
  })
  class TestForm {
    @Input() private element;
  }

  return TestForm;

  // return eval(`
  //   (function () {
  //     var klass = class ${key} {
  //       constructor() {}
  //     };
  //     return __decorate([component], klass);
  //   })()
  // `);
};

interface AppState {
  fooState?: {
    example: string;
  };
}

const fooReducer = (state = {example: 'Test!'}, action = {type: ''}) => {
  return state;
}

const reducers = combineReducers({
  fooState: fooReducer
});

describe('connect directive', () => {
  let builder: TestComponentBuilder;

  let store: Store<AppState>;
  beforeEach(() => {
    const create = compose(applyMiddleware(logger))(createStore);
    store = create(reducers, <AppState> {});
  });

  beforeEachProviders(() => [
    disableDeprecatedForms(),
    provideForms(),
    provideReduceForms(store),
  ]);

  beforeEach(inject([TestComponentBuilder],
    (tcb: TestComponentBuilder) => builder = tcb));

  const ConnectControlExample = createControlFromTemplate('controlExample', `
    <form ngForm connect="fooState">
      <input type="text" name="example" ngControl="example" ngModel />
    </form>
  `);

  it('should bind all form controls to application state',
    fakeAsync(inject([], () =>
      builder.createAsync(ConnectControlExample).then((fixture: ComponentFixture<any>) => {
        fixture.detectChanges();
        flushMicrotasks();

        const textbox = fixture.nativeElement.querySelector('input');

        expect(textbox.value).toEqual('Test!');
    }))));
});<commit_msg>Add example of how to connect to something deep inside Redux state<commit_after>import {
  fakeAsync,
  flushMicrotasks,
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  ComponentFixture,
  TestComponentBuilder,
} from '@angular/core/testing';

import { Component, Input } from '@angular/core';

import {
  FORM_DIRECTIVES,
  disableDeprecatedForms,
  provideForms,
  FormControl,
  NgForm,
  FormGroup,
} from '@angular/forms';

import {
  Store,
  applyMiddleware,
  compose,
  combineReducers,
  createStore,
} from 'redux';

import { provideReduceForms } from './configure';
import { Connection } from './connection';

import { logger } from './tests.utilities';

const createControlFromTemplate = (key: string, template: string) => {
  const component = Component({
    selector: `test-form-${key}`,
    template,
    directives: [
      FORM_DIRECTIVES,
      Connection,
    ]
  });

  return eval(`
    (function () {
      var klass = class ${key} {
        constructor() {}
      };
      return __decorate([component], klass);
    })()
  `);
};

interface AppState {
  fooState?: {
    example: string;
  };
}

const initialState = {example: 'Test!', deepInside: {foo: 'Bar!'}};

const fooReducer = (state = initialState, action = {type: ''}) => {
  return state;
}

const reducers = combineReducers({
  fooState: fooReducer
});

describe('connect directive', () => {
  let builder: TestComponentBuilder;

  let store: Store<AppState>;
  beforeEach(() => {
    const create = compose(applyMiddleware(logger))(createStore);
    store = create(reducers, <AppState> {});
  });

  beforeEachProviders(() => [
    disableDeprecatedForms(),
    provideForms(),
    provideReduceForms(store),
  ]);

  beforeEach(inject([TestComponentBuilder],
    (tcb: TestComponentBuilder) => builder = tcb));

  const ConnectControlExample = createControlFromTemplate('controlExample', `
    <form connect="fooState">
      <input type="text" name="example" ngControl="example" ngModel />
    </form>
  `);

  it('should bind all form controls to application state',
    fakeAsync(inject([], () =>
      builder.createAsync(ConnectControlExample).then((fixture: ComponentFixture<any>) => {
        fixture.detectChanges();
        flushMicrotasks();

        const textbox = fixture.nativeElement.querySelector('input');

        expect(textbox.value).toEqual('Test!');
    }))));

  const DeepConnectExample = createControlFromTemplate('deepConnectExample', `
    <form connect="fooState.deepInside">
      <input type="text" name="foo" ngControl="foo" ngModel />
    </form>
  `);

  it('should bind bind form control to element deep inside application state',
    fakeAsync(inject([], () =>
      builder.createAsync(DeepConnectExample).then((fixture: ComponentFixture<any>) => {
        fixture.detectChanges();
        flushMicrotasks();

        const textbox = fixture.nativeElement.querySelector('input');

        expect(textbox.value).toEqual('Bar!');
    }))));
});
{'fraction_non_alphanumeric': 0.147354694485842, 'fraction_numerical': 0.0, 'mean_word_length': 3.705521472392638, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6783031', 'n_tokens_mistral': 1625, 'n_tokens_neox': 1594, 'n_words': 342}