diff --git a/frontend/test/components/TopicCard/index.spec.js b/frontend/test/components/TopicCard/index.spec.js
new file mode 100644
index 00000000..2cd30c19
--- /dev/null
+++ b/frontend/test/components/TopicCard/index.spec.js
@@ -0,0 +1,108 @@
+/* global describe, it */
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+import ReactTopicCard from '../../../src/components/TopicCard/index.js'
+import Links from '../../../src/components/TopicCard/Links.js'
+import Title from '../../../src/components/TopicCard/Title.js'
+import Desc from '../../../src/components/TopicCard/Desc.js'
+import Attachments from '../../../src/components/TopicCard/Attachments.js'
+import Info from '../../../src/components/TopicCard/Info.js'
+
+const currentUser = { current: 'user' }
+
+function render(props) {
+  return shallow(<ReactTopicCard {...props} currentUser={currentUser} />)
+}
+
+function mockTopic({ hasAttachment, canEdit, isOwner }) {
+  const get = sinon.stub()
+  if (hasAttachment) {
+    get.withArgs('link').returns('https://www.google.ca')
+  } else {
+    get.withArgs('link').returns('')
+  }
+
+  const authorizeToEdit = sinon.stub()
+  authorizeToEdit.withArgs(currentUser).returns(canEdit)
+
+  const authorizePermissionChange = sinon.stub()
+  authorizePermissionChange.withArgs(currentUser).returns(isOwner)
+
+  return {
+    get,
+    authorizeToEdit,
+    authorizePermissionChange
+  }
+}
+
+function assertCssClassPresent({ mockTopicParam, mockTopicValue, cssClass }) {
+  const topic = mockTopic({ [mockTopicParam]: mockTopicValue })
+  const wrapper = render({ openTopic: topic })
+  it(`correctly shows ${cssClass} css class`, function() {
+    expect(wrapper.find(`.${cssClass}`).length).to.equal(1)
+  })
+}
+
+describe('TopicCard', function() {
+  const wrapper = render({ openTopic: null })
+  describe('topic is null', function() {
+    it('returns null', function() {
+      expect(wrapper.type()).to.be.null
+    })
+  })
+
+  describe('has attachment', function() {
+    assertCssClassPresent({ mockTopicParam: 'hasAttachment', mockTopicValue: true, cssClass: 'hasAttachment' })
+  })
+
+  describe('authorized to edit', function() {
+    assertCssClassPresent({ mockTopicParam: 'canEdit', mockTopicValue: true, cssClass: 'canEdit' })
+  })
+
+  describe('not authorized to edit', function() {
+    assertCssClassPresent({ mockTopicParam: 'canEdit', mockTopicValue: false, cssClass: 'cannotEdit' })
+  })
+
+  describe('topic is owned by current user', function() {
+    assertCssClassPresent({ mockTopicParam: 'isOwner', mockTopicValue: true, cssClass: 'yourTopic' })
+  })
+
+  describe('Draggable wrapper', function() {
+    const wrapper = render({ openTopic: mockTopic({}) })
+    it('handle is metacodeImage', function() {
+      expect(wrapper.props().handle).to.equal('.metacodeImage')
+    })
+    it('default position is 100, 100', function() {
+      expect(wrapper.props().defaultPosition.x).to.equal(100)
+      expect(wrapper.props().defaultPosition.y).to.equal(100)
+    })
+  })
+
+  describe('content', function() {
+    const wrapper = render({ openTopic: mockTopic({}) })
+    const innerDiv = wrapper.find('.CardOnGraph')
+    it('renders a Links component', function() {
+      expect(innerDiv.childAt(0).type()).to.equal(Links)
+    })
+    it('renders a Title component', function() {
+      expect(innerDiv.childAt(1).type()).to.equal(Title)
+    })
+    it('renders a Desc component', function() {
+      expect(innerDiv.childAt(2).type()).to.equal(Desc)
+    })
+    it('renders a Attachments component', function() {
+      expect(innerDiv.childAt(3).type()).to.equal(Attachments)
+    })
+    it('renders a Info component', function() {
+      expect(innerDiv.childAt(4).type()).to.equal(Info)
+    })
+    it('renders a clearfloat div at the end', function() {
+      const div = innerDiv.childAt(5)
+      expect(div.type()).to.equal('div')
+      expect(div.props().className).to.have.string('clearfloat')
+    })
+  })
+})