4 | 5 |
8 | 9 |
12 | 13 |
4 |
10 |
11 |
--------------------------------------------------------------------------------
/src/app/count/count.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-count',
5 | templateUrl: './count.component.html',
6 | styleUrls: ['./count.component.scss']
7 | })
8 | export class CountComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/projects/angular-dev-server/jest.config.js:
--------------------------------------------------------------------------------
1 | const baseConfig = require('../../jest.config');
2 |
3 | module.exports = {
4 | ...baseConfig,
5 | globals: {
6 | 'ts-jest': {
7 | tsconfig: '7 | angular works with {{title}} ! 8 |
9 | `, 10 | styles: [ 11 | ] 12 | }) 13 | export class AngularComponent { 14 | @Input() title = 'default'; 15 | 16 | } -------------------------------------------------------------------------------- /projects/angular/src/lib/angular.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { AngularComponent } from './angular.component'; 3 | 4 | 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AngularComponent 9 | ], 10 | imports: [ 11 | ], 12 | exports: [ 13 | AngularComponent 14 | ] 15 | }) 16 | export class AngularModule { } -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
2 |
42 |
43 | {{ title }} app is running!
44 |
45 |
61 |
62 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------
/src/app/home/resources/resources.component.html:
--------------------------------------------------------------------------------
1 |
2 |
71 |
--------------------------------------------------------------------------------
/src/app/home/rocket/rocket.component.scss:
--------------------------------------------------------------------------------
1 | svg#rocket {
2 | width: 80px;
3 | position: absolute;
4 | left: -10px;
5 | top: -24px;
6 | }
7 |
8 | svg#rocket-smoke {
9 | height: calc(100vh - 95px);
10 | position: absolute;
11 | top: 10px;
12 | right: 180px;
13 | z-index: -10;
14 | }
15 |
16 | .content {
17 | display: flex;
18 | margin: 82px auto 32px;
19 | padding: 0 16px;
20 | max-width: 960px;
21 | flex-direction: column;
22 | align-items: center;
23 | }
24 |
25 | svg.material-icons {
26 | height: 24px;
27 | width: auto;
28 | }
29 |
30 | svg.material-icons:not(:last-child) {
31 | margin-right: 8px;
32 | }
33 |
34 | .card svg.material-icons path {
35 | fill: #888;
36 | }
37 |
38 | .card-container {
39 | display: flex;
40 | flex-wrap: wrap;
41 | justify-content: center;
42 | margin-top: 16px;
43 | }
44 |
45 | .card {
46 | all: unset;
47 | border-radius: 4px;
48 | border: 1px solid #eee;
49 | background-color: #fafafa;
50 | height: 40px;
51 | width: 200px;
52 | margin: 0 8px 16px;
53 | padding: 16px;
54 | display: flex;
55 | flex-direction: row;
56 | justify-content: center;
57 | align-items: center;
58 | transition: all 0.2s ease-in-out;
59 | line-height: 24px;
60 | }
61 |
62 | .card-container .card:not(:last-child) {
63 | margin-right: 0;
64 | }
65 |
66 | .card.card-small {
67 | height: 16px;
68 | width: 168px;
69 | }
70 |
71 | .card-container .card:not(.highlight-card) {
72 | cursor: pointer;
73 | }
74 |
75 | .card-container .card:not(.highlight-card):hover {
76 | transform: translateY(-3px);
77 | box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
78 | }
79 |
80 | .card-container .card:not(.highlight-card):hover .material-icons path {
81 | fill: rgb(105, 103, 103);
82 | }
83 |
84 | .card.highlight-card {
85 | background-color: #1976d2;
86 | color: white;
87 | font-weight: 600;
88 | border: none;
89 | width: auto;
90 | min-width: 30%;
91 | position: relative;
92 | }
93 |
94 | .card.card.highlight-card span {
95 | margin-left: 60px;
96 | }
97 |
98 | @media screen and (max-width: 767px) {
99 | .card-container > *:not(.circle-link),
100 | .terminal {
101 | width: 100%;
102 | }
103 |
104 | .card:not(.highlight-card) {
105 | height: 16px;
106 | margin: 8px 0;
107 | }
108 |
109 | .card.highlight-card span {
110 | margin-left: 72px;
111 | }
112 |
113 | svg#rocket-smoke {
114 | right: 120px;
115 | transform: rotate(-5deg);
116 | }
117 | }
118 |
119 | @media screen and (max-width: 575px) {
120 | svg#rocket-smoke {
121 | display: none;
122 | visibility: hidden;
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/app/shared/toolbar/toolbar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
61 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
3 | Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4 | font-size: 14px;
5 | color: #333;
6 | box-sizing: border-box;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | h1,
12 | h2,
13 | h3,
14 | h4,
15 | h5,
16 | h6 {
17 | margin: 8px 0;
18 | }
19 |
20 | p {
21 | margin: 0;
22 | }
23 |
24 | .spacer {
25 | flex: 1;
26 | }
27 |
28 | .content {
29 | display: flex;
30 | margin: 82px auto 32px;
31 | padding: 0 16px;
32 | max-width: 960px;
33 | flex-direction: column;
34 | align-items: center;
35 | }
36 |
37 | svg.material-icons {
38 | height: 24px;
39 | width: auto;
40 | }
41 |
42 | svg.material-icons:not(:last-child) {
43 | margin-right: 8px;
44 | }
45 |
46 | .card svg.material-icons path {
47 | fill: #888;
48 | }
49 |
50 | .card-container {
51 | display: flex;
52 | flex-wrap: wrap;
53 | justify-content: center;
54 | margin-top: 16px;
55 | }
56 |
57 | .card {
58 | all: unset;
59 | border-radius: 4px;
60 | border: 1px solid #eee;
61 | background-color: #fafafa;
62 | height: 40px;
63 | width: 200px;
64 | margin: 0 8px 16px;
65 | padding: 16px;
66 | display: flex;
67 | flex-direction: row;
68 | justify-content: center;
69 | align-items: center;
70 | transition: all 0.2s ease-in-out;
71 | line-height: 24px;
72 | }
73 |
74 | .card-container .card:not(:last-child) {
75 | margin-right: 0;
76 | }
77 |
78 | .card.card-small {
79 | height: 16px;
80 | width: 168px;
81 | }
82 |
83 | .card-container .card:not(.highlight-card) {
84 | cursor: pointer;
85 | }
86 |
87 | .card-container .card:not(.highlight-card):hover {
88 | transform: translateY(-3px);
89 | box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
90 | }
91 |
92 | .card-container .card:not(.highlight-card):hover .material-icons path {
93 | fill: rgb(105, 103, 103);
94 | }
95 |
96 | .card.highlight-card {
97 | background-color: #1976d2;
98 | color: white;
99 | font-weight: 600;
100 | border: none;
101 | width: auto;
102 | min-width: 30%;
103 | position: relative;
104 | }
105 |
106 | .card.card.highlight-card span {
107 | margin-left: 60px;
108 | }
109 |
110 | a,
111 | a:visited,
112 | a:hover {
113 | color: #1976d2;
114 | text-decoration: none;
115 | }
116 |
117 | a:hover {
118 | color: #125699;
119 | }
120 |
121 | /* Responsive Styles */
122 | @media screen and (max-width: 767px) {
123 | .card-container > *:not(.circle-link),
124 | .terminal {
125 | width: 100%;
126 | }
127 |
128 | .card:not(.highlight-card) {
129 | height: 16px;
130 | margin: 8px 0;
131 | }
132 |
133 | .card.highlight-card span {
134 | margin-left: 72px;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/src/app/home/next-steps/next-steps.component.scss:
--------------------------------------------------------------------------------
1 | .content {
2 | display: flex;
3 | margin: 12px auto;
4 | padding: 0 16px;
5 | max-width: 960px;
6 | flex-direction: column;
7 | align-items: center;
8 | }
9 |
10 | svg.material-icons {
11 | height: 24px;
12 | width: auto;
13 | }
14 |
15 | svg.material-icons:not(:last-child) {
16 | margin-right: 8px;
17 | }
18 |
19 | .card svg.material-icons path {
20 | fill: #888;
21 | }
22 |
23 | .card-container {
24 | display: flex;
25 | flex-wrap: wrap;
26 | justify-content: center;
27 | margin-top: 16px;
28 | }
29 |
30 | .card {
31 | all: unset;
32 | border-radius: 4px;
33 | border: 1px solid #eee;
34 | background-color: #fafafa;
35 | height: 40px;
36 | width: 200px;
37 | margin: 0 8px 16px;
38 | padding: 16px;
39 | display: flex;
40 | flex-direction: row;
41 | justify-content: center;
42 | align-items: center;
43 | transition: all 0.2s ease-in-out;
44 | line-height: 24px;
45 | }
46 |
47 | .card-container .card:not(:last-child) {
48 | margin-right: 0;
49 | }
50 |
51 | .card.card-small {
52 | height: 16px;
53 | width: 168px;
54 | }
55 |
56 | .card-container .card:not(.highlight-card) {
57 | cursor: pointer;
58 | }
59 |
60 | .card-container .card:not(.highlight-card):hover {
61 | transform: translateY(-3px);
62 | box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
63 | }
64 |
65 | .card-container .card:not(.highlight-card):hover .material-icons path {
66 | fill: rgb(105, 103, 103);
67 | }
68 |
69 | .card.highlight-card {
70 | background-color: #1976d2;
71 | color: white;
72 | font-weight: 600;
73 | border: none;
74 | width: auto;
75 | min-width: 30%;
76 | position: relative;
77 | }
78 |
79 | .card.card.highlight-card span {
80 | margin-left: 60px;
81 | }
82 |
83 | .terminal {
84 | position: relative;
85 | width: 80%;
86 | max-width: 600px;
87 | border-radius: 6px;
88 | padding-top: 45px;
89 | margin-top: 8px;
90 | overflow: hidden;
91 | background-color: rgb(15, 15, 16);
92 | }
93 |
94 | .terminal::before {
95 | content: "\2022 \2022 \2022";
96 | position: absolute;
97 | top: 0;
98 | left: 0;
99 | height: 4px;
100 | background: rgb(58, 58, 58);
101 | color: #c2c3c4;
102 | width: 100%;
103 | font-size: 2rem;
104 | line-height: 0;
105 | padding: 14px 0;
106 | text-indent: 4px;
107 | }
108 |
109 | .terminal pre {
110 | font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
111 | color: white;
112 | padding: 0 1rem 1rem;
113 | margin: 0;
114 | }
115 |
116 | @media screen and (max-width: 767px) {
117 | .card-container > *:not(.circle-link),
118 | .terminal {
119 | width: 100%;
120 | }
121 |
122 | .card:not(.highlight-card) {
123 | height: 16px;
124 | margin: 8px 0;
125 | }
126 |
127 | .card.highlight-card span {
128 | margin-left: 72px;
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/projects/angular/README.md:
--------------------------------------------------------------------------------
1 | # Cypress Angular Component Testing
2 | This library is used to do Cypress Component Testing with Angular 12+
3 |
4 | ## Getting Started
5 | To install the package you need to first install it using:
6 |
7 | ```bash
8 | npm install cypress-angular-component-testing
9 | ```
10 |
11 | Next we need to add the following file to our cypress support file:
12 |
13 | ```javascript
14 | // cypress/support/compoennt.js
15 | import 'cypress-angular-component-testing/support';
16 |
17 | ```
18 |
19 | The next thing we need to do is setup our dev server using the `cypress-angular-dev-server` package:
20 |
21 | ```bash
22 | npm install cypress-angular-dev-server
23 | ```
24 |
25 | Next we need to add this to our Cypress config file:
26 |
27 | ```typescript
28 | // cypress.config.ts
29 |
30 | import { defineConfig } from 'cypress';
31 | import { devServer } from 'cypress-angular-dev-server';
32 |
33 | export default defineConfig({
34 | component: {
35 | devServer,
36 | ...
37 | },
38 | ...
39 | })
40 | ```
41 |
42 | Finally we can start creating Angular Component Tests directly in our application using the `.cy.ts` file extension and the Cypress `mount()` command. Here is an example:
43 |
44 | ```typescript
45 | // app.component.cy.ts (located in the same directory as app.component.ts)
46 |
47 | import { mount } from 'cypress-angular-component-testing'; // the local path would be ./{rootDirectory}/projects/angular/src/public_api
48 | import { AppComponent } from './app.component';
49 |
50 | describe('AppComponent', () => {
51 | it('mounts AppComponent', () => {
52 | mount(AppComponent)
53 | // your cypress code goes here: cy.get('...').contains('......'), etc
54 | })
55 | })
56 | ```
57 |
58 | Note that the `mount` command takes in an optional 2nd parameter which accepts your TestBed MetaData as well as any of your Component's `@Input()` properties. Here is an example:
59 |
60 | ```typescript
61 | // my-other.component.ts
62 |
63 | @Component({...})
64 | export class MyOtherComponent {
65 | @Input() title: string;
66 |
67 | constructor(private readonly service: MyOtherService) {}
68 |
69 | doSomething(value): void {
70 | this.service.doSomething(value)
71 | }
72 | }
73 |
74 | ```
75 |
76 | ```typescript
77 | import { mount } from 'cypress-angular-component-testing'; // the local path would be ./{rootDirectory}/projects/angular/src/public_api
78 | import { MyOtherComponent } from './my-other.component.ts';
79 | import { MyOtherService } from 'services/my-other.service.ts';
80 | import { MyOtherModule } from './my-other.module.ts';
81 |
82 | describe('MyOtherComponent', () => {
83 | it('mounts and displays the passed in input title in the DOM', () => {
84 | mount(MyOtherComponent, {
85 | inputs: { title: 'My Test Title' },
86 | imports: [MyOtherModule],
87 | providers: [MyOtherService]
88 | });
89 | cy.get('h1').contains('My Test Title')
90 | })
91 | })
92 | ```
93 |
94 | ### Running The Tests
95 | The final thing to do is just open Cypress!
96 |
97 | ```bash
98 | npx cypress open
99 | ```
100 |
101 | **You can also use the `--component` flag if you just want to run the component tests**
102 |
103 | You can also run cypress headlessly using:
104 |
105 | ```bash
106 | npx cypress run --component
107 | ```
--------------------------------------------------------------------------------
/projects/angular/src/lib/mount.ts:
--------------------------------------------------------------------------------
1 | // import '@angular/compiler';
2 | import { CommonModule } from '@angular/common';
3 | import { Type } from '@angular/core';
4 | import {
5 | ComponentFixture,
6 | getTestBed,
7 | TestBed,
8 | TestModuleMetadata,
9 | } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting,
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | export interface TestBedConfigResources
3 |Here are some links to help you get started:
4 | 5 |
6 |
7 |
16 |
17 |
18 |
19 |
30 |
31 |
32 |
33 |
44 |
45 |
46 |
47 |
68 |
69 |
70 | 
9 |
2 |
3 |
122 |
--------------------------------------------------------------------------------
/projects/angular/src/lib/mount.spec.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Type } from '@angular/core';
3 | import { ComponentFixture, TestBed } from '@angular/core/testing';
4 | import { AngularComponent } from './angular.component';
5 | import { bootstrapModule, mount, MountResponse, setupComponent, setupFixture, TestBedConfig } from './mount';
6 | import { _expect as expect } from './expect'
7 |
8 |
9 | describe('mount', () => {
10 | // it('returns a MountResponse', async () => {
11 | // // arrange
12 |
13 | // // act
14 | // mount(AngularComponent, {}).then((response: MountResponseNext Steps
4 |What do you want to do next with your app?
5 | 6 | 7 | 8 |
9 |
25 |
26 |
42 |
43 |
59 |
60 |
76 |
77 |
93 |
94 |
110 |
111 |
112 |
113 |
114 |
121 | ng generate component xyz115 |
ng add @angular/material116 |
ng add @angular/pwa117 |
ng add _____118 |
ng test119 |
ng build120 |