Below is useful util that will be used by us regularly.

Before we can test the component we should render it. We can use renderFor util to do that. Actually it render our component in nodeJS — not real browser— using JSDOM library.

import { renderFor } from '../../utils';test('User…

A library for helping us testing React

This library is what we use to get elements in the screen. Also to simulate user event behavior like typing, click and others.

Below is utils that will usually used by us.

Get element by text. If not found, throw error.

import { screen } from '@testing-library/react';
import { button }…

We don’t need to test all aspects in application. Our goal is to make sure our application runs in the correct way.

For example we don’t need to test if a text appears in the screen like below.

test('User can see "Login" text in Login Form', () => {…

This is advices for creating test message

Try to use Given-When-Then format to express requirement in test message. For examples:

test('User can selects Post if facility has been selected');
  • Given: facility has been selected ← condition
  • When: none
  • Then: user can selects Post
test('System perfoms a search after user clicks on Proceed');
  • Given: none
  • When: user clicks…

Test case message should be tell us the requirement. How? Try to writing test case in actor perspective. For example:

test('User can see Booking fields is filled by Booking Search Data');
test('User cannot edit Log Date');
test('User navigated to Landing after Create Data is success');
test('System cancelled Create Data Process if fields not…

It is important to cover all behaviors.

Given this screen.

A form with required error message displayed.

As Frontend Engineer here tests I can write:

  • make sure required error message appears if Facility not filled.
  • make sure required error message appears if Shift not filled.
test('
User can see required error message of Facility
after click Save button if Facility not filled
')
{
leaveFacilityNotFilled();
clickSave();
expect('Please select facility').toBeInTheScreen();
}…

Keberlangsungan profit perusahaan bergantung pada kemampuan program dalam menerima perubahan.

Topik:

  1. Kesempatan Bisnis dan Perubahan
  2. Perubahan dan Clean Code
  3. Clean Code Sejak Awal
  4. Manfaat Refactoring
  5. Bahaya Refactoring
  6. Pengembangan Lambat Karena Mereka
  7. Akhir Kata
Gambaran kode program. Sumber: [1]
Gambaran kode program. Sumber: [1]

Bayangkan Anda diperintahkan untuk mencabut kabel. Terdengar mudah bukan? Tapi bagaimana jika susunan kabel seperti gambar di atas. Salah cabut bisa mematikan perangkat dan tak sengaja menyenggol…

export default function HomePage() {
return (
<div className="header">
<h1 className="header__title mb-2">Home</h1>
<div>
<i title="icon"
className="header__icon fa fa-star"
/>
</div>
</div>
);
}

Apakah saya perlu testing untuk komponen tsb? Coba lihat kemungkinannya:

  • Testing className untuk memastikan di masa depan saya tidak sengaja mengubah UI. Misal: expect(Heading).toHaveClass(“mb-2”)
  • Testing teks yang…

Contoh english tense dengan kalimat aktif dan pasif

Pasif menyatakan subjek menerima tindakan dari kata kerja. Sedangkan pada aktif terjadi sebaliknya, subjek melakukan tindakan.

verb1=write
verb2=wrote
verb3=written
present participle=writing

Aktif: I write this letter. (Subject + Verb1)
Pasif: Letter
is written by me yesterday. (Subject + is+ Verb3)

Aktif: I am writing this letter. (Subject + am +…

Yudi Supriyadi

Fullstack Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store