How to use @ephox/agar - 10 common examples

Chain.op((v) => {
        // Should be dirty after user input but remain untouched
        fakeKeyUp(v.editorComponent.editor, 'X');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should not be pristine', false, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);

        // If the editor loses focus, it should should remain dirty but should also turn touched
        v.editorComponent.editor.fire('blur');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should not be pristine', false, v.ngModel.pristine);
        Assertions.assertEq('ngModel should be touched', true, v.ngModel.touched);
      }),
      cTeardown

Chain.op((v) => {
        // Should be dirty after user input but remain untouched
        fakeKeyUp(v.editorComponent.editor, 'X');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should not be pristine', false, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);

        // If the editor loses focus, it should should remain dirty but should also turn touched
        v.editorComponent.editor.fire('blur');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should not be pristine', false, v.ngModel.pristine);
        Assertions.assertEq('ngModel should be touched', true, v.ngModel.touched);
      }),
      cTeardown

UnitTest.asynctest('NgModelTest', (success, failure) => {
  const createComponent = (componentType: Type) => {
    TestBed.configureTestingModule({
      imports: [EditorModule, FormsModule],
      declarations: [componentType]
    }).compileComponents();
    return TestBed.createComponent(componentType);
  };

  const fakeKeyUp = (editor: any, char: string) => {
    editor.selection.setContent(char);
    editor.fire('keyup');
  };

  const cSetup = Chain.async((_, next) => {
    const fixture = createComponent(EditorWithNgModelComponent);
    fixture.detectChanges();
    const editorDebugElement = fixture.debugElement.query(By.directive(EditorComponent));
    const ngModel = editorDebugElement.injector.get(NgModel);
    const editorComponent = editorDebugElement.componentInstance;

    editorComponent.onInit.subscribe(() => {
      editorComponent.editor.on('SkinLoaded', () => {
        setTimeout(() => {
          next({ fixture, editorDebugElement, editorComponent, ngModel });
        }, 0);
      });
    });
  });

  const cTeardown = Chain.op(() => {

Chain.op((v) => {
        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);
      }),
      cTeardown

Chain.op((v) => {
        v.editorComponent.writeValue('New Value');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);

        Assertions.assertEq(
          'Value should have been written to the editor',
          v.editorComponent.editor.getContent({ format: 'text' }),
          'New Value'
        );
      }),
      cTeardown

Chain.op((v) => {
        v.editorComponent.writeValue('New Value');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);

        Assertions.assertEq(
          'Value should have been written to the editor',
          v.editorComponent.editor.getContent({ format: 'text' }),
          'New Value'
        );
      }),
      cTeardown

Chain.op((v) => {
        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);
      }),
      cTeardown

const fixture = createComponent(EditorWithNgModelComponent);
    fixture.detectChanges();
    const editorDebugElement = fixture.debugElement.query(By.directive(EditorComponent));
    const ngModel = editorDebugElement.injector.get(NgModel);
    const editorComponent = editorDebugElement.componentInstance;

    editorComponent.onInit.subscribe(() => {
      editorComponent.editor.on('SkinLoaded', () => {
        setTimeout(() => {
          next({ fixture, editorDebugElement, editorComponent, ngModel });
        }, 0);
      });
    });
  });

  const cTeardown = Chain.op(() => {
    TestBed.resetTestingModule();
  });

  Pipeline.async({}, [
    Log.chainsAsStep('', 'should be pristine, untouched, and valid initially', [
      cSetup,
      Chain.op((v) => {
        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);
      }),
      cTeardown
    ]),

    Log.chainsAsStep('', 'should be pristine, untouched, and valid after writeValue', [
      cSetup,

next({
            ref,
            root,
            editor,
            DOMNode: DOMNode as Element
          });
        });
    };

    const testEditor = getTestEditor(onEditorLoaded);
    const editorElement = createElement(testEditor);
    ReactDOM.render(editorElement, root);
  });
};

const cRemove = Chain.op((res: Payload) => {
  ReactDOM.unmountComponentAtNode(res.root);
});

const cNamedChainDirect = (name: keyof Payload) => NamedChain.direct(
  NamedChain.inputName(),
  Chain.mapper((res: Payload) => res[name]),
  name
);

const cDOMNode = (chain: Chain) => {
  return NamedChain.asChain([
    cNamedChainDirect('DOMNode'),
    NamedChain.read('DOMNode', chain),
    NamedChain.outputInput
  ]);
};

});

  Pipeline.async({}, [
    Log.chainsAsStep('', 'should be pristine, untouched, and valid initially', [
      cSetup,
      Chain.op((v) => {
        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);
      }),
      cTeardown
    ]),

    Log.chainsAsStep('', 'should be pristine, untouched, and valid after writeValue', [
      cSetup,
      Chain.op((v) => {
        v.editorComponent.writeValue('New Value');
        v.fixture.detectChanges();

        Assertions.assertEq('ngModel should be valid', true, v.ngModel.valid);
        Assertions.assertEq('ngModel should be pristine', true, v.ngModel.pristine);
        Assertions.assertEq('ngModel should not be touched', false, v.ngModel.touched);

        Assertions.assertEq(
          'Value should have been written to the editor',
          v.editorComponent.editor.getContent({ format: 'text' }),
          'New Value'
        );
      }),
      cTeardown
    ]),