add more tests!

ui/components/__test__/__snapshots__/discord-button.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DiscordButton /> renders correctly 1`] = `
+<discord-button__Button>
+  <discord-button__ButtonIcon
+    src="/static/discord-logo.svg"
+  />
+   
+  Hello!
+</discord-button__Button>
+`;

ui/components/__test__/__snapshots__/discord-guild-pic.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DiscordGuildPic /> falls-back to a default when things go bad. 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--fallback-color);
+}
+
+<DiscordGuildPic
+  icon="aaa"
+  id="0000"
+  name="Mock"
+>
+  <discord-guild-pic__Fallback
+    serverName="Mock"
+    style={
+      Object {
+        "--fallback-color": "hsl(77,50%,50%)",
+      }
+    }
+  >
+    <StyledComponent
+      forwardedComponent={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "discord-guild-pic__Fallback-d55lwu-0",
+            "isStatic": true,
+            "lastClassName": "c0",
+            "rules": Array [
+              "display:flex;justify-content:center;align-items:center;background-color:var(--fallback-color);",
+            ],
+          },
+          "displayName": "discord-guild-pic__Fallback",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "discord-guild-pic__Fallback-d55lwu-0",
+          "target": "div",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      forwardedRef={null}
+      serverName="Mock"
+      style={
+        Object {
+          "--fallback-color": "hsl(77,50%,50%)",
+        }
+      }
+    >
+      <div
+        className="c0"
+        style={
+          Object {
+            "--fallback-color": "hsl(77,50%,50%)",
+          }
+        }
+      >
+        M
+      </div>
+    </StyledComponent>
+  </discord-guild-pic__Fallback>
+</DiscordGuildPic>
+`;
+
+exports[`<DiscordGuildPic /> renders a snapshot 1`] = `
+<DiscordGuildPic
+  icon="aaa"
+  id="0000"
+  name="Mock"
+>
+  <img
+    onError={[Function]}
+    onLoad={[Function]}
+    src="https://cdn.discordapp.com/icons/0000/aaa.png"
+  />
+</DiscordGuildPic>
+`;

ui/components/__test__/discord-button.test.js

@@ -0,0 +1,14 @@
+/* eslint-env jest */
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow } from 'enzyme'
+import DiscordButton from '../discord-button'
+import 'jest-styled-components'
+
+describe('<DiscordButton />', () => {
+  it('renders correctly', () => {
+    const button = shallow(<DiscordButton>Hello!</DiscordButton>)
+    expect(button).toMatchSnapshot()
+    expect(button.text().trim()).toEqual('Hello!')
+  })
+})

ui/components/__test__/discord-guild-pic.test.js

@@ -0,0 +1,33 @@
+/* eslint-env jest */
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow, mount } from 'enzyme'
+import DiscordGuildPic from '../discord-guild-pic'
+import 'jest-styled-components'
+
+describe('<DiscordGuildPic />', () => {
+  const mockServer = {
+    id: '0000',
+    icon: 'aaa',
+    name: 'Mock'
+  }
+
+  it('renders a snapshot', () => {
+    const pic = mount(<DiscordGuildPic {...mockServer} />)
+    expect(pic).toMatchSnapshot()
+  })
+
+  it('renders a well-formatted guild pic correctly', () => {
+    const pic = shallow(<DiscordGuildPic {...mockServer} />)
+    const expectedSrc = `https://cdn.discordapp.com/icons/${mockServer.id}/${mockServer.icon}.png`
+    expect(pic.find('img').prop('src')).toEqual(expectedSrc)
+  })
+
+  it('falls-back to a default when things go bad.', () => {
+    const pic = mount(<DiscordGuildPic {...mockServer} />)
+    pic.find('img').simulate('error')
+    expect(pic).toMatchSnapshot()
+
+    expect(pic.text()).toEqual(mockServer.name[0])
+  })
+})