CSS Netikra Taisyklė: Patikimas Testavimas su CSS Testo Dvigubais

Kaskadinių stilių lentelių (CSS) testavimas gali būti sudėtingas, bet būtinas interneto kūrimo aspektas. Tradicinės testavimo metodikos dažnai sunkiai izoliuoja CSS kodą ir efektyviai patikrina jo veikimą. Čia į pagalbą ateina „CSS Netikra Taisyklė“ arba, tiksliau, CSS Testo Dvigubai. Šiame straipsnyje gilinamasi į CSS testavimo su testo dvigubais pasaulį, tyrinėjami jų privalumai, įgyvendinimo būdai ir geriausia praktika, skirta sukurti patikimas ir lengvai prižiūrimas stilių lenteles įvairiose naršyklėse ir įrenginiuose.

Kas yra CSS Testo Dvigubai?

Programinės įrangos testavime testo dvigubas yra bendras terminas bet kuriam objektui, kuris testavimo metu atstovauja tikram objektui. Testo dvigubų naudojimo tikslas yra izoliuoti testuojamą vienetą ir kontroliuoti jo priklausomybes, todėl testavimas tampa labiau nuspėjamas ir orientuotas. CSS kontekste testo dvigubas (kurį mes paprastumo dėlei vadiname „CSS Netikra Taisykle“) yra technika, leidžianti sukurti dirbtines CSS taisykles ar veikimą, kurie imituoja tikrąjį dalyką, leidžiančią patikrinti, ar jūsų „JavaScript“ ar kitas „front-end“ kodas sąveikauja su CSS taip, kaip tikėtasi, nepasikliaujant faktiniu atvaizdavimo varikliu ar išorinėmis stilių lentelėmis.

Iš esmės, tai yra imituojamas CSS elgesys, sukurtas komponentų sąveikai testuoti ir kodo izoliacijai testavimo metu. Šis metodas leidžia atlikti tikslinį „JavaScript“ komponentų ar kito „front-end“ kodo, kuris priklauso nuo konkrečių CSS stilių ar elgesio, vieneto testavimą.

Kodėl naudoti CSS Testo Dvigubus?

Įtraukus CSS testo dvigubus į savo testavimo strategiją, atsiranda keli pagrindiniai privalumai:

• Izoliacija: Testo dvigubai leidžia izoliuoti testuojamą kodą nuo naršyklės atvaizdavimo variklio ir išorinių CSS stilių lentelių sudėtingumo. Tai daro jūsų testus labiau orientuotus ir mažiau linkusius į klaidingus teigiamus ar neigiamus rezultatus, kuriuos sukelia išoriniai veiksniai.
• Greitis: Testų vykdymas su tikru naršyklės atvaizdavimu gali būti lėtas ir išteklių reikalaujantis. Testo dvigubai, būdami lengvos simuliacijos, žymiai pagreitina jūsų testų rinkinio vykdymą.
• Nuspėjamumas: Naršyklės neatitikimai ir išorinių stilių lentelių pakeitimai gali padaryti testus nepatikimus. Testo dvigubai suteikia nuoseklią ir nuspėjamą aplinką, užtikrindami, kad jūsų testai nepavyks tik tada, kai testuojamame kode yra klaida.
• Kontrolė: Testo dvigubai leidžia valdyti CSS aplinkos būseną, todėl galima testuoti skirtingus scenarijus ir kraštutinius atvejus, kuriuos gali būti sunku arba neįmanoma atkurti tikroje naršyklės aplinkoje.
• Ankstyvas klaidų aptikimas: Imituodami CSS elgesį, galite anksti kūrimo procese nustatyti problemas, susijusias su jūsų „front-end“ kodo sąveika su CSS. Tai neleidžia klaidoms patekti į gamybą ir sumažina derinimo laiką.

CSS Testo Dvigubų tipai

Nors terminas „CSS Netikra Taisyklė“ vartojamas plačiai, CSS testavime gali būti naudojami skirtingi testo dvigubų tipai:

• Stabai: Stabai pateikia paruoštus atsakymus į testo metu atliktus skambučius. CSS testavime stabas gali būti funkcija, kuri grąžina iš anksto nustatytą CSS ypatybės reikšmę, kai į ją kreipiamasi. Pavyzdžiui, stabas gali grąžinti `20px`, kai klausiama apie elemento `margin-left` ypatybę.
• Modeliai: Modeliai yra sudėtingesni nei stabai. Jie leidžia patikrinti, ar buvo iškviesti konkretūs metodai su konkrečiais argumentais. CSS testavime modelis gali būti naudojamas norint patikrinti, ar „JavaScript“ funkcija teisingai nustato elemento `display` ypatybę į `none`, kai paspaudžiamas mygtukas.
• Klastotės: Klastotės yra veikiančios įgyvendinimo versijos, bet paprastai daromas tam tikras triukas, dėl kurio jos netinka gamybai. CSS testavime tai gali būti supaprastintas CSS analizatorius, kuris tvarko tik dalį CSS funkcijų, arba manekeno elementas, kuris imituoja CSS išdėstymo elgesį.
• Šnipai: Šnipai įrašo informaciją apie tai, kaip iškviečiama funkcija ar metodas. CSS testavime šnipas gali būti naudojamas norint stebėti, kiek kartų konkreti CSS ypatybė pasiekiama ar modifikuojama testo metu.

Įgyvendinimo būdai

Norint įdiegti CSS testo dvigubus, galima naudoti kelis būdus, priklausomai nuo jūsų testavimo sistemos ir testuojamo CSS sudėtingumo.

1. JavaScript pagrįsti modeliai

Šis metodas apima „JavaScript“ modeliavimo bibliotekų (pvz., Jest, Mocha, Sinon.JS) naudojimą norint perimti ir manipuliuoti su CSS susijusiomis funkcijomis ar metodais. Pavyzdžiui, galite modeliuoti metodą `getComputedStyle`, kad jis grąžintų iš anksto nustatytas CSS ypatybių reikšmes. Šį metodą dažniausiai naudoja „JavaScript“ kodas, norėdamas gauti elemento stiliaus reikšmes, kai naršyklė pritaikė stilius.

Pavyzdys (naudojant Jest):

const element = document.createElement('div'); const mockGetComputedStyle = jest.fn().mockReturnValue({ marginLeft: '20px', backgroundColor: 'red', }); global.getComputedStyle = mockGetComputedStyle; // Now, when JavaScript code calls getComputedStyle(element), it will receive the mocked values. //Test example expect(getComputedStyle(element).marginLeft).toBe('20px'); expect(getComputedStyle(element).backgroundColor).toBe('red');

Paaiškinimas:

• Mes sukuriame modeliavimo funkciją `mockGetComputedStyle` naudodami `jest.fn()`.
• Mes naudojame `mockReturnValue`, kad nurodytume reikšmes, kurias modeliavimo funkcija turėtų grąžinti iškvietus. Šiuo atveju ji grąžina objektą, imituojantį `getComputedStyle` grąžinamąją reikšmę, su iš anksto apibrėžtomis `marginLeft` ir `backgroundColor` ypatybėmis.
• Mes pakeičiame globalią `getComputedStyle` funkciją mūsų modeliavimo funkcija. Tai užtikrina, kad bet koks „JavaScript“ kodas, kuris iškviečia `getComputedStyle` testo metu, iš tikrųjų iškvies mūsų modeliavimo funkciją.
• Galiausiai patvirtiname, kad iškvietus `getComputedStyle(element).marginLeft` ir `getComputedStyle(element).backgroundColor` grąžinamos modeliuojamos reikšmės.

2. CSS analizavimo ir manipuliavimo bibliotekos

Bibliotekos, tokios kaip PostCSS ar CSSOM, gali būti naudojamos norint analizuoti CSS stilių lenteles ir sukurti CSS taisyklių reprezentacijas atmintyje. Tada galite manipuliuoti šiomis reprezentacijomis, kad imituotumėte skirtingas CSS būsenas ir patikrintumėte, ar jūsų kodas reaguoja teisingai. Tai ypač naudinga testuojant sąveikas su dinaminiu CSS, kai stiliai pridedami arba modifikuojami naudojant „JavaScript“.

Pavyzdys (konceptualus):

Įsivaizduokite, kad testuojate komponentą, kuris perjungia CSS klasę elemente paspaudus mygtuką. Galite naudoti CSS analizavimo biblioteką, kad:

1. Išanalizuotumėte su jūsų komponentu susietą CSS stilių lentelę.
2. Rastumėte taisyklę, kuri atitinka perjungiamą CSS klasę.
3. Imituotumėte tos klasės pridėjimą ar pašalinimą modifikuodami stilių lentelės reprezentaciją atmintyje.
4. Patikrintumėte, ar jūsų komponento elgesys atitinkamai keičiasi, remiantis imituota CSS būsena.

Tai leidžia išvengti priklausomybės nuo naršyklės, kuri taiko stilius elementui. Tai leidžia atlikti daug greitesnį ir izoliuotą testą.

3. Shadow DOM ir izoliuoti stiliai

Shadow DOM suteikia būdą į kapsuliuoti CSS stilius komponente, neleisdamas jiems išsilaisvinti ir paveikti kitas programos dalis. Tai gali būti naudinga kuriant izoliuotesnę ir nuspėjamą testavimo aplinką. Jei komponentas yra kapsuliuotas naudojant Shadow DOM, galite lengviau valdyti CSS, kuris taikomas tam konkrečiam komponentui testo metu.

4. CSS moduliai ir atominis CSS

CSS moduliai ir atominis CSS (taip pat žinomas kaip funkcinis CSS) yra CSS architektūros, kurios skatina moduliškumą ir pakartotinį naudojimą. Jie taip pat gali supaprastinti CSS testavimą, nes leidžia lengviau identifikuoti ir izoliuoti konkrečias CSS taisykles, kurios turi įtakos konkrečiam komponentui. Pavyzdžiui, naudojant atominį CSS, kiekviena klasė atstovauja vienai CSS ypatybei, todėl galite lengvai modeliuoti ar stebėti atskirų klasių elgesį.

Praktiniai pavyzdžiai

Išnagrinėkime keletą praktinių pavyzdžių, kaip CSS testo dvigubai gali būti naudojami skirtinguose testavimo scenarijuose.

1 pavyzdys: Modaliojo komponento testavimas

Apsvarstykite modaliojo komponentą, kuris rodomas ekrane pridedant `show` klasę jo konteinerio elementui. Klasė `show` gali apibrėžti stilius, kad modalas būtų ekrano centre ir būtų matomas.

Norėdami patikrinti šį komponentą, galite naudoti modelį, kad imituotumėte `show` klasės elgesį:

// Prisiimkime, kad turime funkciją, kuri perjungia „show“ klasę modaliojo elemente function toggleModal(modalElement) { modalElement.classList.toggle('show'); } // Testas describe('Modaliojo komponentas', () => { it('turėtų rodyti modalą, kai pridedama show klasė', () => { const modalElement = document.createElement('div'); modalElement.id = 'myModal'; // Modeliuokite getComputedStyle, kad grąžintų konkrečias reikšmes, kai yra „show“ klasė const mockGetComputedStyle = jest.fn((element) => { if (element.classList.contains('show')) { return { display: 'block', position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', }; } else { return { display: 'none', }; } }); global.getComputedStyle = mockGetComputedStyle; // Iš pradžių modalas turėtų būti paslėptas expect(getComputedStyle(modalElement).display).toBe('none'); // Perjunkite „show“ klasę toggleModal(modalElement); // Dabar modalas turėtų būti rodomas expect(getComputedStyle(modalElement).display).toBe('block'); expect(getComputedStyle(modalElement).position).toBe('fixed'); expect(getComputedStyle(modalElement).top).toBe('50%'); expect(getComputedStyle(modalElement).left).toBe('50%'); expect(getComputedStyle(modalElement).transform).toBe('translate(-50%, -50%)'); }); });

Paaiškinimas:

• Mes sukuriame `getComputedStyle` modeliavimo įgyvendinimą, kuris grąžina skirtingas reikšmes, atsižvelgiant į tai, ar elemento yra `show` klasė.
• Mes perjungiame `show` klasę modaliojo elemente naudodami išgalvotą funkciją `toggleModal`.
• Mes patvirtiname, kad modaliojo `display` ypatybė keičiasi nuo `none` į `block`, kai pridedama `show` klasė. Mes taip pat patikriname pozicionavimą, kad įsitikintume, jog modalas yra teisingai centruotas.

2 pavyzdys: Reagavimo meniu testavimas

Apsvarstykite reaguojantį navigacijos meniu, kuris keičia savo išdėstymą atsižvelgiant į ekrano dydį. Galite naudoti medijos užklausas, kad apibrėžtumėte skirtingus stilius skirtingiems lūžio taškams. Pavyzdžiui, mobilusis meniu gali būti paslėptas už hamburgerio piktogramos ir rodomas tik paspaudus piktogramą.

Norėdami patikrinti šį komponentą, galite naudoti modelį, kad imituotumėte skirtingus ekrano dydžius ir patikrintumėte, ar meniu veikia teisingai:

// Modeliuokite window.innerWidth ypatybę, kad imituotumėte skirtingus ekrano dydžius const mockWindowInnerWidth = (width) => { global.innerWidth = width; global.dispatchEvent(new Event('resize')); // Paleiskite dydžio keitimo įvykį }; describe('Reagavimo navigacijos meniu', () => { it('turėtų rodyti mobilųjį meniu, kai ekrano dydis yra mažas', () => { // Imuliuokite mažą ekrano dydį mockWindowInnerWidth(600); const menuButton = document.createElement('button'); menuButton.id = 'menuButton'; document.body.appendChild(menuButton); const mobileMenu = document.createElement('div'); mobileMenu.id = 'mobileMenu'; document.body.appendChild(mobileMenu); const mockGetComputedStyle = jest.fn((element) => { if(element.id === 'mobileMenu'){ return { display: (global.innerWidth <= 768) ? 'block' : 'none' }; } else { return {}; } }); global.getComputedStyle = mockGetComputedStyle; // Patvirtinkite, kad mobilusis meniu iš pradžių rodomas (prisiimant, kad pradiniai css nustatymai yra į none virš 768px) expect(getComputedStyle(mobileMenu).display).toBe('block'); }); it('turėtų paslėpti mobilųjį meniu, kai ekrano dydis yra didelis', () => { // Imuliuokite didelį ekrano dydį mockWindowInnerWidth(1200); const menuButton = document.createElement('button'); menuButton.id = 'menuButton'; document.body.appendChild(menuButton); const mobileMenu = document.createElement('div'); mobileMenu.id = 'mobileMenu'; document.body.appendChild(mobileMenu); const mockGetComputedStyle = jest.fn((element) => { if(element.id === 'mobileMenu'){ return { display: (global.innerWidth <= 768) ? 'block' : 'none' }; } else { return {}; } }); global.getComputedStyle = mockGetComputedStyle; // Patvirtinkite, kad mobilusis meniu yra paslėptas expect(getComputedStyle(mobileMenu).display).toBe('none'); }); });

Paaiškinimas:

• Mes apibrėžiame funkciją `mockWindowInnerWidth`, kad imituotume skirtingus ekrano dydžius nustatydami `window.innerWidth` ypatybę ir išsiųsdami `resize` įvykį.
• Kiekvienu bandymo atveju mes imituojame konkretų ekrano dydį naudodami `mockWindowInnerWidth`.
• Tada mes patvirtiname, kad meniu rodomas arba paslėptas, atsižvelgiant į imituotą ekrano dydį, patvirtindami, kad medijos užklausos veikia teisingai.

Geriausia praktika

Norėdami maksimaliai padidinti CSS testo dvigubų efektyvumą, apsvarstykite šias geriausias praktikas:

• Dėmesys vieneto testavimui: Naudokite CSS testo dvigubus pirmiausia vieneto testavimui, kai norite izoliuoti atskirus komponentus ar funkcijas ir patikrinti jų elgesį atskirai.
• Testus laikykite glaustus ir fokusuočius: Kiekvienas testas turėtų būti sutelktas į vieną komponento elgesio aspektą. Venkite kurti pernelyg sudėtingus testus, kurie bando patikrinti per daug dalykų vienu metu.
• Naudokite aprašomuosius testų pavadinimus: Naudokite aiškius ir aprašomus testų pavadinimus, kurie tiksliai atspindi testo tikslą. Tai leidžia lengviau suprasti, ką testas tikrina, ir padeda atliekant derinimo procesą.
• Palaikykite testo dvigubus: Laikykite savo testo dvigubus atnaujintus su tikruoju CSS kodu. Jei keičiate CSS stilius, būtinai atitinkamai atnaujinkite savo testo dvigubus.
• Balansas su galutiniu testavimu: CSS testo dvigubai yra vertingas įrankis, bet jie neturėtų būti naudojami atskirai. Papildykite savo vieneto testus galutiniais testais, kurie patikrina bendrą programos elgesį tikroje naršyklės aplinkoje. Tokie įrankiai kaip Cypress arba Selenium gali būti nepaprastai vertingi.
• Apsvarstykite vizualinį regresijos testavimą: Vizualinio regresijos testavimo įrankiai gali aptikti nenumatytus vizualinius pakeitimus, kuriuos sukelia CSS modifikacijos. Šie įrankiai užfiksuoja jūsų programos ekrano kopijas ir palygina jas su pagrindiniais vaizdais. Jei aptinkamas vizualinis skirtumas, įrankis įspėja jus, leisdamas ištirti ir nustatyti, ar pakeitimas yra tyčinis ar klaida.

Tinkamų įrankių pasirinkimas

CSS testo dvigubams įgyvendinti galima naudoti keletą testavimo sistemų ir bibliotekų. Kai kurie populiarūs variantai yra šie:

• Jest: Populiari „JavaScript“ testavimo sistema su įmontuotomis modeliavimo galimybėmis.
• Mocha: Lanksti „JavaScript“ testavimo sistema, kurią galima naudoti su įvairiomis patvirtinimo bibliotekomis ir modeliavimo įrankiais.
• Sinon.JS: Atskira modeliavimo biblioteka, kurią galima naudoti su bet kuria „JavaScript“ testavimo sistema.
• PostCSS: Galingas CSS analizavimo ir transformavimo įrankis, kurį galima naudoti norint manipuliuoti CSS stilių lentelėmis jūsų testuose.
• CSSOM: „JavaScript“ biblioteka, skirta dirbti su CSS objekto modelio (CSSOM) CSS stilių lentelių reprezentacijomis.
• Cypress: Galutinio testavimo sistema, kurią galima naudoti norint patikrinti bendrąjį vizualinį išvaizdą ir jūsų programos elgesį.
• Selenium: Populiari naršyklės automatizavimo sistema, dažnai naudojama vizualiniam regresijos testavimui.

Išvada

CSS testo dvigubai arba, kaip mes juos vadiname šiame vadove, „CSS Netikros Taisyklės“ yra galinga technika, skirta pagerinti jūsų stilių lentelių kokybę ir prižiūrimumą. Suteikdami būdą izoliuoti ir valdyti CSS elgesį testavimo metu, CSS testo dvigubai leidžia jums rašyti labiau fokusuotus, patikimus ir efektyvius testus. Nesvarbu, ar kuriate nedidelę svetainę, ar didelę žiniatinklio programą, CSS testo dvigubų įtraukimas į jūsų testavimo strategiją gali žymiai pagerinti jūsų „front-end“ kodo patikimumą ir stabilumą. Nepamirškite juos naudoti kartu su kitomis testavimo metodikomis, tokiomis kaip galutinis testavimas ir vizualinis regresijos testavimas, kad pasiektumėte išsamią testavimo aprėptį.

Priėmę šiame straipsnyje aprašytus metodus ir geriausią praktiką, galite sukurti patikimesnį ir lengviau prižiūrimą kodą, užtikrindami, kad jūsų CSS stiliai veiktų teisingai įvairiose naršyklėse ir įrenginiuose ir kad jūsų „front-end“ kodas sąveikautų su CSS taip, kaip tikėtasi. Kadangi interneto kūrimas ir toliau vystysis, CSS testavimas taps vis svarbesnis, o CSS testo dvigubų įvaldymo menas bus vertingas įgūdis bet kuriam „front-end“ kūrėjui.