Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 250c7ee

Browse files
author
Jarosław Żołnowski
authored
feat(test): add playwright configuration (#2)
* add e2e tests, improve eslint configuration * add babel configuration file * configure import-order rule to sort imports based on package name * fix failed to load parser '@babel/eslint-parser' issue by adding @babel/core dev dependency
1 parent 915c87a commit 250c7ee

File tree

12 files changed

+3547
-2724
lines changed

12 files changed

+3547
-2724
lines changed

‎.babelrc‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": [
3+
// "env",
4+
[
5+
"@babel/preset-env",
6+
{
7+
"corejs": 3,
8+
"modules": "commonjs", // resolves https://github.com/noppa/ng-hot-reload/issues/31
9+
"shippedProposals": true,
10+
"useBuiltIns": "usage"
11+
}
12+
]
13+
],
14+
"plugins": [
15+
"@babel/plugin-proposal-object-rest-spread",
16+
"@babel/plugin-transform-object-assign"
17+
]
18+
}

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777

7878
// 7.11 https://github.com/airbnb/javascript#functions--signature-spacing
7979
// 19.2 https://github.com/airbnb/javascript#whitespace--before-blocks
80-
"space-before-function-paren": ["error", "never"],
80+
"space-before-function-paren": ["error", {"anonymous": "never", "named": "never", "asyncArrow": "always"}],
8181
"space-before-blocks": ["error", "always"],
8282

8383
// 7.13 https://github.com/airbnb/javascript#functions--reassign-params
@@ -244,6 +244,7 @@
244244
// 23.8 https://github.com/airbnb/javascript#naming--PascalCase-singleton
245245
// 23.9 https://github.com/airbnb/javascript#naming--Acronyms-and-Initialisms
246246
},
247+
"parser": "@babel/eslint-parser",
247248
"parserOptions": {
248249
"ecmaVersion": 6,
249250
"sourceType": "module"

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,7 @@ node_modules
99
*.log
1010
dist/
1111
yarn.lock
12+
13+
/test-results/
14+
/playwright-report/
15+
/playwright/.cache/

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
- `npm start` - serve with hot reload at `localhost:1234`
2424
- `npm run build` - build bundled version in `dist` folder
2525
- `npm run lint` - lint code with ESLint using included config
26+
- `npm run e2e` - run e2e tests
2627
- `npm run format` - format code with Prettier
2728
- `npx hygen component new --name new-component --path relative/path/inside/of/src/app/folder` - generate folder with default component code files
2829
- `npx hygen service new --name new-service --path relative/path/inside/of/src/app/folder` - generate folder with default service code files

‎app/components/navbar/navbar.component.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,29 @@ import './navbar.scss';
44
const navbarComponent = {
55
bindings: {},
66
template: `
7-
<md-toolbar class="navbar">
8-
<div class="md-toolbar-tools">
9-
<div flex layout="row" layout-align="start center">
10-
<img class="ng-hotrod-logo" ng-src="{{ $ctrl.ngHotrodLogo }}" alt="GitHub">
11-
<h2 class="active-page-name" md-truncate>{{ $ctrl.NavigationService.currentPageTitle }}</h2>
12-
</div>
13-
<a
14-
class="github-link" href="https://github.com/xlts-dev/angularjs-material-vite"
15-
layout="row"
16-
layout-align="center center">
17-
<img ng-src="{{ $ctrl.githubLogo }}" alt="GitHub">
18-
<div>GitHub</div>
19-
</a>
20-
</div>
21-
</md-toolbar>
7+
<md-toolbar class="navbar">
8+
<div class="md-toolbar-tools">
9+
<div flex layout="row" layout-align="start center">
10+
<img
11+
data-testid="ng-hotrod-logo"
12+
class="ng-hotrod-logo"
13+
ng-src="{{ $ctrl.ngHotrodLogo }}"
14+
alt=""
15+
>
16+
<h2 data-testid="header" class="active-page-name" md-truncate>
17+
{{ $ctrl.NavigationService.currentPageTitle }}
18+
</h2>
19+
</div>
20+
<a
21+
data-testid="github"
22+
class="github-link" href="https://github.com/xlts-dev/angularjs-material-vite"
23+
layout="row"
24+
layout-align="center center">
25+
<img ng-src="{{ $ctrl.githubLogo }}" alt="GitHub">
26+
<div>GitHub</div>
27+
</a>
28+
</div>
29+
</md-toolbar>
2230
`,
2331
controller,
2432
};

‎app/components/page-home/page-home.component.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ const pageHomeComponent = {
55
bindings: {},
66
template: `
77
<md-content class="page-home">
8-
<h2 >Modern starter for AngularJS + Angular Material</h2>
8+
<h2 data-testid="title" class="md-display-1">Modern starter for AngularJS + Angular Material</h2>
99
<img
10+
data-testid="hero-image"
1011
class="hero-img"
1112
src="https://res.cloudinary.com/fyodorio/image/upload/v1611994660/my-logos/hotrod-logo_rhkfxy.jpg"
12-
alt="ng-hotrod">
13+
alt="Hand sketch of an old hot rod car with the AngularJS logo on the door">
1314
<h3 class="md-title">FEATURING:</h3>
1415
<div layout="column" layout-align="center center">
15-
<ul class="md-headline" layout="column" layout-align="start start">
16+
<ul data-testid="featuring" class="md-headline" layout="column" layout-align="start start">
1617
<li><a href="https://angularjs.org/">AngularJS</a> (1.8.2)</li>
1718
<li><a href="https://material.angularjs.org/latest/">Angular Material</a></li>
1819
<li><a href="https://sass-lang.com/">Sass</a></li>

‎e2e/pages/home-page.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export class HomePage {
2+
title;
3+
heroImage;
4+
featuring;
5+
6+
constructor(page) {
7+
this.page = page;
8+
this.title = page.getByTestId('title');
9+
this.heroImage = page.getByTestId('hero-image');
10+
this.featuring = page.getByTestId('featuring').getByRole('link');
11+
}
12+
13+
async clickOnAngularMaterialLink() {
14+
await this.page.getByRole('link', { name: 'Angular Material' }).click();
15+
}
16+
}

‎e2e/pages/nav-bar-page.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export class NavBarPage {
2+
logo;
3+
header;
4+
5+
constructor(page) {
6+
this.page = page;
7+
this.logo = this.page.getByTestId('ng-hotrod-logo');
8+
this.header = this.page.getByTestId('header');
9+
}
10+
11+
async clickOnGitHubIcon() {
12+
await this.page.getByTestId('github').click();
13+
}
14+
}

‎e2e/tests/app.e2e.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { expect, test } from '@playwright/test';
2+
import { HomePage } from '../pages/home-page';
3+
import { NavBarPage } from '../pages/nav-bar-page';
4+
5+
test.describe('AngularJS-Material-Vite app', () => {
6+
let errorLogs;
7+
8+
test.beforeEach(async ({ page }) => {
9+
errorLogs = [];
10+
11+
page.on('console', message => {
12+
if (message.type() === 'error') {
13+
errorLogs.push(message.text());
14+
}
15+
});
16+
17+
page.on('pageerror', err => {
18+
errorLogs.push(err.message);
19+
});
20+
21+
await page.goto('');
22+
});
23+
24+
test.afterEach(async () => {
25+
expect(errorLogs).toStrictEqual([]);
26+
});
27+
28+
test.describe('TopNav', () => {
29+
test('Navbar', async ({ page }) => {
30+
const navBarPage = new NavBarPage(page);
31+
32+
await expect(navBarPage.logo).toHaveAttribute('src', '/assets/img/icon-ng-hotrod-light.svg');
33+
await expect(navBarPage.header).toHaveText('ng-hotrod');
34+
});
35+
36+
test('Redirect to GitHub page', async ({ page }) => {
37+
const navBarPage = new NavBarPage(page);
38+
39+
await navBarPage.clickOnGitHubIcon();
40+
41+
await expect(page.url()).toBe('https://github.com/xlts-dev/angularjs-material-vite');
42+
});
43+
});
44+
45+
test.describe('Home', () => {
46+
test('HomePage content', async ({ page }) => {
47+
const homePage = new HomePage(page);
48+
49+
await expect(homePage.title).toHaveText('Modern starter for AngularJS + Angular Material');
50+
await expect(homePage.heroImage).toHaveAttribute(
51+
'src',
52+
'https://res.cloudinary.com/fyodorio/image/upload/v1611994660/my-logos/hotrod-logo_rhkfxy.jpg',
53+
);
54+
await expect(await homePage.featuring.all()).toHaveLength(8);
55+
});
56+
57+
test('Redirect to Angular Material page', async ({ page }) => {
58+
const homePage = new HomePage(page);
59+
60+
await homePage.clickOnAngularMaterialLink();
61+
62+
await expect(page.url()).toBe('https://material.angularjs.org/latest/');
63+
});
64+
});
65+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /