fix: update "advanced-js" CLI template to match the TS version

Author: stefanjudis

examples/advanced-project-js/README.md

@@ -8,7 +8,7 @@ https://checklyhq.com website as a monitoring target.
 3. Test -> Deploy: now you have your app monitored around the clock. All from your code base.
 
 ```
-npm create checkly@latest -- --template advanced-project
+npm create checkly@latest -- --template advanced-project-js
 ```
 
 ## Project Structure
@@ -17,15 +17,15 @@ This project has examples of all Checkly check types and showcases some advanced
 
 - Running `npx checkly test` will look for `.check.js` files and `.spec.js` in `__checks__` directories and execute them in a dry run.
 
-- Running `npx checkly deploy` will deploy your checks to Checkly, attach alert channels, and run them on a 10m schedule in the 
+- Running `npx checkly deploy` will deploy your checks to Checkly, attach alert channels, and run them on a 10m schedule in the
 region `us-east-1` and `eu-west-1`
 
 - An example GitHub Actions workflow is in the `.github/workflow.yml` file. It triggers all the checks in the project and deploys
 them if they pass.
 
 ## CLI Commands
 
-Run the core CLI commands with `npx checkly <command>` 
+Run the core CLI commands with `npx checkly <command>`
 
 | Command              | Action                                           |
 |:---------------------|:-------------------------------------------------|
@@ -47,5 +47,5 @@ npm install --save-dev @playwright/[email protected]
 
 ## Questions?
 
-Check [our CLI docs](https://www.checklyhq.com/docs/cli/), the [main Checkly docs](https://checklyhq.com/docs) or 
+Check [our CLI docs](https://www.checklyhq.com/docs/cli/), the [main Checkly docs](https://checklyhq.com/docs) or
 join our [Slack community](https://checklyhq.com/slack).

examples/advanced-project-js/checkly.config.js

@@ -1,5 +1,5 @@
-const { defineConfig } = require('checkly');
-const { RetryStrategyBuilder } = require('checkly/constructs');
+const { defineConfig } = require('checkly')
+const { AlertEscalationBuilder, RetryStrategyBuilder } = require('checkly/constructs')
 
 /**
  * See https://www.checklyhq.com/docs/cli/project-structure/
@@ -27,6 +27,8 @@ const config = defineConfig({
     runtimeId: '2025.04',
     /* Failed check runs will be retried before triggering alerts */
     retryStrategy: RetryStrategyBuilder.fixedStrategy({ baseBackoffSeconds: 60, maxRetries: 4, sameRegion: true }),
+    /* All checks will have this alert escalation policy defined */
+    alertEscalationPolicy: AlertEscalationBuilder.runBasedEscalation(1),
     /* A glob pattern that matches the Checks inside your repo, see https://www.checklyhq.com/docs/cli/using-check-test-match/ */
     checkMatch: '**/__checks__/**/*.check.js',
     /* Global configuration option for Playwright-powered checks. See https://www.checklyhq.com/docs/browser-checks/playwright-test/#global-configuration */
@@ -38,10 +40,10 @@ const config = defineConfig({
       }
     },
     browserChecks: {
-      /* A glob pattern matches any Playwright .spec.js files and automagically creates a Browser Check. This way, you
-       * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
-       * */
-      testMatch: '**/__checks__/**/*.spec.js',
+      /* A glob pattern matches any Playwright .spec.ts files and automagically creates a Browser Check. This way, you
+      * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
+      * */
+      testMatch: '**/__checks__/**/*.spec.ts',
     },
   },
   cli: {
@@ -52,6 +54,6 @@ const config = defineConfig({
     /* How many times to retry a failing test run when running `npx checkly test` or `npx checkly trigger` (max. 3) */
     retries: 0,
   },
-});
+})
 
-module.exports = config;
+module.exports = config

examples/advanced-project-js/src/__checks__/api.check.js

@@ -0,0 +1,30 @@
+const { join } = require('path')
+const { ApiCheck, AssertionBuilder } = require('checkly/constructs')
+const { syntheticGroup } = require('../utils/website-groups.check')
+
+// API checks send an HTTP request to a URL endpoint and validate the response. Read more at:
+// https://www.checklyhq.com/docs/api-checks/
+
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
+  degradedResponseTime: 10000, // milliseconds
+  maxResponseTime: 20000,
+  setupScript: {
+    // API checks can run arbitrary JS/TS code before or after a check.
+    entrypoint: join(__dirname, '../utils/setup.js')
+  },
+  group: syntheticGroup,
+  request: {
+    url: 'https://danube-web.shop/api/books',
+    method: 'GET',
+    followRedirects: true,
+    skipSSL: false,
+    assertions: [
+      AssertionBuilder.statusCode().equals(200),
+      AssertionBuilder.headers('content-type').equals('application/json; charset=utf-8'),
+      AssertionBuilder.jsonBody('$[0].id').isNotNull(),
+      AssertionBuilder.jsonBody('$[0].author').equals('Fric Eromm'),
+    ],
+  },
+  runParallel: true,
+})

examples/advanced-project-js/src/__checks__/home.check.js

@@ -0,0 +1,25 @@
+const { join } = require('path')
+const { BrowserCheck } = require('checkly/constructs')
+const { syntheticGroup } = require('../utils/website-groups.check')
+
+// Configures two checks for our homepage in a single configuration file.
+// Most settings for these checks are defined in the check group,
+// in /utils/website-groups.check.ts
+
+new BrowserCheck('browse-and-search-check', {
+  name: 'Browse and Search',
+  group: syntheticGroup,
+  code: {
+    entrypoint: join(__dirname, '03-browse-and-search.spec.js')
+  },
+  runParallel: true,
+})
+
+new BrowserCheck('login-browser-check', {
+  name: 'Login',
+  group: syntheticGroup,
+  code: {
+    entrypoint: join(__dirname, '04-login.spec.js')
+  },
+  runParallel: true,
+})

examples/advanced-project-js/src/__checks__/homepage.spec.js

@@ -0,0 +1,18 @@
+const { test, expect } = require('@playwright/test')
+
+// Source code for a browser check using Playwright Test. Find more Playwright information at
+// https://www.checklyhq.com/learn/playwright/
+
+// This environment variable is set in the group configuration in /utils/website-groups.check.ts
+const searchString = process.env.authorName || 'Herman Moulson'
+
+test('webshop homepage', async ({ page }) => {
+  await page.goto('http://danube-web.shop/');
+  await expect(page.getByRole('heading', { name: 'SPECIAL OFFER: 20% OFF BOOKS' })).toBeVisible();
+  await page.locator('a').filter({ hasText: 'Fantasy' }).click();
+  await expect(page.getByText('The Pickled Lynx')).toBeVisible();
+  await page.getByRole('textbox').click();
+  await page.getByRole('textbox').fill(searchString);
+  await page.getByRole('button', { name: 'Search' }).click();
+  await expect(page.getByText('Haben oder haben')).toBeVisible();
+})