Replacing Jasmine with Jest (#597)

* Replacing Jasmine with Jest

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "jest": true
+  },
+  "extends": [
+    "airbnb",
+    "prettier"
+  ],
+  "globals": {
+    "App": true,
+    "document": true,
+    "localStorage": true,
+    "window": true,
+    "navigator": true,
+    "fetch": true
+  },
+  "parser": "babel-eslint"
+}

Brewfile

@@ -1,6 +1,3 @@
-cask "phantomjs"
-
 brew "graphviz"
 brew "node@12"
 brew "postgresql"
-brew "yarn"

Gemfile

@@ -75,8 +75,6 @@ group :development, :test do
   gem "dotenv-rails"
   gem "factory_bot_rails"
   gem "faker"
-  gem "jasmine", "> 2.0"
-  gem "jasmine-jquery-rails"
   gem "rspec-rails"
   gem "rubocop", require: false
   gem "rubocop-rails", require: false

Gemfile.lock

@@ -208,13 +208,6 @@ GEM
       foundation_emails (~> 2)
       nokogiri
     interactor (3.1.0)
-    jasmine (3.5.1)
-      jasmine-core (~> 3.5.0)
-      phantomjs
-      rack (>= 1.2.1)
-      rake
-    jasmine-core (3.5.0)
-    jasmine-jquery-rails (2.0.3)
     jmespath (1.4.0)
     kaminari (1.2.1)
       activesupport (>= 4.1.0)
@@ -268,7 +261,6 @@ GEM
     parser (2.7.1.3)
       ast (~> 2.4.0)
     pg (1.2.3)
-    phantomjs (2.1.1.0)
     premailer (1.11.1)
       addressable
       css_parser (>= 1.6.0)
@@ -514,8 +506,6 @@ DEPENDENCIES
   image_processing
   inky-rb
   interactor
-  jasmine (> 2.0)
-  jasmine-jquery-rails
   kaminari
   launchy
   letter_opener

README.md

@@ -47,9 +47,6 @@ It's based on Rails 6 and Ruby 2.7
 ## Testing Gems
 
 * [Capybara](https://github.com/jnicklas/capybara) for integration testing
-* [Jasmine](http://jasmine.github.io/) for unit testing JavaScript code
-* [Jasmine jQuery](https://github.com/velesin/jasmine-jquery) for jQuery matchers and
-  fixtures in Jasmine
 * [Factory Bot](https://github.com/thoughtbot/factory_bot_rails) for test data
 * [RSpec](https://github.com/rspec/rspec) for unit testing
 * [Shoulda Matchers](http://github.com/thoughtbot/shoulda-matchers) for common RSpec matchers

app/javascript/packs/application.js

@@ -1,24 +1,12 @@
 /* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
-
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
+import User from "../classes/user"
 
 require("jquery")
 require("@rails/ujs").start()
 
-import User from "../classes/user"
+window.App = {}
+
+App.currentUserData = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data-current-user'))
 
 if (App.currentUserData) {
   App.currentUser = new User(App.currentUserData);

app/javascript/packs/hello_world.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const HelloWorld = ({ name }) => (
+  <h2>
+    Hello, 
+    {name}
+    !
+  </h2>
+)
+
+HelloWorld.defaultProps = { name: "World"}
+
+HelloWorld.propTypes = { name: PropTypes.string }
+
+document.addEventListener("DOMContentLoaded", () => {
+  ReactDOM.render(
+    <HelloWorld />, document.getElementById("hello")
+  )
+})
+
+export default HelloWorld

app/views/layouts/application.html.slim

@@ -12,11 +12,9 @@ html class="no-js" lang="en"
 
     = stylesheet_link_tag :application
 
-    = javascript_tag "window.App = {}"
-
     == analytics_init if GoogleAnalytics.valid_tracker?
 
-  body
+  body data-current-user="#{current_user.to_json}"
     = render "navigation"
     = render "messages"
 
@@ -25,8 +23,5 @@ html class="no-js" lang="en"
 
     = render "footer"
 
-    javascript:
-      App.currentUserData = #{{current_user.to_json}};
-
     = javascript_pack_tag :application
     = javascript_include_tag :application

app/views/pages/home.html.slim

@@ -1,4 +1,5 @@
 .grid-x
   .cell
-    h2
-      = title("Home")
+    #hello
+
+= javascript_pack_tag "hello_world"

bin/setup

@@ -21,6 +21,9 @@ rm -f .bundle/config
 bundle check --path .bundle > /dev/null 2>&1 ||
   bundle install --path=.bundle $BUNDLER_ARGS
 
+# Install yarn globally in current Nodejs installation
+npm install -g yarn
+
 # Set up node.js modules
 bin/yarn install
 

bin/test

@@ -2,6 +2,7 @@
 
 set -e
 
-bin/rspec spec
-bin/rake jasmine:ci
 bin/quality
+
+bin/rspec spec
+yarn test --passWithNoTests

config/initializers/secure_headers.rb

@@ -1,4 +1,10 @@
 # Default settings
 # For more details see: https://github.com/github/secure_headers#configuration
 
-SecureHeaders::Configuration.default
+SecureHeaders::Configuration.default do |config|
+  config.csp = {
+    default_src: %w('self'),
+    script_src: %w('self' 'unsafe-inline'),
+    style_src: %w('self')
+  }
+end

package.json

@@ -10,6 +10,36 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.1.0",
+    "babel-preset-es2015": "^6.24.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-import": "^0.13.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.3",
+    "jest": "^26.1.0",
     "webpack-dev-server": "^3.11.0"
-  }
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint --ext .js,.jsx app/javascript"
+  },
+  "jest": {
+    "roots": [
+      "spec/javascript"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "app/javascript"
+    ],
+    "setupFilesAfterEnv": [
+      "./spec/javascript/setupTests.js"
+    ]
+  },
+  "license": "MIT"
 }

spec/javascript/hello_world.spec.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import HelloWorld from 'packs/hello_world'
+
+describe('HelloWorld component', () => {
+  describe('when no name is given', () => {
+    it('render Hello, World!', () => {
+      const wrapper = shallow(<HelloWorld />);
+      expect(wrapper.text()).toBe('Hello, World!')
+    })
+  })
+
+  describe('when a name is given as a prop', () => {
+    it('render Hello, David!', () => {
+      const wrapper = shallow(<HelloWorld name='David' />);
+      expect(wrapper.text()).toBe('Hello, David!')
+    })
+  })
+})

spec/javascript/setupTests.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import EnzymeAdapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new EnzymeAdapter() })