example of test extension for js (#12)

Author: Maia McCormick

.circleci/config.yml

@@ -9,4 +9,6 @@ jobs:
       - setup_remote_docker:
           version: 19.03.12
       - run: apt install -y python
+      - run: apt install -y npm
+      - run: npm install -g yarn
       - run: ctlptl create cluster kind --registry=ctlptl-registry && test/test.sh

.gitignore

@@ -1,3 +1,6 @@
 **/node_modules
 **/start-time.txt
-*/.idea
+*/.idea
+**/yarn-error.log
+
+**/tilt_modules

README.md

@@ -17,6 +17,7 @@ This progression of examples shows how to start, and incrementally update your p
 
 - [101-debugger](101-debugger): The recommended setup, exposing a debugger on port 9229 that you
   can connect to with your favorite NodeJS debugger (chrome://inspect, VSCode, IntelliJ, etc)
+- [tests-example](tests-example): an example of how to use Tilt to run your tests for you as you iterate
 
 ## License
 

test/test.sh

@@ -24,3 +24,7 @@ tilt down --file 3-recommended/Tiltfile
 echo "Testing 101-debugger"
 tilt ci --file 101-debugger/Tiltfile
 tilt down --file 101-debugger/Tiltfile
+
+echo "Testing tests-example"
+tilt ci --file tests-example/Tiltfile
+tilt down --file tests-example/Tiltfile

tests-example/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+yarn-error.log

tests-example/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:10
+
+# Default value; will be overridden by build_args, if passed
+ARG node_env=production
+
+ENV NODE_ENV $node_env
+
+WORKDIR /app
+
+ADD package.json .
+ADD yarn.lock .
+RUN yarn install
+
+ADD . .
+
+ENTRYPOINT [ "node", "/app/index.js" ]

tests-example/Tiltfile

@@ -0,0 +1,36 @@
+# -*- mode: Python -*
+
+# Tilt can run your tests for you, so you get fast feedback while iterating on your app
+include('Tiltfile.tests')
+
+k8s_yaml('kubernetes.yaml')
+k8s_resource('example-nodejs', port_forwards=8000,
+    resource_deps=['deploy']
+)
+
+# Records the current time, then kicks off a server update.
+# Normally, you would let Tilt do deploys automatically, but this
+# shows you how to set up a custom workflow that measures it.
+local_resource(
+    'deploy',
+    'python now.py > start-time.txt',
+)
+
+# Add a live_update rule to our docker_build
+congrats = "🎉 Congrats, you ran a live_update! 🎉"
+docker_build('example-nodejs-image', '.',
+    build_args={'node_env': 'development'},
+    entrypoint='yarn run nodemon /app/index.js',
+    live_update=[
+        sync('.', '/app'),
+        run('cd /app && yarn install', trigger=['./package.json', './yarn.lock']),
+
+        # if all that changed was start-time.txt, make sure the server
+        # reloads so that it will reflect the new startup time
+        run('touch /app/index.js', trigger='./start-time.txt'),
+
+        # add a congrats message!
+        run('sed -i "s/Hello cats!/{}/g" /app/views/index.mustache'.
+            format(congrats)),
+])
+

tests-example/Tiltfile.tests

@@ -0,0 +1,17 @@
+# -*- mode: Python -*-
+
+# For more on the `test_jest_yarn` extension:
+#     https://github.com/tilt-dev/tilt-extensions/tree/master/tests/javascript
+# For more on tests in Tilt: https://docs.tilt.dev/tests_in_tilt.html
+load('ext://tests/javascript', 'test_jest_yarn')
+
+# Jest is smart about what tests it runs (by default, only runs tests related to files
+# that have changed since your last commit), so it won't be too expensive to run this
+# on every file change
+# Make sure you have "scripts.test" configured in "package.json"
+#   (this is done automatically for you in some frameworks, e.g. React)
+test_jest_yarn('unit-tests', '.',
+               with_install=True,  # make sure all dependencies are present locally so you can run tests
+
+               # in CI mode, run ALL tests (not just those related to files changed since last commit)
+               only_changed=config.tilt_subcommand != 'ci')

tests-example/foo.test.js

@@ -0,0 +1,11 @@
+test("foo is okay", () => {
+    expect("foo").toEqual("foo")
+});
+
+test("bar is okay", () => {
+    expect("bar").toEqual("bar")
+});
+
+test("baz is okay", () => {
+    expect("baz").toEqual("baz")
+});

tests-example/index.js

@@ -0,0 +1,34 @@
+/*
+ Gratefully adapted from https://github.com/HemingwayLee/sample-mustache-express
+*/
+const fs = require('fs');
+
+const express = require('express');
+const app = express();
+const mustacheExpress = require('mustache-express');
+
+let timeSince = 'N/A';
+
+app.engine('mustache', mustacheExpress());
+
+app.set('view engine', 'mustache');
+app.set('views', __dirname + '/views');
+app.use(express.static('public'));
+
+app.get('/', (req, res) => {
+    res.render('index.mustache', {
+        time: timeSince,
+    });
+});
+
+app.listen(8000, () => {
+    timeSince = getSecsSinceDeploy();
+    console.log('Server running at http://localhost:8000/');
+});
+
+function getSecsSinceDeploy() {
+    let curTimeMs = new Date().getTime();
+    let contents = fs.readFileSync('/app/start-time.txt', 'utf8');
+    let startTimeMs  = parseInt(contents.trim()) / 10**6;
+    return ((curTimeMs - startTimeMs) / 10**3).toFixed(2)
+}

tests-example/index.test.js

@@ -0,0 +1,3 @@
+test("everything is okay", () => {
+    expect(1).toEqual(1)
+});

tests-example/kubernetes.yaml

@@ -0,0 +1,20 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: example-nodejs
+  labels:
+    app: example-nodejs
+spec:
+  selector:
+    matchLabels:
+      app: example-nodejs
+  template:
+    metadata:
+      labels:
+        app: example-nodejs
+    spec:
+      containers:
+        - name: example-nodejs
+          image: example-nodejs-image
+          ports:
+            - containerPort: 8000

tests-example/now.py

@@ -0,0 +1,3 @@
+import time
+
+print("%d" % (float(time.time()) * 1000 * 1000 * 1000))

tests-example/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "tilt-example-nodejs",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.17.1",
+    "immutable": "^3.8.2",
+    "mustache-express": "^1.3.0"
+  },
+  "devDependencies": {
+    "jest": "^26.6.3",
+    "nodemon": "^2.0.2"
+  },
+  "scripts": {
+    "test": "jest"
+  }
+}

tests-example/public/pets.png

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <body style="font-size: 30px; font-family: sans-serif; margin: 0;">
+    <div style="display: flex; flex-direction: column; width: 100vw; height: 100vh; align-items: center; justify-content: center;">
+      <img src="pets.png" style="max-width: 30vw; max-height: 30vh;">
+      <div>Hello cats!</div>
+      <div>Time from "deploy" button pressed → server up: {{time}}s</div>
+    </div>
+  </body>
+</html>