Merge pull request #56 from buildkite/add-example

Move example into it's own folder

diff --git a/Dockerfile b/Dockerfile
index 0d539119510686054d5aefee118114453568eb02..2e1d916b6a422ba5992cefa61ab67ef02a65f8b1 100644 (file)
--- a/Dockerfile
+++ b/Dockerfile
@@ -15,8 +15,10 @@ RUN  apt-get update \
      && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
      && apt-get update \
      && apt-get install -y google-chrome-unstable --no-install-recommends \
-     && rm -rf /var/lib/apt/lists/*
+     && rm -rf /var/lib/apt/lists/* \
+     && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
+     && chmod +x /usr/sbin/wait-for-it.sh
 
 # Install Puppeteer under /node_modules so it's available system-wide
 ADD package.json package-lock.json /
-RUN npm install
\ No newline at end of file
+RUN npm install

diff --git a/README.md b/README.md
index 20c2fd69101d269029deb88e833cf3756d9eab9e..8322299fc2896c3289afcf2edc4ccd5558a38d88 100644 (file)
--- a/README.md
+++ b/README.md
@@ -2,88 +2,14 @@
 
 A Node + Puppeteer base image for running Puppeteer scripts. Add your own tools (such as Jest, Mocha, etc), link services you want to test via Docker Compose, and run your Puppeteer scripts with a headless Chromium.
 
-See the list of [Docker Hub tags](https://hub.docker.com/r/buildkite/puppeteer/tags/) for Puppeteer versions available.
-
-## Usage example
-
-Dockerfile.integration-tests:
-
-```Dockerfile
-FROM buildkite/puppeteer:latest
-RUN  npm i mocha
-ENV  PATH="${PATH}:/node_modules/.bin"
-```
-
-docker-compose.integration-tests.yml:
-
-```yml
-version: '3'
-services:
-  tests:
-    build:
-      context: .
-      dockerfile: Dockerfile.integration-tests
-    volumes:
-      - "./integration-tests:/integration-tests"
-      - "/screenshots"
-    command: mocha --recursive /integration-tests
-    links:
-      - app
-  app:
-    image: tutum/hello-world
-    expose:
-      - "80"
-```
-
-integration-tests/index.test.js:
+## Versions
 
-```js
-const assert = require('assert')
-const puppeteer = require('puppeteer')
-
-let browser
-let page
-
-before(async() => {
-  browser = await puppeteer.launch({
-    args: [
-      // Required for Docker version of Puppeteer
-      '--no-sandbox',
-      '--disable-setuid-sandbox',
-      // This will write shared memory files into /tmp instead of /dev/shm,
-      // because Docker’s default for /dev/shm is 64MB
-      '--disable-dev-shm-usage'
-    ]
-  })
-
-  const browserVersion = await browser.version()
-  console.log(`Started ${browserVersion}`)
-})
-
-beforeEach(async() => {
-  page = await browser.newPage()
-})
-
-afterEach(async() => {
-  await page.close()
-})
+See the list of [Docker Hub tags](https://hub.docker.com/r/buildkite/puppeteer/tags/) for Puppeteer versions available.
 
-after(async() => {
-  await browser.close()
-})
+## Example
 
-describe('App', () => {
-  it('renders', async() => {
-    const response = await page.goto('http://app/')
-    assert(response.ok())
-    await page.screenshot({ path: `/screenshots/app.png` })
-  })
-})
-```
+See the [example directory](example) for a complete Docker Compose example, showing how to run Puppeteer against a linked Docker Compose web service.
 
-Running:
+## Dependent Services
 
-```shell
-docker-compose -f docker-compose.integration-tests.yml run tests
-ls screenshots/
-```
+This image includes [wait-for-it.sh](https://github.com/vishnubob/wait-for-it) which can be useful if you need to wait for a dependent web service to start accepting requests before your Puppeteer container attempts connecting to it. See [the example](example) for usage.

diff --git a/example/Dockerfile.integration-tests b/example/Dockerfile.integration-tests
new file mode 100644 (file)
index 0000000..41de685
--- /dev/null
+++ b/example/Dockerfile.integration-tests
@@ -0,0 +1,3 @@
+FROM buildkite/puppeteer:latest
+RUN  npm i mocha
+ENV  PATH="${PATH}:/node_modules/.bin"
\ No newline at end of file

diff --git a/example/README.md b/example/README.md
new file mode 100644 (file)
index 0000000..3f1c735
--- /dev/null
+++ b/example/README.md
@@ -0,0 +1,17 @@
+# Docker Puppeteer Example
+
+This as an example of using the Docker Puppeteer docker image to run Mocha tests against a linked Docker Compose web service, and capturing a screenshot into a local `./screenshots` directory.
+
+## Running
+
+```shell
+# Clone this example
+git clone https://github.com/buildkite/docker-puppeteer.git
+cd docker-puppeteer/example
+
+# Build and run the example tests
+docker-compose -f docker-compose.integration-tests.yml run tests
+
+# See the screen that was generated
+ls screenshots/
+```

diff --git a/example/docker-compose.integration-tests.yml b/example/docker-compose.integration-tests.yml
new file mode 100644 (file)
index 0000000..074f4d1
--- /dev/null
+++ b/example/docker-compose.integration-tests.yml
@@ -0,0 +1,16 @@
+version: '3'
+services:
+  tests:
+    build:
+      context: .
+      dockerfile: Dockerfile.integration-tests
+    volumes:
+      - "./integration-tests:/integration-tests"
+      - "./screenshots:/screenshots"
+    command: "wait-for-it.sh app:80 -- mocha --recursive /integration-tests"
+    links:
+      - app
+  app:
+    image: tutum/hello-world
+    expose:
+      - "80"

diff --git a/example/integration-tests/index.test.js b/example/integration-tests/index.test.js
new file mode 100644 (file)
index 0000000..dd39d8a
--- /dev/null
+++ b/example/integration-tests/index.test.js
@@ -0,0 +1,41 @@
+const assert = require('assert')
+const puppeteer = require('puppeteer')
+
+let browser
+let page
+
+before(async() => {
+  browser = await puppeteer.launch({
+    args: [
+      // Required for Docker version of Puppeteer
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      // This will write shared memory files into /tmp instead of /dev/shm,
+      // because Docker’s default for /dev/shm is 64MB
+      '--disable-dev-shm-usage'
+    ]
+  })
+
+  const browserVersion = await browser.version()
+  console.log(`Started ${browserVersion}`)
+})
+
+beforeEach(async() => {
+  page = await browser.newPage()
+})
+
+afterEach(async() => {
+  await page.close()
+})
+
+after(async() => {
+  await browser.close()
+})
+
+describe('App', () => {
+  it('renders', async() => {
+    const response = await page.goto('http://app/')
+    assert(response.ok())
+    await page.screenshot({ path: `/screenshots/app.png` })
+  })
+})
\ No newline at end of file