feat(test): add playwright configuration and e2e tests (#4)

Jarosław Żołnowski · Jaroslaw Zolnowski · commit 38c1e5aed2c7 · 2023-04-03T23:21:46.000+02:00
- add tests for index, test-component, and test-directive
- add prettier as dev-dependency, reorder imports, restructure gitignore
- add a separate section for idea and playwright files and folders
- fix ASP.NET error when running the app
- add npm-check to the devDeps
- fix lint issues
diff --git a/.gitignore b/.gitignore
@@ -35,10 +35,13 @@ bld/
 
 # Visual Studio 2015/2017 cache/options directory
 .vs/
-.idea
+
 # Uncomment if you have tasks that create the project's static files in wwwroot
 #wwwroot/
 
+# WebStorm cache/options directory
+.idea
+
 # Visual Studio 2017 auto generated files
 Generated\ Files/
 
@@ -121,6 +124,10 @@ ipch/
 
 # Visual Studio Trace Files
 *.e2e
+# Playwright e2e tests
+/test-results/
+/playwright-report/
+/playwright/.cache/
 
 # TFS 2012 Local Workspace
 $tf/
diff --git a/Views/Landing/Index.cshtml b/Views/Landing/Index.cshtml
@@ -19,7 +19,7 @@
   @Scripts.Render("~/bundles/scripts")
 </head>
 <body ng-app="app">
-  <h1>XLTS for AngularJS with .NET Framework</h1>
+  <h1 data-testid="title">XLTS for AngularJS with .NET Framework</h1>
   <test-directive></test-directive>
   <test-component></test-component>
 </body>
diff --git a/WebApp/Components/test.component.js b/WebApp/Components/test.component.js
@@ -1,7 +1,7 @@
 angular.module('app').component('testComponent', {
   controllerAs: 'vm',
   controller: TestComponent,
-  template: '<div class="test-component">AngularJS Version: {{vm.version}}</div>',
+  template: '<div data-testid="angularjs-version" class="test-component">AngularJS Version: {{vm.version}}</div>',
   bindings: {},
 });
 
diff --git a/WebApp/Directives/test.directive.html b/WebApp/Directives/test.directive.html
@@ -1 +1 @@
-<div class="test-directive">jQuery Version: {{ vm.version }}</div>
+<div data-testid="jquery-version" class="test-directive">jQuery Version: {{ vm.version }}</div>
diff --git a/angularjs-asp-net48-mvc5.csproj b/angularjs-asp-net48-mvc5.csproj
@@ -148,9 +148,9 @@
         <WebProjectProperties>
           <UseIIS>True</UseIIS>
           <AutoAssignPort>True</AutoAssignPort>
-          <DevelopmentServerPort>50582</DevelopmentServerPort>
+          <DevelopmentServerPort>0</DevelopmentServerPort>
           <DevelopmentServerVPath>/</DevelopmentServerVPath>
-          <IISUrl>http://localhost:50582/</IISUrl>
+          <IISUrl>http://localhost:51267/</IISUrl>
           <NTLMAuthentication>False</NTLMAuthentication>
           <UseCustomServer>False</UseCustomServer>
           <CustomServerUrl>
diff --git a/e2e/pages/index-page.js b/e2e/pages/index-page.js
@@ -0,0 +1,9 @@
+export class IndexPage {
+  page;
+  title;
+
+  constructor(page) {
+    this.page = page;
+    this.title = page.getByTestId('title');
+  }
+}
diff --git a/e2e/pages/test-component-page.js b/e2e/pages/test-component-page.js
@@ -0,0 +1,9 @@
+export class TestComponentPage {
+  page;
+  angularjsVersion;
+
+  constructor(page) {
+    this.page = page;
+    this.angularjsVersion = page.getByTestId('angularjs-version');
+  }
+}
diff --git a/e2e/pages/test-directive-page.js b/e2e/pages/test-directive-page.js
@@ -0,0 +1,9 @@
+export class TestDirectivePage {
+  page;
+  jqueryVersion;
+
+  constructor(page) {
+    this.page = page;
+    this.jqueryVersion = page.getByTestId('jquery-version');
+  }
+}
diff --git a/e2e/tests/app.e2e.js b/e2e/tests/app.e2e.js
@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+import { IndexPage } from '../pages/index-page';
+import { TestComponentPage } from '../pages/test-component-page';
+import { TestDirectivePage } from '../pages/test-directive-page';
+
+test.describe('angularjs-asp-net48-mvc5 app', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+
+  test('Index', async ({ page }) => {
+    const indexPage = new IndexPage(page);
+
+    await expect(indexPage.title).toHaveText('XLTS for AngularJS with .NET Framework');
+  });
+
+  test('TestComponent', async ({ page }) => {
+    const testComponentPage = new TestComponentPage(page);
+
+    await expect(testComponentPage.angularjsVersion).toHaveText('AngularJS Version: 1.8.2');
+  });
+
+  test('TestDirective', async ({ page }) => {
+    const testDirective = new TestDirectivePage(page);
+
+    await expect(testDirective.jqueryVersion).toHaveText('jQuery Version: 3.6.0');
+  });
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/playwright.config.js b/playwright.config.js

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<div class="test-directive">jQuery Version: {{ vm.version }}</div>`
	`1`	`+<div data-testid="jquery-version" class="test-directive">jQuery Version: {{ vm.version }}</div>`