added example and updated readme

README.md

@@ -27,6 +27,11 @@ For all test files, you need to specify serializer in Jest configuration. For ex
 }
 ```
 
+# Example
+
+ Example snapshot outputs could be found in the `examples/` directory.
+
+
 # Further reading
 
 More details about snapshot plugins could be found in [Pretty format package](https://github.com/facebook/jest/tree/v22.4.0/packages/pretty-format#usage-in-jest)

examples/base/__snapshots__/base.component.spec.snap

@@ -0,0 +1,82 @@
+exports[`BaseComponent should render something 1`] = `
+<xmpl-base
+  class="bound"
+  disabled={false}
+  style="overflow: hidden; display: block"
+  title="super"
+>
+  <div
+    class="container"
+  >
+
+
+    <div
+      class="active"
+      ng-reflect-ng-class="[object Object]"
+    />
+
+
+
+
+
+
+    <input
+      class="no-async"
+      type="text"
+      value={
+        ZoneAwarePromise {
+          "__zone_symbol__state": true,
+          "__zone_symbol__value": 1,
+        }
+      }
+    />
+
+
+    <input
+      class="with-async"
+      type="text"
+      value={2}
+    />
+
+
+    <input
+      class="2w"
+      type="text"
+      value={3}
+      valueChange={[Function]}
+    />
+
+
+
+
+
+
+  Just text
+  YET ANOTHER TEXT
+
+    <button
+      click={[Function]}
+    >
+      Click me!
+    </button>
+
+
+    <svg>
+
+
+      <rect
+        height="100"
+        width="100"
+        x="0"
+        y="0"
+      />
+
+
+    </svg>
+
+
+  </div>
+
+
+</gp-article-card>
+`;

examples/base/base.component.html

@@ -0,0 +1,17 @@
+<div class="container" #id>
+  <div [ngClass]="{'active': !disabled}"></div>
+  <ng-container *ngIf="ifPass">
+    <input class="no-async" type="text" [value]="promiseValue" />
+    <input class="with-async" type="text" [value]="observableValue | async" />
+    <input class="2w" type="text" [(value)]="twoWayValue" />
+  </ng-container>
+  <ng-container *ngIf="ifNotPass">
+    <span>Am I visible?</span>
+  </ng-container>
+  Just text
+  {{'yet another text' | uppercase}}
+  <button (click)="doStuff()">Click me!</button>
+  <svg>
+    <rect x="0" y="0" width="100" height="100" />
+  </svg>
+</div>

examples/base/base.component.spec.ts

@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { BaseComponent } from './base.component';
+
+describe('BaseComponent', () => {
+  let component: BaseComponent;
+  let fixture: ComponentFixture<BaseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BaseComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it(`should render something`, () => {
+    fixture.detectChanges();
+
+    expect(fixture).toMatchSnapshot();
+  });
+});

examples/base/base.component.ts

@@ -0,0 +1,32 @@
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'xmpl-base',
+  templateUrl: './base.component.html'
+})
+export class BaseComponent {
+  @Input() promiseValue = Promise.resolve(1);
+  @Input() observableValue = Observable.of(2);
+  @Input() twoWayValue = 3;
+
+  @HostBinding('class.bound')
+  bound = true;
+  @HostBinding('class.not-bound')
+  notBound = false;
+  @HostBinding('attr.title')
+  title = 'super';
+  @HostBinding('style.overflow')
+  overflow = 'hidden';
+  @HostBinding('style.display')
+  get display() { return 'block'; }
+  @HostBinding('disabled')
+  get disabled() { return false; }
+
+  ifPass = true;
+  ifNotPass = false;
+
+  doStuff() {}
+}