Tnolet/update examples and readmes (#904)

* feat: clean up examples, better naming

* feat: update the readmes

* fix: typo

* fix: fixing tests [sc-00]

* test: fixes snapshot test [sc-00]

README.md

@@ -1,13 +1,70 @@
 The Checkly CLI gives you a **JavaScript/TypeScript-native workflow** for coding, testing and deploying synthetic 
 monitoring at scale, from your code base. We call this workflow **monitoring as code** (MaC).
 
-- **Unite E2E testing & monitoring in one workflow.** No more silos between Dev, QA and Ops.
-- **Codeable, testable, reviewable.** Works with your dev pipeline. From your IDE, via PR to CI.
+- **Codeable, testable, reviewable monitoring constructs.** Works with your dev pipeline. From your IDE, via PR to CI.
 - **Native `@playwright/test` support.** No lock-in, just write standard `*.spec.ts` files.
 - **Alerting baked in.** Set alerts for Slack, SMS and many more channels.
 - **Typescript-first.** Fully typed for easy refactoring and code completion.
 - **Run in the cloud or on-prem.** Run on the Checkly cloud or in your network using the [Private Locations](https://www.checklyhq.com/docs/private-locations/)
 
+# A quick example
+
+Monitoring checks are written by instantiating constructs from the `checkly/constructs` package...
+
+```ts
+// books-api.check.ts
+import { ApiCheck, AssertionBuilder } from 'checkly/constructs'
+
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
+  request: {
+    url: 'https://danube-web.shop/api/books',
+    method: 'GET',
+    assertions: [
+      AssertionBuilder.statusCode().equals(200),
+      AssertionBuilder.jsonBody('$[0].id').isNotNull(),
+    ],
+  }
+})
+```
+For browser checks, you can just write standard `*.spec.ts` files using `@playwright/test`.
+
+```ts
+// home.spec.ts
+import { test, expect } from '@playwright/test'
+
+test('webshop homepage', async ({ page }) => {
+  const response = await page.goto('https://danube-web.shop')
+  expect(response?.status()).toBeLessThan(400)
+  await expect(page).toHaveTitle(/Danube WebShop/)
+  await page.screenshot({ path: 'homepage.jpg' })
+})
+```
+
+Run your checks from your local machine or in CI  using `npx checkly test`
+
+```bash
+npx checkly test
+Parsing your project... done
+
+Running 2 checks in eu-west-1.
+
+__checks__/books-api.check.ts
+  ✔ Books API 1 (52ms)
+__checks__/home.spec.ts  
+  ✔ home.spec.ts (5s)
+
+2 passed, 2 total
+```
+
+Now deploy your checks to the Checkly cloud so they can monitor your apps and APIs around the clock and alert you when things break.
+
+```bash
+npx checkly deploy
+
+Parsing your project... done
+Successfully deployed project "Acme webapp" to account "Acme Production".
+```
 
 # Installation
 

examples/advanced-project-js/README.md

@@ -13,7 +13,7 @@ npm create checkly -- --template advanced-project
 
 ## Project Structure
 
-This project mimics a typical app where you organize code with top-level defaults and per page, service or component checks.
+This project has examples of all Checkly check types and showcases some advanced features. It also adds a GitHub Actions workflow.
 
 - Running `npx checkly test` will look for `.check.js` files and `.spec.js` in `__checks__` directories and execute them in a dry run.
 
@@ -42,7 +42,7 @@ You can add `@playwright/test` to this project to get full code completion and r
 It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.28.0
+npm install --save-dev @playwright/test@1.38.1
 ```
 
 ## Questions?

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

@@ -2,8 +2,8 @@ const path = require('path');
 const { ApiCheck, AssertionBuilder } = require('checkly/constructs');
 const { websiteGroup } = require('./website-group.check');
 
-new ApiCheck('homepage-api-check-1', {
-  name: 'Fetch Book List',
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
   group: websiteGroup,
   degradedResponseTime: 10000,
   maxResponseTime: 20000,

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

@@ -4,7 +4,7 @@ const { test, expect } = require('@playwright/test');
 // You can override the default Playwright test timeout of 30s
 // test.setTimeout(60000);
 
-test('Checkly Homepage', async ({ page }) => {
+test('webshop homepage', async ({ page }) => {
   await page.setViewportSize(defaults.playwright.viewportSize);
   const response = await page.goto(defaults.pageUrl);
 

examples/advanced-project/README.md

@@ -13,7 +13,7 @@ npm create checkly -- --template advanced-project
 
 ## Project Structure
 
-This project mimics a typical app where you organize code with top-level defaults and per page, service or component checks.
+This project has examples of all Checkly check types and showcases some advanced features. It also adds a GitHub Actions workflow.
 
 - Running `npx checkly test` will look for `.check.ts` files and `.spec.ts` in `__checks__` directories and execute them in a dry run.
 
@@ -42,7 +42,7 @@ You can add `@playwright/test` to this project to get full code completion and r
 It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.28.0
+npm install --save-dev @playwright/test@1.38.1
 ```
 
 ## Questions?

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

@@ -2,8 +2,8 @@ import * as path from 'path'
 import { ApiCheck, AssertionBuilder } from 'checkly/constructs'
 import { websiteGroup } from './website-group.check'
 
-new ApiCheck('homepage-api-check-1', {
-  name: 'Fetch Book List',
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
   group: websiteGroup,
   degradedResponseTime: 10000,
   maxResponseTime: 20000,

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

@@ -4,7 +4,7 @@ import { defaults } from '../defaults'
 // You can override the default Playwright test timeout of 30s
 // test.setTimeout(60_000)
 
-test('Checkly Homepage', async ({ page }) => {
+test('webshop homepage', async ({ page }) => {
   await page.setViewportSize(defaults.playwright.viewportSize)
   const response = await page.goto(defaults.pageUrl)
 

examples/boilerplate-project-js/README.md

@@ -48,7 +48,7 @@ You can add `@playwright/test` to this project to get full code completion and r
 It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.28.0
+npm install --save-dev @playwright/test@1.38.1
 ```
 
 ## Questions?

examples/boilerplate-project-js/__checks__/api.check.js

@@ -1,7 +1,7 @@
 const { ApiCheck, AssertionBuilder } = require("checkly/constructs");
 
-new ApiCheck("homepage-api-check-1", {
-  name: "Fetch Book List",
+new ApiCheck("books-api-check-1", {
+  name: "Books API",
   alertChannels: [],
   degradedResponseTime: 10000,
   maxResponseTime: 20000,

examples/boilerplate-project-js/__checks__/homepage.spec.js

@@ -3,7 +3,7 @@ const { test, expect } = require('@playwright/test');
 // You can override the default Playwright test timeout of 30s
 // test.setTimeout(60_000);
 
-test('Checkly Homepage', async ({ page }) => {
+test('webshop homepage', async ({ page }) => {
   const response = await page.goto('https://danube-web.shop');
   expect(response?.status()).toBeLessThan(400);
   await expect(page).toHaveTitle(/Danube WebShop/);

examples/boilerplate-project/README.md

@@ -48,7 +48,7 @@ You can add `@playwright/test` to this project to get full code completion and r
 It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.28.0
+npm install --save-dev @playwright/test@1.38.1
 ```
 
 ## Questions?

examples/boilerplate-project/__checks__/api.check.ts

@@ -1,7 +1,7 @@
 import { ApiCheck, AssertionBuilder } from 'checkly/constructs'
 
-new ApiCheck('homepage-api-check-1', {
-  name: 'Fetch Book List',
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
   alertChannels: [],
   degradedResponseTime: 10000,
   maxResponseTime: 20000,

examples/boilerplate-project/__checks__/homepage.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 // You can override the default Playwright test timeout of 30s
 // test.setTimeout(60_000);
 
-test('Checkly Homepage', async ({ page }) => {
+test('webshop homepage', async ({ page }) => {
   const response = await page.goto('https://danube-web.shop')
   expect(response?.status()).toBeLessThan(400)
   await expect(page).toHaveTitle(/Danube WebShop/)

packages/cli/e2e/__tests__/test.spec.ts

@@ -162,7 +162,7 @@ describe('test', () => {
   it('Should run snapshot tests', async () => {
     const secretEnv = uuid.v4()
     const result = await runChecklyCli({
-      args: ['test', '-e', `SECRET_ENV=${secretEnv}`, '--verbose'],
+      args: ['test', '-e', `SECRET_ENV=${secretEnv}`, '--verbose', '--record'],
       apiKey: config.get('apiKey'),
       accountId: config.get('accountId'),
       directory: path.join(__dirname, 'fixtures', 'snapshot-project'),