Adds integeration

.dockerignore

@@ -4,3 +4,4 @@ node_modules
 dist
 .git
 static
+integration

integration/.gitignore

@@ -0,0 +1 @@
+__diff_output__

integration/docker-compose.test.yml

@@ -0,0 +1,19 @@
+version: "3.4"
+services:
+  dozzle:
+    container_name: dozzle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment: 
+      - DOZZLE_FILTER=name=dozzle
+    build:
+      context: ../
+  integration:
+    image: amir20/docker-alpine-puppeteer:edge
+    command: npm it
+    volumes:
+      - ./:/app/
+    environment:
+      - BASE=http://dozzle:8080/
+    depends_on:
+      - dozzle

integration/jest-setup.js

@@ -0,0 +1,5 @@
+const { toMatchImageSnapshot } = require("jest-image-snapshot");
+
+expect.extend({ toMatchImageSnapshot });
+
+jest.setTimeout(5000);

integration/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "jest": "^25.2.6",
+    "jest-image-snapshot": "^3.0.1",
+    "puppeteer": "^2.1.1"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup.js"
+    ]
+  }
+}

integration/test.js

@@ -0,0 +1,46 @@
+const puppeteer = require("puppeteer");
+
+const BASE = process.env.BASE;
+
+describe("home page", () => {
+  let browser;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+      executablePath: process.env.CHROME_EXE_PATH || "",
+      defaultViewport: { width: 1280, height: 1080 },
+    });
+  });
+
+  it("renders full page on desktop", async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE, {});
+
+    const image = await page.screenshot({ fullPage: true });
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders ipad viewport", async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE, {});
+    await page.setViewport({ width: 1024, height: 768 });
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders iphone viewport", async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE, {});
+    await page.setViewport({ width: 372, height: 812 });
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});