CoolFace
Apppublic

Ar-Srivas/BitWise_CSS_env

sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes
test_graders_unit.py129 linesDownload Raw Back to scripts
1import os2import sys3 4sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))5 6from graders import colors, spacing, typography, contrast, layout, cleanliness, design_quality7 8 9TOKENS = {10    "colors": {11        "primary": "#1a6fe0",12        "text": "#333333",13        "white": "#ffffff",14        "danger": "#ff6b6b",15    },16    "spacing": {"sm": 8, "md": 16, "lg": 24},17    "font_sizes": ["12px", "14px", "16px", "20px"],18    "line_heights": ["1.2", "1.4", "1.6"],19}20 21 22def _assert_mid(value: float):23    assert 0.0 < value < 1.024 25 26def test_colors_cases():27    html = "<div class='a'></div>"28    css_good = ".a{color:#1a6fe0;background:#ffffff;}"29    css_bad = ".a{color:#123456;background:#abcdef;}"30    css_mid = ".a{color:#1a6fe0;background:#abcdef;}"31 32    assert colors.grade(html, css_good, TOKENS, {}) == 1.033    assert colors.grade(html, css_bad, TOKENS, {}) == 0.034    _assert_mid(colors.grade(html, css_mid, TOKENS, {}))35 36 37def test_spacing_cases():38    html = "<div class='a'></div>"39    css_good = ".a{margin:16px;padding:8px;gap:24px;}"40    css_bad = ".a{margin:10px;padding:14px;gap:22px;}"41    css_mid = ".a{margin:16px;padding:14px;gap:24px;}"42 43    assert spacing.grade(html, css_good, TOKENS, {}) == 1.044    assert spacing.grade(html, css_bad, TOKENS, {}) == 0.045    _assert_mid(spacing.grade(html, css_mid, TOKENS, {}))46 47 48def test_typography_cases():49    html = "<div class='a'></div>"50    css_good = ".a{font-size:16px;line-height:1.6;}"51    css_bad = ".a{font-size:15px;line-height:1.5;}"52    css_mid = ".a{font-size:16px;line-height:1.5;}"53 54    assert typography.grade(html, css_good, TOKENS, {}) == 1.055    assert typography.grade(html, css_bad, TOKENS, {}) < 0.556    _assert_mid(typography.grade(html, css_mid, TOKENS, {}))57 58 59def test_contrast_cases():60    html = "<div class='a'></div>"61    css_good = ".a{color:#000000;background-color:#ffffff;}"62    css_bad = ".a{color:#cccccc;background-color:#ffffff;}"63    css_mid = ".a{color:#000000;background-color:#ffffff;} .b{color:#cccccc;background:#ffffff;}"64 65    assert contrast.grade(html, css_good, TOKENS, {}) == 1.066    assert contrast.grade(html, css_bad, TOKENS, {}) == 0.067    _assert_mid(contrast.grade(html, css_mid, TOKENS, {}))68 69 70def test_layout_cases():71    html = "<div class='container'></div>"72    css_good = ".container{width:100%;} @media (max-width:768px){.container{display:flex;width:100%;}} @media (max-width:480px){.container{display:grid;width:100%;}}"73    css_bad = ".container{width:847px;}"74    css_mid = ".container{width:100%;} @media (max-width:768px){.container{display:flex;}}"75 76    assert layout.grade(html, css_good, TOKENS, {}) == 1.077    assert layout.grade(html, css_bad, TOKENS, {}) == 0.078    _assert_mid(layout.grade(html, css_mid, TOKENS, {}))79 80 81def test_cleanliness_cases():82    html = "<div class='card'></div>"83    state = {"initial_unused_selectors": [".unused", ".legacy"]}84    css_good = ".card{color:#333333;}"85    css_bad = ".card{color:#333333;}.unused{display:none;}.legacy{display:none;}"86    css_mid = ".card{color:#333333;}.unused{display:none;}"87 88    assert cleanliness.grade(html, css_good, TOKENS, state) == 1.089    assert cleanliness.grade(html, css_bad, TOKENS, state) == 0.090    _assert_mid(cleanliness.grade(html, css_mid, TOKENS, state))91 92 93def test_design_quality_cases():94    html = "<div class='a'></div>"95    css_good = ".a{color:#1a6fe0;font-size:16px;}"96    css_bad = (97        ".a{background:linear-gradient(red,blue);"98        "box-shadow:1px 1px #000;box-shadow:2px 2px #000;box-shadow:3px 3px #000;box-shadow:4px 4px #000;box-shadow:5px 5px #000;"99        "border-radius:9999px;border-radius:9999px;border-radius:9999px;"100        "position:absolute;position:absolute;position:absolute;position:absolute;"101        "width:10px;height:10px;width:12px;height:12px;width:14px;height:14px;width:16px;height:16px;"102        "border:1px solid #111111;border-top:1px solid #222222;border-bottom:1px solid #333333;border-left:1px solid #444444;border-right:1px solid #555555;"103        "font-size:10px;color:#111111;background-color:#eeeeee;}"104        ".b{background:linear-gradient(green,yellow);font-size:11px;color:#222222;}"105        ".c{background:linear-gradient(cyan,magenta);font-size:12px;color:#333333;}"106        ".d{font-size:13px;color:#444444;}"107        ".e{font-size:14px;color:#555555;}"108        ".f{font-size:15px;color:#666666;}"109        ".g{font-size:16px;color:#777777;}"110        ".h{font-size:17px;color:#888888;}"111        ".i{font-size:18px;color:#999999;}"112    )113    css_mid = ".a{background:linear-gradient(red,blue);color:#1a6fe0;} .b{background:linear-gradient(green,yellow);color:#333333;}"114 115    assert design_quality.grade(html, css_good, TOKENS, {}) == 1.0116    assert design_quality.grade(html, css_bad, TOKENS, {}) == 0.0117    _assert_mid(design_quality.grade(html, css_mid, TOKENS, {}))118 119 120if __name__ == "__main__":121    test_colors_cases()122    test_spacing_cases()123    test_typography_cases()124    test_contrast_cases()125    test_layout_cases()126    test_cleanliness_cases()127    test_design_quality_cases()128    print("All grader unit tests passed")129