DEV Community: Radouane Khiri

Test-Driven Development with RSpec in Rails

Radouane Khiri — Tue, 19 Nov 2019 03:35:06 +0000

When we start developing an app we usually do it the old fashion way: we get an idea, we elaborate on it, we make a plan to develop an app then we start coding and in the end, we test if our app is working properly.

Nothing is wrong with that approach but, there are some features that we can not test with it and sometimes it will be very hard and time-consuming to debug the code and find the errors we have, sometimes also we end up writing more code than needed.

Therefore, the test-driven development or TDD came out to the surface which is a software development process that works as follows: Thinking about the idea, designing and developing tests for every small functionality of the app and expecting the desired result (tests will be failing), then write code to make the tests work, and finally refactor the code to be more readable and maintainable and repeat.

The TDD workflow (Red / Green / Refactor cycle):

The process described above is called the “Red, Green, Refactor cycle” and it works as follows:

1. Red: Analyze the problem then write the test (which will fail because we do not have the code to make it work yet).
2. Green: Write just enough code to make the test pass.
3. Refactor: Improve the code design and always refactor in green.

TDD structure (the AAA):

The AAA stands for “Arrange, Act and Assert”:

1. Arrange: It consists of the preparations to start testing like initializing or instantiating objects, setting up mocks and stubs, defining let variables using factories …etc.

2. Act: To predict the behavior expected from the tested object while it is in use, for example, to visit a page then click a button or to build a post then try to save it calling the appropriate methods and execute the behavior we want to test.

3. Assert: To expect the actions and methods used in the “Act” phase to produce the desired results and compare the two.

Testing with RSpec:

RSpec is a testing tool written in Ruby and used to test it. It is the most frequently used testing library for Ruby in production applications, it is widely used to test Ruby on Rails apps using the TDD approach.

RSpec basics:

Some important RSpec basics to jump-start into using it, it works with the AAA structure that I previously explained:

Define the variable or instantiate the object.
Use the desired methods on it.
Expect it to equal something that you set.

Example:

To avoid repetition:

You can use a Before method with a do…it block, and instantiate the object inside it with a @ before its name and use it that way everywhere in the test.

Example:

before do
  @variable = Classname.new
end

You can also use let with a symbol to name the variable and instantiate the object inside its block (let is lazy and it will cache the variable in the first use and use it from the cache if we use it again).

Example:

let(:variable) { Classname.new }

Using RSpec and Capybara in Rails

In Ruby on Rails, there are many testing frameworks like the default one that comes with the new Rails projects Minitest or the ones that I’m writing about in this article RSpec and Capybara which I will explain a how to set them up in a new Rails project and show some basic uses of the two.

Setting up RSpec and Capybara on rails:

Initialize a new rails app without the default minitest run the following command: $ rails new -T <name of the app>
Add the following gems to the development group in the Gemfile: ‘Rspec-rails’, ‘factory_bot_rails’, ‘spring-commands-rspec’.
Add a new group named test and put the following gem inside it: ‘Capybara’.
Run $ bundle install to install the gems.
In the terminal and after cding to the new app run: $ rails g rspec:install to install RSpec.
Then run $ bundle exec spring binstub —- all to generate binstub for all the files.
Create the first test file ending with _spec.rb at the end and require “rails_helper” in the first line of every spec file.

Optional:

These two steps may be helpful in some cases:

Open the .rspec file in your project and add: — color to enable colored previews.
Add — format documentation to the same file to get more details when you run the tests.
To run the RSpec just run the command: $ rspec in the terminal and you will see something similar to the below image:

Testing basics:

To write a simple test we have to follow the below steps:

Make a _spec.rb file for the unit or the feature to be tested or open the one generated automatically by Rails if that’s the case.
You start with a describe block that can take a string or a Class.
You can indent many describe blocks together but the better practice is to use context instead for the inner blocks.
To test the different methods and functionalities of a class use the it block that takes a string as a description.
Write your tests inside the it block.
Run the command $ bundle exec rspec <file name> to only test the wanted file, or you can omit the name to run the whole test suite.

Test types in rails:

There are 3 different kinds of tests in Rails

1. Unit tests: Testing Models or different units and parts of the app to make sure they work properly, E.g: Testing for the presence and validations of a model.

2. Integration test: Test that units or features communicate properly together and produce the expected results. E.g: Testing the user’s sign up functionality and checking if it saves a new record to the database.

3. Acceptance tests: To test the whole application and the user interface UI.

Using RSpec and Capybara in rails:

1. RSpec (Unit and controller tests):

Usually, it is used for unit tests, checking if the validation is properly working, if the associations are properly set in both the correct and incorrect cases.
It is also used to test controllers, checking if all the different actions are properly working and doing what they were created to do, giving the expected results, but I prefer skipping the controllers’ tests and just do it in the integrations since it will check kind of the same thing.

2. Capybara (integration / feature tests):

Usually, it is used for integration tests that make use of a form, we use Capybara which has a slightly different syntax, in Capybara describe becomes feature and it becomes scenario.
With Capybara we can make use of the forms easily just filling in the fields with the desired information and expecting the correct or the wrong result as in the below image:

Conclusion

Developing a good app requires good maintainable, bug-free code, something that is hard and takes a long time to achieve using the standard development workflow if it is a big app, but implementing the TDD workflow and using tests with RSpec or Minitest make our life much easier, saves up time debugging and makes the code more professional, maintainable and human-readable.

Resources for more about TDD and RSpec

The following websites are great if you’d like to learn more about RSpec and testing in Ruby on Rails:

PS: Thank you for reading and if you liked my article I would appreciate it if you follow me here and on twitter to you get notified about any new articles I post in the future.

How to Use CSS clip-path Property to Make Amazing Websites

Radouane Khiri — Fri, 02 Aug 2019 09:34:41 +0000

Most web pages on the internet have every or most elements styled as boxes in a square, or in a rectangular shape with sharp 90º corners, or rounded a bit with the CSS border-radius property. This will not help to make your web design stand out from the crowd! It will be looking very ordinary even if you use some sorts of gradients and different color palettes.

Real-world shapes differ from circles to triangles and polygons, something that would look great if we could implement on our web page design. The good news is that’s totally possible in CSS3! let me introduce you the CSS clip-path property which I consider a real game-changer in modern web design. This property helps you style your elements in custom shapes that you can control and adjust upon your need and even add some cool animations to them and make your page look great without even using JavaScript.

So what is clip-path property and what does it do?
Clip-path is a new CSS property that allows you to specify a specific region of an element to display instead of showing the complete element, or in other words, it is a CSS3 property that allows you to hide some parts of the element giving you the possibility to shape it however you want! cool right? let’s see how we can use it:
Clip-path accepts four main values in general: polygon(), circle(), ellipse() and inset() each one of these four values is used for a different purpose:

Polygon(): clip-path: polygon(5% 25%, 100% 0%, 100% 75%, 5% 100%); the first value we will see is the polygon which will take usually four pairs representing the X, Y axes starting from the top left corner, to the top right one, then bottom right and the bottom left corner last. Like in the above example: the first 5% represents the X-axis and the 25% after it represents the Y-axis for the first corner (top left) and so on like explained above.

Circle(): clip-path: circle(80px at 50% 50%); The first value here is the circle’s size (or axis) the second two values after the at keyword are the X, Y axes from the top left corner of its container and its CSS positioning (static, relative or absolute…) in our case the circle is in the center of its container.

Ellipse(): clip-path: ellipse(180px 80px at 50% 50%); Its values are the same as the circle, the only difference though is that it takes two values before the at keyword representing its width and height respectively.

Inset(): clip-path: inset(10% 10% 10% 10%); It is one of my favorite values, what it does exactly is to hide or clip the element in a rectangular shape depending on the values you give it, it starts also from the top left corner going clockwise until the bottom left one. A common use for it is to hide parts of images making only a specific area visible. It is also very useful when we want to make some cool animations mixing it with the transition property and the :hover selector.
The following is a quick demonstration of that:

We start by making a quick HTML5 document linking it to a CSS file and creating a container with four elements inside it

Then we give the elements different colors and shapes using the clip-path property

In the last element’s CSS rule (clip4) I clipped all the sides by 10% to make the element look smaller then I reverted that on hover giving it its original size when the mouse is over it, adding a smooth transition effect just to show an example of how to mix these properties and get a nice animation out of them.

The result of the above code in the browser

Real World Websites Using clip-path:
Some websites are using this cool new property which made the design stand out from the standardly generated pages, it is easy to use and does not require any fancy software to premake it like SVG backgrounds for example.

https://www.redvanisation.com/
http://www.widehive.com/artists

The first website is my personal portfolio where I implemented the clip-path property in some parts on it like the hero section to achieve an appealing design.

The second is a music website where they made the artists pictures have different shapes to make them stand out of the rest of the content which gave a very beautiful result.

Browser Support:
Although this property is very cool, it is not supported by all browsers. By the time this article was written the only browser supporting it 100% is Firefox 54 and up for computer and Firefox 67 and up for Android mobiles. Other major browsers like Chrome and Safari have partial support for it, therefore you might want to use the suffix -webkit- when working with this property just to avoid the headache.
You can check this link for more details about browser support: https://caniuse.com/#search=clip-path

Conclusion:
The clip-path property is one of my favorites in CSS3 and it can be used to achieve some very nice animation effects and cool shapes. I used it a lot on my personal website and on some other websites that I made and I think the design was very appealing. However, this property has to be used with caution and always have the -webkit- prefix with it since it is not fully supported by all major browsers.

PS: Thank you for reading and if you liked my article I would appreciate it if you follow me on here and on twitter (https://twitter.com/redvanisation) so you get notified about any new articles I post in the future.