From 0cd183d264a1d85592f630310cc8b92adaaf8d82 Mon Sep 17 00:00:00 2001 From: Justin McLellan Date: Sat, 24 Aug 2024 21:51:52 -0500 Subject: [PATCH] fixes and updates --- apps/angular-task-e2e/playwright.config.ts | 60 +++++------ apps/angular-task-e2e/src/example.spec.ts | 8 +- apps/angular-task/server.ts | 100 ++++++++++-------- .../src/app/app.component.spec.ts | 47 ++++---- .../angular-task/src/app/app.config.server.ts | 2 +- apps/angular-task/src/main.ts | 3 +- apps/angular-task/src/test-setup.ts | 8 +- .../data-access/src/lib/user/user.service.ts | 4 +- libs/user/ui/src/index.ts | 1 + libs/user/ui/src/lib/console-file.ts | 1 + libs/user/util/src/index.ts | 1 + libs/user/util/src/lib/console-file.ts | 1 + 12 files changed, 127 insertions(+), 109 deletions(-) create mode 100644 libs/user/ui/src/lib/console-file.ts create mode 100644 libs/user/util/src/lib/console-file.ts diff --git a/apps/angular-task-e2e/playwright.config.ts b/apps/angular-task-e2e/playwright.config.ts index abb4492..18f584e 100644 --- a/apps/angular-task-e2e/playwright.config.ts +++ b/apps/angular-task-e2e/playwright.config.ts @@ -16,38 +16,38 @@ const baseURL = process.env['BASE_URL'] || 'http://localhost:4200'; * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - ...nxE2EPreset(__filename, { testDir: './src' }), - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - baseURL, - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - /* Run your local dev server before starting the tests */ - webServer: { - command: 'npx nx serve angular-task', - url: 'http://localhost:4200', - reuseExistingServer: !process.env.CI, - cwd: workspaceRoot, - }, - projects: [ - { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + ...nxE2EPreset(__filename, { testDir: './src' }), + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + baseURL, + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', }, - - { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, + /* Run your local dev server before starting the tests */ + webServer: { + command: 'npx nx serve angular-task', + url: 'http://localhost:4200', + reuseExistingServer: !process.env.CI, + cwd: workspaceRoot, }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, - }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, - // Uncomment for mobile browsers support - /* { + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + // Uncomment for mobile browsers support + /* { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] }, }, @@ -56,7 +56,7 @@ export default defineConfig({ use: { ...devices['iPhone 12'] }, }, */ - // Uncomment for branded browsers + // Uncomment for branded browsers /* { name: 'Microsoft Edge', use: { ...devices['Desktop Edge'], channel: 'msedge' }, @@ -65,5 +65,5 @@ export default defineConfig({ name: 'Google Chrome', use: { ...devices['Desktop Chrome'], channel: 'chrome' }, } */ - ], + ], }); diff --git a/apps/angular-task-e2e/src/example.spec.ts b/apps/angular-task-e2e/src/example.spec.ts index fa8f1f3..b0b3a59 100644 --- a/apps/angular-task-e2e/src/example.spec.ts +++ b/apps/angular-task-e2e/src/example.spec.ts @@ -1,8 +1,10 @@ import { test, expect } from '@playwright/test'; test('has title', async ({ page }) => { - await page.goto('/'); - // Expect h1 to contain a substring. - expect(await page.locator('h1').innerText()).toContain('Welcome'); + await page.goto('/'); + + // Expect h1 to contain a substring. + expect(await page.locator('h1').innerText()).toContain('Welcome'); + }); diff --git a/apps/angular-task/server.ts b/apps/angular-task/server.ts index c60dd3a..fbf6863 100644 --- a/apps/angular-task/server.ts +++ b/apps/angular-task/server.ts @@ -6,55 +6,63 @@ import { dirname, join, resolve } from 'node:path'; import bootstrap from './src/main.server'; // The Express app is exported so that it can be used by serverless Functions. -export function app(): express.Express { - const server = express(); - const serverDistFolder = dirname(fileURLToPath(import.meta.url)); - const browserDistFolder = resolve(serverDistFolder, '../browser'); - const indexHtml = join(serverDistFolder, 'index.server.html'); - - const commonEngine = new CommonEngine(); - - server.set('view engine', 'html'); - server.set('views', browserDistFolder); - - // Example Express Rest API endpoints - // server.get('/api/**', (req, res) => { }); - // Serve static files from /browser - server.get( - '**', - express.static(browserDistFolder, { - maxAge: '1y', - index: 'index.html', - }) - ); - - // All regular routes use the Angular engine - server.get('**', (req, res, next) => { - const { protocol, originalUrl, baseUrl, headers } = req; - - commonEngine - .render({ - bootstrap, - documentFilePath: indexHtml, - url: `${protocol}://${headers.host}${originalUrl}`, - publicPath: browserDistFolder, - providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }], - }) - .then((html) => res.send(html)) - .catch((err) => next(err)); - }); - - return server; +export function app (): express.Express { + + const server = express(); + const serverDistFolder = dirname(fileURLToPath(import.meta.url)); + const browserDistFolder = resolve(serverDistFolder, '../browser'); + const indexHtml = join(serverDistFolder, 'index.server.html'); + + const commonEngine = new CommonEngine(); + + server.set('view engine', 'html'); + server.set('views', browserDistFolder); + + // Example Express Rest API endpoints + // server.get('/api/**', (req, res) => { }); + // Serve static files from /browser + server.get( + '**', + express.static(browserDistFolder, { + maxAge: '1y', + index: 'index.html', + }) + ); + + // All regular routes use the Angular engine + server.get('**', (req, res, next) => { + + const { protocol, originalUrl, baseUrl, headers } = req; + + commonEngine + .render({ + bootstrap, + documentFilePath: indexHtml, + url: `${protocol}://${headers.host}${originalUrl}`, + publicPath: browserDistFolder, + providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }], + }) + .then((html) => res.send(html)) + .catch((err) => next(err)); + + }); + + return server; + } -function run(): void { - const port = process.env['PORT'] || 4000; +function run (): void { + + const port = process.env['PORT'] || 4000; + + // Start up the Node server + const server = app(); + server.listen(port, () => { + + console.log(`Node Express server listening on http://localhost:${port}`); + + }); - // Start up the Node server - const server = app(); - server.listen(port, () => { - console.log(`Node Express server listening on http://localhost:${port}`); - }); } run(); diff --git a/apps/angular-task/src/app/app.component.spec.ts b/apps/angular-task/src/app/app.component.spec.ts index ad8c445..edfc89e 100644 --- a/apps/angular-task/src/app/app.component.spec.ts +++ b/apps/angular-task/src/app/app.component.spec.ts @@ -1,27 +1,32 @@ import { TestBed } from '@angular/core/testing'; import { AppComponent } from './app.component'; -import { NxWelcomeComponent } from './nx-welcome.component'; import { RouterModule } from '@angular/router'; describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])], - }).compileComponents(); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain( - 'Welcome angular-task' - ); - }); - - it(`should have as title 'angular-task'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('angular-task'); - }); + + beforeEach(async () => { + + await TestBed.configureTestingModule({ + imports: [AppComponent, RouterModule.forRoot([])], + }).compileComponents(); + + }); + + it('should render title', () => { + + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('User Management'); + + }); + + it(`should have as title 'angular-task'`, () => { + + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('angular-task'); + + }); + }); diff --git a/apps/angular-task/src/app/app.config.server.ts b/apps/angular-task/src/app/app.config.server.ts index 1980cfe..c69eac7 100644 --- a/apps/angular-task/src/app/app.config.server.ts +++ b/apps/angular-task/src/app/app.config.server.ts @@ -3,7 +3,7 @@ import { provideServerRendering } from '@angular/platform-server'; import { appConfig } from './app.config'; const serverConfig: ApplicationConfig = { - providers: [provideServerRendering()], + providers: [provideServerRendering()], }; export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/apps/angular-task/src/main.ts b/apps/angular-task/src/main.ts index 514c89a..784e470 100644 --- a/apps/angular-task/src/main.ts +++ b/apps/angular-task/src/main.ts @@ -3,5 +3,4 @@ import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent, appConfig).catch((err) => - console.error(err) -); + console.error(err)); diff --git a/apps/angular-task/src/test-setup.ts b/apps/angular-task/src/test-setup.ts index ab1eeeb..b3525ef 100644 --- a/apps/angular-task/src/test-setup.ts +++ b/apps/angular-task/src/test-setup.ts @@ -1,8 +1,8 @@ // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment globalThis.ngJest = { - testEnvironmentOptions: { - errorOnUnknownElements: true, - errorOnUnknownProperties: true, - }, + testEnvironmentOptions: { + errorOnUnknownElements: true, + errorOnUnknownProperties: true, + }, }; import 'jest-preset-angular/setup-jest'; diff --git a/libs/user/data-access/src/lib/user/user.service.ts b/libs/user/data-access/src/lib/user/user.service.ts index a8541c0..8ee9309 100644 --- a/libs/user/data-access/src/lib/user/user.service.ts +++ b/libs/user/data-access/src/lib/user/user.service.ts @@ -41,13 +41,13 @@ export class UserService { users = firstValueFrom(this.httpClient.get(this.baseUrl)); // GET https://jsonplaceholder.typicode.com/users/:id - user$ (id: number) { + getUser$ (id: number) { return this.httpClient.get(`${this.baseUrl}/${id}`); } - user (id: number) { + getUser (id: number) { return firstValueFrom(this.httpClient.get(`${this.baseUrl}/${id}`)); diff --git a/libs/user/ui/src/index.ts b/libs/user/ui/src/index.ts index e69de29..eb4ef3b 100644 --- a/libs/user/ui/src/index.ts +++ b/libs/user/ui/src/index.ts @@ -0,0 +1 @@ +export * from './lib/console-file'; diff --git a/libs/user/ui/src/lib/console-file.ts b/libs/user/ui/src/lib/console-file.ts new file mode 100644 index 0000000..935395a --- /dev/null +++ b/libs/user/ui/src/lib/console-file.ts @@ -0,0 +1 @@ +export const consoleFile = console.log('Use this library for ui components'); diff --git a/libs/user/util/src/index.ts b/libs/user/util/src/index.ts index e69de29..eb4ef3b 100644 --- a/libs/user/util/src/index.ts +++ b/libs/user/util/src/index.ts @@ -0,0 +1 @@ +export * from './lib/console-file'; diff --git a/libs/user/util/src/lib/console-file.ts b/libs/user/util/src/lib/console-file.ts new file mode 100644 index 0000000..e309b5c --- /dev/null +++ b/libs/user/util/src/lib/console-file.ts @@ -0,0 +1 @@ +export const consoleFile = console.log('Use this library for utility methods');