diff --git a/frontend/src/components/TopicCard/Permission.js b/frontend/src/components/TopicCard/Permission.js
index 27ebf2a5..8da00f5b 100644
--- a/frontend/src/components/TopicCard/Permission.js
+++ b/frontend/src/components/TopicCard/Permission.js
@@ -15,10 +15,6 @@ class Permission extends Component {
     this.setState({selectingPermission: !this.state.selectingPermission})
   }
 
-  openPermissionSelect = () => {
-    this.setState({selectingPermission: true})
-  }
-
   closePermissionSelect = () => {
     this.setState({selectingPermission: false})
   }
@@ -67,4 +63,5 @@ Permission.propTypes = {
   updateTopic: PropTypes.func
 }
 
+export { Permission } // for testing
 export default onClickOutsideAddon(Permission)
diff --git a/frontend/test/components/TopicCard/Permission.spec.js b/frontend/test/components/TopicCard/Permission.spec.js
new file mode 100644
index 00000000..967e6db1
--- /dev/null
+++ b/frontend/test/components/TopicCard/Permission.spec.js
@@ -0,0 +1,95 @@
+/* global describe, it */
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+import PermissionWrapper, { Permission } from '../../../src/components/TopicCard/Permission.js'
+
+function render(props) {
+  return shallow(<Permission {...props} />)
+}
+
+function sharedAssertions(permission) {
+  describe(permission, function() {
+    const shortname = permission === 'commons' ? 'co'
+      : permission === 'public' ? 'pu'
+      : permission === 'private' ? 'pr'
+      : new Error('invalid permission')
+    const wrapper = render({ permission })
+
+    it('has the correct css classes', function() {
+      expect(wrapper.find(`.${shortname}`).props().className).to.include('linkItem')
+      expect(wrapper.find(`.${shortname}`).props().className).to.include('mapPerm')
+    })
+    it('sets the title', function() {
+      expect(wrapper.find(`.${shortname}`).props().title).to.include(permission)
+    })
+    it('has correct permission select options', function() {
+      expect(wrapper.find('.permissionSelect').find('.commons').length)
+        .to.equal(permission === 'commons' ? 0 : 1)
+      expect(wrapper.find('.permissionSelect').find('.public').length)
+        .to.equal(permission === 'public' ? 0 : 1)
+      expect(wrapper.find('.permissionSelect').find('.private').length)
+        .to.equal(permission === 'private' ? 0 : 1)
+    })
+  })
+}
+
+describe('TopicCard/Permission', function() {
+  sharedAssertions('commons')
+  sharedAssertions('public')
+  sharedAssertions('private')
+
+  describe('not authorizedToEdit', function() {
+    const togglePermissionSelect = sinon.spy()
+    const wrapper = render({
+      permission: 'commons', authorizedToEdit: false, togglePermissionSelect
+    })
+
+    it('hides the permissionSelect div', function() {
+      expect(wrapper.find('.permissionSelect').props().style.display)
+        .to.equal('none')
+    })
+    it("doesn't open the permissionSelect div", function() {
+      wrapper.find('.linkItem').simulate('click')
+      expect(togglePermissionSelect.notCalled).to.equal(true)
+      expect(wrapper.state().selectingPermission).to.equal(false)
+    })
+  })
+
+  describe('authorizedToEdit', function() {
+    const updateTopic = sinon.spy()
+    const wrapper = render({
+      permission: 'commons', authorizedToEdit: true, updateTopic
+    })
+
+    it('opens the permissionSelect div', function() {
+      wrapper.setState({ selectingPermission: false })
+
+      wrapper.find('.linkItem').simulate('click')
+
+      expect(wrapper.state().selectingPermission).to.equal(true)
+    })
+
+    it('updates the topic permissions', function() {
+      wrapper.setState({ selectingPermission: true })
+
+      wrapper.find('.permissionSelect').find('.public').simulate('click', {
+        preventDefault: () => {}
+      })
+
+      expect(wrapper.state().selectingPermission).to.equal(false)
+      expect(updateTopic.calledWith({
+        permission: 'public', defer_to_map_id: null
+      })).to.equal(true)
+    })
+  })
+})
+
+describe('PermissionWrapper', function() {
+  const wrapper = shallow(<PermissionWrapper />)
+  it('wraps Permission component in onclickoutside', function() {
+    expect(wrapper.type()).to.equal(Permission)
+  })
+})
diff --git a/frontend/test/components/TopicCard/Title.spec.js b/frontend/test/components/TopicCard/Title.spec.js
index b2b6e7c1..a9688b4f 100644
--- a/frontend/test/components/TopicCard/Title.spec.js
+++ b/frontend/test/components/TopicCard/Title.spec.js
@@ -21,7 +21,7 @@ function assertParentTitleSpan(wrapper) {
   })
 }
 
-describe('Title', function() {
+describe('TopicCard/Title', function() {
   describe('not authorized to edit', function() {
     const wrapper = render({ authorizedToEdit: false, name })