test/test-styles.sgl — sigil-web-styles

1;;; Test suite for sigil-web-styles

3(import (sigil test)

4 (sigil string)

5 (sigil web styles)

6 (sigil web styles palette)

7 (sigil web styles typography)

8 (sigil web styles components)

9 (sigil web styles layout)

10 (sigil css))

12(define (string-contains? haystack needle)

13 (let ((hlen (string-length haystack))

14 (nlen (string-length needle)))

15 (let loop ((i 0))

16 (cond

17 ((> (+ i nlen) hlen) #f)

18 ((string=? (substring haystack i (+ i nlen)) needle) #t)

19 (else (loop (+ i 1)))))))

21(test-group "palette"

22 (test "default-palette has all colors"

23 (assert-true (string? (palette-background default-palette)))

24 (assert-true (string? (palette-surface default-palette)))

25 (assert-true (string? (palette-primary default-palette)))

26 (assert-true (string? (palette-text default-palette)))

27 (assert-true (string? (palette-success default-palette)))

28 (assert-true (string? (palette-warning default-palette)))

29 (assert-true (string? (palette-error default-palette))))

31 (test "default palette uses black+gold"

32 (assert-equal "#0a0a0a" (palette-background default-palette))

33 (assert-equal "#f0c040" (palette-primary default-palette)))

35 (test "make-palette creates custom palette"

36 (let ((p (make-palette

37 background: "#fff" surface: "#f0f0f0" surface-hover: "#e0e0e0"

38 primary: "#0066cc" primary-hover: "#004c99"

39 text: "#111" text-muted: "#666" border: "#ccc"

40 success: "#0a0" warning: "#fa0" error: "#f00")))

41 (assert-equal "#fff" (palette-background p))

42 (assert-equal "#0066cc" (palette-primary p))))

44 (test "palette->css-vars generates :root block"

45 (let ((css (css->string (palette->css-vars default-palette))))

46 (assert-true (string-contains? css ":root"))

47 (assert-true (string-contains? css "--color-bg: #0a0a0a"))

48 (assert-true (string-contains? css "--color-primary: #f0c040")))))

50(test-group "typography"

51 (test "typography-styles generates body styles"

52 (let ((css (css->string (typography-styles))))

53 (assert-true (string-contains? css "body"))

54 (assert-true (string-contains? css "font-family"))

55 (assert-true (string-contains? css "line-height: 1.7")))))

57(test-group "components"

58 (test "card-styles generates .card"

59 (let ((css (css->string (card-styles))))

60 (assert-true (string-contains? css ".card"))

61 (assert-true (string-contains? css "linear-gradient"))))

63 (test "table-styles generates .table"

64 (let ((css (css->string (table-styles))))

65 (assert-true (string-contains? css ".table"))

66 (assert-true (string-contains? css "border-collapse"))))

68 (test "status-styles generates status classes"

69 (let ((css (css->string (status-styles))))

70 (assert-true (string-contains? css ".status-up"))

71 (assert-true (string-contains? css ".status-down"))

72 (assert-true (string-contains? css ".status-passed"))

73 (assert-true (string-contains? css ".status-failed"))

74 (assert-true (string-contains? css "@keyframes pulse"))))

76 (test "button-styles has gradient shine"

77 (let ((css (css->string (button-styles))))

78 (assert-true (string-contains? css ".btn-primary"))

79 (assert-true (string-contains? css "linear-gradient"))))

81 (test "nav-styles generates header"

82 (let ((css (css->string (nav-styles))))

83 (assert-true (string-contains? css ".header"))

84 (assert-true (string-contains? css ".header-logo"))))

86 (test "log-viewer-styles generates log classes"

87 (let ((css (css->string (log-viewer-styles))))

88 (assert-true (string-contains? css ".log-viewer"))

89 (assert-true (string-contains? css ".log-line"))))

91 (test "ansi-color-styles generates ANSI classes"

92 (let ((css (css->string (ansi-color-styles))))

93 (assert-true (string-contains? css ".a-bold"))

94 (assert-true (string-contains? css ".a-red"))

95 (assert-true (string-contains? css ".a-green")))))

97(test-group "layout"

98 (test "reset-styles generates box-sizing"

99 (let ((css (css->string (reset-styles))))

100 (assert-true (string-contains? css "box-sizing: border-box"))))

101

102 (test "layout-styles generates .main"

103 (let ((css (css->string (layout-styles))))

104 (assert-true (string-contains? css ".main"))

105 (assert-true (string-contains? css "max-width"))))

106

107 (test "grid-styles generates grid"

108 (let ((css (css->string (grid-styles))))

109 (assert-true (string-contains? css ".grid"))

110 (assert-true (string-contains? css "grid-template-columns")))))

111

112(test-group "theme-stylesheet"

113 (test "generates complete stylesheet with default palette"

114 (let ((css (theme-stylesheet)))

115 (assert-true (string-contains? css ":root"))

116 (assert-true (string-contains? css "--color-bg: #0a0a0a"))

117 (assert-true (string-contains? css ".card"))

118 (assert-true (string-contains? css ".table"))

119 (assert-true (string-contains? css ".header"))

120 (assert-true (string-contains? css ".btn"))

121 (assert-true (string-contains? css "@keyframes pulse"))))

122

123 (test "custom palette changes CSS variables"

124 (let* ((p (make-palette

125 background: "#ffffff" surface: "#f0f0f0" surface-hover: "#e0e0e0"

126 primary: "#0066cc" primary-hover: "#004c99"

127 text: "#111111" text-muted: "#666666" border: "#cccccc"

128 success: "#00aa00" warning: "#ffaa00" error: "#ff0000"))

129 (css (theme-stylesheet palette: p)))

130 (assert-true (string-contains? css "--color-bg: #ffffff"))

131 (assert-true (string-contains? css "--color-primary: #0066cc")))))

132

133(run-tests)