feat(test): add playwright configuration, add e2e tests, improve esli…

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    // "env",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": 3,
+        "modules": "commonjs", // resolves https://github.com/noppa/ng-hot-reload/issues/31
+        "shippedProposals": true,
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-object-assign"
+  ]
+}

.eslintrc.json

@@ -77,7 +77,7 @@
 
     // 7.11 https://github.com/airbnb/javascript#functions--signature-spacing
     // 19.2 https://github.com/airbnb/javascript#whitespace--before-blocks
-    "space-before-function-paren": ["error", "never"],
+    "space-before-function-paren": ["error", {"anonymous": "never", "named": "never", "asyncArrow": "always"}],
     "space-before-blocks": ["error", "always"],
 
     // 7.13 https://github.com/airbnb/javascript#functions--reassign-params
@@ -244,6 +244,7 @@
     // 23.8 https://github.com/airbnb/javascript#naming--PascalCase-singleton
     // 23.9 https://github.com/airbnb/javascript#naming--Acronyms-and-Initialisms
   },
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"

.gitignore

@@ -9,3 +9,7 @@ node_modules
 *.log
 dist/
 yarn.lock
+
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -23,6 +23,7 @@
 - `npm start` - serve with hot reload at `localhost:1234`
 - `npm run build` - build bundled version in `dist` folder
 - `npm run lint` - lint code with ESLint using included config
+- `npm run e2e` - run e2e tests
 - `npm run format` - format code with Prettier
 - `npx hygen component new --name new-component --path relative/path/inside/of/src/app/folder` - generate folder with default component code files
 - `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

@@ -4,21 +4,29 @@ import './navbar.scss';
 const navbarComponent = {
   bindings: {},
   template: `
-		<md-toolbar class="navbar">
-			<div class="md-toolbar-tools">
-				<div flex layout="row" layout-align="start center">
-					<img class="ng-hotrod-logo" ng-src="{{ $ctrl.ngHotrodLogo }}" alt="GitHub">
-					<h2 class="active-page-name" md-truncate>{{ $ctrl.NavigationService.currentPageTitle }}</h2>
-				</div>
-				<a 
-					class="github-link" href="https://github.com/xlts-dev/angularjs-material-vite" 
-					layout="row" 
-					layout-align="center center">
-					<img ng-src="{{ $ctrl.githubLogo }}" alt="GitHub">
-					<div>GitHub</div>
-				</a>
-			</div>
-		</md-toolbar>
+	<md-toolbar class="navbar">
+	  <div class="md-toolbar-tools">
+		<div flex layout="row" layout-align="start center">
+	      <img
+            data-testid="ng-hotrod-logo"
+            class="ng-hotrod-logo"
+            ng-src="{{ $ctrl.ngHotrodLogo }}"
+            alt=""
+		  >
+	      <h2 data-testid="header" class="active-page-name" md-truncate>
+		    {{ $ctrl.NavigationService.currentPageTitle }}
+		  </h2>
+		</div>
+		<a
+		  data-testid="github"
+		  class="github-link" href="https://github.com/xlts-dev/angularjs-material-vite"
+		  layout="row"
+		  layout-align="center center">
+		    <img ng-src="{{ $ctrl.githubLogo }}" alt="GitHub">
+		    <div>GitHub</div>
+		</a>
+		</div>
+	</md-toolbar>
 	`,
   controller,
 };

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

@@ -5,14 +5,15 @@ const pageHomeComponent = {
   bindings: {},
   template: `
 		<md-content class="page-home">
-			<h2 class="md-display-1">Modern starter for AngularJS + Angular Material</h2>
+			<h2 data-testid="title" class="md-display-1">Modern starter for AngularJS + Angular Material</h2>
 			<img 
+			    data-testid="hero-image"
 				class="hero-img" 
 				src="https://res.cloudinary.com/fyodorio/image/upload/v1611994660/my-logos/hotrod-logo_rhkfxy.jpg" 
-				alt="ng-hotrod">
+				alt="Hand sketch of an old hot rod car with the AngularJS logo on the door">
 			<h3 class="md-title">FEATURING:</h3>
 			<div layout="column" layout-align="center center">
-				<ul class="md-headline" layout="column" layout-align="start start">
+				<ul data-testid="featuring" class="md-headline" layout="column" layout-align="start start">
 					<li><a href="https://angularjs.org/">AngularJS</a> (1.8.2)</li>
 					<li><a href="https://material.angularjs.org/latest/">Angular Material</a></li>
 					<li><a href="https://sass-lang.com/">Sass</a></li>

e2e/pages/home-page.js

@@ -0,0 +1,16 @@
+export class HomePage {
+  title;
+  heroImage;
+  featuring;
+
+  constructor(page) {
+    this.page = page;
+    this.title = page.getByTestId('title');
+    this.heroImage = page.getByTestId('hero-image');
+    this.featuring = page.getByTestId('featuring').getByRole('link');
+  }
+
+  async clickOnAngularMaterialLink() {
+    await this.page.getByRole('link', { name: 'Angular Material' }).click();
+  }
+}

e2e/pages/nav-bar-page.js

@@ -0,0 +1,14 @@
+export class NavBarPage {
+  logo;
+  header;
+
+  constructor(page) {
+    this.page = page;
+    this.logo = this.page.getByTestId('ng-hotrod-logo');
+    this.header = this.page.getByTestId('header');
+  }
+
+  async clickOnGitHubIcon() {
+    await this.page.getByTestId('github').click();
+  }
+}

e2e/tests/app.e2e.js

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test';
+import { HomePage } from '../pages/home-page';
+import { NavBarPage } from '../pages/nav-bar-page';
+
+test.describe('AngularJS-Material-Vite app', () => {
+  let errorLogs;
+
+  test.beforeEach(async ({ page }) => {
+    errorLogs = [];
+
+    page.on('console', message => {
+      if (message.type() === 'error') {
+        errorLogs.push(message.text());
+      }
+    });
+
+    page.on('pageerror', err => {
+      errorLogs.push(err.message);
+    });
+
+    await page.goto('');
+  });
+
+  test.afterEach(async () => {
+    expect(errorLogs).toStrictEqual([]);
+  });
+
+  test.describe('TopNav', () => {
+    test('Navbar', async ({ page }) => {
+      const navBarPage = new NavBarPage(page);
+
+      await expect(navBarPage.logo).toHaveAttribute('src', '/assets/img/icon-ng-hotrod-light.svg');
+      await expect(navBarPage.header).toHaveText('ng-hotrod');
+    });
+
+    test('Redirect to GitHub page', async ({ page }) => {
+      const navBarPage = new NavBarPage(page);
+
+      await navBarPage.clickOnGitHubIcon();
+
+      await expect(page.url()).toBe('https://github.com/xlts-dev/angularjs-material-vite');
+    });
+  });
+
+  test.describe('Home', () => {
+    test('HomePage content', async ({ page }) => {
+      const homePage = new HomePage(page);
+
+      await expect(homePage.title).toHaveText('Modern starter for AngularJS + Angular Material');
+      await expect(homePage.heroImage).toHaveAttribute(
+        'src',
+        'https://res.cloudinary.com/fyodorio/image/upload/v1611994660/my-logos/hotrod-logo_rhkfxy.jpg',
+      );
+      await expect(await homePage.featuring.all()).toHaveLength(8);
+    });
+
+    test('Redirect to Angular Material page', async ({ page }) => {
+      const homePage = new HomePage(page);
+
+      await homePage.clickOnAngularMaterialLink();
+
+      await expect(page.url()).toBe('https://material.angularjs.org/latest/');
+    });
+  });
+});