-
-
-
diff --git a/projects/testing-library/tests/form/form.component.ts b/projects/testing-library/tests/form/form.component.ts
deleted file mode 100644
index 19445aad..00000000
--- a/projects/testing-library/tests/form/form.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-@Component({
- selector: 'login-form',
- templateUrl: './form.component.html',
-})
-export class LoginFormComponent {
- @Output() handleLogin = new EventEmitter<{ username: string; password: string }>();
-
- loginForm: FormGroup;
- constructor(private fb: FormBuilder) {
- this.createForm();
- }
-
- createForm() {
- this.loginForm = this.fb.group({
- username: ['', Validators.required],
- password: ['', Validators.required],
- });
- }
-
- handleSubmit() {
- if (this.loginForm.valid) {
- this.handleLogin.emit(this.loginForm.value);
- }
- }
-}
diff --git a/projects/testing-library/tests/form/form.spec.ts b/projects/testing-library/tests/form/form.spec.ts
deleted file mode 100644
index c70a4918..00000000
--- a/projects/testing-library/tests/form/form.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { render } from '../../src/public_api';
-import { Component, Output, EventEmitter } from '@angular/core';
-import { LoginFormComponent } from './form.component';
-
-test('login form submits using the component syntax', async () => {
- const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
- const handleLogin = {
- emit: jest.fn(),
- };
-
- const { container, getByLabelText, getByText, input, submit } = await render(LoginFormComponent, {
- imports: [ReactiveFormsModule],
- componentProperties: {
- handleLogin: handleLogin as any,
- },
- });
-
- const usernameNode = getByLabelText(/username/i) as HTMLInputElement;
- const passwordNode = getByLabelText(/password/i) as HTMLInputElement;
- const submitButtonNode = getByText(/submit/i) as HTMLButtonElement;
- const formNode = container.querySelector('form');
-
- input(usernameNode, {
- target: {
- value: fakeUser.username,
- },
- });
-
- passwordNode.value = fakeUser.password;
- input(passwordNode);
-
- submit(formNode);
-
- expect(handleLogin.emit).toHaveBeenCalledTimes(1);
- expect(handleLogin.emit).toHaveBeenCalledWith(fakeUser);
- expect(submitButtonNode.type).toBe('submit');
-});
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index c3563b3b..cd83237e 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -5,35 +5,49 @@ import { render } from '../src/public_api';
@Component({
selector: 'fixture',
- template: ``,
+ template: `
+
+
+ `,
})
class FixtureComponent {}
+test('creates queries and events', async () => {
+ const component = await render(FixtureComponent);
+
+ component.input(component.getByTestId('input'), { target: { value: 'a super awesome input' } });
+ component.getByDisplayValue('a super awesome input');
+ component.click(component.getByText('button'));
+});
+
@NgModule({
declarations: [FixtureComponent],
})
export class FixtureModule {}
-
-test('should not throw if component is declared in an import', async () => {
- await render(FixtureComponent, {
- imports: [FixtureModule],
- excludeComponentDeclaration: true,
+describe('excludeComponentDeclaration', () => {
+ test('should not throw if component is declared in an import', async () => {
+ await render(FixtureComponent, {
+ imports: [FixtureModule],
+ excludeComponentDeclaration: true,
+ });
});
});
-test('should add NoopAnimationsModule by default', async () => {
- await render(FixtureComponent);
- const noopAnimationsModule = TestBed.get
-
-
-
-`;
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 00000000..0e7faa3f
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,83 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SingleComponent } from './examples/00-single-component';
+import { NestedContainerComponent } from './examples/01-nested-component';
+import { InputOutputComponent } from './examples/02-input-output';
+import { FormsComponent } from './examples/03-forms';
+import { MaterialFormsComponent } from './examples/04-forms-with-material';
+import { ComponentWithProviderComponent } from './examples/05-component-provider';
+import { WithNgRxStoreComponent } from './examples/06-with-ngrx-store';
+import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store';
+
+export const examples = [
+ {
+ path: 'single-component',
+ component: SingleComponent,
+ data: {
+ name: 'Single component',
+ },
+ },
+ {
+ path: 'nested-component',
+ component: NestedContainerComponent,
+ data: {
+ name: 'Nested components',
+ },
+ },
+ {
+ path: 'input-output',
+ component: InputOutputComponent,
+ data: {
+ name: 'Input and Output',
+ },
+ },
+ {
+ path: 'forms',
+ component: FormsComponent,
+ data: {
+ name: 'Form',
+ },
+ },
+ {
+ path: 'forms-material',
+ component: MaterialFormsComponent,
+ data: {
+ name: 'Material form',
+ },
+ },
+ {
+ path: 'component-with-provider',
+ component: ComponentWithProviderComponent,
+ data: {
+ name: 'With provider',
+ },
+ },
+ {
+ path: 'with-ngrx-store',
+ component: WithNgRxStoreComponent,
+ data: {
+ name: 'With NgRx Store',
+ },
+ },
+ {
+ path: 'with-ngrx-mock-store',
+ component: WithNgRxMockStoreComponent,
+ data: {
+ name: 'With NgRx MockStore',
+ },
+ },
+];
+
+export const routes: Routes = [
+ {
+ path: '',
+ children: examples,
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule],
+})
+export class AppRoutingModule {}
diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29b..6d3bc67b 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,17 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.sidenav {
+ flex: 1;
+}
+
+.sidenav-container {
+ padding: 10px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 18e269ce..04b5f476 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,69 +1,17 @@
-
-
- 
-
- - Welcome to app! -
-
- - Here are some links to help you start: -
--
-
-
-
- - Tour of Heroes - -
-
- -
-
- - CLI Documentation - -
-
- -
-
- - Angular blog - -
-
-
-
-
-
-
- - The box is now Open! -
-
-
-
-Welcome to {{ title }}!
-
-Here are some links to help you start:
--
-
-
-
Tour of Heroes
-
- -
-
CLI Documentation
-
- -
-
Angular blog
-
-