DEV Community: Vorachith Phoubandith

How to handle a price with Ruby-on-Rails

Vorachith Phoubandith — Thu, 27 Jan 2022 13:55:23 +0000

You surely ever needed to add a price column in a table of your database. But what type to select for the column price? A beginner will try with a float and meet trouble to display the price value.

Use the type Decimal !

Let's create a Book table with title, description and price columns. I put the validations aside, it is not the subject of this tiny article.

rails g model Book title:string author: string price:decimal{8,2}

After making the usual rails db:migrate, launch 'rails c' in the terminal so you can try to create an entry in your database. You can use the next code for convenience :

book = Book.new(
  title: 'La nuit des temps',
  author: 'Barjavel',
  price: 10.99)
book.save

No errors right? But your surely see price value like that :

price: 0.1099e2

To display the price with decimal formatted number, you can use .to_s, so we get :

book.price.to_s # 10.99

Done!

Vue 3 with Jest and Vue Tests Utils: Introduction

Vorachith Phoubandith — Sun, 22 Aug 2021 05:17:49 +0000

Never took the time to create a vue project with unit test?
Before to begin, we will see what are the advantages to use unit test.

It will increase your confidence ! Indeed, Tests also called Specs allow you to add new feature without breaking the existing code.
It will be use by any developers concerned by the project, you can consider Specs like a documentation of the application.
The quality of code you will produce only can improve

Let's start, we will begin with creating the project, it will take about 2 minutes.

vue create vue-3-test-unit && cd vue-3-test-unit

Here what features i selected:

Select a pattern for your Tests

You will find lot of pattern to organize your tests.

The pattern I recommend

I personally use the next pattern. The advantage is that all tests will be in the tests/unit folder.

tests/
├─ unit/
│  ├─ assets
│  ├─ components
│  ├─ js
│  ├─ router
│  ├─ store
│  ├─ views
│  ├─ App.test.js

To get this pattern, just reproduce it in your terminal:

mkdir tests/unit/assets
mkdir tests/unit/components
mkdir tests/unit/router
mkdir tests/unit/store
mkdir tests/unit/views
mv tests/unit/example.spec.js tests/unit/App.spec.js

Others kind of pattern

If you are interested, you will find below some others kind of pattern:

src/
├─ components/
│  ├─ navbar.js
│  ├─ navbar.style.js
│  └─ navbar.test.js

src/
├─ components/
├─ __tests__/
│  │  └─ navbar.test.js
│  └─ navbar.js

Tests/specs syntax

Let's try to next command:

npm run test:unit

As you can see below, it's showing the result of your test.

Explanations:

Test Suites is a kind of grouped test
Tests show the number of test
Snapshots is used to be sure an entire component runs like you want, it also used as an integration test You can see "PASS" in green. If a test fail, you will get "FAIL" in red.

Understand how a test works

Let's open the App.spec.js file so we can understand how it works. We got the below code that i will explain.

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

Why must we do imports?

Because an vue application have to be mounted into a DOM element, you will need to mount some vue.file to make tests.
For example, if we want to perform a test on the HelloWorld.vue page, we have to import. Two solutions to do this:

mount

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

shallowMount

Like mount, it creates a Wrapper that contains the mounted and rendered Vue component, but it is possible to use it with stubbed child components.

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

Syntax of a test explained

To write a test, you only need to know how to do :

a test suite : use 'describe' to do it
a test : use 'test' or 'it'
a goal for your test : 'expect' allow you to define what are the expectation of the test

Describe

The description must be clear, we use the name of the component or the function name tested.
If you want to use ES6

describe('HelloWorld.vue', () => {

})

Without ES6:

describe('HelloWorld.vue', function()  {

})

Test with expect

After putting the description of this test, we prepare variable that will be used in the expect.

  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })

This test means that the DOM of the HelloWorld.vue page must have a text containing 'new message' by the props 'msg'.

Write our first test

At this point, you can manage your project in several ways.

Code first, test after : You can code the component first and add the test.
Test first, code after : You can add the test first, so you can begin the code with a clear idea of what you will do. To go further, check for the TDD (test driven development). I will use this approach.

Begin with the test

First, we must think about the feature we want to implement. In this case, why not to begin with adding a navbar to the App? The process will be :

create the test of navbar component's
create the navbar component's
add it in App.vue

Write the test

The test will be simple, we will erase the content of App.spec.js and add a test that will check if the navbar component's exist in App.vue

import { shallowMount } from '@vue/test-utils'
import Navbar from '../../src/components/Navbar.vue'
import App from '../../src/App.vue'
import router from '../../src/router/index.js'

describe('App.vue', () => {
  it('Navbar component\'s exist', async () => {
    router.push('/')
    await router.isReady()
    const wrapper = shallowMount(App, {
      global: {
        plugins: [router]
      }
    })
    expect(wrapper.findComponent(Navbar).exists()).toBe(true)
  })
})

Launch the test

The test will fail, the import doesn't exist so you will get this error.

Create the component

The last error told us the problem, we have to create the component!

touch src/components/Navbar.vue

Just add the below code if you don't want to make a Navbar by yourself.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Add the component to App.vue

We return in the App.vue page to add the Navbar. If you don't want to add the import part here, you can add it in your main.js

<template>
  <navbar />
  <router-view />
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'App',
  components: {
    Navbar
  },
}
</script>

Launch the test

npm run test:unit

It works ! Some other kind of test will be added in another post ;)

Rails 6 with BootStrap 5

Vorachith Phoubandith — Sat, 14 Aug 2021 13:11:52 +0000

To make a Rails 6 project with a responsive design as fast as possible, Bootstrap can be a nice solution. The flexibility and the compatibility with any browser allow you to deliver a consistent design quickly.

How To add Bootstrap to a Ruby on Rails Application

Unlike on Rails 5, Rails 6 doesn't require to add jQuery and Popper.js gems in the Gemfiles to make BootStrap works. Below the stack that i use in this tutorial, note that you can't use Rails 6 with the latest node version.

Rails 6.0.4
ruby 2.6.5
node v14.17.1
yarn 1.22.10

Build your Ruby on Rails application

I - Create the rails project

To begin, let's create the rails 6 project in the console.

rails new rails-n-bootstrap && cd rails-n-bootstrap

It will take less than 1 minute to building the project, be sure to launch 'bundle install' after that.

II - Adding a Controller, the Homepage page and define routes

Let's explain what we will do now. We have to build a page to ensure BootStrap works. For this, 3 steps:

create a controller "Pages" with a "homepage" page
add some bootstrap code in the homepage;
define routes
run the server

To create the home controller, you can use the rails generate command with the controller generator. In this case, we will specify that we want an index view for our main landing page:

1 - Creating the controller with a landing page
We will use the rails generate command to create the controller and add the homepage page.

rails g controller Pages homepage

2 - Adding some bootstrap code in the homepage page
We will add some BootStrap code in the homepage that you can access by app/views/pages/homepage.html.erb. Copy/paste the code below so you don't need to worry about the BootStrap syntax for the moment.

<div class="container mt-4 border">
  <div class="container-content">
    <h1 class="m-3">Rails 6 with Bootstrap 🚀🚀🚀</h1>
    <div class="m-3">
    <p class="">Quick demonstration of bootstrap on a rails web application.</p>
    <h2>Features</h2></h2>
      <span>
        <ul>
          <li>Create the rails 6 project</li>
          <li>Add Bootstrap</li>
          <li>Add navbar component</li>
          <li>Add homepage page</li>
        </ul>
      </span>
    </div>
  </div>
</div>

3 - Define routes
We have to configure a default route in config/routes.rb

Rails.application.routes.draw do
  get 'pages/homepage'
  root to: "pages#homepage"
end

4 - Create a navbar component
We will build a component after creating the folder.

mkdir app/views/shared

touch app/views/shared/_navbar.html.erb

in this file, we add the html code

<div class="gradient-custom border">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="http://localhost:3000">Homepage</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/" target="_blank">Bootstrap doc</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>
</div>

Don't forget to make a render of this component in the application layout at the top inside the body app/views/layouts/application.html.erb

<%= render 'shared/navbar' %>

6 - Run the server
To check the homepage, just launch the below command and open localhost:3000 to your browser.

rails s

As you can see, no design is showing. Don't panic, it's normal we didn't add bootstrap yet.

Using BootStrap 5 with Rails

I - Add BootStrap

1 - Add bootstrap and required dependencies
Like i told you in the introduction, BootStrap needs to be installed with required dependencies (jquery and popper.js). We have to add it by yarn.

yarn add bootstrap jquery popper.js

2 - Adding the Webpack library with a ProvidePlugin
Essential, we define the ProvidePlugin so Bootstrap can interpret Popper and JQuery.
So we replace the main webpack configuration file, config/webpack/environment.js with your editor. I personally use Visual Studio Code, but not a problem if you use another one.

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

3 - Import Bootstrap in the webpack entry point file
Next, we import bootstrap in application.js file in app/javascript/packs/application.js

import 'bootstrap';

4 - Allow the using of Sass with Bootstrap
We will use Sass in the project so we can add some variables into our Style Sheets. For this step, nothing very complicated, just change the file extension of app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss and add some code.

// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";

// External libraries
@import "bootstrap/scss/bootstrap";

II - Organize your Bootstrap structure

In the last step, we imported some file who didn't exist yet. We will create those files in assets/stylesheets/config and add some code inside.

touch app/assets/stylesheets/config/_bootstrap_variables.scss
touch app/assets/stylesheets/config/_colors.scss
touch app/assets/stylesheets/config/_fonts.scss

1 - _bootstrap_variables.scss

// General style
$font-family-sans-serif:  $body-font;
$headings-font-family:    $headers-font;
$body-bg:                 $light-gray;
$font-size-base: 1rem;

// Colors
$body-color: $gray;
$primary:    $blue;
$success:    $green;
$info:       $yellow;
$danger:     $red;
$warning:    $orange;

// Buttons & inputs' radius
$border-radius:    2px;
$border-radius-lg: 2px;
$border-radius-sm: 2px;

// Other variables

2 - _colors.scss

$red: #FD1015;
$blue: #167FFB;
$yellow: #FFC65A;
$orange: #E67E22;
$green: #1EDD88;
$gray: #0E0000;
$light-gray: #F4F4F4;

3 - _fonts.scss

// Import the Google fonts that you choose
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

// Define fonts 
$body-font: "Work Sans", "Helvetica", "sans-serif";
$headers-font: "Nunito", "Helvetica", "sans-serif";

III - Add a components folder

Any web application has components that can be used later.
In app/assets/stylesheets/application.scss, we will add a components import.

...
// CSS partials
@import "components/index";

1 - After that, we create the components folder

mkdir app/assets/stylesheets/components

2 - Next, we create the index that will contain all the components imports

touch app/assets/stylesheets/components/_index.scss

3 - Add the below code in _index.scss

@import "navbar";

4 - The navbar import isn't create yet, so we build it. The file can be used for custom css, we add it so you can see how to organize your project.

touch app/assets/stylesheets/components/_navbar.scss

5 - Add some style in _navbar.scss

  .gradient-custom {
    background: #f0f0f0;
    background: -webkit-linear-gradient(to bottom, rgba(240, 240, 240, 0.5), rgba(211, 217, 227, 0.5));
    background: linear-gradient(to bottom, rgba(240, 240, 240, 0.5), rgba(211, 217, 227, 0.5))
  }

V - Final change

Let's make some change in the views/layouts/application.html.erb

<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>rails-n-bootstrap</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

Before to conclude, some explanations.

<meta name="viewport" content="width=device-width, initial-scale=1">

This part of code manage is added for the responsive behaviors.

To conclude

You can now manage the building of a Rails application with Bootstrap.

To know more about Bootstrap, you can check the official documentation. https://getbootstrap.com/docs/5.1/getting-started/introduction/

If you need to read the rails 6 doc, just see the next link.
https://guides.rubyonrails.org/v6.0/