interactive.test.ts

 1import { NOT_ENOUGH_STATES_ERROR, NO_DEFAULT_OR_BASE_ERROR, interactive } from './interactive'
 2import { describe, it, expect } from 'vitest'
 3
 4describe('interactive', () => {
 5
 6    it('creates an Interactive<Element> with base properties and states', () => {
 7
 8        const result = interactive({
 9            base: { fontSize: 10, color: '#FFFFFF' },
10            state: {
11                hovered: { color: '#EEEEEE' },
12                clicked: { color: '#CCCCCC' },
13            }
14        })
15
16        expect(result).toEqual({
17            default: { color: '#FFFFFF', fontSize: 10 },
18            hovered: { color: '#EEEEEE', fontSize: 10 },
19            clicked: { color: '#CCCCCC', fontSize: 10 },
20        })
21    })
22
23    it('creates an Interactive<Element> with no base properties', () => {
24
25        const result = interactive({
26            state: {
27                default: { color: '#FFFFFF', fontSize: 10 },
28                hovered: { color: '#EEEEEE' },
29                clicked: { color: '#CCCCCC' },
30            }
31        })
32
33        expect(result).toEqual({
34            default: { color: '#FFFFFF', fontSize: 10 },
35            hovered: { color: '#EEEEEE', fontSize: 10 },
36            clicked: { color: '#CCCCCC', fontSize: 10 },
37        })
38    })
39
40    it('throws error when both default and base are missing', () => {
41        const state = {
42            hovered: { color: 'blue' },
43        }
44
45        expect(() => interactive({ state })).toThrow(
46            NO_DEFAULT_OR_BASE_ERROR
47        )
48    })
49
50    it('throws error when no other state besides default is present', () => {
51        const state = {
52            default: { fontSize: 10 },
53        }
54
55        expect(() => interactive({ state })).toThrow(
56            NOT_ENOUGH_STATES_ERROR
57        )
58    })
59})