elements/components/router/test.js at master · inputlogic/elements · 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
119
120
121
122
123
124
/* global afterEach test expect */

import { render } from 'preact'
import { RouteProvider, Router, StackRouter, SyncRouterState, Link, useRouter } from './index.js'

const Home = () => (
  <div id='home'>Home</div>
)

const Users = () => (
  <div id='users'>
    <a href='/users/1'>User 1</a>
    <a href='/users/2'>User 2</a>
    <a href='/users/3'>User 3</a>
  </div>
)

const User = ({ id }) => (
  <div id='user'>User {id}</div>
)

const RouteTest = () => {
  const { routeTo } = useRouter()
  routeTo('/users')
  return null
}

const routes = {
  home: {
    path: '/',
    component: Home
  },
  users: {
    path: '/users',
    component: Users
  },
  user: {
    path: '/users/:id',
    component: User
  },
  routeTest: {
    path: '/route-test',
    component: RouteTest
  }
}

afterEach(() => {
  document.getElementsByTagName('html')[0].innerHTML = ''
})

test('Router exports', () => {
  expect(typeof RouteProvider).toBe('function')
  expect(typeof Router).toBe('function')
  expect(typeof StackRouter).toBe('function')
})

test('Router should render Home', () => {
  render(
    <RouteProvider routes={routes}>
      <Router routes={routes} />
    </RouteProvider>,
    document.body
  )

  expect(document.body.querySelector('#home')).toBeDefined()
  expect(document.body.querySelector('#users')).toBeNull()
  expect(document.body.querySelector('#user')).toBeNull()
})

test('Router should render parent routes', () => {
  const Parent = () => (
    <div id='parent'>
      <Router routes={routes} />
    </div>
  )
  const parentRoutes = {
    parent: {
      routes,
      component: Parent
    }
  }

  render(
    <RouteProvider routes={routes} initialPath='/users/2'>
      <Router routes={parentRoutes} />
    </RouteProvider>,
    document.body
  )

  expect(document.body.querySelector('#parent')).toBeDefined()
  expect(document.body.querySelector('#user')).toBeDefined()
  expect(document.body.querySelector('#home')).toBeNull()
  expect(document.body.querySelector('#users')).toBeNull()
})

test('Link should render', (done) => {
  // Wait till Router state is set, then check if Link
  // rendered the active class.
  const sync = state => {
    const link = document.body.querySelector('a')

    expect(state.path).toBeDefined()
    expect(state.route).toBeDefined()

    expect(link).toBeDefined()
    expect(link.className).toContain('active')
    expect(link.className).toContain('test')

    done()
  }

  render(
    <RouteProvider routes={routes}>
      <Link to='home' className='test' activeClass='active'>Go Home</Link>
      <Router routes={routes} />
      <SyncRouterState>{sync}</SyncRouterState>
    </RouteProvider>,
    document.body
  )

  expect(document.body.querySelector('#home')).toBeDefined()
  expect(document.body.querySelector('#users')).toBeNull()
  expect(document.body.querySelector('#user')).toBeNull()
})