describe('Multiple nested sets', () => {
  const HomePage = () => <h1>Home Page</h1>
  const Page = () => <h1>Page</h1>

  const DebugLayout = (props) => {
    return (
      <div>
        <p>Theme: {props.theme}</p>
        <p>Other Prop: {props.otherProp}</p>
        <p>Page Level: {props.level}</p>
        {props.children}
      </div>
    )
  }

  const TestRouter = () => (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Set level="1" theme="blue" wrap={DebugLayout}>
        <Route path="/level1" page={Page} name="level1" />
        <Set level="2" theme="red" otherProp="bazinga">
          <Route path="/level2" page={Page} name="level2" />
          <Set level="3" theme="green">
            <Route path="/level3" page={Page} name="level3" />
          </Set>
        </Set>
      </Set>
    </Router>
  )

  test('level 1, matches expected props', async () => {
    const screen = render(<TestRouter />)

    act(() => navigate('/level1'))

    await waitFor(() => {
      expect(screen.queryByText(`Theme: blue`)).toBeInTheDocument()
      expect(screen.queryByText(`Page Level: 1`)).toBeInTheDocument()
    })
  })

  test('level 2, should override level 1', async () => {
    const screen = render(<TestRouter />)

    act(() => navigate('/level2'))

    await waitFor(() => {
      expect(screen.queryByText(`Theme: red`)).toBeInTheDocument()
      expect(screen.queryByText(`Other Prop: bazinga`)).toBeInTheDocument()
      expect(screen.queryByText(`Page Level: 2`)).toBeInTheDocument()
    })
  })

  test('level 3, should override level 1 & 2 and pass through other props', async () => {
    const screen = render(<TestRouter />)

    act(() => navigate('/level3'))

    await waitFor(() => {
      expect(screen.queryByText(`Theme: green`)).toBeInTheDocument()
      expect(screen.queryByText(`Other Prop: bazinga`)).toBeInTheDocument()
      expect(screen.queryByText(`Page Level: 3`)).toBeInTheDocument()
    })
  })
})