feat(examples): Adding Tracetest Typescript Example (#3559)

* feat(examples): Adding Tracetest Typescript Example

* draft changes

* draft changes

* fix: Wizard Agent Step Race Condition

* fixes

* try to fix race condition

* finishing touches

* adding typescript to the integrations overview

* removing wrong url

* Update examples/quick-start-typescript/README.md

Co-authored-by: Julianne Fermi <[email protected]>

---------

Co-authored-by: Matheus Nogueira <[email protected]>
Co-authored-by: Julianne Fermi <[email protected]>

docs/docs/tools-and-integrations/overview.mdx

@@ -13,13 +13,14 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T
 
 Tracetest can be integrated and used with other tools. See below which integrations we are working on:
 
-
 ## Integrations
 
 - [Cypress](/tools-and-integrations/cypress) is a JavaScript end-to-end testing framework. It is used for testing web applications by simulating user interactions within the browser. Cypress provides a fast, reliable, and easy-to-use testing environment for developers.
 
 - [Playwright](/tools-and-integrations/playwright) is an open-source automation framework developed by Microsoft that enables cross-browser automation for web applications. It provides a set of APIs and libraries for automating interactions with web browsers such as Chrome, Firefox, and Microsoft Edge.
 
+- [Typescript](/tools-and-integrations/typescript) is essential for building dynamic web applications on both the frontend and backend, with widespread support across browsers and platforms. Its vibrant ecosystem, community backing, and adaptability make it a cornerstone of modern software development, driving innovation and meeting the evolving demands of the tech industry.
+
 - [Keptn](/tools-and-integrations/keptn) is a powerful tool to automate the lifecycle of your application running on Kubernetes. With this integration, you can run Tracetest alongside Keptn test tasks to validate systems managed by Keptn.
 
 - [K6](/tools-and-integrations/k6) is a powerful tool to run load tests against any type of services (REST, GRPC, GraphQL, etc). It is widely used by Developers, Site Reliability Engineers and Software Engineers in Test/QA teams to find potential issues when testing real life scenarios in both controlled environments and production.

docs/sidebars.js

@@ -358,6 +358,11 @@ const sidebars = {
           id: "tools-and-integrations/playwright",
           label: "Playwright",
         },
+        {
+          type: "doc",
+          id: "tools-and-integrations/typescript",
+          label: "Typescript",
+        },
         {
           type: "doc",
           id: "tools-and-integrations/keptn",

examples/quick-start-typescript/.env.template

@@ -0,0 +1,3 @@
+TRACETEST_API_TOKEN=
+POKESHOP_DEMO_URL=http://localhost:8081
+TRACETEST_AGENT_API_KEY=

examples/quick-start-typescript/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+dist

examples/quick-start-typescript/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

examples/quick-start-typescript/Dockerfile

@@ -0,0 +1,31 @@
+FROM node as builder
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+COPY package*.json ./
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+FROM node:slim
+
+ENV NODE_ENV production
+USER node
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+COPY package*.json ./
+
+RUN npm ci --production
+
+COPY --from=builder /usr/src/app/dist ./dist
+
+EXPOSE 8080
+CMD [ "node", "dist/index.js" ]

examples/quick-start-typescript/README.md

@@ -0,0 +1,14 @@
+# Tracetest + Typescript (using @tracetest/client NPM Package)
+
+> [Read the detailed recipe for setting up Tracetest + Typescript (using @tracetest/client NPM Package) in our documentation.](https://docs.tracetest.io/tools-and-integrations/typescript)
+
+This repository's objective is to show how you can run trace-based tests from your Javascript/Typescript environment, including setup stages and waiting for results to be ready.
+
+## Steps
+
+1. Copy the `.env.template` file to `.env`.
+2. Log into the [Tracetest app](https://app.tracetest.io/).
+3. Fill out the [token](https://docs.tracetest.io/concepts/environment-tokens) and [agent API key](https://docs.tracetest.io/concepts/agent) details.
+4. Run `docker compose up -d`.
+5. Look for the `tracetest-client` service logs to find out the results from the trace-based tests.
+6. Follow the links to the [Tracetest app](https://app.tracetest.io/) to find more details.

examples/quick-start-typescript/collector.config.yaml

@@ -0,0 +1,35 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+      http:
+        cors:
+          allowed_origins:
+            - "http://*"
+            - "https://*"
+
+processors:
+  batch:
+
+exporters:
+  logging:
+    loglevel: debug
+  jaeger:
+    endpoint: ${JAEGER_ENDPOINT}
+    tls:
+      insecure: true
+  otlp/trace:
+    endpoint: tracetest-agent:4317
+    tls:
+      insecure: true
+
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: []
+      exporters: [logging, jaeger]
+    traces/1:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp/trace]

examples/quick-start-typescript/definitions.ts

@@ -0,0 +1,85 @@
+import { TestResource } from '@tracetest/client/dist/modules/openapi-client';
+
+export const importDefinition: TestResource = {
+  type: 'Test',
+  spec: {
+    id: '99TOHzpSR',
+    name: 'Typescript: Import a Pokemon',
+    trigger: {
+      type: 'http',
+      httpRequest: {
+        method: 'POST',
+        url: '${var:BASE_URL}/import',
+        body: '{"id": ${var:POKEMON_ID}}',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      },
+    },
+    specs: [
+      {
+        selector: 'span[tracetest.span.type="general" name = "validate request"] span[tracetest.span.type="http"]',
+        name: 'All HTTP Spans: Status  code is 200',
+        assertions: ['attr:http.status_code = 200'],
+      },
+      {
+        selector: 'span[tracetest.span.type="http" name="GET" http.method="GET"]',
+        assertions: ['attr:http.route = "/api/v2/pokemon/${var:POKEMON_ID}"'],
+      },
+      {
+        selector: 'span[tracetest.span.type="database"]',
+        name: 'All Database Spans: Processing time is less than 1s',
+        assertions: ['attr:tracetest.span.duration < 1s'],
+      },
+    ],
+    outputs: [
+      {
+        name: 'DATABASE_POKEMON_ID',
+        selector:
+          'span[tracetest.span.type="database" name="create postgres.pokemon" db.system="postgres" db.name="postgres" db.user="postgres" db.operation="create" db.sql.table="pokemon"]',
+        value: "attr:db.result | json_path '$.id'",
+      },
+    ],
+  },
+};
+
+export const deleteDefinition: TestResource = {
+  type: 'Test',
+  spec: {
+    id: 'C2gwdktIR',
+    name: 'Typescript: Delete a Pokemon',
+    trigger: {
+      type: 'http',
+      httpRequest: {
+        method: 'DELETE',
+        url: '${var:BASE_URL}/${var:POKEMON_ID}',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      },
+    },
+    specs: [
+      {
+        selector:
+          'span[tracetest.span.type="database" db.system="redis" db.operation="del" db.redis.database_index="0"]',
+        assertions: ['attr:db.payload = \'{"key":"pokemon-${var:POKEMON_ID}"}\''],
+      },
+      {
+        selector:
+          'span[tracetest.span.type="database" name="delete postgres.pokemon" db.system="postgres" db.name="postgres" db.user="postgres" db.operation="delete" db.sql.table="pokemon"]',
+        assertions: ['attr:db.result = 1'],
+      },
+      {
+        selector: 'span[tracetest.span.type="database"]',
+        name: 'All Database Spans: Processing time is less than 100ms',
+        assertions: ['attr:tracetest.span.duration < 100ms'],
+      },
+    ],
+  },
+};

examples/quick-start-typescript/docker-compose.yaml

@@ -0,0 +1,163 @@
+version: '3.5'
+name: pokeshop
+
+services:
+  # tracetest services
+  tracetest-client:
+    build: .
+    environment:
+      TRACETEST_API_TOKEN: ${TRACETEST_API_TOKEN}
+      POKESHOP_DEMO_URL: ${POKESHOP_DEMO_URL}
+    depends_on:
+      api:
+        condition: service_healthy
+  tracetest-agent:
+    environment:
+      TRACETEST_DEV: ${TRACETEST_DEV}
+      TRACETEST_API_KEY: ${TRACETEST_AGENT_API_KEY}
+      TRACETEST_SERVER_URL: ${TRACETEST_SERVER_URL}
+    image: kubeshop/tracetest-agent:latest
+    networks:
+      default: null
+
+  # pokeshop demo services
+  postgres:
+    image: postgres:14
+    ports:
+      - 5434:5432
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: postgres
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB']
+      interval: 1s
+      timeout: 5s
+      retries: 60
+
+  cache:
+    image: redis:6
+    ports:
+      - 6379:6379
+    healthcheck:
+      test: ['CMD', 'redis-cli', 'ping']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+
+  queue:
+    image: rabbitmq:3.12
+    restart: unless-stopped
+    ports:
+      - 5672:5672
+      - 15672:15672
+    healthcheck:
+      test: rabbitmq-diagnostics -q check_running
+      interval: 1s
+      timeout: 5s
+      retries: 60
+
+  jaeger:
+    image: jaegertracing/all-in-one:latest
+    ports:
+      - 14250:14250
+      - 16685:16685
+      - 16686:16686
+    environment:
+      - COLLECTOR_ZIPKIN_HOST_PORT=:9411
+      - COLLECTOR_OTLP_ENABLED=true
+    healthcheck:
+      test: ['CMD', 'wget', '--spider', 'localhost:16686']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+
+  otel-collector:
+    image: otel/opentelemetry-collector-contrib:0.59.0
+    restart: unless-stopped
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    ports:
+      - 55679:55679
+      - 8888:8888
+      - 4317:4317
+      - 4318:4318
+    command:
+      - '--config'
+      - '/otel-local-config.yaml'
+    volumes:
+      - ./collector.config.yaml:/otel-local-config.yaml
+    environment:
+      - JAEGER_ENDPOINT=jaeger:14250
+    depends_on:
+      jaeger:
+        condition: service_healthy
+
+  api:
+    image: kubeshop/demo-pokemon-api:latest
+    restart: unless-stopped
+    pull_policy: always
+    environment:
+      REDIS_URL: cache
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public
+      RABBITMQ_HOST: queue
+      POKE_API_BASE_URL: https://pokeapi.co/api/v2
+      COLLECTOR_ENDPOINT: http://otel-collector:4317
+      NPM_RUN_COMMAND: api
+    healthcheck:
+      test: ['CMD', 'wget', '--spider', 'localhost:8081']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+    ports:
+      - 8081:8081
+    depends_on:
+      postgres:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+      queue:
+        condition: service_healthy
+
+  worker:
+    image: kubeshop/demo-pokemon-api:latest
+    restart: unless-stopped
+    pull_policy: always
+    environment:
+      REDIS_URL: cache
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public
+      RABBITMQ_HOST: queue
+      POKE_API_BASE_URL: https://pokeapi.co/api/v2
+      COLLECTOR_ENDPOINT: http://otel-collector:4317
+      NPM_RUN_COMMAND: worker
+    depends_on:
+      postgres:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+      queue:
+        condition: service_healthy
+
+  rpc:
+    image: kubeshop/demo-pokemon-api:latest
+    restart: unless-stopped
+    pull_policy: always
+    environment:
+      REDIS_URL: cache
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public
+      RABBITMQ_HOST: queue
+      POKE_API_BASE_URL: https://pokeapi.co/api/v2
+      COLLECTOR_ENDPOINT: http://otel-collector:4317
+      NPM_RUN_COMMAND: rpc
+    healthcheck:
+      test: ['CMD', 'lsof', '-i', '8082']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+    depends_on:
+      postgres:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+      queue:
+        condition: service_healthy