Skip to content

Commit 3e1ff23

Browse files
author
Quantarius Ray
committed
Convert about and Quotes to standalone components. Get an initial cypress component test running.
1 parent 3dc78f6 commit 3e1ff23

15 files changed

+11571
-12191
lines changed

‎angular.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"optimization": true,
3939
"outputHashing": "all",
4040
"sourceMap": false,
41-
"extractCss": true,
4241
"namedChunks": false,
4342
"extractLicenses": true,
4443
"vendorChunk": false,
@@ -102,4 +101,4 @@
102101
}
103102
},
104103
"defaultProject": "angular-unit-testing"
105-
}
104+
}

‎cypress.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export default defineConfig({
1616
return Object.assign({}, cyCodeCoverageTask(on, config), cyExtendsTask(config.configFile));
1717
},
1818
baseUrl: 'http://localhost:4200',
19-
specPattern: 'cypress/integration/**/*.ts'
19+
specPattern: 'cypress/e2e/**/*.ts'
2020
}
2121
});

‎cypress/config/dev.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export default defineConfig({
1616
return Object.assign({}, cyCodeCoverageTask(on, config), cyExtendsTask(config.configFile));
1717
},
1818
baseUrl: 'https://d1kaucldkbcik4.cloudfront.net',
19-
specPattern: 'cypress/integration/**/*.ts'
19+
specPattern: 'cypress/e2e/**/*.ts'
2020
}
2121
});

‎cypress/config/local.config.ts

+24-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,36 @@
1-
import { defineConfig } from 'cypress';
2-
import * as cyExtendsTask from '@bahmutov/cypress-extends';
3-
import * as cyCodeCoverageTask from '@cypress/code-coverage/task';
1+
import { defineConfig } from "cypress";
2+
import * as cyExtendsTask from "@bahmutov/cypress-extends";
3+
import * as cyCodeCoverageTask from "@cypress/code-coverage/task";
44

55
export default defineConfig({
6-
projectId: '4mhoqq',
6+
projectId: "4mhoqq",
77
chromeWebSecurity: false,
8+
89
retries: {
910
runMode: 2,
10-
openMode: 0
11+
openMode: 0,
1112
},
13+
1214
videoUploadOnPasses: false,
15+
1316
e2e: {
1417
setupNodeEvents(on, config) {
1518
// implement node event listeners here
16-
return Object.assign({}, cyCodeCoverageTask(on, config), cyExtendsTask(config.configFile));
19+
return Object.assign(
20+
{},
21+
cyCodeCoverageTask(on, config),
22+
cyExtendsTask(config.configFile)
23+
);
1724
},
18-
baseUrl: 'http://localhost:4200',
19-
specPattern: 'cypress/integration/**/*.ts'
20-
}
25+
baseUrl: "http://localhost:4200",
26+
specPattern: "cypress/e2e/**/*.ts",
27+
},
28+
29+
component: {
30+
devServer: {
31+
framework: "angular",
32+
bundler: "webpack",
33+
},
34+
specPattern: "**/*.cy.ts",
35+
},
2136
});

‎cypress/coverage.webpack.js

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
module.exports = {
2-
module: {
3-
rules: [
4-
{
5-
test: /\.(js|ts)$/,
6-
loader: '@skyux-sdk/istanbul-instrumenter-loader',
7-
options: { esModules: true },
8-
enforce: 'post',
9-
include: require('path').join(__dirname, '..', 'src'),
10-
exclude: [
11-
/\.(e2e|spec|module|mock)\.ts$/,
12-
/node_modules/,
13-
/(ngfactory|ngstyle)\.js/
14-
]
15-
}
16-
]
17-
}
18-
};
1+
// module.exports = {
2+
// module: {
3+
// rules: [
4+
// {
5+
// test: /\.(js|ts)$/,
6+
// loader: '@skyux-sdk/istanbul-instrumenter-loader',
7+
// options: { esModules: true },
8+
// enforce: 'post',
9+
// include: require('path').join(__dirname, '..', 'src'),
10+
// exclude: [
11+
// /\.(e2e|spec|module|mock)\.ts$/,
12+
// /node_modules/,
13+
// /(ngfactory|ngstyle)\.js/
14+
// ]
15+
// }
16+
// ]
17+
// }
18+
// };

‎cypress/support/component-index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Components App</title>
8+
</head>
9+
<body>
10+
<div data-cy-root></div>
11+
</body>
12+
</html>

‎cypress/support/component.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// ***********************************************************
2+
// This example support/component.ts is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')
21+
22+
import { mount } from 'cypress/angular'
23+
24+
// Augment the Cypress namespace to include type definitions for
25+
// your custom command.
26+
// Alternatively, can be defined in cypress/support/component.d.ts
27+
// with a <reference path="./component" /> at the top of your spec.
28+
declare global {
29+
namespace Cypress {
30+
interface Chainable {
31+
mount: typeof mount
32+
}
33+
}
34+
}
35+
36+
Cypress.Commands.add('mount', mount)
37+
38+
// Example use:
39+
// cy.mount(MyComponent)

‎package.json

+14-15
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,25 @@
3939
"zone.js": "0.11.8"
4040
},
4141
"devDependencies": {
42-
"@angular-builders/jest": "11.1.1",
43-
"@angular-devkit/build-angular": "~0.1102.1",
44-
"@angular-eslint/builder": "4.0.0",
45-
"@angular-eslint/eslint-plugin": "4.0.0",
46-
"@angular-eslint/eslint-plugin-template": "4.0.0",
47-
"@angular-eslint/schematics": "4.0.0",
48-
"@angular-eslint/template-parser": "4.0.0",
49-
"@angular/cli": "11.2.2",
42+
"@angular-builders/jest": "14.0.1",
43+
"@angular-devkit/build-angular": "14.2.5",
44+
"@angular-eslint/builder": "14.1.2",
45+
"@angular-eslint/eslint-plugin": "14.1.2",
46+
"@angular-eslint/eslint-plugin-template": "14.1.2",
47+
"@angular-eslint/schematics": "14.1.2",
48+
"@angular-eslint/template-parser": "14.1.2",
49+
"@angular/cli": "14.2.5",
5050
"@angular/compiler-cli": "14.2.5",
5151
"@angular/language-service": "14.2.5",
5252
"@bahmutov/cypress-extends": "1.1.0",
5353
"@cypress/code-coverage": "3.10.0",
5454
"@ngneat/spectator": "^7.1.0",
55-
"@skyux-sdk/istanbul-instrumenter-loader": "^4.0.0",
5655
"@types/jest": "^26.0.21",
5756
"@types/node": "^12.11.1",
58-
"@typescript-eslint/eslint-plugin": "4.16.1",
59-
"@typescript-eslint/parser": "4.16.1",
57+
"@typescript-eslint/eslint-plugin": "^5.39.0",
58+
"@typescript-eslint/parser": "^5.39.0",
6059
"check-code-coverage": "^1.10.0",
61-
"eslint": "^7.6.0",
60+
"eslint": "^8.25.0",
6261
"eslint-config-prettier": "^8.3.0",
6362
"eslint-plugin-cypress": "2.12.1",
6463
"eslint-plugin-import": "^2.22.1",
@@ -72,8 +71,8 @@
7271
"jest-chain": "^1.1.5",
7372
"jest-preset-angular": "^8.4.0",
7473
"js-beautify": "^1.13.13",
75-
"ng-mocks": "^11.9.1",
76-
"ngx-build-plus": "^11.0.0",
74+
"ng-mocks": "^14.2.3",
75+
"ngx-build-plus": "14.0.0",
7776
"prettier": "^2.2.1",
7877
"start-server-and-test": "^1.12.1",
7978
"stylelint": "^13.13.0",
@@ -133,4 +132,4 @@
133132
"ts-node/register"
134133
]
135134
}
136-
}
135+
}

‎src/app/about/about.component.cy.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { AboutComponent } from './about.component';
2+
import { HttpClientTestingModule } from '@angular/common/http/testing';
3+
4+
describe('AboutComponent', () => {
5+
6+
// Mount the component before the start of the test
7+
beforeEach(() => {
8+
cy.mount(AboutComponent, {
9+
imports: [HttpClientTestingModule]
10+
});
11+
});
12+
13+
it('mounts', () => {
14+
cy.get('[data-cy=page-title]')
15+
.should('have.text', 'About')
16+
.should('have.css', 'background-color')
17+
.and('eq', 'rgb(135, 206, 235)');
18+
});
19+
});

‎src/app/about/about.component.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { Component } from '@angular/core';
2+
import { TwainComponent } from '../twain/twain.component';
3+
import { HighlightDirective } from '../shared/highlight.directive';
4+
25
@Component({
6+
standalone: true,
7+
imports: [TwainComponent, HighlightDirective],
38
template: `
4-
<h2 highlight="skyblue">About</h2>
9+
<h2 data-cy="page-title" highlight="skyblue">About</h2>
510
<h3>Quote of the day:</h3>
611
<twain-quote></twain-quote>
712
`

‎src/app/app.module.ts

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { HttpClientModule } from '@angular/common/http';
4-
54
import { AppComponent } from './app.component';
65
import { AppRoutingModule } from './app-routing.module';
7-
8-
import { AboutComponent } from './about/about.component';
96
import { BannerComponent } from './banner/banner.component';
10-
import { HeroService } from './model/hero.service';
11-
import { UserService } from './model/user.service';
12-
import { TwainComponent } from './twain/twain.component';
13-
import { TwainService } from './twain/twain.service';
7+
import { HeroService, UserService } from './model';
148
import { WelcomeComponent } from './welcome/welcome.component';
15-
169
import { DashboardModule } from './dashboard/dashboard.module';
1710
import { SharedModule } from './shared/shared.module';
18-
1911
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
2012
import { InMemoryDataService } from './in-memory-data.service';
2113
import { ServiceWorkerModule } from '@angular/service-worker';
@@ -28,7 +20,6 @@ import { environment } from '../environments/environment';
2820
AppRoutingModule,
2921
SharedModule,
3022
HttpClientModule,
31-
3223
// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
3324
// and returns simulated server responses.
3425
// Remove it when a real server is ready to receive requests.
@@ -40,8 +31,8 @@ import { environment } from '../environments/environment';
4031
registrationStrategy: 'registerWhenStable:30000'
4132
})
4233
],
43-
providers: [HeroService, TwainService, UserService],
44-
declarations: [AppComponent, AboutComponent, BannerComponent, TwainComponent, WelcomeComponent],
34+
providers: [HeroService, UserService],
35+
declarations: [AppComponent, BannerComponent, WelcomeComponent],
4536
bootstrap: [AppComponent]
4637
})
4738
export class AppModule {}

‎src/app/shared/highlight.directive.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
22

3-
@Directive({ selector: '[highlight]' })
3+
@Directive({
4+
standalone: true,
5+
selector: '[highlight]'
6+
})
47
/**
58
* Set backgroundColor for the attached element to highlight color
69
* and set the element's customProperty to true

‎src/app/shared/shared.module.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
4-
5-
import { HighlightDirective } from './highlight.directive';
64
import { TitleCasePipe } from './title-case.pipe';
75
import { CanvasComponent } from './canvas.component';
86

@@ -12,11 +10,10 @@ import { CanvasComponent } from './canvas.component';
1210
CommonModule,
1311
// SharedModule importers won't have to import FormsModule too
1412
FormsModule,
15-
HighlightDirective,
1613
TitleCasePipe,
1714
CanvasComponent
1815
],
19-
declarations: [HighlightDirective, TitleCasePipe, CanvasComponent]
16+
declarations: [TitleCasePipe, CanvasComponent]
2017
})
2118
export class SharedModule {}
2219

‎src/app/twain/twain.component.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component, OnInit } from '@angular/core';
2-
32
import { Observable, of } from 'rxjs';
43
import { catchError, startWith } from 'rxjs/operators';
5-
64
import { TwainService } from './twain.service';
5+
import { CommonModule } from '@angular/common';
76

87
@Component({
8+
standalone: true,
99
selector: 'twain-quote',
10+
imports: [CommonModule],
11+
providers: [TwainService],
1012
template: ` <p class="twain">
1113
<i>{{ quote | async }}</i>
1214
</p>

0 commit comments

Comments
 (0)