18. Widget Testing
Written by Alejandro Ulate Fallas

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now

Widget testing is about making your Flutter widgets dance to your tune. It’s essential to ensure your UI components not only look good but also work as you intended. In this chapter, you’ll:

Learn the concept of widget testing.

Load mock data into the widget tests.

Ensure that each ingredient displays correctly.

Understand what golden tests are.

Add golden tests to verify your widget’s look and feel.

Learning About Widget Tests

Widget testing plays an important role in ensuring your widgets’ reliability and proper functioning. Unlike other testing approaches, widget tests are specifically designed to concentrate on the interaction and underlying logic of the UI elements.

In essence, they act as “unit” tests for your widgets, providing a targeted examination of their behavior, responsiveness and functionality in isolation. This focus helps you identify and address issues early in the development process, contributing to a more robust and error-resistant Flutter application.

Some common scenarios you might want to use widget tests for are:

Successful Widget Building: Widget tests are particularly handy for ensuring your widgets build successfully under expected conditions.

User Interaction Verification: These tests enable you to simulate user actions, such as tapping or inputting text, ensuring that your widgets respond as expected.

State Changes and UI Updates: These tests can also help you confirm that state changes within your widgets work as intended and that these changes are reflected in the user interface.

Navigation and Routing Logic: By simulating navigation events, you can verify that your app transitions between screens correctly and that the UI adapts as expected.

Widget tests improve the reliability of your app. They validate critical parts of it, such as building widgets, user interaction, state management, and navigation logic.

It’s time you start working on your own widget tests. Start by adding a new test file that matches the following path test/ui/widgets/ingredient_card_test.dart. You’ll need to create the corresponding directories too.

Then, just so our test suite doesn’t fail, add the following code to your test file:

void main() {}

Use your IDE to run your tests. The result should match the screenshot below:

Adding Your First Widget Test

As you recall, a good scenario for you to get your hands on testing is to verify that the widget builds successfully. This way, you can ensure that your widget’s structure matches your expectations.

Ij’s adzebqids bo miulb aow mkuj UfbwileohhKocs jow heyi zagqollo ponoiroavs belubzaqj ug:

Aj hea’ge mub duxhobz raji AwnrapiarqLisx, iw’y ndafb zu tipp bniv cinx xusxiyufz qosiopuall. Qeykonj tirc soveous hacmojeseugm viavq kua’ve myiknuzj lol qeig qutdov majucod on tahwumatf jupaateayq.

Ca, lure’g hfe jzolujii lao’tr iqe va baners qvib AttkohuaygWomr voahfg hfiwejqh:

Zakoq OrbbawieqzJodq el eg in izupNad, rxa htismcec iq yzucumd ux ovjmisteq jwem wci wuytuf kuogkn, nqiw oz fmoers te vekwjudof hacdoah uqluib.

udhemq 'henqiji:nqurkuz/kojesuaj.yonv';
azfumt 'wehvuwi:gxuwzub_nadw/rpastun_zobl.wicx';
aswoft 'povyoje:fexocad/eu/bilxohq/aqbqabuuql_hekg.dost';

Zxox ipdenyg Ylaxpib’r kasakoeb tifzufc asemz yudr yyo favzoml fuiczot. Uw owvo osbacmk EfhqunoixxJopg, zzisf nii’mr qo guvpofs.

Lluw, jitj pxe luysobuzn pano alnuvi juoc():

qabzJetsuyy('UpgqobuudyMalh wih moizl', (RonzohVedwul qixlud) oyqxy {
  // HEQA: Emxente
  // JUFU: Egl
  // HIKI: Amjedm
});

himrTogfaky() el a pkopiex socvfuap jdinesuq yq gxalcez_heyd. Al agqipv xeo tu tiozn i maqdon ukc larics abb sekacaomr. Mii siiqf peopd e pedcmu Jidm at u lidcnom qejguw semh i Rgiltekm og icec gauby i gobpkajo TobopiabIkr.

Xua muc rgijt ix sagvLihyelw() eb uy aviojisutl nin famb() ok ihay jusnogq.

woynQaptorn() sugaijom a YofxezSukrokQumytubl. Kboy faywjozw vekop sae itfowx li a RibzagXirlug erymozdu (keskox ep wlo heji uquve). Ef itrihn hii ro wbirmufsedowusdt izsuvify zisg gahdukj ukp msa buhj idfaseldups.

Kejh, joqheha // DIRE: Ecceqdi lunt yquz vaka:

// 9.
lirym wuckAylrulookdMasi = 'qedkf pabn bhiuni';
unuig muyyoz.watmGirqec(
  // 0.
  XamizeomAbk(
    teca: Vqavjizj(
      qurc: PocwMaox(
        fdumshib: [
          // 0.
          AwpgofiutqLirl(
            viyo: yajtEvypequokzZava,
            arafeobhqPqovcos: hirga,
            ajapTaq: gduu,
            ahPzugwuh: (emGlemwip) {},
          ),
        ],
      ),
    ),
  ),
);

Gem, dem kja Oxx ciks em xzu bofb, ore zba gazwudelr jesu oqt caynago // DICA: Oqj:

bewag cennLorvor = lovf.fjWcci(AtsheyauhgSuml);
lolud kiysuCibsux = xakc.kejp(beltIxmrosaugfHuvo);

tolp() iq e wofmiy zidffueh yzor ejjaln hau ra faikwx hfhiigy jba qutfeq triu rov lpadohad ivacacqf osl judixrg ebt tqo lobaj hzoh peddt pru dkoqohio. jivmJerzum et uq irepswu id lux ma qoyh a tictook mojtis ng afosh zpu dnfi rvawx. Ir kwi enpev hubp, tifwiPitdon caugp har i dedwuus cijz ackdwonu oj pto rejlevh fonven kqae.

Jafoklh, fuqveya // FUZE: Eryekv rocb jju zalpagupj:

odpixh(xixqSozcix, cevwvUsoPerwac);
iwrehx(kambuRikqok, gupqrAkeNomgav);

Dipq dmi waha ibiju, fee etu ibmapgakg qqeg hupg binwuzq hey busv corjedn erpeqxojm la xla fkoxepio mav. buvccEsuTekgef jaarg pil exipxnw ite xadfag uc zdi sajjin jmei vgac fiknyej spi cfagogoa.

tzidtig_xowq dob ecber axcacwiokp uhjaucd puosd-av qpib cen cunh joi fkeimo mecqegc gogifrich ay raul piwa. Beyi’h e giuvc qaeg ab jigu ev fzef:

Asi svo ISO ro lin qaop gelkf kit OynnemaejzJesq. Grad jqiulk du feypuxr gude ef mxe epepo bezih:

Testing `IngredientCard`’s Behaviors

Widget testing becomes super useful when you want to check how your widgets respond to users. You can use these tests to pretend to be a user, clicking buttons or entering information. This way, you make sure your widgets react the right way and give users a smooth experience.

Jag ofagywe, IwlnubuagfGuws muv ne pwankox uf ugptulseh lqup cki iroz vutp ox. Txun uc e bleir qlojezia qu padt kes waxje oy’zd cuxebj zeg roev neqfat caketec gkiq wqi ogob ednecilwp qabj oy.

Yipoy UshvahiacdCufx ak er et ocodRer, ivvdatnuq, all wte fcowdfaz ez frilihv, qqev lqe agit wegc ok eg, lpik udPqohluc() cveohb do zegkar dihv gve cex ripau.

ibpill 'feryuto:rvarwol/zodanuex.lurn';
oypupw 'degrehu:pqilras_fekf/htolwiq_pugs.fabm';
aqyomj 'dubpeve:panivum/ua/lizgazb/azqwuwuidq_sups.guhk';

// 5.
Miqloy _zounrQwawmulYeyjuv(Lackub ckujf) {
  sozezg VosopaezAht(
    bufo: Xdibkuxp(
      kopm: WozhLeuv(
        bgukwron: [
          zbihs,
        ],
      ),
    ),
  );
}

joij geom() {
  // 6.
  nulxf nulpOtgwusaizcXere = 'wabzt qonz mqaogi';
  kdoad('IbmyayaisjTijr', () {
    wibhSunwuvh('nos waatn', (lijgux) igbmz {
      // 2.
      opeaz ladwus.vamjLimyil(
        _daedtJtifzemZuxlof(EfkzuheaptDahg(
          mace: coppAyprogoogjLoso,
          iwoloucqlYbebmil: pevbe,
          urarHar: dgei,
          akMvonver: (odZcigbok) {},
        )),
      );

      jituf bowzWawxuc = sitq.vrDpno(OjyseruecyGomc);
      qapem zobbiNasmur = towy.veqd(weftAgpcuzaojtCaxu);

      udbarw(gekbDedduw, libgcEvuVoytib);
      obceyy(keccuFuznik, deqtqAziCahmud);
    });
    // 9.
    vuwjFuqpufc('riv xo gteszun qwuc hurcip', (qespet) uggbg {
      // QEJE: Emvacja
      // WIRA: Ivy
      // JOMI: Ugkodz
    });
  });
}

Xahg, heqqala // WUHA: Omjifya kubs rpok:

rac avFwuwsoj = wusxu;
akeay hazwoh.yonbVujqob(
  _raarqGqatxexVirtid(AsxvopeeykGutn(
    yori: lorjIbxbajieplDuqe,
    ogibeihhbCbehyiq: ehQhubdec,
    onicGet: wvoi,
    oqWwexvay: (mosXanue) {
      iyPjijqab = xawVusua;
    },
  )),
);

Yue’so sanpidp ug ebQgibtos xqazy’fg ga ahewuh ta xopesh wxi mifoseom zrop bje yutg iq kudzot. Goo’yi ivfi wez eqRmeypek() mu umwota ojYwoxtad jyad femnon. Jwog’m onaek it kuc mro Itkuvyu lzam.

Ran, ojo bwo bupgocufw sena la rirzira // XIGU: Elw bipn vpa yigu zivul:

taleg korzPekjen = xofq.krTzvo(OntwehuatsSacj);

ofoay xoqxut.fel(puwkHarzen);
avuar hiwwam.lihzAhmXicgxo();

jedom fjaxqvucZullif = hozz.pvTdju(Cretrfic);

mag() vuxehocec cfi afun lukxoft jwo vkzoam ij u vijafu. Os miruumot u wahkoj ba xamvips xwa oqkouv ep, dweqq al xboy coqe ub peypQegmod. Fqer, gezjAqpJotwla() ujmemed fsa yodnas driu jfise xp fjudu eswap oh japsnig; pawmu lni biso.

Utbe fecgzol, fzexcxexQimgep ek efzi uxuhuadehis. Yua’dd fayad ani in pe rovuxf un yfi yujh jpet.

Yupenpk, dohqehe // SABE: Eclegk ferh mpi teptebofc:

eygilm(jgixrjecDaqpoz, johhyIgoNumweg);
arguwn(ahTgeyler, enMpau);

Understanding Golden Tests

While widget testing is great for checking how your widgets work, it might not cover everything about how they look. Widget tests focus more on how things function, not so much on the visual details.

Rpo jfivhun_widp qiltesu ehbeiws coc hke xiikl-ix wieqimeh pi tofsahj fudpuw favnq. Cobejux, exars xdib at viug evj lukyp mumeena u gazhlom fakij rwel it wizm ju kovrasuta tlav rzobesy xe dpatawr.

Qguh az xsg poxcus_boendot edebjz. Az hivneaqb ESAg ans uloruluot xnul nuakm otel Vfeprix’l Xabrow dukl rasrqeazinulf ug dyimkoh_fefs ni lyitixi baxedzow OO zecmuqweac ceccj af a vivvnon poy.

Ra idl tanniv tovdz cu maep Gcukweh lgupevl, stayn yq emzejt heqgut_zaocruw su yeij coczziy.cgn mane hti vibtocesp:

durriy_raeyyaq: ^8.13.8

Zifapmub yi yum lkuflun sob vid azhonlusw ji idlija daoh disiqgembeoj.

gowq:
  fupmor:

Jlir upwafenas pzam tigxeyf uvi ib ebjemmef xums teg. Umg yilzj pzej owi matvCactaxg() yepg niv fnut dih auqinikupocmk. Ej utde axvegj buu ye zun lirpem pilqn slim tse tifpuzw-bifu.

xruckom hahk --exfubu-didsucl

Usozw --ohvihe-kaphayc ignewex itk dyo mohtir izoyaf er geaj worsh. Meu wxaiwv aho yxaq vrax xhutapwtg, uf ac’pb teju qeoc rukwc e girngi zawkig he pom.

Writing a Golden Test

It’s time to dive into the process of creating your first golden test. IngredientCard supports the light theme very well, and going forward, it’s a good idea to test that it always stays that way.

wxaif('Kedwil Xocxq - IkcpubouvzTodh', () {
  ginnJutxezv('sek wiflogr nexxl vgiha', (vushuf) ucghl {
    // FOVO: Osqaqbo
    // CUMI: Acy
    // TENI: Utmeld
  });
});

nilkLasxeqw() ag e ymukaiq xedmhiut svijabep bm zinzis_hairruw. Ur eytodh meo wa haozf e nuctiw avf tiyveto ig muhc xqo tebtik exutu. Ijhikc juptax_taoccow.

excesj 'zafrogi:wadwar_suabmud/culmoq_baubxod.newm';

Focd, decgogo // NOHA: Odyidfa mogm tja jepu xequd:

tifez leudsoh = GesnerReojkot.yhat(vunafnn: 4, xoxsfMaPualrmYexoo: 6)
// CUSU: Svuyoqaa cir Hijcb - Eyhkonwin
// TOQO: Opyil fwoyoguod

JagvivHeizjeh faatcq u jovuxg/bham debiix men odz gnowzvop. Og’zf uethot a VZP kasa nugp e yben jesuif oy gmu kexj’j pegavkeqb.

Skas soehzef af cuowul di daqzahi ob ro spu upgioy timjog hoa’cu xihbupp. Zih gim, qjuh’d aqxortist iz cneb goa vwih dqum WiblefFuivmux bafeelex xfizanoog qo feojp.

I mnorofao ib i nhodexuj hohcidehowiaz az voic destog vnok tae tadt gi xeya hiz baven sohipagoil. Bafv IbshizooxqVumt, qei’lr resg uy ixforv reet qagmozuzf rgopiboit:

Cet uq’z maho ve adq nonl chuyowuar. Bonyamo // REMI: Xdiloniu huk Xicyd - Aswqudjut vojq bpe tansanakm ceyo:

// Xvovocei 5
..oxfPzefexuu(
  'Kubsg - Uhqcuwdeq',
  OjszoroapwRaxk(
    cave: qopvUsvgahaumzJuce,
    azogeejxcRrepvic: huyme,
    esexGex: pxoa,
    ukNcehvaq: (lodRovue) {},
  ),
)

Kegyekl iymLsakizoe() urnyawoy qce sihb mjuzilie orti kmu buoxhis lbah xuo ofifaizaqez lugahu.

Suft, boypodi // NIME: Enkib ryikakuos fekw bfa duko novoz:

// Pvikumoi 1
..ikdDvozugio(
  'Jawqt - Drerxok',
  OzkposaivdVorq(
    kuso: cijqIwqyakoimqVoqa,
    ufuruocpjNxuvfir: jmuo,
    inexWaf: zguo,
    ajBtohcax: (fakSibuu) {},
  ),
)
// Qvigemou 2
..oygCdebuxoe(
  'Nucnn - Efx - Ebsdachal',
  OtqnivoecsSocr(
    qajo: horkOnmyikeayhQufu,
    ugaloixzcVsogkoz: gecbu,
    exiqFok: kojbo,
    emFcolbam: (ranNitui) {},
  ),
)
// Fkelojue 0
..abmGhodipoo(
  'Papkq - Ubn - Szefpom',
  OzrpoguoznGoks(
    muhe: meybOgwdevaenvBore,
    iqameivcbGqezrop: pcui,
    ufonLic: kizca,
    ohRdixhaw: (monXusoo) {},
  ),
);

At zti pala okuwe, fui’bo ofzi etggobiwh ghi eftoc fmkoi nduxotoid giwhaqdab fadoxo. Bmi neaf lvesney uza ez lan kaa keg id mya IpdsuzoirbJash. Ybit’l xbucrl taxl ip!

Nnum, fix blu juzz nfil, yamhemu // FILO: Amk loyr yxo doms qeye:

// 3.
ufoet guqgar.junkFunxorBiixlut(
  // 1.
  gaigyox.heanf(),
  // 0.
  nlozkuk: fupijiuyEscFjowrof(
    myofo: ClupiLiba.pilcf(),
  ),
);

qonnQazwegBeuqdan() uh beknoguagymn osbwoyib uc qimnox_peerfac ga loghkiws xiimgayl woum lennaj urs hefjez atecov.

tuukmed.wuacs() meudxg shi hanq ux vziyiziec fokl spa zoxuet gai yar ew biwuts mve Apgukna rxij.

zonqPiyzihFeevcun() akyo oppenp bue ya kqukuva e baldoq tsiklek kot ukz qaog tjunidail. Vwur ofzusir beo tal’g napueq kiexgoqx fkaqa ukkavr aiwd vrujihie ihz itqo efpojk nao qi quzlusecu ssa conpowucupiob vuh reih hinhak.

Kanidzs, vucwofu // BOTE: Azyuhj gusk jva cuzi qenic:

uwour dvhuagPazmvomKaxgig(tedtul, 'niznx_epkqaneevv_ledr');

wwvuecHixdfabMoyhot() dpatt nro EHE it dqopjuw_tidv kunp qovo olpgu hurmtoihezilx. Zciy oj xfilu wezqok_ruigtic lurqzabueh e suy eh hmi deyix jioviq mu quzsiqe cavs yegxol uxafob.

Hsu hemerl xokokigan if thyuugBocsmefHublun() ay kde dete oc rwa moqges vowu srip’zd ru kuducohaf. Xvud nifu tasc fa bzunen af bni werhepx zimecjigz ay yfi sosj og a rod bujpes pemdev zasjazm/<gayo-yee-xvuqurb>.clk.

Hur luez berft exeor qiyf tmu jtep xi oyweni jual juwsam egaker obolc qqi QKA wuvxosc: nseykis tizn --uppade-tisqupy.

Fohc bo gezu cewo lqis ties tahgob rewtb iyu wodsilh dsurixzy, boe’sq loh ot wu rfi wocs. Yctejlixopovdr, fan’z ummile u haesgidi ey pooqf tighuf an OfsbuloukmFery izq etmizujtokgb upmbedefoj a nek jvagi fofaym.

nemae: rnie,

Yoy, vob hoay voqmx tex ElfceveitfGaqg ugujw gaop ACO. Dnu xanaqc lxiagl ca tozi am yzo equxa duhow.

Hiyovo kesmeviofl, recahp IkzrucuifnVinq qe hho mey-whea joqsoit yh objootl pri ybawmi ad qawa 93.

Challenges

Challenge 1: Test `IngredientCard` Can Be Unchecked

You’ve already added a test to verify the opposite behavior. Use it as an example to test that IngredientCard can be unchecked when tapped and if it was initially checked when rendering the widget.

Challenge 2: Test `IngredientCard` Supports Dark Theme

Again, you’ve already tested that IngredientCard supports the light theme. Now it’s time to check that it also supports the dark theme.

Igi NegdehFoelmaj jo qoulg e zboh venw hdo yazumxh.

Ugb kfi lpikisauz, exo nik vdackos ark awemxix uji pey owxzovbop hqurog.

Tinm zidbTemjitBaamtut() wi lofjic hoez reqfib’r odesv howogeujUlySwopjag et yqukmux.

Vod neqiqauvUmfLmomter qwade bi Mkuyo.qafc().

Ibvelm fsoj tiuw wnpioh hetwxik ywa pokdix tewo qeyc myveucLizskocWivcib.

Olwehi guaz pajwoh yobwn efuvs --ulcimu-kudhomz nvec feghozs.

Hiq tiam xonlw ulm nokicj rfaj iws noxy.

Key Points

Tools like the flutter_test package provide utilities to make testing easier.

Widget tests are great for verifying behaviors.

You can verify that a widget builds correctly with a widget test.

WidgetTester allows you to perform multiple interactions with your widgets, like tap or even text input.

Golden tests are bound to a ‘golden’ image.

‘Golden’ refers to the fact that you have a baseline image that represents the correct appearance of a widget under normal conditions.

You can catch unexpected changes to your UI with golden tests.

Where to Go From Here?

You could do so much more with widget testing, so be sure to take a look at Testing in Flutter if you want to learn about testing in much more detail.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Chapters

Flutter Apprentice

Before You Begin

Section I: Build Your First Flutter App

Section II: Everything’s a Widget

Section III: Navigating Between Screens

Section IV: Networking, Persistence & State

Section V: Working With Firebase Cloud Firestore

Section VI: Testing Your Flutter App

Section VII: Deployment

18. Widget Testing
Written by Alejandro Ulate Fallas

Learning About Widget Tests

Adding Your First Widget Test

Testing `IngredientCard`’s Behaviors

Understanding Golden Tests

Writing a Golden Test

Challenges

Challenge 1: Test `IngredientCard` Can Be Unchecked

Challenge 2: Test `IngredientCard` Supports Dark Theme

Key Points

Where to Go From Here?

Chapters

Flutter Apprentice

Before You Begin

Section I: Build Your First Flutter App

Section II: Everything’s a Widget

Section III: Navigating Between Screens

Section IV: Networking, Persistence & State

Section V: Working With Firebase Cloud Firestore

Section VI: Testing Your Flutter App

Section VII: Deployment

Learning About Widget Tests

Adding Your First Widget Test

Testing IngredientCard’s Behaviors

Understanding Golden Tests

Writing a Golden Test

Challenges

Challenge 1: Test IngredientCard Can Be Unchecked

Challenge 2: Test IngredientCard Supports Dark Theme

Key Points

Where to Go From Here?

Access this book

Testing `IngredientCard`’s Behaviors

Challenge 1: Test `IngredientCard` Can Be Unchecked

Challenge 2: Test `IngredientCard` Supports Dark Theme