W dzisiejszym artykule pokażę jak jak zintegrować Travis CI  z repozytorium Githuba. Travis jest to narzędzie wspomagające continuous integration. Dzięki niemu podczas każdego pusha, czy wystawienia Pull requesta automatycznie mogą wykonywać się różne skrypty np. testy jednostkowe, statyczna analiza kodu itp.

Co to jest continuous integration?

Continous integration jest to praktyka polegająca na regularnej integracji wytwarzanego kodu z głównym repozytorium.  W praktyce powinno wyglądać to tak, że każdy developer w zespole powinien przynajmniej raz dziennie wypychać swój piękny kod do repozytorium. Bardzo istotnym elementem jest zapewnienie poprawności kodu ze standardami projektu oraz jego przetestowanie. Tutaj wkracza Travis CI, dzięki któremu możemy przetestować nasz kod automatycznie.

CI w moim projekcie Atena

Co prawda pracuje nad swoim projektem sam, więc problem integracji kodu z kodem innych programistów nie będzie na razie u mnie występował, ale dzięki CI mogę zabezpieczyć się przed innymi problemami z moim kodem. Można powiedzieć, że Travis będzie robił mi przy każdym pushu code review. Chcę skonfigurować travisa tak aby przy każdym pushu:

  • odpalał testy jednostkowe
  • sprawdzał czy mój kod JS jest zgodny ze standardami
  • sprawdzał mój kod SCSS w szczególności, czy nie używałem za dużo !important 😉

Konfiguracja Travisa

Aby travis zaczął robić czarną robotę należy  zalogować się  na https://travis-ci.org/, Można (i trzeba) to zrobić za pomocą konta github. Po zalogowaniu travis wyświetli  listę wszystkich repozytoriów z konta githuba poprzez które nastąpiło logowanie. teraz wystarczy włączyć odpowiednie repozytorium i travis jest gotowy do działania.

travis włączone repozytorium

Kolejnym krokiem jest dodanie do repozytorium projektu pliku .travis.yml który służy do określenia jakie czynności mają być robione przy każdym buildzie.

Moja konfiguracja wygląda tak:

W przełożeniu na język ludzki oznacza to coś takiego: Kochany trvisie użyj node js w wersji 6 i odpal mi skrypt npm test

Aby to zadziałało należy w pliku package.json zdefiniować skrypt „test”

Dzięki temu poleceniu zostanie odpalone środowisko testowe i testy jednostkowe

Instalowanie zależności

Być może zastanawiasz się skąd travis weźmie wszystkie potrzebne zależności aby uruchomić testy?  Otóż Travis jest na tyle mądry, że automatycznie przy każdym buildzie, przed wykonaniem skryptów wykona polecenie npm install, które zainstaluje wszystkie potrzebne zależności, (zdefiniowane w pliku package.json)

Statyczna analiza kodu JS i SCSS

W generatorze (generator-react-webpack) w standardzie dostałem eslint – narzędzie do sprawdzania poprawności kodu JavaScript. Odpowiada mi to i nie zamierzam tego zmieniać. Potrzebuję jeszcze narzędzia do lintowania plików scss. Do tego celu użyje Sasslinta. Po zainstalowaniu go poprzez npm. w pliku packgae.json wystarczy zrobić odpowiednie skrypty:

Chcę aby te testy wykonały się po testach jednostkowych. Najlepiej użyć do tego hooka posttest.

Więcej o skryptach np, możesz poczytać tutaj: https://docs.npmjs.com/misc/scripts

Build

Teraz wystarczy zrobić pusha, aby uruchomić testy. Przykładowy build możesz zobaczyć tutaj:

https://travis-ci.org/Frodigo/Atena

Status

Wisienką  na torcie jest dodanie do repozytorium obrazka pokazującego jaki jest status naszego repo. Czy przeszło build, czy nie. Chodzi mi o to:

Robi się to bardzo prosto. Wystarczy do readme.md dodać wygenerowany przez travis kod.

Jak zintegrować Travis CI z repozytorium Githuba

Podsumowanie

Dzisiaj pokazałem podstawy korzystania z Travis Ci. Oczywiście potrafi robić on wiele innych fajnych rzeczy. Jeśli chcesz zgłębić sprawdź dokumentację: https://docs.travis-ci.com/ 

Możesz zobaczyć jak to wygląda w praktyce na githubie mojego projektu: https://github.com/Frodigo/Atena 

Share on FacebookTweet about this on TwitterShare on LinkedIn
  • Rafal Makara

    Książkowo 🙂

  • Anna de Ruyter

    Fajny artykuł. Chyba właśnie znalazłam punkt startowy dla mojego pomysłu, aby travis budował projekt i jak wszystko jest ok, commitował na gh-pages.

    • Marcin Kwiatkowski

      Dziękuję 🙂