build: update deps

.github/workflows/build.yml

@@ -37,7 +37,7 @@ jobs:
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          path-to-lcov: './coverage/angular-auth-oidc-client/lcov.info'
+          path-to-lcov: './coverage/oidc-client-rx/lcov.info'
 
       - name: Coveralls Finished
         uses: coverallsapp/github-action@master
@@ -58,7 +58,7 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: angular_auth_oidc_client_artefact
-          path: dist/angular-auth-oidc-client
+          path: dist/oidc-client-rx
 
   AngularLatestVersion:
     needs: build_job
@@ -74,7 +74,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: angular_auth_oidc_client_artefact
-          path: angular-auth-oidc-client-artefact
+          path: oidc-client-rx-artefact
 
       - name: Install AngularCLI globally
         run: sudo npm install -g @angular/cli
@@ -83,21 +83,21 @@ jobs:
         run: ng version
 
       - name: Create Angular Project
-        run: sudo ng new angular-auth-oidc-client-test --skip-git
+        run: sudo ng new oidc-client-rx-test --skip-git
 
       - name: Npm Install & Install Library from local artefact
         run: |
-          sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
+          sudo cp -R oidc-client-rx-artefact oidc-client-rx-test/
-          cd angular-auth-oidc-client-test
+          cd oidc-client-rx-test
           sudo npm install --unsafe-perm=true
-          sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
+          sudo ng add ./oidc-client-rx-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
 
       - name: Test Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: npm test -- --watch=false --browsers=ChromeHeadless
 
       - name: Build Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: sudo npm run build
 
   AngularLatestVersionWithSchematics:
@@ -114,7 +114,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: angular_auth_oidc_client_artefact
-          path: angular-auth-oidc-client-artefact
+          path: oidc-client-rx-artefact
 
       - name: Install AngularCLI globally
         run: sudo npm install -g @angular/cli
@@ -123,21 +123,21 @@ jobs:
         run: ng version
 
       - name: Create Angular Project
-        run: sudo ng new angular-auth-oidc-client-test --skip-git
+        run: sudo ng new oidc-client-rx-test --skip-git
 
       - name: Npm Install & Install Library from local artefact
         run: |
-          sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
+          sudo cp -R oidc-client-rx-artefact oidc-client-rx-test/
-          cd angular-auth-oidc-client-test
+          cd oidc-client-rx-test
           sudo npm install --unsafe-perm=true
-          sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "Default config" --use-local-package=true --skip-confirmation
+          sudo ng add ./oidc-client-rx-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "Default config" --use-local-package=true --skip-confirmation
 
       - name: Test Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: npm test -- --watch=false --browsers=ChromeHeadless
 
       - name: Build Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: sudo npm run build
 
   AngularLatestVersionWithNgModuleSchematics:
@@ -154,7 +154,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: angular_auth_oidc_client_artefact
-          path: angular-auth-oidc-client-artefact
+          path: oidc-client-rx-artefact
 
       - name: Install AngularCLI globally
         run: sudo npm install -g @angular/cli
@@ -163,21 +163,21 @@ jobs:
         run: ng version
 
       - name: Create Angular Project
-        run: sudo ng new angular-auth-oidc-client-test --skip-git --standalone=false
+        run: sudo ng new oidc-client-rx-test --skip-git --standalone=false
 
       - name: Npm Install & Install Library from local artefact
         run: |
-          sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
+          sudo cp -R oidc-client-rx-artefact oidc-client-rx-test/
-          cd angular-auth-oidc-client-test
+          cd oidc-client-rx-test
           sudo npm install --unsafe-perm=true
-          sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
+          sudo ng add ./oidc-client-rx-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
 
       - name: Test Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: npm test -- --watch=false --browsers=ChromeHeadless
 
       - name: Build Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: sudo npm run build
 
   Angular16VersionWithRxJs6:
@@ -194,7 +194,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: angular_auth_oidc_client_artefact
-          path: angular-auth-oidc-client-artefact
+          path: oidc-client-rx-artefact
 
       - name: Install AngularCLI globally
         run: sudo npm install -g @angular/cli@16
@@ -203,25 +203,25 @@ jobs:
         run: ng version
 
       - name: Create Angular Project
-        run: sudo ng new angular-auth-oidc-client-test --skip-git
+        run: sudo ng new oidc-client-rx-test --skip-git
 
       - name: npm install RxJs 6
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: sudo npm install rxjs@6.5.3
 
       - name: Npm Install & Install Library from local artefact
         run: |
-          sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
+          sudo cp -R oidc-client-rx-artefact oidc-client-rx-test/
-          cd angular-auth-oidc-client-test
+          cd oidc-client-rx-test
           sudo npm install --unsafe-perm=true
-          sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
+          sudo ng add ./oidc-client-rx-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
 
       - name: Test Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: npm test -- --watch=false --browsers=ChromeHeadless
 
       - name: Build Angular Application
-        working-directory: ./angular-auth-oidc-client-test
+        working-directory: ./oidc-client-rx-test
         run: sudo npm run build
 
   LibWithAngularV16:
@@ -238,7 +238,7 @@ jobs:
           uses: actions/download-artifact@v3
           with:
             name: angular_auth_oidc_client_artefact
-            path: angular-auth-oidc-client-artefact
+            path: oidc-client-rx-artefact
 
         - name: Install AngularCLI globally
           run: sudo npm install -g @angular/cli@16
@@ -247,19 +247,19 @@ jobs:
           run: ng version
 
         - name: Create Angular Project
-          run: sudo ng new angular-auth-oidc-client-test --skip-git
+          run: sudo ng new oidc-client-rx-test --skip-git
 
         - name: Npm Install & Install Library from local artefact
           run: |
-            sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
+            sudo cp -R oidc-client-rx-artefact oidc-client-rx-test/
-            cd angular-auth-oidc-client-test
+            cd oidc-client-rx-test
             sudo npm install --unsafe-perm=true
-            sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
+            sudo ng add ./oidc-client-rx-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
 
         - name: Test Angular Application
-          working-directory: ./angular-auth-oidc-client-test
+          working-directory: ./oidc-client-rx-test
           run: npm test -- --watch=false --browsers=ChromeHeadless
 
         - name: Build Angular Application
-          working-directory: ./angular-auth-oidc-client-test
+          working-directory: ./oidc-client-rx-test
           run: sudo npm run build

.github/workflows/deploy-docs.yml

@@ -29,11 +29,11 @@ jobs:
 
       - name: Installing Dependencies for docs - in docs folder
         run: sudo npm install
-        working-directory: docs/site/angular-auth-oidc-client
+        working-directory: docs/site/oidc-client-rx
 
       - name: Building Documentation
         run: sudo npm run build
-        working-directory: docs/site/angular-auth-oidc-client
+        working-directory: docs/site/oidc-client-rx
 
       - name: Build And Deploy
         if: ${{ github.actor == 'damienbod' || github.actor == 'FabianGosebrink' }}
@@ -44,7 +44,7 @@ jobs:
           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
           action: 'upload'
           ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
-          app_location: '/docs/site/angular-auth-oidc-client' # App source code path
+          app_location: '/docs/site/oidc-client-rx' # App source code path
           app_artifact_location: 'build' # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
 

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -51,3 +51,7 @@ debug.log
 
 /.husky
 /.nx
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -1,9 +1,9 @@
 # Angular Lib for OpenID Connect & OAuth2
 
-![Build Status](https://github.com/damienbod/angular-auth-oidc-client/actions/workflows/build.yml/badge.svg?branch=main) [![npm](https://img.shields.io/npm/v/angular-auth-oidc-client.svg)](https://www.npmjs.com/package/angular-auth-oidc-client) [![npm](https://img.shields.io/npm/dm/angular-auth-oidc-client.svg)](https://www.npmjs.com/package/angular-auth-oidc-client) [![npm](https://img.shields.io/npm/l/angular-auth-oidc-client.svg)](https://www.npmjs.com/package/angular-auth-oidc-client) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Coverage Status](https://coveralls.io/repos/github/damienbod/angular-auth-oidc-client/badge.svg?branch=main)](https://coveralls.io/github/damienbod/angular-auth-oidc-client?branch=main)
+![Build Status](https://github.com/damienbod/oidc-client-rx/actions/workflows/build.yml/badge.svg?branch=main) [![npm](https://img.shields.io/npm/v/oidc-client-rx.svg)](https://www.npmjs.com/package/oidc-client-rx) [![npm](https://img.shields.io/npm/dm/oidc-client-rx.svg)](https://www.npmjs.com/package/oidc-client-rx) [![npm](https://img.shields.io/npm/l/oidc-client-rx.svg)](https://www.npmjs.com/package/oidc-client-rx) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Coverage Status](https://coveralls.io/repos/github/damienbod/oidc-client-rx/badge.svg?branch=main)](https://coveralls.io/github/damienbod/oidc-client-rx?branch=main)
 
 <p align="center">
-  <a href="https://angular-auth-oidc-client.com/"><img src="https://raw.githubusercontent.com/damienbod/angular-auth-oidc-client/main/.github/angular-auth-logo.png" alt="" width="350" /></a>
+  <a href="https://oidc-client-rx.com/"><img src="https://raw.githubusercontent.com/damienbod/oidc-client-rx/main/.github/angular-auth-logo.png" alt="" width="350" /></a>
 </p>
 
 Secure your Angular app using the latest standards for OpenID Connect & OAuth2. Provides support for token refresh, all modern OIDC Identity Providers and more.
@@ -18,7 +18,7 @@ This library is <a href="http://openid.net/certification/#RPs">certified</a> by
 
 ## Features
 
-- [Code samples](https://angular-auth-oidc-client.com/docs/samples/) for most of the common use cases
+- [Code samples](https://oidc-client-rx.com/docs/samples/) for most of the common use cases
 - Supports schematics via `ng add` support
 - Supports all modern OIDC identity providers
 - Supports OpenID Connect Code Flow with PKCE
@@ -42,38 +42,38 @@ This library is <a href="http://openid.net/certification/#RPs">certified</a> by
 You can use the schematics and `ng add` the library.
 
 ```shell
-ng add angular-auth-oidc-client
+ng add oidc-client-rx
 ```
 
 And answer the questions. A module will be created which encapsulates your configuration.
 
-![angular-auth-oidc-client schematics](https://raw.githubusercontent.com/damienbod/angular-auth-oidc-client/main/.github/angular-auth-oidc-client-schematics-720.gif)
+![oidc-client-rx schematics](https://raw.githubusercontent.com/damienbod/oidc-client-rx/main/.github/oidc-client-rx-schematics-720.gif)
 
 ### Npm / Yarn
 
 Navigate to the level of your `package.json` and type
 
 ```shell
- npm install angular-auth-oidc-client
+ npm install oidc-client-rx
 ```
 
 or with yarn
 
 ```shell
- yarn add angular-auth-oidc-client
+ yarn add oidc-client-rx
 ```
 
 ## Documentation
 
-[Read the docs here](https://angular-auth-oidc-client.com/)
+[Read the docs here](https://oidc-client-rx.com/)
 
 ## Samples
 
-[Explore the Samples here](https://angular-auth-oidc-client.com/docs/samples/)
+[Explore the Samples here](https://oidc-client-rx.com/docs/samples/)
 
 ## Quickstart
 
-For the example of the Code Flow. For further examples please check the [Samples](https://angular-auth-oidc-client.com/docs/samples/) Section.
+For the example of the Code Flow. For further examples please check the [Samples](https://oidc-client-rx.com/docs/samples/) Section.
 
 > If you have done the installation with the schematics, these modules and files should be available already!
 
@@ -83,7 +83,7 @@ Import the `AuthModule` in your module.
 
 ```ts
 import { NgModule } from '@angular/core';
-import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
+import { AuthModule, LogLevel } from 'oidc-client-rx';
 // ...
 
 @NgModule({
@@ -113,7 +113,7 @@ And call the method `checkAuth()` from your `app.component.ts`. The method `chec
 
 ```ts
 import { Component, OnInit, inject } from '@angular/core';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { OidcSecurityService } from 'oidc-client-rx';
 
 @Component({
   /*...*/
@@ -187,15 +187,15 @@ AuthModule.forRoot({
 
 Current Version is Version 19.x
 
-- [Info about Version 18](https://github.com/damienbod/angular-auth-oidc-client/tree/version-18)
+- [Info about Version 18](https://github.com/damienbod/oidc-client-rx/tree/version-18)
-- [Info about Version 17](https://github.com/damienbod/angular-auth-oidc-client/tree/version-17)
+- [Info about Version 17](https://github.com/damienbod/oidc-client-rx/tree/version-17)
-- [Info about Version 16](https://github.com/damienbod/angular-auth-oidc-client/tree/version-16)
+- [Info about Version 16](https://github.com/damienbod/oidc-client-rx/tree/version-16)
-- [Info about Version 15](https://github.com/damienbod/angular-auth-oidc-client/tree/version-15)
+- [Info about Version 15](https://github.com/damienbod/oidc-client-rx/tree/version-15)
-- [Info about Version 14](https://github.com/damienbod/angular-auth-oidc-client/tree/version-14)
+- [Info about Version 14](https://github.com/damienbod/oidc-client-rx/tree/version-14)
-- [Info about Version 13](https://github.com/damienbod/angular-auth-oidc-client/tree/version-13)
+- [Info about Version 13](https://github.com/damienbod/oidc-client-rx/tree/version-13)
-- [Info about Version 12](https://github.com/damienbod/angular-auth-oidc-client/tree/version-12)
+- [Info about Version 12](https://github.com/damienbod/oidc-client-rx/tree/version-12)
-- [Info about Version 11](https://github.com/damienbod/angular-auth-oidc-client/tree/version-11)
+- [Info about Version 11](https://github.com/damienbod/oidc-client-rx/tree/version-11)
-- [Info about Version 10](https://github.com/damienbod/angular-auth-oidc-client/tree/version-10)
+- [Info about Version 10](https://github.com/damienbod/oidc-client-rx/tree/version-10)
 
 ## License
 

karma.conf.js

@@ -27,7 +27,7 @@ module.exports = function (config) {
     coverageReporter: {
       dir: require('path').join(
         __dirname,
-        '../../coverage/angular-auth-oidc-client'
+        '../../coverage/oidc-client-rx'
       ),
       subdir: '.',
       reporters: [{ type: 'html' }, { type: 'text-summary' }, { type: 'lcov' }],

package.json

@@ -28,40 +28,30 @@
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
-    "test-lib": "ng test angular-auth-oidc-client --code-coverage",
+    "test": "vitest --code-coverage",
-    "test-lib-ci": "ng test angular-auth-oidc-client --watch=false --browsers=ChromeHeadlessNoSandbox --code-coverage",
+    "test-ci": "vitest --watch=false --browsers=ChromeHeadlessNoSandbox --code-coverage",
-    "lint-lib": "ng lint angular-auth-oidc-client",
+    "pack": "npm run build && npm pack ./dist",
-    "pack-lib": "npm run build-lib-prod && npm pack ./dist/angular-auth-oidc-client",
+    "publish": "npm run build && npm publish ./dist",
-    "publish-lib": "npm run build-lib-prod && npm publish ./dist/angular-auth-oidc-client",
+    "coverage": "vitest run --coverage",
-    "publish-lib-next": "npm run build-lib && npm publish --tag next ./dist/angular-auth-oidc-client",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "lint": "ultracite lint",
     "format": "ultracite format"
   },
   "dependencies": {
     "@ngify/http": "^2.0.4",
     "injection-js": "git+https://github.com/mgechev/injection-js.git#81a10e0",
-    "rxjs": ">=7.4.0",
+    "rxjs": ">=7.4.0"
-    "shelljs": "^0.8.5",
-    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@evilmartians/lefthook": "^1.0.3",
+    "@playwright/test": "^1.49.1",
     "@rslib/core": "^0.3.1",
     "@types/jasmine": "^4.0.0",
     "@types/node": "^22.10.1",
-    "copyfiles": "^2.4.1",
+    "@vitest/coverage-v8": "^3.0.1",
-    "coveralls": "^3.1.0",
-    "fs-extra": "^10.0.0",
-    "jasmine-core": "^4.0.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
     "rfc4648": "^1.5.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "ultracite": "^4.1.15",
+    "vitest": "^3.0.1"
   },
   "keywords": [
     "rxjs",

playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/auto-login/auto-login-all-routes.guard.spec.ts

@@ -1,402 +0,0 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import {
-  ActivatedRouteSnapshot,
-  Router,
-  RouterStateSnapshot,
-} from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Observable, of } from 'rxjs';
-import { mockProvider } from '../../test/auto-mock';
-import { CheckAuthService } from '../auth-state/check-auth.service';
-import { ConfigurationService } from '../config/config.service';
-import { LoginResponse } from '../login/login-response';
-import { LoginService } from '../login/login.service';
-import { StoragePersistenceService } from '../storage/storage-persistence.service';
-import { AutoLoginAllRoutesGuard } from './auto-login-all-routes.guard';
-import { AutoLoginService } from './auto-login.service';
-
-describe(`AutoLoginAllRoutesGuard`, () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      providers: [
-        AutoLoginService,
-        mockProvider(CheckAuthService),
-        mockProvider(LoginService),
-        mockProvider(StoragePersistenceService),
-        mockProvider(ConfigurationService),
-      ],
-    });
-  });
-
-  describe('Class based', () => {
-    let guard: AutoLoginAllRoutesGuard;
-    let checkAuthService: CheckAuthService;
-    let loginService: LoginService;
-    let storagePersistenceService: StoragePersistenceService;
-    let configurationService: ConfigurationService;
-    let autoLoginService: AutoLoginService;
-    let router: Router;
-
-    beforeEach(() => {
-      checkAuthService = TestBed.inject(CheckAuthService);
-      loginService = TestBed.inject(LoginService);
-      storagePersistenceService = TestBed.inject(StoragePersistenceService);
-      configurationService = TestBed.inject(ConfigurationService);
-
-      spyOn(configurationService, 'getOpenIDConfiguration').and.returnValue(
-        of({ configId: 'configId1' })
-      );
-
-      guard = TestBed.inject(AutoLoginAllRoutesGuard);
-      autoLoginService = TestBed.inject(AutoLoginService);
-      router = TestBed.inject(Router);
-    });
-
-    afterEach(() => {
-      storagePersistenceService.clear({});
-    });
-
-    it('should create', () => {
-      expect(guard).toBeTruthy();
-    });
-
-    describe('canActivate', () => {
-      it('should save current route and call `login` if not authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: false } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-
-        const canActivate$ = guard.canActivate(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivate$.subscribe(() => {
-          expect(saveRedirectRouteSpy).toHaveBeenCalledOnceWith(
-            { configId: 'configId1' },
-            'some-url1'
-          );
-          expect(loginSpy).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-          expect(checkSavedRedirectRouteAndNavigateSpy).not.toHaveBeenCalled();
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canActivate$ = guard.canActivate(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivate$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({
-            configId: 'configId1',
-          });
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canActivate$ = guard.canActivate(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivate$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-        });
-      }));
-    });
-
-    describe('canActivateChild', () => {
-      it('should save current route and call `login` if not authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: false } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canActivateChild$ = guard.canActivateChild(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivateChild$.subscribe(() => {
-          expect(saveRedirectRouteSpy).toHaveBeenCalledOnceWith(
-            { configId: 'configId1' },
-            'some-url1'
-          );
-          expect(loginSpy).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-          expect(checkSavedRedirectRouteAndNavigateSpy).not.toHaveBeenCalled();
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canActivateChild$ = guard.canActivateChild(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivateChild$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({
-            configId: 'configId1',
-          });
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canActivateChild$ = guard.canActivateChild(
-          {} as ActivatedRouteSnapshot,
-          {
-            url: 'some-url1',
-          } as RouterStateSnapshot
-        ) as Observable<boolean>;
-
-        canActivateChild$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-        });
-      }));
-    });
-
-    describe('canLoad', () => {
-      it('should save current route (empty) and call `login` if not authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: false } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canLoad$ = guard.canLoad();
-
-        canLoad$.subscribe(() => {
-          expect(saveRedirectRouteSpy).toHaveBeenCalledOnceWith(
-            { configId: 'configId1' },
-            ''
-          );
-          expect(loginSpy).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-          expect(checkSavedRedirectRouteAndNavigateSpy).not.toHaveBeenCalled();
-        });
-      }));
-
-      it('should save current route (with router extractedUrl) and call `login` if not authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: false } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const _routerSpy = spyOn(
-          router,
-          'getCurrentNavigation'
-        ).and.returnValue({
-          extractedUrl: router.parseUrl(
-            'some-url12/with/some-param?queryParam=true'
-          ),
-          extras: {},
-          id: 1,
-          initialUrl: router.parseUrl(''),
-          previousNavigation: null,
-          trigger: 'imperative',
-        });
-        const canLoad$ = guard.canLoad();
-
-        canLoad$.subscribe(() => {
-          expect(saveRedirectRouteSpy).toHaveBeenCalledOnceWith(
-            { configId: 'configId1' },
-            'some-url12/with/some-param?queryParam=true'
-          );
-          expect(loginSpy).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-          expect(checkSavedRedirectRouteAndNavigateSpy).not.toHaveBeenCalled();
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canLoad$ = guard.canLoad() as Observable<boolean>;
-
-        canLoad$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({
-            configId: 'configId1',
-          });
-        });
-      }));
-
-      it('should save current route (with router extractedUrl) and call `login` if not authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: false } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const _routerSpy = spyOn(
-          router,
-          'getCurrentNavigation'
-        ).and.returnValue({
-          extractedUrl: router.parseUrl(
-            'some-url12/with/some-param?queryParam=true'
-          ),
-          extras: {},
-          id: 1,
-          initialUrl: router.parseUrl(''),
-          previousNavigation: null,
-          trigger: 'imperative',
-        });
-        const canLoad$ = guard.canLoad();
-
-        canLoad$.subscribe(() => {
-          expect(saveRedirectRouteSpy).toHaveBeenCalledOnceWith(
-            { configId: 'configId1' },
-            'some-url12/with/some-param?queryParam=true'
-          );
-          expect(loginSpy).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-          expect(checkSavedRedirectRouteAndNavigateSpy).not.toHaveBeenCalled();
-        });
-      }));
-
-      it('should call `checkSavedRedirectRouteAndNavigate` if authenticated already', waitForAsync(() => {
-        spyOn(checkAuthService, 'checkAuth').and.returnValue(
-          of({ isAuthenticated: true } as LoginResponse)
-        );
-        const checkSavedRedirectRouteAndNavigateSpy = spyOn(
-          autoLoginService,
-          'checkSavedRedirectRouteAndNavigate'
-        );
-        const saveRedirectRouteSpy = spyOn(
-          autoLoginService,
-          'saveRedirectRoute'
-        );
-        const loginSpy = spyOn(loginService, 'login');
-        const canLoad$ = guard.canLoad() as Observable<boolean>;
-
-        canLoad$.subscribe(() => {
-          expect(saveRedirectRouteSpy).not.toHaveBeenCalled();
-          expect(loginSpy).not.toHaveBeenCalled();
-          expect(
-            checkSavedRedirectRouteAndNavigateSpy
-          ).toHaveBeenCalledOnceWith({ configId: 'configId1' });
-        });
-      }));
-    });
-  });
-});

src/auto-login/auto-login-all-routes.guard.ts

@@ -1,101 +0,0 @@
-import { inject, Injectable } from 'injection-js';
-import {
-  ActivatedRouteSnapshot,
-  Router,
-  RouterStateSnapshot,
-  UrlTree,
-} from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, switchMap, take } from 'rxjs/operators';
-import { CheckAuthService } from '../auth-state/check-auth.service';
-import { ConfigurationService } from '../config/config.service';
-import { LoginService } from '../login/login.service';
-import { AutoLoginService } from './auto-login.service';
-
-/**
- * @deprecated Please do not use the `AutoLoginAllRoutesGuard` anymore as it is not recommended anymore, deprecated and will be removed in future versions of this library. More information [Why is AutoLoginAllRoutesGuard not recommended?](https://github.com/damienbod/angular-auth-oidc-client/issues/1549)
- */
-@Injectable()
-export class AutoLoginAllRoutesGuard {
-  private readonly autoLoginService = inject(AutoLoginService);
-
-  private readonly checkAuthService = inject(CheckAuthService);
-
-  private readonly loginService = inject(LoginService);
-
-  private readonly configurationService = inject(ConfigurationService);
-
-  private readonly router = inject(Router);
-
-  canLoad(): Observable<boolean> {
-    const url =
-      this.router
-        .getCurrentNavigation()
-        ?.extractedUrl.toString()
-        .substring(1) ?? '';
-
-    return checkAuth(
-      url,
-      this.configurationService,
-      this.checkAuthService,
-      this.autoLoginService,
-      this.loginService
-    );
-  }
-
-  canActivate(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ): Observable<boolean | UrlTree> {
-    return checkAuth(
-      state.url,
-      this.configurationService,
-      this.checkAuthService,
-      this.autoLoginService,
-      this.loginService
-    );
-  }
-
-  canActivateChild(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ): Observable<boolean | UrlTree> {
-    return checkAuth(
-      state.url,
-      this.configurationService,
-      this.checkAuthService,
-      this.autoLoginService,
-      this.loginService
-    );
-  }
-}
-
-function checkAuth(
-  url: string,
-  configurationService: ConfigurationService,
-  checkAuthService: CheckAuthService,
-  autoLoginService: AutoLoginService,
-  loginService: LoginService
-): Observable<boolean> {
-  return configurationService.getOpenIDConfiguration().pipe(
-    switchMap((config) => {
-      const allConfigs = configurationService.getAllConfigurations();
-
-      return checkAuthService.checkAuth(config, allConfigs).pipe(
-        take(1),
-        map(({ isAuthenticated }) => {
-          if (isAuthenticated) {
-            autoLoginService.checkSavedRedirectRouteAndNavigate(config);
-          }
-
-          if (!isAuthenticated) {
-            autoLoginService.saveRedirectRoute(config, url);
-            loginService.login(config);
-          }
-
-          return isAuthenticated;
-        })
-      );
-    })
-  );
-}

src/config/config.service.spec.ts

@@ -124,7 +124,7 @@ describe('Configuration Service', () => {
 
       configService.getOpenIDConfiguration('configId1').subscribe((config) => {
         expect(config).toBeNull();
-        expect(consoleSpy).toHaveBeenCalledOnceWith(`[angular-auth-oidc-client] No configuration found for config id 'configId1'.`)
+        expect(consoleSpy).toHaveBeenCalledOnceWith(`[oidc-client-rx] No configuration found for config id 'configId1'.`)
       });
     }));
 

src/config/config.service.ts

@@ -88,7 +88,7 @@ export class ConfigurationService {
       const config = this.configsInternal[configId!];
 
       if(!config && isDevMode()) {
-        console.warn(`[angular-auth-oidc-client] No configuration found for config id '${configId}'.`);
+        console.warn(`[oidc-client-rx] No configuration found for config id '${configId}'.`);
       }
 
       return config || null;

src/public-api.ts

@@ -1,5 +1,5 @@
 /*
- * Public API Surface of angular-auth-oidc-client
+ * Public API Surface of oidc-client-rx
  */
 
 export * from '.';

tests-examples/demo-todo-app.spec.ts

@@ -0,0 +1,437 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+  'buy some cheese',
+  'feed the cat',
+  'book a doctors appointment'
+] as const;
+
+test.describe('New Todo', () => {
+  test('should allow me to add todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create 1st todo.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Make sure the list only has one todo item.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0]
+    ]);
+
+    // Create 2nd todo.
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+
+    // Make sure the list now has two todo items.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1]
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test('should clear text input field when an item is added', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create one todo item.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Check that input is empty.
+    await expect(newTodo).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test('should append new items to the bottom of the list', async ({ page }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+  
+    // Check test using different methods.
+    await expect(page.getByText('3 items left')).toBeVisible();
+    await expect(todoCount).toHaveText('3 items left');
+    await expect(todoCount).toContainText('3');
+    await expect(todoCount).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+});
+
+test.describe('Mark all as completed', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to mark all items as completed', async ({ page }) => {
+    // Complete all todos.
+    await page.getByLabel('Mark all as complete').check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to clear the complete state of all items', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    // Check and then immediately uncheck.
+    await toggleAll.check();
+    await toggleAll.uncheck();
+
+    // Should be no completed classes.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
+  });
+
+  test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe('Item', () => {
+
+  test('should allow me to mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    // Check first item.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').check();
+    await expect(firstTodo).toHaveClass('completed');
+
+    // Check second item.
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    await expect(secondTodo).not.toHaveClass('completed');
+    await secondTodo.getByRole('checkbox').check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).toHaveClass('completed');
+  });
+
+  test('should allow me to un-mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    const firstTodoCheckbox = firstTodo.getByRole('checkbox');
+
+    await firstTodoCheckbox.check();
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodoCheckbox.uncheck();
+    await expect(firstTodo).not.toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test('should allow me to edit an item', async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.getByTestId('todo-item');
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]);
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2]
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+});
+
+test.describe('Editing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should hide other controls when editing', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item').nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+    await expect(todoItem.locator('label', {
+      hasText: TODO_ITEMS[1],
+    })).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should save edits on blur', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should trim entered text', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('    buy some sausages    ');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should remove the item if an empty text string was entered', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[2],
+    ]);
+  });
+
+  test('should cancel edits on escape', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape');
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe('Counter', () => {
+  test('should display the current number of todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+    
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    await expect(todoCount).toContainText('1');
+
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+    await expect(todoCount).toContainText('2');
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe('Clear completed button', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test('should display the correct text', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
+  });
+
+  test('should remove completed items when clicked', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).getByRole('checkbox').check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should be hidden when there are no items that are completed', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
+  });
+});
+
+test.describe('Persistence', () => {
+  test('should persist its data', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const todoItems = page.getByTestId('todo-item');
+    const firstTodoCheck = todoItems.nth(0).getByRole('checkbox');
+    await firstTodoCheck.check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+
+    // Ensure there is 1 completed item.
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+  });
+});
+
+test.describe('Routing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test('should allow me to display active items', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item');
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await expect(todoItem).toHaveCount(2);
+    await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should respect the back button', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item'); 
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step('Showing all items', async () => {
+      await page.getByRole('link', { name: 'All' }).click();
+      await expect(todoItem).toHaveCount(3);
+    });
+
+    await test.step('Showing active items', async () => {
+      await page.getByRole('link', { name: 'Active' }).click();
+    });
+
+    await test.step('Showing completed items', async () => {
+      await page.getByRole('link', { name: 'Completed' }).click();
+    });
+
+    await expect(todoItem).toHaveCount(1);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(2);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(3);
+  });
+
+  test('should allow me to display completed items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(1);
+  });
+
+  test('should allow me to display all items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await page.getByRole('link', { name: 'All' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(3);
+  });
+
+  test('should highlight the currently applied filter', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');
+    
+    //create locators for active and completed links
+    const activeLink = page.getByRole('link', { name: 'Active' });
+    const completedLink = page.getByRole('link', { name: 'Completed' });
+    await activeLink.click();
+
+    // Page change - active items.
+    await expect(activeLink).toHaveClass('selected');
+    await completedLink.click();
+
+    // Page change - completed items.
+    await expect(completedLink).toHaveClass('selected');
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder('What needs to be done?');
+
+  for (const item of TODO_ITEMS) {
+    await newTodo.fill(item);
+    await newTodo.press('Enter');
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction(t => {
+    return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+  }, title);
+}

tests/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});