Repository: honojs/hono
File: src/middleware/jsx/index.test.tsx (TypeScript)

Code before:
  })

  // https://en.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
  describe('Booleans, Null, and Undefined Are Ignored', () => {
    it.each([true, false, undefined, null])('%s', (item) => {
      expect((<span>{item}</span>).toString()).toBe('<span></span>')
    })

    it('falsy value', () => {
      const template = <span>{0}</span>
      expect(template.toString()).toBe('<span>0</span>')
    })
  })

  // https://en.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
  describe('Props Default to “True”', () => {
    it('default prop value', () => {
      const template = <span data-hello>Hello</span>
      expect(template.toString()).toBe('<span data-hello="true">Hello</span>')
    })
  })

  describe('Special case for input "checked" and "selected" params', () => {
    it('default prop value for checked', () => {
      const template = <input type='checkbox' checked />
      expect(template.toString()).toBe('<input type="checkbox" checked="checked"/>')
    })

    it('default prop value for checked={true}', () => {
      const template = <input type='checkbox' checked={true} />
      expect(template.toString()).toBe('<input type="checkbox" checked="checked"/>')
    })

    it('no prop for checked={false}', () => {
      const template = <input type='checkbox' checked={false} />
      expect(template.toString()).toBe('<input type="checkbox"/>')
    })

    it('default prop value for selected', () => {
      const template = (
        <option value='test' selected>
          Test
        </option>
      )
      expect(template.toString()).toBe('<option value="test" selected="selected">Test</option>')
    })

    it('default prop value for selected={true}', () => {
      const template = (
        <option value='test' selected={true}>
          Test

Review comment (suggestion):
I think it's better to render the attribute with no value like the below:

```
<input type="checkbox" checked/>'
```

Code after:
  })

  // https://en.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
  describe('Booleans, Null, and Undefined Are Ignored', () => {
    it.each([true, false, undefined, null])('%s', (item) => {
      expect((<span>{item}</span>).toString()).toBe('<span></span>')
    })

    it('falsy value', () => {
      const template = <span>{0}</span>
      expect(template.toString()).toBe('<span>0</span>')
    })
  })

  // https://en.reactjs.org/docs/jsx-in-depth.html#props-default-to-true
  describe('Props Default to “True”', () => {
    it('default prop value', () => {
      const template = <span data-hello>Hello</span>
      expect(template.toString()).toBe('<span data-hello="true">Hello</span>')
    })
  })

  describe('Special case for input boolean params', () => {
    it('default prop value for checked', () => {
      const template = <input type='checkbox' checked />
      expect(template.toString()).toBe('<input type="checkbox" checked=""/>')
    })

    it('default prop value for checked={true}', () => {
      const template = <input type='checkbox' checked={true} />
      expect(template.toString()).toBe('<input type="checkbox" checked=""/>')
    })

    it('no prop for checked={false}', () => {
      const template = <input type='checkbox' checked={false} />
      expect(template.toString()).toBe('<input type="checkbox"/>')
    })

    it('default prop value for disabled', () => {
      const template = <input type='checkbox' disabled />
      expect(template.toString()).toBe('<input type="checkbox" disabled=""/>')
    })

    it('default prop value for disabled={true}', () => {
      const template = <input type='checkbox' disabled={true} />
      expect(template.toString()).toBe('<input type="checkbox" disabled=""/>')
    })

    it('no prop for disabled={false}', () => {
      const template = <input type='checkbox' disabled={false} />
      expect(template.toString()).toBe('<input type="checkbox"/>')