Improve function components and tests

Author: ahangarha

lib/generators/templates/component.es6.jsx

@@ -1,12 +1,12 @@
 <%= file_header %>
-function <%= component_name %>(props) {
+const <%= component_name %> = (props) => {
   return (
     <React.Fragment>
 <% attributes.each do |attribute| -%>
       <%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
     </React.Fragment>
-  );
+  )
 }
 
 <% if attributes.size > 0 -%>

lib/generators/templates/component.js.jsx

@@ -1,20 +1,20 @@
-<%= file_header %>var <%= component_name %> = createReactClass({
+<%= file_header %>
+function <%= component_name %>(props) {
+  return (
+    <React.Fragment>
+<% attributes.each do |attribute| -%>
+      <%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
+<% end -%>
+    </React.Fragment>
+  );
+}
+
 <% if attributes.size > 0 -%>
-  propTypes: {
+<%= file_name.camelize %>.propTypes = {
 <% attributes.each_with_index do |attribute, idx| -%>
-    <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
+  <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
 <% end -%>
-  },
+};
 <% end -%>
 
-  render: function() {
-    return (
-      <React.Fragment>
-<% attributes.each do |attribute| -%>
-        <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
-<% end -%>
-      </React.Fragment>
-    );
-  }
-});
 <%= file_footer %>

test/generators/coffee_component_generator_test.rb

@@ -15,7 +15,7 @@ def filename
       run_generator  %w(GeneratedComponent name)
 
       es6 = File.read(File.join(destination_root, 'app/javascript/components/GeneratedComponent.js'))
-      assert_match(%r{extends React.Component}, es6)
+      assert_match(/const GeneratedComponent = \(props\) => {/, es6)
     end
   else
     def filename

test/generators/component_generator_test.rb

@@ -78,6 +78,6 @@ def filename_with_subfolder
     run_generator %w(GeneratedComponent name:string address:shape)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_working_jsx), jsx)
+    assert_match(Regexp.new(expected_working_jsx_in_function_component), jsx)
   end
 end

test/generators/es6_component_generator_test.rb

@@ -24,7 +24,7 @@ def component_name
   test 'uses es6 syntax' do
     run_generator %w(GeneratedComponent name --es6)
 
-    assert_file filename, /^function\s#{component_name}\(\) {/
+    assert_file filename, /const #{component_name} = \(props\) => {/
   end
 
   test 'assigns defaultProps after function definintion' do
@@ -37,6 +37,6 @@ def component_name
     run_generator %w(GeneratedComponent name:string address:shape --es6)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_working_jsx), jsx)
+    assert_match(Regexp.new(expected_working_jsx_in_function_component), jsx)
   end
 end

test/test_helper.rb

@@ -85,6 +85,10 @@ def expected_working_jsx
   /\.createElement\(\s*\S*\.Fragment,\s*null,\s*\"Name:\s*\",\s*this\.props\.name,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
 end
 
+def expected_working_jsx_in_function_component
+  /\.createElement\(\s*\S*\.Fragment,\s*null,\s*\"Name:\s*\",\s*props\.name,\s*\"Address:\s*\",\s*props\.address\s*\)/x
+end
+
 module ParamsHelper
   # Normalize params for Rails 5.1+
   def query_params(params)