@ferocia-oss/loki-target-chrome-docker 0.31.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Joel Arvidsson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ferocia-oss/loki-target-chrome-docker",
+  "version": "0.31.0",
+  "description": "Loki Chrome docker target",
+  "keywords": [
+    "loki"
+  ],
+  "homepage": "https://github.com/oblador/loki/tree/master/packages/target-chrome-docker",
+  "bugs": {
+    "url": "https://github.com/oblador/loki/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oblador/loki.git",
+    "directory": "packages/target-chrome-docker"
+  },
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "@ferocia-oss/loki-core": "^0.31.0",
+    "@ferocia-oss/loki-target-chrome-core": "^0.31.0",
+    "chrome-remote-interface": "^0.29.0",
+    "debug": "^4.1.1",
+    "execa": "^5.0.0",
+    "fs-extra": "^9.1.0",
+    "get-port": "^5.1.1",
+    "wait-on": "^5.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "d01d38e10afcd368dee3d07311e7a48b155d6a34"
+}

package/src/create-chrome-docker-target.js

@@ -0,0 +1,229 @@
+const debug = require('debug')('loki:chrome:docker');
+const { execSync } = require('child_process');
+const execa = require('execa');
+const waitOn = require('wait-on');
+const CDP = require('chrome-remote-interface');
+const getRandomPort = require('get-port');
+const {
+  ChromeError,
+  ensureDependencyAvailable,
+  getAbsoluteURL,
+} = require('@ferocia-oss/loki-core');
+const { createChromeTarget } = require('@ferocia-oss/loki-target-chrome-core');
+const { getLocalIPAddress } = require('./get-local-ip-address');
+const { getNetworkHost } = require('./get-network-host');
+
+const getExecutor = (dockerWithSudo) => (dockerPath, args) => {
+  if (dockerWithSudo) {
+    return execa('sudo', [dockerPath, ...args]);
+  }
+
+  return execa(dockerPath, args);
+};
+
+const waitOnCDPAvailable = (host, port) =>
+  new Promise((resolve, reject) => {
+    waitOn(
+      {
+        resources: [`tcp:${host}:${port}`],
+        delay: 50,
+        interval: 100,
+        timeout: 5000,
+      },
+      (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      }
+    );
+  });
+
+function createChromeDockerTarget({
+  baseUrl = 'http://localhost:6006',
+  chromeDockerImage = 'yukinying/chrome-headless-browser-stable',
+  chromeFlags = ['--headless', '--disable-gpu', '--hide-scrollbars'],
+  dockerNet = null,
+  dockerWithSudo = false,
+  chromeDockerUseCopy = false,
+  chromeDockerWithoutSeccomp = false,
+}) {
+  let port;
+  let dockerId;
+  let host;
+  let localPath;
+  let dockerUrl = getAbsoluteURL(baseUrl);
+  const isLocalFile = dockerUrl.indexOf('file:') === 0;
+  const staticMountPath = '/var/loki';
+  const dockerPath = 'docker';
+  const runArgs = ['run', '--rm', '-d', '-P'];
+  const execute = getExecutor(dockerWithSudo);
+
+  if (!chromeDockerWithoutSeccomp) {
+    runArgs.push(`--security-opt=seccomp=${__dirname}/docker-seccomp.json`);
+  }
+
+  if (dockerUrl.indexOf('http://localhost') === 0) {
+    const ip = getLocalIPAddress();
+    if (!ip) {
+      throw new Error(
+        'Unable to detect local IP address, try passing --host argument'
+      );
+    }
+    dockerUrl = dockerUrl.replace('localhost', ip);
+  } else if (isLocalFile) {
+    localPath = dockerUrl.substr('file:'.length);
+    dockerUrl = `file://${staticMountPath}`;
+    if (!chromeDockerUseCopy) {
+      // setup volume mount if we're not using copy
+      runArgs.push('-v');
+      runArgs.push(`${localPath}:${staticMountPath}`);
+    }
+  }
+
+  async function getIsImageDownloaded(imageName) {
+    const { exitCode, stdout, stderr } = await execute(dockerPath, [
+      'images',
+      '-q',
+      imageName,
+    ]);
+
+    if (exitCode !== 0) {
+      throw new Error(`Failed querying docker, ${stderr}`);
+    }
+    return stdout.trim().length !== 0;
+  }
+
+  async function copyFiles() {
+    const { exitCode, stdout, stderr } = await execute(dockerPath, [
+      'cp',
+      localPath,
+      `${dockerId}:${staticMountPath}`,
+    ]);
+
+    if (exitCode !== 0) {
+      throw new Error(`Failed to copy files, ${stderr}`);
+    }
+    return stdout.trim().length !== 0;
+  }
+
+  async function ensureImageDownloaded() {
+    ensureDependencyAvailable('docker');
+
+    const isImageDownloaded = await getIsImageDownloaded(chromeDockerImage);
+    if (!isImageDownloaded) {
+      await execute(dockerPath, ['pull', chromeDockerImage]);
+    }
+  }
+
+  async function start() {
+    port = await getRandomPort();
+
+    ensureDependencyAvailable('docker');
+    const dockerArgs = runArgs.concat([
+      '--shm-size=1g',
+      '-p',
+      `${port}:${port}`,
+    ]);
+
+    if (dockerNet) {
+      dockerArgs.push(`--net=${dockerNet}`);
+    }
+    dockerArgs.push(chromeDockerImage);
+
+    const args = dockerArgs
+      .concat([
+        '--disable-datasaver-prompt',
+        '--no-first-run',
+        '--disable-extensions',
+        '--remote-debugging-address=0.0.0.0',
+        `--remote-debugging-port=${port}`,
+      ])
+      .concat(chromeFlags);
+
+    debug(
+      `Launching chrome in docker with command "${dockerPath} ${args.join(
+        ' '
+      )}"`
+    );
+    const { exitCode, stdout, stderr } = await execute(dockerPath, args);
+    if (exitCode === 0) {
+      dockerId = stdout;
+      if (chromeDockerUseCopy) {
+        await copyFiles();
+      }
+      const logs = execute(dockerPath, ['logs', dockerId, '--follow']);
+      const errorLogs = [];
+      logs.stderr.on('data', (chunk) => {
+        errorLogs.push(chunk);
+      });
+
+      host = await getNetworkHost(execute, dockerId);
+      try {
+        await waitOnCDPAvailable(host, port);
+      } catch (error) {
+        if (
+          error.message.startsWith('Timed out waiting for') &&
+          errorLogs.length !== 0
+        ) {
+          throw new ChromeError(
+            `Chrome failed to start with ${
+              errorLogs.length === 1 ? 'error' : 'errors'
+            } ${errorLogs
+              .map((e) => `"${e.toString('utf8').trim()}"`)
+              .join(', ')}`
+          );
+        }
+        throw error;
+      } finally {
+        if (logs.exitCode === null && !logs.killed) {
+          logs.kill();
+        }
+      }
+      debug(`Docker started with id ${dockerId}`);
+    } else {
+      throw new Error(`Failed starting docker, ${stderr}`);
+    }
+  }
+
+  async function stop() {
+    if (dockerId) {
+      debug(`Killing chrome docker instance with id ${dockerId}`);
+      await execute(dockerPath, ['kill', dockerId]);
+    } else {
+      debug('No chrome docker instance to kill');
+    }
+  }
+
+  async function createNewDebuggerInstance() {
+    debug(`Launching new tab with debugger at port ${host}:${port}`);
+    const target = await CDP.New({ host, port });
+    debug(`Launched with target id ${target.id}`);
+    const client = await CDP({ host, port, target });
+
+    client.close = () => {
+      debug('Closing tab');
+      return CDP.Close({ host, port, id: target.id });
+    };
+
+    return client;
+  }
+
+  process.on('SIGINT', () => {
+    if (dockerId) {
+      const maybeSudo = dockerWithSudo ? 'sudo ' : '';
+      execSync(`${maybeSudo}${dockerPath} kill ${dockerId}`);
+    }
+  });
+
+  return createChromeTarget(
+    start,
+    stop,
+    createNewDebuggerInstance,
+    dockerUrl,
+    ensureImageDownloaded
+  );
+}
+
+module.exports = { createChromeDockerTarget };

package/src/create-chrome-docker-target.spec.js

@@ -0,0 +1,128 @@
+const { createChromeDockerTarget } = require('.');
+
+const DOCKER_TEST_TIMEOUT = 120000;
+
+const fetchStorybookUrl = async (baseUrl) => {
+  const target = createChromeDockerTarget({ baseUrl });
+  await target.start();
+  let result;
+  try {
+    result = await target.getStorybook({ baseUrl });
+  } catch (err) {
+    result = err;
+  }
+  await target.stop();
+  if (result instanceof Error) {
+    throw result;
+  }
+  return result;
+};
+
+const fetchStorybookFixture = async (fixture) =>
+  fetchStorybookUrl(`file:${__dirname}/../../../fixtures/storybook-${fixture}`);
+
+const storybook = [
+  {
+    id: 'example-button--large',
+    kind: 'Example/Button',
+    story: 'Large',
+    parameters: {
+      args: {
+        label: 'Button',
+        size: 'large',
+      },
+      fileName: './src/stories/Button.stories.jsx',
+      globals: {
+        measureEnabled: false,
+        outline: false,
+      },
+    },
+  },
+  {
+    id: 'example-button--primary',
+    kind: 'Example/Button',
+    story: 'Primary',
+    parameters: {
+      args: {
+        label: 'Button',
+        primary: true,
+      },
+      fileName: './src/stories/Button.stories.jsx',
+      globals: {
+        measureEnabled: false,
+        outline: false,
+      },
+    },
+  },
+  {
+    id: 'example-button--secondary',
+    kind: 'Example/Button',
+    story: 'Secondary',
+    parameters: {
+      args: {
+        label: 'Button',
+      },
+      fileName: './src/stories/Button.stories.jsx',
+      globals: {
+        measureEnabled: false,
+        outline: false,
+      },
+    },
+  },
+  {
+    id: 'example-button--small',
+    kind: 'Example/Button',
+    story: 'Small',
+    parameters: {
+      args: {
+        label: 'Button',
+        size: 'small',
+      },
+      fileName: './src/stories/Button.stories.jsx',
+      globals: {
+        measureEnabled: false,
+        outline: false,
+      },
+    },
+  },
+];
+
+describe('createChromeTarget', () => {
+  describe('.getStorybook', () => {
+    it(
+      'fetches stories from webpack dynamic bundles',
+      async () => {
+        expect(await fetchStorybookFixture('dynamic')).toEqual(storybook);
+      },
+      DOCKER_TEST_TIMEOUT
+    );
+
+    it(
+      'fetches stories from static bundles',
+      async () => {
+        expect(await fetchStorybookFixture('static')).toEqual(storybook);
+      },
+      DOCKER_TEST_TIMEOUT
+    );
+
+    it(
+      'throws if not configured',
+      async () => {
+        await expect(fetchStorybookFixture('unconfigured')).rejects.toThrow(
+          "Unable to get stories. Try adding `import 'loki/configure-react'` to your .storybook/preview.js file."
+        );
+      },
+      DOCKER_TEST_TIMEOUT
+    );
+
+    it(
+      'throws if not running',
+      async () => {
+        await expect(
+          fetchStorybookUrl('http://localhost:23456')
+        ).rejects.toThrow('Failed fetching stories because the server is down');
+      },
+      DOCKER_TEST_TIMEOUT
+    );
+  });
+});