devtools/packages/devtools-utils/src/solid/class.test.tsx at b766ae735b2a876e7c452a59abb35a8ed210c8cd · TanStack/devtools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/** @jsxImportSource solid-js - we use Solid.js as JSX here */
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { constructCoreClass } from './class'

const lazyImportMock = vi.fn((fn) => fn())
const renderMock = vi.fn()
const portalMock = vi.fn((props: any) => <div>{props.children}</div>)

vi.mock('solid-js', async () => {
  const actual = await vi.importActual<any>('solid-js')
  return {
    ...actual,
    lazy: lazyImportMock,
  }
})

vi.mock('solid-js/web', async () => {
  const actual = await vi.importActual<any>('solid-js/web')
  return {
    ...actual,
    render: renderMock,
    Portal: portalMock,
  }
})

describe('constructCoreClass', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })
  it('should export DevtoolsCore and NoOpDevtoolsCore classes and make no calls to Solid.js primitives', () => {
    const [DevtoolsCore, NoOpDevtoolsCore] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    expect(DevtoolsCore).toBeDefined()
    expect(NoOpDevtoolsCore).toBeDefined()
    expect(lazyImportMock).not.toHaveBeenCalled()
  })

  it('DevtoolsCore should call solid primitives when mount is called', async () => {
    const [DevtoolsCore, _] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const instance = new DevtoolsCore()
    await instance.mount(document.createElement('div'), 'dark')
    expect(renderMock).toHaveBeenCalled()
  })

  it('DevtoolsCore should throw if mount is called twice without unmounting', async () => {
    const [DevtoolsCore, _] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const instance = new DevtoolsCore()
    await instance.mount(document.createElement('div'), 'dark')
    await expect(
      instance.mount(document.createElement('div'), 'dark'),
    ).rejects.toThrow('Devtools is already mounted')
  })

  it('DevtoolsCore should throw if unmount is called before mount', () => {
    const [DevtoolsCore, _] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const instance = new DevtoolsCore()
    expect(() => instance.unmount()).toThrow('Devtools is not mounted')
  })

  it('DevtoolsCore should allow mount after unmount', async () => {
    const [DevtoolsCore, _] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const instance = new DevtoolsCore()
    await instance.mount(document.createElement('div'), 'dark')
    instance.unmount()
    await expect(
      instance.mount(document.createElement('div'), 'dark'),
    ).resolves.not.toThrow()
  })

  it('NoOpDevtoolsCore should not call any solid primitives when mount is called', async () => {
    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const noOpInstance = new NoOpDevtoolsCore()
    await noOpInstance.mount(document.createElement('div'), 'dark')

    expect(lazyImportMock).not.toHaveBeenCalled()
    expect(renderMock).not.toHaveBeenCalled()
    expect(portalMock).not.toHaveBeenCalled()
  })

  it('NoOpDevtoolsCore should not throw if mount is called multiple times', async () => {
    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const noOpInstance = new NoOpDevtoolsCore()
    await noOpInstance.mount(document.createElement('div'), 'dark')
    await expect(
      noOpInstance.mount(document.createElement('div'), 'dark'),
    ).resolves.not.toThrow()
  })

  it('NoOpDevtoolsCore should not throw if unmount is called before mount', () => {
    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const noOpInstance = new NoOpDevtoolsCore()
    expect(() => noOpInstance.unmount()).not.toThrow()
  })

  it('NoOpDevtoolsCore should not throw if unmount is called after mount', async () => {
    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
      <div>Test Component</div>
    ))
    const noOpInstance = new NoOpDevtoolsCore()
    await noOpInstance.mount(document.createElement('div'), 'dark')
    expect(() => noOpInstance.unmount()).not.toThrow()
  })
})