Upgrade React, Webpack, and use Jest (#994)

* Upgrade React and Webpack * Replace Karma + Jasmine with Jest * Disable prerendering cause of problems on production
ifmeorg · Sep 22, 2018 · 2bd9943 · 2bd9943
1 parent 2f71912
commit 2bd9943
Show file tree

Hide file tree

Showing 37 changed files with 1,461 additions and 989 deletions.
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -20,7 +20,6 @@ engines:
     exclude_paths:
     - public/javascripts/
     - vendor/assets/javascripts
-    - client/karma.conf.js
     - client/flow/
   fixme:
     enabled: false

diff --git a/app/assets/stylesheets/core/grids.scss b/app/assets/stylesheets/core/grids.scss
@@ -8,7 +8,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  flex-wrap: wrap;
 }
 
 @mixin gridH1() {
@@ -124,6 +123,7 @@
     }
     &SpaceBetween {
       @include gridRow();
+      flex-wrap: wrap;
       justify-content: space-between;
     }
   }

diff --git a/app/controllers/meetings_controller.rb b/app/controllers/meetings_controller.rb
@@ -13,24 +13,25 @@ def show
       meeting_id: @meeting.id,
       user_id: current_user.id
     ).exists?
-
+    @is_group_member = GroupMember.where(
+      group_id: @meeting.group_id,
+      user_id: current_user.id
+    ).exists?
     @is_leader = MeetingMember.where(
       meeting_id: @meeting.id,
       user_id: current_user.id,
       leader: true
     ).exists?
-
     @no_hide_page = false
-    if hide_page(@meeting)
-      redirect_to_path(group_path(@meeting.group_id))
-    else
+    if @is_member
+      @no_hide_page = true
       @comment = Comment.new
       @comments = Comment.where(
         commentable_id: @meeting.id,
         commentable_type: 'meeting'
       ).all.order('created_at DESC')
-
-      @no_hide_page = true
+    elsif !@is_group_member
+      redirect_to_path(groups_path)
     end
   end
   # rubocop:enable MethodLength
@@ -77,7 +78,6 @@ def delete_comment
   def new
     @group_id = params[:group_id]
     not_a_leader(@group_id)
-
     @meeting = Meeting.new
   end
 
@@ -173,8 +173,7 @@ def join
         meeting_id: params[:meeting_id],
         leader: true
       ).all
-      meeting_id = Meeting.where(id: params[:meeting_id]).first.id
-      meeting = Meeting.where(id: params[:meeting_id]).first.name
+      meeting = Meeting.find(params[:meeting_id])
 
       MeetingNotificationsService.handle_members(current_user: current_user,
                                                  meeting: meeting,
@@ -183,7 +182,7 @@ def join
 
       respond_to do |format|
         format.html do
-          redirect_to(meeting_path(meeting_id),
+          redirect_to(meeting_path(params[:meeting_id]),
                       notice: t('meetings.join_success'))
         end
         format.json do
@@ -282,14 +281,5 @@ def meeting_params
     params.require(:meeting).permit(:name, :description, :location, :date,
                                     :time, :maxmembers, :group_id)
   end
-
-  def hide_page(meeting)
-    meeting_obj = Meeting.where(id: meeting.id)
-    meeting_member = MeetingMember.where(
-      meeting_id: meeting.id,
-      user_id: current_user.id
-    )
-    !(meeting_obj.exists? && meeting_member.exists?)
-  end
 end
 # rubocop:enable ClassLength
diff --git a/app/helpers/moods_helper.rb b/app/helpers/moods_helper.rb
@@ -35,12 +35,6 @@ def mood_form_inputs
         label: t('common.form.description'),
         value: @mood.description || nil,
         dark: true
-      },
-      {
-        id: 'submit',
-        type: 'submit',
-        value: t('common.actions.submit'),
-        dark: true
       }
     ]
   end

diff --git a/app/views/allies/index.html.erb b/app/views/allies/index.html.erb
@@ -52,5 +52,7 @@
 <% end %>
 
 <% if @outgoing_ally_requests.empty? && @incoming_ally_requests.empty? && @accepted_allies.count == 0 %>
-  <%= t('allies.index.none') %>
+  <div class="small_margin_top">
+    <%= t('allies.index.none') %>
+  </div>
 <% end %>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
@@ -16,9 +16,7 @@
   <%= paginate @categories %>
 <% else %>
   <%= raw t('categories.index.instructions') %>
-  <div class="actions">
-    <%= button_to t('common.actions.add_all'), premade_categories_path %>
-  </div>
+  <%= button_to t('common.actions.add_all'), premade_categories_path, class: 'small_margin_top buttonDarkS' %>
 
   <div class="spacer"></div>
 

diff --git a/app/views/groups/_info.html.erb b/app/views/groups/_info.html.erb
@@ -0,0 +1,39 @@
+<%= sanitize(local_assigns[:group].description) %>
+<div class="small_margin_top">
+  <%= react_component('Modal', props: {
+    element: "<button class=\"buttonDarkXS groupMembersButton\">#{t('members', count: local_assigns[:group].group_members.count)}</button>",
+    title: t('notifications.members.title'),
+    body: render(partial: '/groups/members', locals: { group: local_assigns[:group] })
+  }) %>
+</div>
+<div class="gridItemBoxDark gridRowSpaceBetween small_margin_top">
+  <div class="gridRowSpaceBetween">
+    <div class="smaller_margin_right"><%= t('common.actions.plural') %>:</div>
+    <%= react_component('StoryActions', props: {
+      dark: true,
+      actions: {
+        join: !local_assigns[:group].members.include?(current_user) ? {
+          name: t('common.actions.join'),
+          link: group_membership_path(group_id: local_assigns[:group].id, id: 'join'),
+          dataMethod: 'post'
+        } : nil,
+        leave: local_assigns[:group].members.include?(current_user) && user_can_leave?(local_assigns[:group]) ? {
+          name: t('common.actions.leave'),
+          link: group_membership_path(group_id: local_assigns[:group].id, id: 'leave'),
+          dataConfirm: t('common.actions.confirm'),
+          dataMethod: 'delete'
+        } : nil,
+        edit: user_can_edit?(local_assigns[:group]) ? {
+          name: t('common.actions.edit'),
+          link: edit_group_path(local_assigns[:group])
+        } : nil,
+        delete: user_can_delete?(local_assigns[:group]) ? {
+          name: t('common.actions.delete'),
+          link: url_for(local_assigns[:group]),
+          dataConfirm: t('common.actions.confirm'),
+          dataMethod: 'delete'
+        } : nil
+      }
+    }) %>
+  </div>
+</div>
diff --git a/app/views/groups/_story_body.html.erb b/app/views/groups/_story_body.html.erb
diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
@@ -29,9 +29,8 @@
               link: url_for(group),
               dataConfirm: t('common.actions.confirm'),
               dataMethod: 'delete'
-            } : nil,
-          },
-          body: render(partial: '/groups/story_body', locals: { group: group })
+            } : nil
+          }
         }) %>
       </div>
     <% end %>
@@ -44,9 +43,9 @@
     <%= t('pages.faq.group_question') %>
   </div>
 
-  <%= raw t('pages.faq.group_answer',{
-    			groups: link_to(t('groups.singular'), groups_path)
-    		}) %>
+  <%= raw t('pages.faq.group_answer', {
+    group: link_to(t('groups.singular'), groups_path)
+  }) %>
 <% end %>
 
 <% if @available_groups.any? %>
@@ -64,8 +63,7 @@
               link: group_membership_path(group_id: group.id, id: 'join'),
               dataMethod: 'post'
             }
-          },
-          body: render(partial: '/groups/story_body', locals: { group: group })
+          }
         }) %>
       </div>
     <% end %>

diff --git a/app/views/groups/show.html.erb b/app/views/groups/show.html.erb
@@ -1,34 +1,6 @@
 <% title @group.name %>
 <% page_new new_meeting_path(group_id: @group.id) %>
-<%= render partial: '/groups/story_body', locals: { group: @group } %>
-<% if user_is_leader_of?(@group) %>
-  <div class="gridItemBoxDark gridRowSpaceBetween small_margin_top">
-    <div class="gridRowSpaceBetween">
-      <div class="smaller_margin_right"><%= t('common.actions.plural') %>:</div>
-      <%= react_component('StoryActions', props: {
-        dark: true,
-        actions: {
-          leave: user_can_leave?(@group) ? {
-            name: t('common.actions.leave'),
-            link: group_membership_path(group_id: @group.id, id: 'leave'),
-            dataConfirm: t('common.actions.confirm'),
-            dataMethod: 'delete'
-          } : nil,
-          edit: user_can_edit?(@group) ? {
-            name: t('common.actions.edit'),
-            link: edit_group_path(@group)
-          } : nil,
-          delete: user_can_delete?(@group) ? {
-            name: t('common.actions.delete'),
-            link: url_for(@group),
-            dataConfirm: t('common.actions.confirm'),
-            dataMethod: 'delete'
-          } : nil
-        }
-      }) %>
-    </div>
-  </div>
-<% end %>
+<%= render partial: '/groups/info', locals: { group: @group } %>
 
 <% if @meetings.present? %>
   <div class="gridTwo small_margin_top">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -50,7 +50,7 @@
 
   <body class="<%= controller_name %> <%= action_name %>">
     <div class="content <%= (user_signed_in? && !static_page?) || secret_share_path? ? 'dashboard' : 'static' %>">
-      <%= react_component('Header', prerender: true, props: header_props) %>
+      <%= react_component('Header', props: header_props) %>
       <%= render partial: 'shared/alerts' %>
       <% if user_signed_in? && !static_page? %>
         <div class="dashboardContent">

diff --git a/app/views/meetings/_story_body.html.erb b/app/views/meetings/_story_body.html.erb
@@ -1,7 +1,3 @@
-<div class="small_margin_bottom">
-  <%= sanitize(meeting.description) %>
-</div>
-
 <div>
   <strong>
     <%= t('common.form.location') %>:
@@ -31,19 +27,3 @@
     <%= get_meeting_members(meeting) %>
   </strong>
 </div>
-<div class="small_margin_top">
-  <%
-    if local_assigns[:show_group]
-      elementText = t('meetings.info.members_of_group_html',
-        count: meeting.members.count,
-        group: link_to(meeting.group.name, meeting.group))
-    else
-      elementText = t('members', count: meeting.members.count)
-    end
-  %>
-  <%= react_component('Modal', prerender: true, props: {
-    element: "<button class=\"buttonDarkXS meetingMembersButton\">#{elementText}</button>",
-    title: t('notifications.members.title'),
-    body: render(partial: '/groups/members', locals: { group: meeting })
-  }) %>
-</div>
diff --git a/app/views/meetings/show.html.erb b/app/views/meetings/show.html.erb
@@ -1,13 +1,27 @@
 <% title @meeting.name %>
+<div class="small_margin_bottom">
+  <%= sanitize(@meeting.description) %>
+</div>
 <%= render partial: '/meetings/story_body', locals: { meeting: @meeting } %>
+<div class="small_margin_top">
+  <%= react_component('Modal', props: {
+    element: "<button class=\"buttonDarkXS meetingMembersButton\">#{t('members', count: @meeting.members.count)}</button>",
+    title: t('notifications.members.title'),
+    body: render(partial: '/groups/members', locals: { group: @meeting })
+  }) %>
+</div>
 <% if user_is_leader_of?(@meeting) %>
   <div class="gridItemBoxDark gridRowSpaceBetween small_margin_top">
     <div class="gridRowSpaceBetween">
       <div class="smaller_margin_right"><%= t('common.actions.plural') %>:</div>
       <%= react_component('StoryActions', props: {
         dark: true,
         actions: {
-          delete: @meeting.leaders.include?(current_user) && {
+          edit: {
+            name: t('common.actions.edit'),
+            link: edit_meeting_path(@meeting)
+          },
+          delete: {
             name: t('common.actions.delete'),
             link: url_for(@meeting),
             dataConfirm: t('common.actions.confirm'),

diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
@@ -16,7 +16,7 @@
   <%= paginate @moods %>
 <% else %>
   <%= raw t('moods.index.instructions') %>
-  <%= button_to t('common.actions.add_all'), premade_moods_path %>
+  <%= button_to t('common.actions.add_all'), premade_moods_path, class: 'small_margin_top buttonDarkS' %>
 
   <div class="spacer"></div>
 

diff --git a/app/views/strategies/index.html.erb b/app/views/strategies/index.html.erb
@@ -17,9 +17,7 @@
   <%= paginate @strategies %>
 <% else %>
   <%= raw t('strategies.index.instructions') %>
-  <div class="actions">
-    <%= button_to t('common.actions.add'), premade_strategies_path %>
-  </div>
+  <%= button_to t('common.actions.add'), premade_strategies_path, class: 'small_margin_top buttonDarkS' %>
 
   <div class="spacer"></div>
 

diff --git a/client/.eslintignore b/client/.eslintignore
@@ -1,5 +1,4 @@
 flow/
 flow-typed/
 default.js
-karma.conf.js
 translations.js
diff --git a/client/.eslintrc b/client/.eslintrc
@@ -1,10 +1,10 @@
 {
-  "plugins": ["jasmine", "flowtype"],
+  "plugins": ["flowtype", "jest", "react"],
   "extends": ["airbnb", "plugin:flowtype/recommended"],
   "parser": "babel-eslint",
   "env": {
     "browser": true,
-    "jasmine": true
+    "jest/globals": true
   },
   "root": true,
   "rules": {

diff --git a/client/.flowconfig b/client/.flowconfig
@@ -2,7 +2,6 @@
 .*/__tests__/.*
 .*/node_modules/draft-js/.*
 .*/node_modules/enzyme-matchers/.*
-.*/node_modules/jasmine-enzyme/.*
 .*/node_modules/radium/.*
 
 [include]

diff --git a/client/app/components/Checkbox/__tests__/CheckboxGroup.spec.jsx b/client/app/components/Checkbox/__tests__/CheckboxGroup.spec.jsx
@@ -14,7 +14,7 @@ function messaging(ids) {
 
 describe('CheckboxGroup', () => {
   beforeEach(() => {
-    spyOn(window, 'alert');
+    jest.spyOn(window, 'alert');
   });
 
   describe('when there is one checkbox', () => {

diff --git a/client/app/components/Input/__tests__/InputCheckbox.spec.jsx b/client/app/components/Input/__tests__/InputCheckbox.spec.jsx
@@ -15,7 +15,7 @@ const someEvent = (checkbox) => {
 
 describe('InputCheckbox', () => {
   beforeEach(() => {
-    spyOn(window, 'alert');
+    jest.spyOn(window, 'alert');
   });
 
   describe('has no uncheckedValue prop', () => {

diff --git a/client/app/components/Input/__tests__/InputCheckboxGroup.spec.jsx b/client/app/components/Input/__tests__/InputCheckboxGroup.spec.jsx
@@ -31,7 +31,7 @@ const checkboxes = [
 
 describe('InputCheckboxGroup', () => {
   beforeEach(() => {
-    spyOn(window, 'alert');
+    jest.spyOn(window, 'alert');
   });
 
   describe('has no required prop', () => {