CSS Mock Rule: Atkartojamasis įgyvendinimas bandymams

Šiuolaikiniame web kūrime užtikrinti jūsų front-end kodo kokybę ir patikimumą yra itin svarbu. Tai apima griežtą testavimą, siekiant garantuoti, kad jūsų CSS stiliai būtų tinkamai taikomi ir elgtųsi taip, kaip tikėtasi. Viena galinga technika tai pasiekti yra naudojant CSS Mock Rules, metodą, kuriuo imituojami CSS stiliai bandymų metu, siekiant izoliuoti ir valdyti aplinką. Šis straipsnis pateikia išsamų vadovą, kaip suprasti ir įgyvendinti CSS Mock Rules efektyviems front-end bandymams.

Kas yra CSS Mock Rules?

CSS Mock Rules apima kontroliuojamos bandymų aplinkos kūrimą, kurioje galite imituoti konkrečių CSS stilių taikymą, nesiremdami tikraisiais stiliaus lapais. Tai leidžia jums atskirai išbandyti atskirus komponentus arba jūsų programos dalis, patvirtinant, kad jie teisingai reaguoja į numatytas CSS taisykles. Imituodami CSS, galite išvengti tikrųjų CSS failų įkėlimo ir analizės sudėtingumo ir priklausomybių, todėl testai tampa greitesni ir patikimesni.

Iš esmės, CSS Mock Rule leidžia jums nepaisyti tikrųjų CSS taisyklių, kurios paprastai būtų taikomos elementui bandymo metu. Jūs apibrėžiate numatytas CSS savybes ir reikšmes, o bandymų sistema užtikrins, kad bandomasis elementas elgtųsi taip, tarsi tos savybės ir reikšmės būtų pritaikytos.

Kodėl verta naudoti CSS Mock Rules?

Yra keletas įtikinamų priežasčių įtraukti CSS Mock Rules į savo bandymų strategiją:

• Izoliacija: Mock Rules leidžia izoliuoti bandomą komponentą ar skyrių, neleidžiant išoriniams CSS stiliams trukdyti jūsų testams. Tai užtikrina, kad jūsų testai būtų sutelkti ir nuspėjami.
• Greitis: Išvengdami būtinybės įkelti ir analizuoti tikrus CSS failus, Mock Rules gali žymiai paspartinti jūsų testų rinkinį. Tai ypač naudinga dideliuose projektuose su sudėtingais stiliaus lapais.
• Patikimumas: Mock Rules pašalina netikėtų CSS pakeitimų riziką, turinčią įtakos jūsų testams. Jei CSS failas bus modifikuotas, jūsų Mock Rule testai vis tiek bus sėkmingi, jei bandomasis komponentas elgsis taip, kaip tikėtasi.
• Derinimas: Mock Rules gali padėti lengviau nustatyti su CSS susijusias problemas. Imituodami skirtingus CSS scenarijus, galite nustatyti tikslią problemos priežastį.
• Komponentais pagrįstas testavimas: Jie puikiai tinka komponentais pagrįstoms architektūroms (React, Vue, Angular), leidžiant sutelkti dėmesį į atskirus komponentus, nesijaudinant dėl kaskadinių stilių.

Kaip įdiegti CSS Mock Rules

Konkretus CSS Mock Rules įgyvendinimas priklausys nuo jūsų bandymų sistemos ir aplinkos. Tačiau bendrieji veiksmai yra tokie:

1. Nustatykite elementą: Nustatykite konkretų HTML elementą arba komponentą, kurį norite išbandyti.
2. Apibrėžkite numatomą CSS: Apibrėžkite CSS savybes ir reikšmes, kurios, jūsų manymu, bus pritaikytos elementui bandymo metu.
3. Imituokite CSS: Naudokite savo bandymų sistemos imitavimo galimybes, kad nepaisytumėte tikrų CSS stilių su numatytaisiais stiliais.
4. Paleiskite testą: Paleiskite testą ir patikrinkite, ar elementas elgiasi taip, tarsi būtų pritaikyti imituojami CSS stiliai.

Pavyzdys naudojant Jest ir `jest-mock-css`

Jest yra populiari JavaScript bandymų sistema, o `jest-mock-css` yra naudinga biblioteka CSS imituoti Jest aplinkoje. Štai pavyzdys:

Pirmiausia įdiekite `jest-mock-css`:

            npm install jest-mock-css --save-dev
            

              
                Copy
              
            
          

Tada sukurkite paprastą React komponentą (pvz., `MyComponent.jsx`):

            // MyComponent.jsx
import React from 'react';
import './MyComponent.css';

const MyComponent = () => {
  return 
Hello, World!
;
};

export default MyComponent;
            

              
                Copy
              
            
          

Ir atitinkamas CSS failas (`MyComponent.css`):

            /* MyComponent.css */
.my-component {
  color: blue;
  font-size: 16px;
}

            

              
                Copy
              
            
          

Dabar sukurkite testavimo failą (`MyComponent.test.jsx`):

            // MyComponent.test.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

// Mock the CSS file
jest.mock('./MyComponent.css', () => {});

describe('MyComponent', () => {
  it('renders with the correct text and mocked styles', () => {
    render();
    const element = screen.getByText('Hello, World!');

    // Assert that the element renders correctly
    expect(element).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

Šiame pavyzdyje `jest.mock('./MyComponent.css', () => {})` veiksmingai neleidžia įkelti tikrojo CSS. Nors komponentas vis dar atvaizduojamas, `MyComponent.css` apibrėžti stiliai netaikomi. Tada galite naudoti Jest patvirtinimo metodus, kad patikrintumėte, ar elementas turi numatytus stilius, pagrįstus jūsų imituotomis CSS taisyklėmis. Nors šiame pavyzdyje tiesiog neleidžiama įkelti, galite pridėti sudėtingesnių imitavimo implementacijų, kad grąžintumėte konkrečius stilius, kuriuos būtų galima patikrinti. Pavyzdžiui:

            jest.mock('./MyComponent.css', () => ({
  '.my-component': {
    color: 'red', // Mocked color
    fontSize: '20px', // Mocked font-size
  },
}));
            

              
                Copy
              
            
          

Ir tada patikrinkite tas imituotas reikšmes (nors tiesioginis CSS reikšmių testavimas gali lemti trapų testavimą, todėl atidžiai apsvarstykite, ką testuojate):

            // Requires adding a helper function or using a library to get the computed style of the element.
// This is a simplified example and may not work directly without additional setup.

import { getComputedStyle } from './test-utils'; // Hypothetical helper

it('renders with mocked styles', () => {
    render();
    const element = screen.getByText('Hello, World!');

    expect(getComputedStyle(element).color).toBe('red');
    expect(getComputedStyle(element).fontSize).toBe('20px');
});
            

              
                Copy
              
            
          

Svarbi pastaba: Tiesioginis CSS reikšmių testavimas naudojant JavaScript dažnai laikomas blogu pavyzdžiu, nes tai gali sukelti trapius testus, kurie yra glaudžiai susiję su įgyvendinimo detalėmis. Paprastai geriau išbandyti komponentų elgesį ir funkcionalumą, o ne konkrečius jų stilius. Tačiau CSS imitavimas vis tiek gali būti naudingas izoliuojant komponentus ir neleidžiant išoriniams stiliams trukdyti jūsų testams.

Pavyzdys naudojant Cypress

Cypress yra dar viena galinga bandymų sistema, ypač tinkama „end-to-end“ testavimui. Nors Cypress neturi įmontuoto CSS imitavimo taip pat, kaip Jest, panašių rezultatų galite pasiekti įvairiais būdais.

Vienas iš būdų yra naudoti Cypress `cy.stub()` norint perimti ir modifikuoti tinklo užklausas CSS failams. Tai leidžia jums pakeisti tikrąjį CSS su imituotu CSS.

Sukurkite pagrindinį HTML failą (pvz., `index.html`):

            <!DOCTYPE html>
<html>
<head>
  <title>Cypress Mock CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="my-element">Hello, Cypress!</div>
</body>
</html>
            

              
                Copy
              
            
          

Ir atitinkamas CSS failas (`styles.css`):

            #my-element {
  color: green;
  font-size: 18px;
}

            

              
                Copy
              
            
          

Dabar sukurkite Cypress testavimo failą (pvz., `cypress/e2e/spec.cy.js`):

            // cypress/e2e/spec.cy.js
describe('CSS Mocking with Cypress', () => {
  it('mocks CSS styles', () => {
    // Intercept the CSS request and return mocked CSS
    cy.intercept('GET', 'styles.css', {
      body: '#my-element { color: red; font-size: 24px; }',
    }).as('css');

    // Visit the page
    cy.visit('index.html');

    // Wait for the CSS to be intercepted
    cy.wait('@css');

    // Assert that the element has the mocked styles
    cy.get('#my-element')
      .should('have.css', 'color', 'rgb(255, 0, 0)') // red
      .should('have.css', 'font-size', '24px');
  });
});
            

              
                Copy
              
            
          

Šiame pavyzdyje `cy.intercept()` perima užklausą `styles.css` ir grąžina eilutę, kurioje yra imituotos CSS taisyklės. `cy.get('#my-element').should('have.css', ...)` patvirtinimai tada patvirtina, kad elementas turi imituotus stilius. Tai parodo būdą, kaip valdyti CSS aplinką Cypress testuose.

Pavyzdys naudojant Selenium

Selenium yra galingas įrankis, skirtas automatizuoti interneto naršykles, dažniausiai naudojamas „end-to-end“ testavimui. Nors Selenium neturi tiesioginės įmontuotos funkcijos CSS imituoti, galite pasiekti panašių rezultatų įterpdami JavaScript kodą, kuris tiesiogiai modifikuoja elemento stilius.

Štai pavyzdys naudojant Python ir Selenium:

            # Python example using Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By

# Initialize the WebDriver (e.g., Chrome)
driver = webdriver.Chrome()

# Load the webpage
driver.get("path/to/your/index.html") # Replace with your actual path

# Define the JavaScript code to modify the element's style
script = """
document.getElementById('my-element').style.color = 'purple';
document.getElementById('my-element').style.fontSize = '22px';
"""

# Execute the JavaScript code
driver.execute_script(script)

# Assert that the element has the mocked styles
element = driver.find_element(By.ID, "my-element")

# Note:  Getting computed style is more complex and browser-dependent
# This is a simplified check and might require adjustments based on your setup

# For a more robust check, consider using JavaScript to get the computed style
# and return it to Python, then assert against the returned value.

# This example shows only the JavaScript injection part and a basic element check.

assert element.text == "Hello, Cypress!", "Element text is incorrect"

# Close the browser
driver.quit()
            

              
                Copy
              
            
          

Šiame pavyzdyje Python kodas pirmiausia įkelia tinklalapį su elementu, kurio ID yra `my-element`. Tada jis apibrėžia JavaScript kodo fragmentą, kuris tiesiogiai nustato to elemento savybes `color` ir `fontSize`. Funkcija `driver.execute_script()` vykdo šį JavaScript kodą naršyklėje. Galiausiai kodas gauna elementą ir atlieka pagrindinį jo teksto turinio patikrinimą. Patikimesni stiliaus patvirtinimai paprastai apimtų JavaScript vykdymą, kad būtų gautas apskaičiuotas stilius, ir jo palyginimą su numatomomis imituotomis reikšmėmis. Tai yra pagrindinis pavyzdys, o jo pritaikymas sudėtingesniems scenarijams gali reikalauti pažangesnių metodų ir kruopštaus naršyklės suderinamumo apsvarstymo.

Geriausia CSS Mock Rules praktika

Norėdami užtikrinti, kad jūsų CSS Mock Rules būtų veiksmingos ir lengvai prižiūrimos, apsvarstykite šias geriausias praktikas:

• Paprasta: Imituokite tik tas CSS savybes, kurios yra susijusios su testu. Venkite imituoti viską, nes tai gali padaryti jūsų testus trapius ir sunkiai prižiūrimus.
• Dėmesys elgesiui: Išbandykite savo komponentų elgesį, o ne konkrečias CSS reikšmes. Pavyzdžiui, užuot tikrinę, kad elementas turi konkrečią spalvą, patikrinkite, ar jis matomas arba ar jis teisingai reaguoja į vartotojo sąveiką.
• Naudokite prasmingus pavadinimus: Suteikite savo Mock Rules aprašomuosius pavadinimus, kurie aiškiai nurodo, ką jie testuoja. Dėl to jūsų testus bus lengviau suprasti ir prižiūrėti.
• Venkite per didelio imitavimo: Nereikalingai nemodifikuokite CSS. Imituokite CSS tik tada, kai reikia izoliuoti komponentą ar skyrių, kurį testuojate.
• Išlaikykite nuoseklumą: Užtikrinkite, kad jūsų Mock Rules atitiktų jūsų tikrus CSS stilius. Jei jūsų CSS pasikeičia, atitinkamai atnaujinkite savo Mock Rules.
• Prioritetą teikite komponento lygio stiliams: Imitavimas yra efektyviausias komponentams su aiškiai apibrėžtais vietiniais stiliais. Pasauliniai stiliai gali būti geriau pritaikyti integravimo ar „end-to-end“ testams.

Išplėstiniai scenarijai

Nors pagrindinės CSS Mock Rules yra gana paprastos, yra keletas išplėstinių scenarijų, kuriuose gali tekti naudoti sudėtingesnius metodus:

• Medijos užklausos: Medijos užklausų imitavimas gali būti sudėtingas, nes jos priklauso nuo ekrano dydžio ir įrenginio galimybių. Jums gali tekti naudoti bandymų sistemą, kuri suteikia specifinę paramą medijos užklausoms imituoti.
• Animacijos ir perėjimai: Animacijų ir perėjimų imitavimas gali būti sudėtingas, nes jie apima laiku pagrįstą elgesį. Jums gali tekti naudoti bandymų sistemą, kuri leidžia valdyti animacijų ir perėjimų laiką.
• CSS kintamieji (pasirinktinės savybės): CSS kintamųjų imitavimas reikalauja šiek tiek kūrybiškumo. Bandymo metu gali tekti naudoti JavaScript, kad nepaisytumėte CSS kintamųjų reikšmių.
• Sudėtingi selektoriai: Dirbant su sudėtingais CSS selektoriais (pvz., selektoriais, kurie apima pseudoklases ar kombinatorius), gali būti sunku tiksliai imituoti CSS stilius. Tokiais atvejais gali tekti supaprastinti selektorius arba refaktoruoti CSS.

Alternatyvos CSS Mock Rules

Nors CSS Mock Rules yra vertingas įrankis front-end testavimui, taip pat yra ir kitų metodų, kuriuos galite naudoti norėdami išbandyti savo CSS:

• Vaizdo regresijos testavimas: Vaizdo regresijos testavimas apima jūsų UI momentinių nuotraukų darymą ir jų palyginimą su bazinėmis momentinėmis nuotraukomis. Tai gali padėti jums aptikti nenumatytus CSS pakeitimus. Dažniausiai naudojami tokie įrankiai kaip Percy arba BackstopJS.
• „End-to-End“ testavimas: „End-to-End“ testavimas apima visos programos, įskaitant CSS, testavimą. Tai gali padėti jums patikrinti, ar jūsų CSS stiliai yra tinkamai pritaikyti realaus pasaulio scenarijuje.
• Lintingas: CSS linters (pvz., Stylelint) gali padėti jums sugauti CSS klaidas ir įgyvendinti kodavimo standartus.
• CSS moduliai: CSS moduliai padeda apriboti CSS stilius atskiriems komponentams, sumažindami CSS konfliktų riziką. Nors tai nėra bandymų technika, tai skatina geresnę CSS architektūrą, todėl kodas tampa lengviau prižiūrimas ir testuojamas.

Išvada

CSS Mock Rules yra galinga technika, padedanti pagerinti jūsų front-end kodo kokybę ir patikimumą. Imituodami CSS stilius testavimo metu, galite izoliuoti ir valdyti aplinką, todėl testai tampa greitesni, patikimesni ir lengviau derinami. Nors yra alternatyvių testavimo metodų, CSS Mock Rules siūlo vertingą požiūrį į komponentų lygio testavimą ir užtikrina, kad jūsų komponentai teisingai reaguoja į numatytas CSS taisykles.

Nepamirškite vadovautis šiame straipsnyje aprašytomis geriausiomis praktikomis ir pasirinkti tinkamą testavimo sistemą bei imitavimo bibliotekas savo projektui. Su gerai įgyvendinta CSS Mock Rule strategija galite žymiai pagerinti savo front-end kodo kokybę ir prižiūrimumą.