maint: build out smoke test with more detailed example app (#85)

## Which problem is this PR solving?

- Closes #42 

## Short description of the changes

- add example app written in TypeScript, uses webpack
- build out example app with custom instrumentation, resource
attributes, baggage, and more
- simplify hello world app again
- update smoke test to use new example app, and add more assertions  
- clean up cypress tests based on [best
practices](https://docs.cypress.io/guides/references/best-practices)
- add format script to let prettier clean my code for me on-demand
- update tsconfig to properly search all subdirectories of examples as
needed

## How to verify that this has the expected result

Following instructions for each app works, and smoke tests pass

Dockerfile.smoke

@@ -0,0 +1,19 @@
+FROM node:18-bullseye
+
+# Create app directory
+WORKDIR /usr/src/app
+
+COPY . .
+
+RUN npm install
+
+RUN npm run build
+
+WORKDIR /usr/src/app/examples/custom-with-collector-ts
+
+RUN npm install
+RUN npm run build
+
+
+EXPOSE 1234
+CMD [ "npm", "start" ]

Makefile

@@ -13,13 +13,13 @@ smoke-docker: smoke-tests/collector/data.json
 	@echo ""
 	@echo "+++ Spinning up the smokers."
 	@echo ""
-	docker-compose up --build --detach
+	docker-compose up --build collector app-custom-with-collector-ts --detach
 
 smoke-cypress: smoke-tests/collector/data.json
 	@echo ""
 	@echo "+++ Running Cypress in chrome browser."
 	@echo ""
-	npx cypress run --headed --browser chrome
+	npx cypress run --browser chrome
 
 smoke-bats: smoke-tests/collector/data.json
 	@echo ""

cypress.config.ts

@@ -6,6 +6,6 @@ export default defineConfig({
     setupNodeEvents() {
       // implement node event listeners here
     },
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:1234',
   },
 });

cypress/e2e/spec.cy.ts

@@ -3,39 +3,29 @@ describe('Smoke Tests', () => {
     cy.visit('index.html', {
       onBeforeLoad(win) {
         cy.stub(win.console, 'debug').as('consoleDebug');
+        cy.spy(win.console, 'log').as('consoleLog');
       },
     });
+    cy.get('[data-cy="button"]').should('be.visible');
+    cy.get('[data-cy="button"]').click();
   });
-  it('initializes the OpenTelemetry API', () => {
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      '@opentelemetry/api: Registered a global for diag',
-    );
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      '@opentelemetry/api: Registered a global for trace',
-    );
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      '@opentelemetry/api: Registered a global for context',
-    );
-  });
-
-  it('logs honeycomb config with debug enabled', () => {
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      'Honeycomb Web SDK Debug Mode Enabled',
-    );
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      '@honeycombio/opentelemetry-web',
-    );
-  });
-  it('logs expected output with debug enabled', () => {
-    cy.get('@consoleDebug').should(
-      'be.calledWithMatch',
-      'BrowserDetector found resource.',
-    );
-    cy.get('@consoleDebug').should('be.calledWithMatch', 'items to be sent');
+  it('initializes the OpenTelemetry API and logs honeycomb config with debug enabled', () => {
+    cy.get('@consoleDebug')
+      .should(
+        'be.calledWithMatch',
+        '@opentelemetry/api: Registered a global for diag',
+      )
+      .and(
+        'be.calledWithMatch',
+        '@opentelemetry/api: Registered a global for trace',
+      )
+      .and(
+        'be.calledWithMatch',
+        '@opentelemetry/api: Registered a global for context',
+      )
+      .and('be.calledWithMatch', 'Honeycomb Web SDK Debug Mode Enabled')
+      .and('be.calledWithMatch', '@honeycombio/opentelemetry-web')
+      .and('be.calledWithMatch', 'button clicked')
+      .and('be.calledWithMatch', 'items to be sent');
   });
 });

docker-compose.yml

@@ -16,3 +16,11 @@ services:
     image: hny/hello-world-web:local
     ports:
       - '3000:3000'
+
+  app-custom-with-collector-ts:
+    build:
+      context: .
+      dockerfile: ./Dockerfile.smoke
+    image: hny/custom-with-collector-ts:local
+    ports:
+      - '1234:1234'

examples/custom-with-collector-ts/README.md

@@ -0,0 +1,36 @@
+# TypeScript Example for the Honeycomb Web SDK
+
+This example is written in TypeScript, uses webpack, and sends to a Collector.
+
+It also shows
+
+- adding custom instrumentation
+- adding custom resource attributes
+- adding to baggage to set attributes on child spans with the built-in baggage span processor
+
+This example is used in our smoke / integration testing.
+
+## Run this application locally, send straight to Honeycomb
+
+Add your API key and comment out the endpoint.
+
+```sh
+# install dependencies
+npm install
+# compile and bundle
+npm run build
+# start app
+npm start
+```
+
+## Run this application in Docker, send straight to Honeycomb
+
+Add your API key and comment out the endpoint.
+
+From root directory, run `docker-compose up --build app-custom-with-collector-ts`
+
+## Send telemetry to Collector, then to Honeycomb
+
+Add your API key and uncomment the `otlp` exporter in `otel-collector-config.yaml`.
+
+From the root directory, `docker-compose up --build collector app-custom-with-collector-ts`