Setup Rspec and Simplecov for Rails project on Docker

Jose Castro — Mon, 25 Apr 2022 03:08:29 +0000

Rspec is a testing software for Ruby on Rails as a alternative to Minitest
Simplecov is a code coverage analysis tool for Ruby

Fot this example Jiffy is the name of our project

Requirements

Git (https://git-scm.com/).
Docker (https://www.docker.com/get-started).
docker-compose (https://docs.docker.com/compose/).
A rails project.

Step 1: Clone Repo

# Clone git repo
git clone git@github.com:brayvasq/jiffy.git

# Move to the repo directory
cd jiffy/

Step 2: Add and install gems

Add rspec and simplecov gems on test environment

# Gemfile
group :test do
  gem 'rspec-rails', '~> 4.1.0'
  gem 'simplecov', require: false
end

And rebuild our custom image again.

docker-compose build web

Generate boilerplate config files to rspec docker-compose exec web rails generate rspec:install

# Run container in background
docker-compose up -d

# Install basic config files to rspec
docker-compose exec web rails generate rspec:install

Now we can run tests:

# Run tests
docker-compose exec web rspec spec

Step 3: Setup simplecov

When installing simplecov gem, coverage folder is created. We can add it to the .gitignore

docker-compose exec web echo "coverage" >> .gitignore

Initialiaze simplecov. Add the following lines in the first two lines of spec_helper file

# spec/spec_helper
require 'simplecov'
SimpleCov.start 'rails'

Example output. Run tests and then:

# Run tests
docker-compose exec web rspec spec

# Open coverage output
open coverage/index.html

Or open manually coverage/index.html

Note: This guide can be used as a base for any gem

Final

Any questions or comments are welcome, I'll share more content in following posts.

Thanks for reading!

Setup linter for Ruby on Rails and React using VS Code Devcontainers.

Jose Castro — Tue, 01 Mar 2022 15:59:48 +0000

This guide will show how to setup ESlint, Prettier and Airbnb on ReactJS, and Rubocop on Rails.

For this example Jiffy is the name of our project

Requirements

Git (https://git-scm.com/).
Docker (https://www.docker.com/get-started).
docker-compose (https://docs.docker.com/compose/).
A rails project.
Visual Studio Code

Before installing the ESlints, we need to setup DevContainer on VSC:

Step 1: Create `.devcontainer` folder

Step 2: Create `devcontainer.json` and `Dockerfile` inside `.devcontainer`

devcontainer.json has the ESlint config as the port and Dockerfile path.

{
  "name": "Ruby Development",
  "dockerFile": "Dockerfile",
  "appPort": 9001,
  "extensions": [
    "rebornix.Ruby",
    "castwide.solargraph",
    "kaiwood.endwise",
    "misogi.ruby-rubocop",
    "groksrc.ruby",
    "hoovercj.ruby-linter",
    "miguel-savignano.ruby-symbols",
    "wingrunr21.vscode-ruby"
  ],
  "settings": {
    "[ruby]": {
      "editor.insertSpaces": true,
      "editor.tabSize": 2
    },
    "solargraph.commandPath": "/usr/local/bundle/bin/solargraph",
    "solargraph.bundlerPath": "/usr/local/bin/bundle",
    "ruby.rubocop.executePath": "/usr/local/bundle/bin/",
    "ruby.rubocop.onSave": true,
    "ruby.rubocop.configFilePath": "/workspaces/jiffy/.rubocop.yml",
  },
  "postCreateCommand": "bundle install"
 }

Dockerfile file has the commands to install libraries, gems and programs we need:

FROM ruby:2.7

ARG USERNAME=vscode

RUN apt-get update -yqq && \
    apt-get install curl && \
    curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -y \
    nodejs

RUN gem install rubocop:'~> 1.7' rubocop-rails:'~>2.9' solargraph:'~>0.40'

Step 3: Run DevContainer

Opening the VSC command line we have some options to run it:

VSC open the devcontainer and gives us the rebuild image option (when it's needed)

Then we can work with Docker Image command line:

Note:

name: Defines the name for the development environment.
dockerFile: Points to the location of the Dockerfile that will be used to launch the container. This is the same file that was listed above in the Dockerfile examples.
appPort: Sets the port number that the container will run on. VS Code uses this port to connect and communicate with the container when it is launched.
extensions: Defines a list of extensions to be installed into the container. These can be individual extensions or extension packs. These are installed into the development environment on top of what has already been installed on the user’s local system.
settings: Defines the settings for the extensions and the code editor. Similarly, these settings are applied to the development environment in addition to what the user has defined in their local setup.
postCreateCommand: Specifies a command or set of commands that are run after the container is up and running.

Setup Ruby, Rails and Rspec with Rubocop gem:

Step 1: Clone Repo

# Clone git repo
git clone git@github.com:brayvasq/jiffy.git

# Move to the repo directory
cd jiffy/

Step 2: Add Rubocop gem

We add the stable version into the :development and :test environment.

# Gemfile
group :development, :test do
  # Static code analyzer
  gem 'rubocop', '~> 1.9', require: false
end

Step 3: Open DevContainer

Step 4: Quickstart

# Run into the Docker container.
rubocop

We can see the offenses, like this one:

Rakefile:4:18: C: [Correctable] Style/StringLiterals: Prefer single-quoted strings when you don't need string interpolation or special symbols.
require_relative "config/application"

Note: If you can run the auto-correctable task of rubocop

rubocop --auto-correct-all

We can see the offenses in the code:

Set up React JS with ESLint, Prettier, and Airbnb:

Step 1: Open DevContainer

Step 2: Install ESlint

# Run into the Docker container.
npm install eslint --save-dev

Note: To install ESlint on a specific project, we run —save-dev command

Step 3: Initialize

# Run into the Docker container.
npx eslint --init

We see a few questions:

- How would you like to use ESLint? To check syntax, find problems, and enforce code style
- What type of modules does your project use? JavaScript modules (import/export)
- Which framework does your project use? React
- Does your project use TypeScript? No
- Where does your code run? Browser
- How would you like to define a style for your project? Use a popular style guide
- Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
- What format do you want your config file to be in? JSON

* In this step eslint will check if you have any missing dependencies
    - Would you like to install them now with npm? Yes

We can see as a result the .eslintrc.json file in the root of the directory.

Step 4: Override Airbnb rule by adding to rules in .eslintrc.json:

// .eslintrc.json
"rules": {
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]}
]}

Step 5: Install Prettier (optional)

In Visual Studio Code go to View -> Extensions.
Search for prettier code formatter
Click Install

Now go back to the terminal and install the following packages:

# Run into the Docker container.
npm install eslint --save-dev
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Now update “extends” in your .eslintrc file as follows:

"extends": [ "airbnb", "plugin:prettier/recommended" ]

Now we can see the offenses!

Final

Any questions or comments are welcome, I'll share more content in following posts.

Thanks for reading!

DEV Community: Jose Castro

Setup Rspec and Simplecov for Rails project on Docker

Requirements

Step 1: Clone Repo

Step 2: Add and install gems

Step 3: Setup simplecov

Final

Setup linter for Ruby on Rails and React using VS Code Devcontainers.

This guide will show how to setup ESlint, Prettier and Airbnb on ReactJS, and Rubocop on Rails.

Requirements

Before installing the ESlints, we need to setup DevContainer on VSC:

Step 1: Create .devcontainer folder

Step 2: Create devcontainer.json and Dockerfile inside .devcontainer

Step 3: Run DevContainer

Setup Ruby, Rails and Rspec with Rubocop gem:

Step 1: Clone Repo

Step 2: Add Rubocop gem

Step 3: Open DevContainer

Step 4: Quickstart

Set up React JS with ESLint, Prettier, and Airbnb:

Step 1: Open DevContainer

Step 2: Install ESlint

Step 3: Initialize

Step 4: Override Airbnb rule by adding to rules in .eslintrc.json:

Step 5: Install Prettier (optional)

Final

Step 1: Create `.devcontainer` folder

Step 2: Create `devcontainer.json` and `Dockerfile` inside `.devcontainer`