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

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

test/generators/component_generator_test.rb

@@ -86,6 +86,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

@@ -25,7 +25,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
@@ -38,6 +38,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 # rubocop:disable Layout/LineLength
 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)