Provide defaults and make sure we everything is container into a parent element

app/assets/javascripts/user.js.coffee

@@ -12,4 +12,7 @@ class @User
       e.preventDefault()
 
   initTabs: ->
-    new UserTabs(@opts)
+    new UserTabs(
+        parentEl: '.user-profile'
+        action: @opts.action
+      )

app/assets/javascripts/user_tabs.js.coffee

@@ -52,8 +52,15 @@
 class @UserTabs
   actions: ['activity', 'groups', 'contributed', 'projects'],
   defaultAction: 'activity',
+  constructor: (opts) ->
+    {
+      @action = 'activity'
+      @parentEl = $(document)
+    } = opts
+
+    # Make jQuery object if selector is provided
+    @parentEl = $(@parentEl) if typeof @parentEl is 'string'
 
-  constructor: (@opts = {}) ->
     # Store the `location` object, allowing for easier stubbing in tests
     @_location = location
     @loaded = {}
@@ -61,19 +68,18 @@ class @UserTabs
     @bindEvents()
     @tabStateInit()
 
-    action = @opts.action
-    action = @defaultAction if action == 'show'
+    currAction = @defaultAction if @action is 'show'
 
     # Set active tab
-    source = $(".#{action}-tab a").attr('href')
-    @activateTab(action)
+    source = $(".#{currAction}-tab a").attr('href')
+    @activateTab(currAction)
 
   bindEvents: ->
     # Turn off existing event listeners
-    $(document).off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]'
+    @parentEl.off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]'
 
     # Set event listeners
-    $(document).on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown
+    @parentEl.on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown
 
   tabStateInit: ->
     for action in @actions
@@ -88,7 +94,7 @@ class @UserTabs
     @setCurrentAction(action)
 
   activateTab: (action) ->
-    $(".nav-links .#{action}-tab a").tab('show')
+    @parentEl.find(".nav-links .#{action}-tab a").tab('show')
 
   setTab: (source, action) ->
     return if @loaded[action] is true
@@ -108,20 +114,20 @@ class @UserTabs
       url: "#{source}.json"
       success: (data) =>
         tabSelector = 'div#' + action
-        document.querySelector(tabSelector).innerHTML = data.html
+        @parentEl.find(tabSelector).html(data.html)
         @loaded[action] = true
 
   loadActivities: (source) ->
     return if @loaded['activity'] is true
 
-    $calendarWrap = $('.user-calendar')
+    $calendarWrap = @parentEl.find('.user-calendar')
     $calendarWrap.load($calendarWrap.data('href'))
 
     new Activities()
     @loaded['activity'] = true
 
   toggleLoading: (status) ->
-    $('.loading-status .loading').toggle(status)
+    @parentEl.find('.loading-status .loading').toggle(status)
 
   setCurrentAction: (action) ->
     # Remove possible actions from URL

app/views/users/show.html.haml

@@ -8,7 +8,8 @@
 
 = render 'shared/show_aside'
 
-.cover-block
+.user-profile
+  .cover-block
     .cover-controls
       - if @user == current_user
         = link_to profile_path, class: 'btn btn-gray' do
@@ -69,7 +70,7 @@
           = icon('map-marker')
           = @user.location
 
-  %ul.nav-links.center
+    %ul.nav-links.center.user-profile-nav
       %li.activity-tab
         = link_to user_calendar_activities_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
           Activity
@@ -83,7 +84,7 @@
         = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
           Personal projects
 
-%div{ class: container_class }
+  %div{ class: container_class }
     .tab-content
       #activity.tab-pane
         .gray-content-block.white.second-block