Minimal styling, powered by Goober.
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.test.ts 3.7 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import {
  2. css,
  3. CssIfStringImpl,
  4. CssStringImpl,
  5. setup,
  6. extractCss,
  7. } from '.';
  8. import {
  9. vi,
  10. describe,
  11. it,
  12. expect,
  13. } from 'vitest';
  14. import { setup as setupGoober, extractCss as extractCssGoober } from 'goober';
  15. vi.mock('goober', () => {
  16. return {
  17. css: () => 'gooberClass',
  18. setup: vi.fn(),
  19. extractCss: vi.fn(),
  20. };
  21. });
  22. describe('@tesseract-design/goofy-goober', () => {
  23. describe('css', () => {
  24. it('should return CssString', () => {
  25. const c = css`
  26. background-color: white;
  27. color: black;
  28. `
  29. expect(c).toBeInstanceOf(CssStringImpl);
  30. expect(c.toString()).toBe('background-color:white;color:black;');
  31. })
  32. })
  33. describe('css.if', () => {
  34. it('should return CssString when the condition is true', () => {
  35. const c = css.if(true)(
  36. css`
  37. background-color: white;
  38. `
  39. )
  40. expect(c).toBeInstanceOf(CssIfStringImpl)
  41. expect(c.toString()).toBe('background-color:white;')
  42. })
  43. it('should return empty string when the condition is false', () => {
  44. const c = css.if(false)(
  45. css`
  46. background-color: white;
  47. `
  48. )
  49. expect(c.toString()).toBe('')
  50. })
  51. it('should return CssString with .else when the if condition is false', () => {
  52. const c = css.if(false)(
  53. css`
  54. background-color: white;
  55. `
  56. ).else(
  57. css`
  58. background-color: black;
  59. `
  60. )
  61. expect(c.toString()).toBe('background-color:black;')
  62. })
  63. it('should return CssString with .else when the if condition is true', () => {
  64. const c = css.if(true)(
  65. css`
  66. background-color: white;
  67. `
  68. ).else(
  69. css`
  70. background-color: black;
  71. `
  72. )
  73. expect(c.toString()).toBe('background-color:white;')
  74. })
  75. })
  76. describe('css.nest', () => {
  77. it('should add selector', () => {
  78. const c = css.nest('> div')(
  79. css`
  80. background-color: white;
  81. `
  82. )
  83. expect(c.toString()).toBe('> div{background-color:white;}')
  84. })
  85. })
  86. describe('css.dynamic', () => {
  87. it('should evaluate dynamic object', () => {
  88. const randomNumber = Math.floor(Math.random() * 1000);
  89. const c = css.dynamic({
  90. 'line-height': randomNumber,
  91. })
  92. expect(c.toString()).toBe(`line-height:${randomNumber};`)
  93. })
  94. })
  95. describe('css.media', () => {
  96. it('should accept raw queries', () => {
  97. const c = css.media('only screen and (min-width: 720px)')(
  98. css`
  99. color: black;
  100. background-color: white;
  101. `
  102. )
  103. expect(c.toString()).toBe('@media only screen and (min-width: 720px){color:black;background-color:white;}')
  104. })
  105. })
  106. describe('css.cx', () => {
  107. it('should accept strings as classnames', () => {
  108. expect(css.cx('class1', 'class2')).toBe('class1 class2');
  109. })
  110. it('should accept CSS strings for classname generation', () => {
  111. expect(
  112. css.cx(
  113. css`
  114. color: white;
  115. `
  116. )
  117. ).toBe('gooberClass');
  118. })
  119. it('should accept mixed values', () => {
  120. expect(
  121. css.cx(
  122. 'class1',
  123. 'class2',
  124. css`
  125. color: white;
  126. `
  127. )
  128. ).toBe('class1 class2 gooberClass');
  129. })
  130. })
  131. describe('setup', () => {
  132. it('should call setup from goober', () => {
  133. const pragma = vi.fn();
  134. const prefixer = vi.fn();
  135. setup(pragma, prefixer);
  136. expect(setupGoober).toHaveBeenCalledWith(pragma, prefixer);
  137. })
  138. });
  139. describe('extractCss', () => {
  140. it('should call extractCss from goober', () => {
  141. extractCss();
  142. expect(extractCssGoober).toHaveBeenCalled();
  143. })
  144. });
  145. });