test(my-joy-beta): generate visual snapshots

.travis.yml

@@ -3,13 +3,3 @@ node_js:
   - '8'
 script:
   - npm run test-ci
-# addons:
-#   chrome: stable
-# before_install:
-#   - # start your web application and listen on `127.0.0.1`
-#   - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
-# script:
-#   - npm run test-ci
-  # - eslint-gh-status-reporter
-  # - stylelint-gh-status-reporter
-  # - lighthouse-gh-status-reporter --chrome-port=9222 --chrome-hostname=localhost

bundle/package.json

@@ -5,6 +5,10 @@
   "license": "MPL-2.0",
   "scripts": {
     "start": "NODE_ENV=development PORT=3069 REACT_APP_GQL_PORT=3069 REACT_APP_GQL_PROTOCOL=http node -r ./_env.js index.js",
+    "lint-ci": "echo 0",
+    "lint": "echo 0",
+    "test-ci": "echo 0",
+    "test": "echo 0",
     "prepublish": "echo 0"
   },
   "dependencies": {

package.json

@@ -12,12 +12,12 @@
     "lint-docs": "./scripts/quality-docs",
     "lint-ci:root": "eslint . --ext .js --ext .md",
     "lint:root": "eslint . --fix --ext .js --ext .md",
-    "lint-ci:packages": "lerna run lint-ci --stream",
+    "lint-ci:packages": "lerna run lint-ci  --parallel --stream",
-    "lint:packages": "lerna run lint --stream",
+    "lint:packages": "lerna run lint  --parallel --stream",
     "lint-ci": "redrun -s lint-ci:*",
     "lint": "redrun -s lint:*",
     "test-ci": "CI=1 lerna run test-ci --stream",
-    "test": "lerna run test",
+    "test": "lerna run test --parallel --stream",
     "clean": "lerna clean --yes",
     "dev": "lerna run dev --parallel --stream",
     "commitmsg": "commitlint -e",

packages/my-joy-beta/package.json

@@ -11,8 +11,8 @@
     "build": "NODE_ENV=production joyent-react-scripts build",
     "lint-ci": "eslint . --ext .js --ext .md",
     "lint": "eslint . --fix --ext .js --ext .md",
+    "test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
-    "test-ci": "npm run test",
     "prepublish": "echo 0"
   },
   "dependencies": {
@@ -62,8 +62,10 @@
     "babel-preset-joyent-portal": "^6.0.1",
     "eslint": "^4.13.1",
     "eslint-config-joyent-portal": "^3.2.0",
+    "jest-image-snapshot": "^2.3.0",
     "jest-styled-components": "^4.9.0",
     "joyent-react-scripts": "^7.2.0",
+    "react-screenshot-renderer": "^1.1.0",
     "react-test-renderer": "^16.2.0",
     "redrun": "^5.10.0"
   }

packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-removing-1-snap.png

@@ -0,0 +1 @@
+[object Object]

packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png

@@ -0,0 +1 @@
+[object Object]

packages/my-joy-beta/src/components/__tests__/cns.ui.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { Header, HostnamesHeader, AddServiceForm, Hostname } from '../cns';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Header/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Header />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<HostnamesHeader />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <HostnamesHeader />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<AddServiceForm />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <AddServiceForm />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<AddServiceForm pristine />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <AddServiceForm pristine />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Hostname />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Hostname values={[]} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Hostname values />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Hostname values={['111', '111']} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/__tests__/firewall.spec.js

@@ -9,6 +9,7 @@ import Firewall, {
   ToggleFirewallForm,
   ToggleInactiveForm
 } from '../firewall';
+
 import Theme from '@mocks/theme';
 
 const rules = [

packages/my-joy-beta/src/components/__tests__/firewall.ui.js

@@ -0,0 +1,257 @@
+import React, { Fragment } from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import Firewall, {
+  Rules,
+  TagRules,
+  DefaultRules,
+  ToggleFirewallForm,
+  ToggleInactiveForm
+} from '../firewall';
+
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+const rules = [
+  {
+    id: '3473327e-6d0c-4747-97c5-ced1260a7e42',
+    enabled: true,
+    rule_str: 'FROM any TO all vms ALLOW icmp TYPE 8 CODE 0',
+    rule_obj: {
+      from: [['wildcard', 'any']],
+      to: [['wildcard', 'vmall']],
+      action: 'allow',
+      protocol: {
+        name: 'icmp',
+        targets: ['8:0']
+      },
+      isWildcard: true,
+      tags: []
+    },
+    global: true,
+    description: null
+  },
+  {
+    id: '24d55d2f-12ba-4935-9de9-ac305b8a40a5',
+    enabled: true,
+    rule_str: 'FROM any TO all vms ALLOW icmp6 TYPE all',
+    rule_obj: {
+      from: [['wildcard', 'any']],
+      to: [['wildcard', 'vmall']],
+      action: 'allow',
+      protocol: {
+        name: 'icmp6',
+        targets: ['all']
+      },
+      isWildcard: true,
+      tags: []
+    },
+    global: true,
+    description: 'allow all ICMPv6 types'
+  },
+  {
+    id: '4bd8b2e2-981b-474b-9b8b-0b53fecb4b71',
+    enabled: false,
+    rule_str: 'FROM all vms TO all vms ALLOW tcp PORT all',
+    rule_obj: {
+      from: [['wildcard', 'vmall']],
+      to: [['wildcard', 'vmall']],
+      action: 'allow',
+      protocol: {
+        name: 'tcp',
+        targets: ['all']
+      },
+      isWildcard: true,
+      tags: []
+    },
+    global: null,
+    description: null
+  },
+  {
+    id: 'af549024-b3b1-43bf-8a66-49c2b2dc5640',
+    enabled: false,
+    rule_str: 'FROM all vms TO all vms ALLOW tcp PORT all',
+    rule_obj: {
+      from: [['wildcard', 'vmall']],
+      to: [['wildcard', 'vmall']],
+      action: 'allow',
+      protocol: {
+        name: 'tcp',
+        targets: ['all']
+      },
+      isWildcard: true,
+      tags: []
+    },
+    global: null,
+    description: null
+  },
+  {
+    id: '9e5a152a-582b-4525-909e-f9c55deb7f03',
+    enabled: false,
+    rule_str: 'FROM any TO tag "wat" ALLOW tcp PORT all',
+    rule_obj: {
+      from: [['wildcard', 'any']],
+      to: [['tag', 'wat']],
+      action: 'allow',
+      protocol: {
+        name: 'tcp',
+        targets: ['all']
+      },
+      isWildcard: false,
+      tags: ['wat']
+    },
+    global: null,
+    description: null
+  }
+];
+
+it('<Rules/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Rules />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Rules rules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Rules rules={rules} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<DefaultRules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <DefaultRules />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<DefaultRules rules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <DefaultRules rules={rules} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<TagRules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <TagRules />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<TagRules rules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <TagRules rules={rules} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<ToggleFirewallForm />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <ToggleFirewallForm />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<ToggleFirewallForm submitting />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <ToggleFirewallForm submitting />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<ToggleInactiveForm />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <ToggleInactiveForm />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Firewall />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Firewall />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Firewall defaultRules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Fragment>
+          <Firewall
+            defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
+            enabled
+          />
+          <Firewall
+            defaultRules={rules.filter(({ rule_obj }) => !rule_obj.tags.length)}
+          />
+        </Fragment>
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Firewall tagRules />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Fragment>
+          <Firewall
+            tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
+            enabled
+          />
+          <Firewall
+            tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
+          />
+        </Fragment>
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Firewall enabled />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Firewall enabled />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/__tests__/key-value.ui.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { KeyValue } from '../key-value';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<KeyValue />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue expanded={false} />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue expanded={false} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue input="input" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue input="input" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue input="textarea" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue input="textarea" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue type="tag" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue type="tag" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue method="add" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue method="add" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue method="edit" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <KeyValue method="edit" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue removing />', async () => {
+  expect(
+    renderer.create(
+      <Theme ss>
+        <KeyValue removing />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<KeyValue submitting />', async () => {
+  expect(
+    renderer.create(
+      <Theme ss>
+        <KeyValue submitting />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/__tests__/network.spec.js

@@ -1,5 +1,3 @@
-/* eslint-disable camelcase */
-
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

packages/my-joy-beta/src/components/__tests__/network.ui.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { Collapsed, Expanded } from '../network';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Network />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Network {...network} />', async () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Network {...network} />', async () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Network {...network} public />', async () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: false,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false,
+    public: true
+  };
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Network {...network} fabric />', async () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: true,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: false
+  };
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Network {...network} infoExpanded />', async () => {
+  const network = {
+    id: '1',
+    name: 'name',
+    description: 'description',
+    fabric: true,
+    subnet: '255.255.255.0',
+    provision_start_ip: '192.168.1.2',
+    provision_end_ip: '192.168.1.253',
+    selected: false,
+    infoExpanded: true
+  };
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Expanded {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Collapsed {...network} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/__tests__/tags.ui.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import Tag, { AddForm, EditForm } from '../tags';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('renders <AddForm /> without throwing', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <AddForm />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('renders <EditForm /> without throwing', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <EditForm />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('renders <Tag /> without throwing', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Tag />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('renders <Tag name value/> without throwing', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Tag name="name" value="value" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/__tests__/affinity.ui.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { Rule, Header } from '../affinity';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Rule/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Rule />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Rule/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Rule
+          rule={{
+            'rule-instance-name': 'test',
+            'rule-instance-conditional': 'must',
+            'rule-instance-placement': 'same',
+            'rule-instance-tag-value-pattern': 'equalling',
+            'rule-instance-name-pattern': 'equalling',
+            'rule-instance-tag-value': '',
+            'rule-instance-tag-key': '',
+            'rule-type': 'name'
+          }}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Header />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Header
+          rule={{
+            'rule-instance-name': 'test',
+            'rule-instance-conditional': 'must',
+            'rule-instance-placement': 'same',
+            'rule-instance-tag-value-pattern': 'equalling',
+            'rule-instance-name-pattern': 'equalling',
+            'rule-instance-tag-value': '',
+            'rule-instance-tag-key': '',
+            'rule-type': 'name'
+          }}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Header tag/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Header
+          rule={{
+            'rule-instance-name': 'test',
+            'rule-instance-conditional': 'must',
+            'rule-instance-placement': 'same',
+            'rule-instance-tag-value-pattern': 'equalling',
+            'rule-instance-name-pattern': 'equalling',
+            'rule-instance-tag-value': 'one',
+            'rule-instance-tag-key': 'two',
+            'rule-type': 'tag'
+          }}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/__tests__/images.ui.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import Images from '../image';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Images />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images expanded />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images expanded />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images Images="test" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images Images="[]" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images pristine={false} />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images pristine={false} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images images=[{name: stuff, imageName: stuff}] />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images images={[{ name: 'stuff', imageName: 'stuff' }]} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images loading />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images loading />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Images isVmSelected />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Images isVmSelected />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/__tests__/name.ui.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import Name from '../name';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Name />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Name />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Name expanded />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Name expanded />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Name name="test" />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Name name="test" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Name pristine={false} />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Name pristine={false} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/__tests__/package.ui.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { Filters, Packages, Package, Overview } from '../package';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Overview hasVms/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Overview
+          name="test"
+          price="1"
+          memory="1"
+          vcpus="1"
+          hasVms
+          ssd
+          disk="1"
+          onCancel={() => {}}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Overview />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Overview
+          name="test"
+          price="1"
+          memory="1"
+          vcpus="1"
+          disk="1"
+          onCancel={() => {}}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Package />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Package
+          name="test"
+          price="1"
+          memory="1"
+          vcpus="1"
+          disk="1"
+          onCancel={() => {}}
+        />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Filters />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Filters />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Packages expanded />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Packages expanded />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Packages pristine={false} />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Packages pristine={false} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Packages packages=[{name: stuff, imageName: stuff}] />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Packages packages={[{ name: 'stuff', imageName: 'stuff' }]} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Packages loading />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Packages loading />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Packages isVmSelected />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Packages isVmSelected />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/__tests__/title.ui.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import renderer from 'react-test-renderer';
+import screenshot from 'react-screenshot-renderer';
+
+import { NameIcon } from 'joyent-ui-toolkit';
+
+import Title from '../title';
+import Theme from '@mocks/theme';
+
+expect.extend({
+  toMatchImageSnapshot
+});
+
+it('<Title />', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Title />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Title label="Test"/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Title label="Test" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Title icon="NameIcon"/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Title icon={<NameIcon />} />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});
+
+it('<Title icon="Test" label="Instance name"/>', async () => {
+  expect(
+    await screenshot(
+      <Theme ss>
+        <Title icon={<NameIcon />} label="Instance name" />
+      </Theme>
+    )
+  ).toMatchImageSnapshot();
+});