۲۸ مرداد ۱۴۰۴فارسی

در تست CSS با استفاده از قوانین ساختگی استاد شوید. این راهنما داپل‌های تست CSS، مزایا، پیاده‌سازی و بهترین شیوه‌ها برای استایل‌شیت‌های قوی و قابل نگهداری را پوشش می‌دهد.

قانون ساختگی CSS: تست قوی با داپل‌های تست CSS

تست کردن برگه‌های سبک آبشاری (CSS) می‌تواند جنبه‌ای چالش‌برانگیز اما ضروری از توسعه وب باشد. متدولوژی‌های تست سنتی اغلب در جداسازی کد CSS و تأیید مؤثر رفتار آن با مشکل مواجه می‌شوند. اینجاست که مفهوم «قانون ساختگی CSS» یا به عبارت دقیق‌تر، داپل‌های تست CSS، وارد عمل می‌شود. این مقاله به دنیای تست CSS با استفاده از داپل‌های تست می‌پردازد و مزایا، تکنیک‌های پیاده‌سازی و بهترین شیوه‌ها را برای ایجاد استایل‌شیت‌های قوی و قابل نگهداری در مرورگرها و دستگاه‌های مختلف بررسی می‌کند.

داپل‌های تست CSS چه هستند؟

در تست نرم‌افزار، «داپل تست» (test double) یک اصطلاح عمومی برای هر شیئی است که در طول تست جایگزین یک شیء واقعی می‌شود. هدف از استفاده از داپل‌های تست، جداسازی واحد تحت تست و کنترل وابستگی‌های آن است که تست را قابل پیش‌بینی‌تر و متمرکزتر می‌کند. در زمینه CSS، یک داپل تست (که ما برای سادگی آن را «قانون ساختگی CSS» می‌نامیم) تکنیکی برای ایجاد قوانین یا رفتارهای CSS مصنوعی است که از چیز واقعی تقلید می‌کند و به شما امکان می‌دهد تأیید کنید که جاوا اسکریپت یا سایر کدهای فرانت‌اند شما همانطور که انتظار می‌رود با CSS تعامل دارند، بدون اینکه به موتور رندر واقعی یا استایل‌شیت‌های خارجی تکیه کنید.

در اصل، آن‌ها رفتارهای شبیه‌سازی شده CSS هستند که برای تست تعاملات کامپوننت و جداسازی کد در طول تست ایجاد شده‌اند. این رویکرد امکان تست واحد متمرکز کامپوننت‌های جاوا اسکریپت یا سایر کدهای فرانت‌اند را که به استایل‌ها یا رفتارهای خاص CSS متکی هستند، فراهم می‌کند.

چرا از داپل‌های تست CSS استفاده کنیم؟

چندین مزیت کلیدی از گنجاندن داپل‌های تست CSS در استراتژی تست شما ناشی می‌شود:

جداسازی: داپل‌های تست به شما امکان می‌دهند کدی را که تست می‌کنید از پیچیدگی‌های موتور رندر مرورگر و استایل‌شیت‌های CSS خارجی جدا کنید. این کار تست‌های شما را متمرکزتر کرده و کمتر مستعد نتایج مثبت یا منفی کاذب ناشی از عوامل خارجی می‌کند.
سرعت: اجرای تست‌ها در برابر رندر واقعی مرورگر می‌تواند کند و نیازمند منابع زیاد باشد. داپل‌های تست، به دلیل شبیه‌سازی‌های سبک، به طور قابل توجهی اجرای مجموعه تست شما را سرعت می‌بخشند.
قابلیت پیش‌بینی: ناسازگاری‌های مرورگر و تغییرات استایل‌شیت‌های خارجی می‌توانند تست‌ها را غیرقابل اعتماد کنند. داپل‌های تست یک محیط ثابت و قابل پیش‌بینی فراهم می‌کنند و اطمینان می‌دهند که تست‌های شما فقط زمانی با شکست مواجه می‌شوند که کد تحت تست دارای باگ باشد.
کنترل: داپل‌های تست به شما امکان می‌دهند وضعیت محیط CSS را کنترل کنید، که این امر تست سناریوهای مختلف و موارد مرزی را که ممکن است بازتولید آن‌ها در یک محیط مرورگر واقعی دشوار یا غیرممکن باشد، امکان‌پذیر می‌سازد.
تشخیص زودهنگام خطا: با شبیه‌سازی رفتار CSS، می‌توانید مشکلات مربوط به تعامل کد فرانت‌اند خود با CSS را در مراحل اولیه فرآیند توسعه شناسایی کنید. این کار از ورود باگ‌ها به محیط تولید جلوگیری کرده و زمان اشکال‌زدایی را کاهش می‌دهد.

انواع داپل‌های تست CSS

در حالی که اصطلاح «قانون ساختگی CSS» به طور گسترده استفاده می‌شود، انواع مختلفی از داپل‌های تست می‌توانند در تست CSS به کار روند:

استاب‌ها (Stubs): استاب‌ها پاسخ‌های از پیش آماده شده‌ای را به فراخوانی‌های انجام شده در طول تست ارائه می‌دهند. در تست CSS، یک استاب ممکن است تابعی باشد که هنگام فراخوانی، یک مقدار ویژگی CSS از پیش تعریف شده را برمی‌گرداند. به عنوان مثال، یک استاب می‌تواند هنگام درخواست ویژگی `margin-left` یک عنصر، مقدار `20px` را برگرداند.
ماک‌ها (Mocks): ماک‌ها پیچیده‌تر از استاب‌ها هستند. آن‌ها به شما امکان می‌دهند تأیید کنید که متدهای خاصی با آرگومان‌های خاصی فراخوانی شده‌اند. در تست CSS، یک ماک ممکن است برای تأیید این استفاده شود که یک تابع جاوا اسکریپت هنگام کلیک روی یک دکمه، ویژگی `display` یک عنصر را به درستی روی `none` تنظیم می‌کند.
فیک‌ها (Fakes): فیک‌ها پیاده‌سازی‌های کارآمدی هستند، اما معمولاً از یک راه میان‌بر استفاده می‌کنند که آن‌ها را برای محیط تولید نامناسب می‌سازد. در تست CSS، این می‌تواند یک پارسر ساده شده CSS باشد که فقط زیرمجموعه‌ای از ویژگی‌های CSS را مدیریت می‌کند، یا یک عنصر ساختگی که رفتار چیدمان CSS را شبیه‌سازی می‌کند.
جاسوس‌ها (Spies): جاسوس‌ها اطلاعاتی را در مورد نحوه فراخوانی یک تابع یا متد ثبت می‌کنند. در تست CSS، یک جاسوس می‌تواند برای ردیابی تعداد دفعاتی که یک ویژگی خاص CSS در طول یک تست دسترسی یا اصلاح می‌شود، استفاده شود.

تکنیک‌های پیاده‌سازی

بسته به فریم‌ورک تست شما و پیچیدگی CSS که در حال تست آن هستید، چندین تکنیک می‌تواند برای پیاده‌سازی داپل‌های تست CSS استفاده شود.

۱. ماک‌های مبتنی بر جاوا اسکریپت

این رویکرد شامل استفاده از کتابخانه‌های ماکینگ جاوا اسکریپت (مانند Jest، Mocha، Sinon.JS) برای رهگیری و دستکاری توابع یا متدهای مرتبط با CSS است. به عنوان مثال، شما می‌توانید متد `getComputedStyle` را ماک کنید تا مقادیر ویژگی CSS از پیش تعریف شده را برگرداند. این متد معمولاً توسط کد جاوا اسکریپت برای بازیابی مقادیر استایل یک عنصر پس از اعمال استایل‌ها توسط مرورگر استفاده می‌شود.

مثال (با استفاده از 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');

توضیح:

ما یک تابع ماک `mockGetComputedStyle` با استفاده از `jest.fn()` ایجاد می‌کنیم.
ما از `mockReturnValue` برای مشخص کردن مقادیری که تابع ماک باید هنگام فراخوانی برگرداند، استفاده می‌کنیم. در این مورد، یک شیء را برمی‌گرداند که مقدار بازگشتی `getComputedStyle` را با ویژگی‌های از پیش تعریف شده `marginLeft` و `backgroundColor` تقلید می‌کند.
ما تابع سراسری `getComputedStyle` را با تابع ماک خود جایگزین می‌کنیم. این تضمین می‌کند که هر کد جاوا اسکریپتی که در طول تست `getComputedStyle` را فراخوانی می‌کند، در واقع تابع ماک ما را فراخوانی خواهد کرد.
در نهایت، ما تأیید می‌کنیم که فراخوانی `getComputedStyle(element).marginLeft` و `getComputedStyle(element).backgroundColor` مقادیر ماک شده را برمی‌گرداند.

۲. کتابخانه‌های تجزیه و دستکاری CSS

کتابخانه‌هایی مانند PostCSS یا CSSOM می‌توانند برای تجزیه استایل‌شیت‌های CSS و ایجاد نمایش‌های درون-حافظه‌ای (in-memory) از قوانین CSS استفاده شوند. سپس می‌توانید این نمایش‌ها را برای شبیه‌سازی حالت‌های مختلف CSS دستکاری کرده و تأیید کنید که کد شما به درستی پاسخ می‌دهد. این امر به ویژه برای تست تعاملات با CSS پویا، که در آن استایل‌ها توسط جاوا اسکریپت اضافه یا اصلاح می‌شوند، مفید است.

مثال (مفهومی):

تصور کنید در حال تست کامپوننتی هستید که با کلیک روی یک دکمه، یک کلاس CSS را روی یک عنصر تغییر می‌دهد (toggle می‌کند). می‌توانید از یک کتابخانه تجزیه CSS برای موارد زیر استفاده کنید:

تجزیه استایل‌شیت CSS مرتبط با کامپوننت خود.
پیدا کردن قانونی که با کلاس CSS در حال تغییر مطابقت دارد.
شبیه‌سازی اضافه یا حذف آن کلاس با تغییر نمایش درون-حافظه‌ای استایل‌شیت.
تأیید اینکه رفتار کامپوننت شما بر اساس حالت شبیه‌سازی شده CSS تغییر می‌کند.

این کار از نیاز به تکیه بر مرورگر برای اعمال استایل‌ها به یک عنصر جلوگیری می‌کند. این امر یک تست بسیار سریع‌تر و جدا شده را امکان‌پذیر می‌سازد.

۳. Shadow DOM و استایل‌های جدا شده

Shadow DOM راهی برای کپسوله‌سازی استایل‌های CSS درون یک کامپوننت فراهم می‌کند و از نشت آن‌ها به بیرون و تأثیرگذاری بر سایر بخش‌های برنامه جلوگیری می‌کند. این می‌تواند برای ایجاد محیط‌های تست جدا شده‌تر و قابل پیش‌بینی‌تر مفید باشد. اگر کامپوننت با استفاده از Shadow DOM کپسوله شده باشد، می‌توانید CSS اعمال شده به آن کامپوننت خاص را در تست راحت‌تر کنترل کنید.

۴. ماژول‌های CSS و CSS اتمیک

ماژول‌های CSS و CSS اتمیک (که به عنوان CSS تابعی نیز شناخته می‌شود) معماری‌های CSS هستند که ماژولار بودن و قابلیت استفاده مجدد را ترویج می‌کنند. آن‌ها همچنین می‌توانند تست CSS را با آسان‌تر کردن شناسایی و جداسازی قوانین CSS خاصی که بر یک کامپوننت خاص تأثیر می‌گذارند، ساده‌تر کنند. به عنوان مثال، با CSS اتمیک، هر کلاس یک ویژگی CSS واحد را نشان می‌دهد، بنابراین می‌توانید به راحتی رفتار کلاس‌های جداگانه را ماک یا استاب کنید.

مثال‌های عملی

بیایید چند مثال عملی از نحوه استفاده از داپل‌های تست CSS در سناریوهای مختلف تست را بررسی کنیم.

مثال ۱: تست یک کامپوننت مودال

یک کامپوننت مودال را در نظر بگیرید که با افزودن کلاس `show` به عنصر کانتینر آن روی صفحه نمایش داده می‌شود. کلاس `show` ممکن است استایل‌هایی را برای قرار دادن مودال در مرکز صفحه و قابل مشاهده کردن آن تعریف کند.

برای تست این کامپوننت، می‌توانید از یک ماک برای شبیه‌سازی رفتار کلاس `show` استفاده کنید:


// Assume we have a function that toggles the "show" class on the modal element
function toggleModal(modalElement) {
  modalElement.classList.toggle('show');
}

// Test
describe('Modal Component', () => {
  it('should display the modal when the show class is added', () => {
    const modalElement = document.createElement('div');
    modalElement.id = 'myModal';

    // Mock getComputedStyle to return specific values when the "show" class is present
    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;

    // Initially, the modal should be hidden
    expect(getComputedStyle(modalElement).display).toBe('none');

    // Toggle the "show" class
    toggleModal(modalElement);

    // Now, the modal should be displayed
    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%)');
  });
});

توضیح:

ما یک پیاده‌سازی ماک از `getComputedStyle` ایجاد می‌کنیم که بسته به اینکه کلاس `show` روی عنصر وجود داشته باشد یا نه، مقادیر متفاوتی را برمی‌گرداند.
ما کلاس `show` را روی عنصر مودال با استفاده از یک تابع ساختگی `toggleModal` تغییر می‌دهیم.
ما تأیید می‌کنیم که ویژگی `display` مودال با افزودن کلاس `show` از `none` به `block` تغییر می‌کند. همچنین موقعیت‌یابی را برای اطمینان از مرکزیت صحیح مودال بررسی می‌کنیم.

مثال ۲: تست یک منوی ناوبری واکنش‌گرا

یک منوی ناوبری واکنش‌گرا را در نظر بگیرید که چیدمان آن بر اساس اندازه صفحه تغییر می‌کند. شما ممکن است از media query ها برای تعریف استایل‌های مختلف برای نقاط شکست (breakpoint) مختلف استفاده کنید. به عنوان مثال، یک منوی موبایل ممکن است پشت یک آیکون همبرگری پنهان شده باشد و تنها با کلیک روی آیکون نمایش داده شود.

برای تست این کامپوننت، می‌توانید از یک ماک برای شبیه‌سازی اندازه‌های مختلف صفحه و تأیید اینکه منو به درستی رفتار می‌کند، استفاده کنید:


// Mock the window.innerWidth property to simulate different screen sizes
const mockWindowInnerWidth = (width) => {
  global.innerWidth = width;
  global.dispatchEvent(new Event('resize')); // Trigger the resize event
};


describe('Responsive Navigation Menu', () => {
  it('should display the mobile menu when the screen size is small', () => {
    // Simulate a small screen size
    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;
    // Assert that the mobile menu is initially displayed (assuming initial css sets to none above 768px)
    expect(getComputedStyle(mobileMenu).display).toBe('block');

  });

  it('should hide the mobile menu when the screen size is large', () => {
    // Simulate a large screen size
    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;
    // Assert that the mobile menu is hidden
    expect(getComputedStyle(mobileMenu).display).toBe('none');
  });
});

توضیح:

ما یک تابع `mockWindowInnerWidth` برای شبیه‌سازی اندازه‌های مختلف صفحه با تنظیم ویژگی `window.innerWidth` و ارسال یک رویداد `resize` تعریف می‌کنیم.
در هر مورد تست، ما یک اندازه صفحه خاص را با استفاده از `mockWindowInnerWidth` شبیه‌سازی می‌کنیم.
سپس تأیید می‌کنیم که منو بر اساس اندازه صفحه شبیه‌سازی شده نمایش داده یا پنهان می‌شود و بدین ترتیب صحت کارکرد media query ها را بررسی می‌کنیم.

بهترین شیوه‌ها

برای به حداکثر رساندن اثربخشی داپل‌های تست CSS، بهترین شیوه‌های زیر را در نظر بگیرید:

تمرکز بر تست واحد: از داپل‌های تست CSS عمدتاً برای تست واحد استفاده کنید، جایی که می‌خواهید کامپوننت‌ها یا توابع جداگانه را جدا کرده و رفتار آن‌ها را به صورت مجزا تأیید کنید.
تست‌ها را مختصر و متمرکز نگه دارید: هر تست باید بر یک جنبه واحد از رفتار کامپوننت تمرکز کند. از ایجاد تست‌های بیش از حد پیچیده که سعی در تأیید چندین چیز به طور همزمان دارند، خودداری کنید.
از نام‌های تست توصیفی استفاده کنید: از نام‌های تست واضح و توصیفی استفاده کنید که هدف تست را به درستی منعکس کند. این کار درک اینکه تست چه چیزی را تأیید می‌کند را آسان‌تر کرده و به اشکال‌زدایی کمک می‌کند.
داپل‌های تست را نگهداری کنید: داپل‌های تست خود را با کد واقعی CSS به‌روز نگه دارید. اگر استایل‌های CSS را تغییر دادید، حتماً داپل‌های تست خود را نیز مطابق با آن به‌روز کنید.
تعادل با تست سرتاسری (End-to-End): داپل‌های تست CSS ابزار ارزشمندی هستند، اما نباید به تنهایی استفاده شوند. تست‌های واحد خود را با تست‌های سرتاسری که رفتار کلی برنامه را در یک محیط مرورگر واقعی تأیید می‌کنند، تکمیل کنید. ابزارهایی مانند Cypress یا Selenium می‌توانند در این زمینه بسیار ارزشمند باشند.
تست رگرسیون بصری را در نظر بگیرید: ابزارهای تست رگرسیون بصری می‌توانند تغییرات بصری ناخواسته ناشی از تغییرات CSS را تشخیص دهند. این ابزارها از برنامه شما اسکرین‌شات می‌گیرند و آن‌ها را با تصاویر پایه مقایسه می‌کنند. اگر تفاوت بصری تشخیص داده شود، ابزار به شما هشدار می‌دهد و به شما امکان می‌دهد بررسی کنید که آیا تغییر عمدی بوده یا یک باگ است.

انتخاب ابزارهای مناسب

چندین فریم‌ورک و کتابخانه تست می‌توانند برای پیاده‌سازی داپل‌های تست CSS استفاده شوند. برخی از گزینه‌های محبوب عبارتند از:

Jest: یک فریم‌ورک تست جاوا اسکریپت محبوب با قابلیت‌های ماکینگ داخلی.
Mocha: یک فریم‌ورک تست جاوا اسکریپت انعطاف‌پذیر که می‌تواند با کتابخانه‌های مختلف assertion و ابزارهای ماکینگ استفاده شود.
Sinon.JS: یک کتابخانه ماکینگ مستقل که می‌تواند با هر فریم‌ورک تست جاوا اسکریپت استفاده شود.
PostCSS: یک ابزار قدرتمند تجزیه و تبدیل CSS که می‌تواند برای دستکاری استایل‌شیت‌های CSS در تست‌های شما استفاده شود.
CSSOM: یک کتابخانه جاوا اسکریپت برای کار با نمایش‌های مدل شیء CSS (CSSOM) از استایل‌شیت‌های CSS.
Cypress: یک فریم‌ورک تست سرتاسری که می‌تواند برای تأیید ظاهر بصری کلی و رفتار برنامه شما استفاده شود.
Selenium: یک فریم‌ورک محبوب اتوماسیون مرورگر که اغلب برای تست رگرسیون بصری استفاده می‌شود.

نتیجه‌گیری

داپل‌های تست CSS، یا همانطور که ما در این راهنما آن‌ها را «قوانین ساختگی CSS» می‌نامیم، یک تکنیک قدرتمند برای بهبود کیفیت و قابلیت نگهداری استایل‌شیت‌های شما هستند. با فراهم کردن راهی برای جداسازی و کنترل رفتار CSS در طول تست، داپل‌های تست CSS به شما امکان می‌دهند تست‌های متمرکزتر، قابل اعتمادتر و کارآمدتری بنویسید. چه در حال ساخت یک وب‌سایت کوچک باشید یا یک برنامه وب بزرگ، گنجاندن داپل‌های تست CSS در استراتژی تست شما می‌تواند به طور قابل توجهی استحکام و پایداری کد فرانت‌اند شما را بهبود بخشد. به یاد داشته باشید که آن‌ها را در کنار سایر متدولوژی‌های تست، مانند تست سرتاسری و تست رگرسیون بصری، برای دستیابی به پوشش تست جامع استفاده کنید.

با اتخاذ تکنیک‌ها و بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید یک پایگاه کد قوی‌تر و قابل نگهداری‌تر بسازید و اطمینان حاصل کنید که استایل‌های CSS شما در مرورگرها و دستگاه‌های مختلف به درستی کار می‌کنند و کد فرانت‌اند شما همانطور که انتظار می‌رود با CSS تعامل دارد. با ادامه تکامل توسعه وب، تست CSS اهمیت فزاینده‌ای پیدا خواهد کرد و تسلط بر هنر داپل‌های تست CSS یک مهارت ارزشمند برای هر توسعه‌دهنده فرانت‌اند خواهد بود.