feat: update inline hints and tips (#1021)

tnolet · web-flow · commit cf845004b667 · 2025-02-19T11:59:17.000+01:00
* feat: adds new inline tip structure for --record tip [sc-00]

* feat: small qol changes to wording [sc-00]

* test: update test snapshot [sc-00]

* feat: adds update tip [sc-00]

* test: update test (again?) [sc-00]

* test: fix e2e first attempt [sc-00]

* docs: adds `@latest` to create checkly where relevant [sc-00]
diff --git a/README.md b/README.md
@@ -74,7 +74,7 @@ First, make sure you sign up for a [free Checkly account](https://app.checklyhq.
 Then, the **easiest** way to get started is to install the CLI using the following command:
 
 ```bash
-npm create checkly
+npm create checkly@latest
 ```
 This command will guide you through some simple steps and set up a fully working example project for you. Should take 
 ~1 minute.
diff --git a/examples/advanced-project-js/README.md b/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 -- --template advanced-project
+npm create checkly@latest -- --template advanced-project
 ```
 
 ## Project Structure
diff --git a/examples/advanced-project/README.md b/examples/advanced-project/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 -- --template advanced-project
+npm create checkly@latest -- --template advanced-project
 ```
 
 ## Project Structure
diff --git a/examples/boilerplate-project-js/README.md b/examples/boilerplate-project-js/README.md
@@ -7,7 +7,7 @@ https://checklyhq.com website as a monitoring target.
 2. Test -> Deploy: now you have your app monitored around the clock. All from your code base.
 
 ```
-npm create checkly -- --template boilerplate-project
+npm create checkly@latest -- --template boilerplate-project
 ```
 
 ## Project Structure
diff --git a/examples/boilerplate-project/README.md b/examples/boilerplate-project/README.md
@@ -7,7 +7,7 @@ https://checklyhq.com website as a monitoring target.
 2. Test -> Deploy: now you have your app monitored around the clock. All from your code base.
 
 ```
-npm create checkly -- --template boilerplate-project
+npm create checkly@latest -- --template boilerplate-project
 ```
 
 ## Project Structure
diff --git a/packages/cli/e2e/__tests__/help.spec.ts b/packages/cli/e2e/__tests__/help.spec.ts
@@ -30,7 +30,7 @@ describe('help', () => {
     expect(stdout).toContain(`CORE COMMANDS
   deploy   Deploy your project to your Checkly account.
   test     Test your checks on Checkly.
-  trigger  Trigger your checks on Checkly.`)
+  trigger  Trigger your existing checks on Checkly.`)
 
     expect(stdout).toContain(`ADDITIONAL COMMANDS
   destroy          Destroy your project with all its related resources.
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -54,7 +54,7 @@
     ],
     "warn-if-update-available": {
       "timeoutInDays": 30,
-      "message": "<%= config.name %> update available from <%= chalk.greenBright(config.version) %> to <%= chalk.greenBright(latest) %>."
+      "message": "<%= config.name %> update available from <%= chalk.greenBright(config.version) %> to <%= chalk.greenBright(latest) %>. To update, run `npm install -D checkly@latest`"
     },
     "topics": {
       "env": {
diff --git a/packages/cli/src/commands/trigger.ts b/packages/cli/src/commands/trigger.ts
@@ -26,7 +26,7 @@ const MAX_RETRIES = 3
 export default class Trigger extends AuthCommand {
   static coreCommand = true
   static hidden = false
-  static description = 'Trigger your checks on Checkly.'
+  static description = 'Trigger your existing checks on Checkly.'
   static flags = {
     location: Flags.string({
       char: 'l',
diff --git a/packages/cli/src/help/examples.ts b/packages/cli/src/help/examples.ts
@@ -5,17 +5,13 @@ type Example = {
 
 const examples: Array<Example> = [
   {
-    description: 'Test your checks on Checkly with full logging.',
-    command: 'npx checkly test -v',
+    description: 'Record your test session in Checkly with logs, traces and videos.',
+    command: 'npx checkly test --record',
   },
   {
     description: 'Pass environment variables to your checks.',
     command: 'npx checkly test -e SECRET=my-password',
   },
-  {
-    description: 'Record your test session in Checkly with logs, traces and videos.',
-    command: 'npx checkly test --record',
-  },
   {
     description: 'Deploy your project to your Checkly account.',
     command: 'npx checkly deploy',
diff --git a/packages/cli/src/messages/common-messages.ts b/packages/cli/src/messages/common-messages.ts
@@ -2,6 +2,9 @@ const commonMessages = {
   forceMode: 'Force mode. Skips the confirmation dialog.',
   configFile: 'The Checkly CLI configuration file. If not passed, uses the checkly.config.ts|js file in the current' +
       ' directory.',
+  inlineTips: {
+    useRecordFlag: 'Use `--record` to get test results in Checkly with full traces, videos and logs: `npx checkly test --record`',
+  },
 }
 
 export default commonMessages
diff --git a/packages/cli/src/reporters/__tests__/__snapshots__/github-md-builder.spec.ts.snap b/packages/cli/src/reporters/__tests__/__snapshots__/github-md-builder.spec.ts.snap
@@ -18,5 +18,5 @@ Ran **2** checks in **eu-west-1**.
 |:-|:-|:-|:-|:-|
 |✅ Pass|my-test.spec.ts|BROWSER|\`src/__checks__/folder/browser.check.ts\`|7s |
 |✅ Pass|Test API check|API|\`src/some-other-folder/api.check.ts\`|2s |
-> Tip: use \`--record\` to get a full test session overview with traces, videos and logs, e.g. \`npx checkly test --reporter=github --record\`"
+> Tip: Use \`--record\` to get test results in Checkly with full traces, videos and logs: \`npx checkly test --record\`"
 `;
diff --git a/packages/cli/src/reporters/abstract-list.ts b/packages/cli/src/reporters/abstract-list.ts
@@ -197,6 +197,10 @@ export default abstract class AbstractListReporter implements Reporter {
     }
   }
 
+  _printTip (tip: string): void {
+    printLn(`Tip > ${chalk.white.dim(tip)}`, 2)
+  }
+
   _runLocationString (): string {
     if (this.runLocation.type === 'PUBLIC') {
       return this.runLocation.region
diff --git a/packages/cli/src/reporters/ci.ts b/packages/cli/src/reporters/ci.ts
@@ -4,6 +4,7 @@ import AbstractListReporter from './abstract-list'
 import { formatCheckTitle, formatCheckResult, CheckStatus, printLn, resultToCheckStatus } from './util'
 import { SequenceId } from '../services/abstract-check-runner'
 import { TestResultsShortLinks } from '../rest/test-sessions'
+import commonMessages from '../messages/common-messages'
 
 export default class CiReporter extends AbstractListReporter {
   onBegin (checks: Array<{ check: any, sequenceId: SequenceId }>, testSessionId?: string) {
@@ -16,6 +17,9 @@ export default class CiReporter extends AbstractListReporter {
     printLn('Finished running all checks:', 2)
     this._printSummary()
     this._printTestSessionsUrl()
+    if (!this.testSessionId) {
+      this._printTip(commonMessages.inlineTips.useRecordFlag)
+    }
   }
 
   onCheckAttemptResult (sequenceId: string, checkResult: any, links?: TestResultsShortLinks): void {
diff --git a/packages/cli/src/reporters/github.ts b/packages/cli/src/reporters/github.ts
@@ -4,6 +4,7 @@ import * as path from 'path'
 import AbstractListReporter, { checkFilesMap } from './abstract-list'
 import { SequenceId } from '../services/abstract-check-runner'
 import { CheckStatus, formatDuration, getTestSessionUrl, printLn, resultToCheckStatus } from './util'
+import commonMessages from '../messages/common-messages'
 
 const outputFile = './checkly-github-report.md'
 
@@ -89,7 +90,7 @@ export class GithubMdBuilder {
     this.tableRows.sort((a, b) => a < b ? 1 : -1).join('\n') + '\n'
 
     if (!this.testSessionId) {
-      markdown = markdown + '> Tip: use `--record` to get a full test session overview with traces, videos and logs, e.g. `npx checkly test --reporter=github --record`'
+      markdown = markdown + `> Tip: ${commonMessages.inlineTips.useRecordFlag}`
     }
 
     return markdown
diff --git a/packages/cli/src/reporters/list.ts b/packages/cli/src/reporters/list.ts
@@ -5,6 +5,7 @@ import AbstractListReporter from './abstract-list'
 import { SequenceId } from '../services/abstract-check-runner'
 import { formatCheckTitle, formatCheckResult, CheckStatus, printLn, resultToCheckStatus } from './util'
 import { TestResultsShortLinks } from '../rest/test-sessions'
+import commonMessages from '../messages/common-messages'
 
 export default class ListReporter extends AbstractListReporter {
   onBegin (checks: Array<{ check: any, sequenceId: SequenceId }>, testSessionId?: string) {
@@ -29,6 +30,9 @@ export default class ListReporter extends AbstractListReporter {
     this._clearSummary()
     this._printSummary()
     this._printTestSessionsUrl()
+    if (!this.testSessionId) {
+      this._printTip(commonMessages.inlineTips.useRecordFlag)
+    }
   }
 
   onCheckAttemptResult (sequenceId: string, checkResult: any, links?: TestResultsShortLinks): void {
diff --git a/packages/create-cli/e2e/__tests__/bootstrap.spec.ts b/packages/create-cli/e2e/__tests__/bootstrap.spec.ts
@@ -45,8 +45,8 @@ function expectCompleteCreation ({
   expect(commandOutput.stdout).toContain(`All done. Time to get testing & monitoring with Checkly
 
          > Enter your project directory using cd ${projectFolder}
-         > Run npx checkly login to login to your Checkly account
-         > Run npx checkly test to dry run your checks
+         > Run npx checkly login to login to your Checkly account or create a free new account
+         > Run npx checkly test --record to dry run your checks
          > Run npx checkly deploy to deploy your checks to the Checkly cloud
 
          Questions?
diff --git a/packages/create-cli/src/utils/messages.ts b/packages/create-cli/src/utils/messages.ts
@@ -49,11 +49,11 @@ export async function footer (targetDir?: string): Promise<void> {
   }
   await sleep(200)
   console.log(
-    `${prefix}> Run ${chalk.cyan('npx checkly login')} to login to your Checkly account`,
+    `${prefix}> Run ${chalk.cyan('npx checkly login')} to login to your Checkly account or create a free new account`,
   )
   await sleep(200)
   console.log(
-    `${prefix}> Run ${chalk.cyan('npx checkly test')} to dry run your checks`,
+    `${prefix}> Run ${chalk.cyan('npx checkly test --record')} to dry run your checks`,
   )
   await sleep(200)
   console.log(

Original file line number	Diff line number	Diff line change
`@@ -5,17 +5,13 @@ type Example = {`
`5`	`5`
`6`	`6`	`const examples: Array<Example> = [`
`7`	`7`	`{`
`8`		`- description: 'Test your checks on Checkly with full logging.',`
`9`		`- command: 'npx checkly test -v',`
	`8`	`+ description: 'Record your test session in Checkly with logs, traces and videos.',`
	`9`	`+ command: 'npx checkly test --record',`
`10`	`10`	`},`
`11`	`11`	`{`
`12`	`12`	`description: 'Pass environment variables to your checks.',`
`13`	`13`	`command: 'npx checkly test -e SECRET=my-password',`
`14`	`14`	`},`
`15`		`- {`
`16`		`- description: 'Record your test session in Checkly with logs, traces and videos.',`
`17`		`- command: 'npx checkly test --record',`
`18`		`- },`
`19`	`15`	`{`
`20`	`16`	`description: 'Deploy your project to your Checkly account.',`
`21`	`17`	`command: 'npx checkly deploy',`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,9 @@ const commonMessages = {`
`2`	`2`	`forceMode: 'Force mode. Skips the confirmation dialog.',`
`3`	`3`	`configFile: 'The Checkly CLI configuration file. If not passed, uses the checkly.config.ts\|js file in the current' +`
`4`	`4`	`' directory.',`
	`5`	`+ inlineTips: {`
	`6`	+ useRecordFlag: 'Use `--record` to get test results in Checkly with full traces, videos and logs: `npx checkly test --record`',
	`7`	`+ },`
`5`	`8`	`}`
`6`	`9`
`7`	`10`	`export default commonMessages`