/* eslint-env jest */
import React from 'react'
import { cleanup } from '@testing-library/react'
import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
import UndoRedo from '../UndoRedo'
import { replaceUndoStack } from '../../store/actions/undo'

// `getRemixOnFirstEdit` is a legacy function, so for the purposes of this
// test suite it always returns `false` (aka, assume user owns the street)
jest.mock('../../streets/remix', () => ({
  getRemixOnFirstEdit: () => false
}))

describe('UndoRedo', () => {
  afterEach(() => {
    cleanup()
  })

  it('renders two buttons', () => {
    const wrapper = renderWithReduxAndIntl(<UndoRedo />)
    expect(wrapper.asFragment()).toMatchSnapshot()
  })

  it('enables undo button when an undo stack is created', () => {
    const wrapper = renderWithReduxAndIntl(<UndoRedo />, {
      initialState: {
        undo: {
          stack: [],
          position: 0
        }
      }
    })
    const undoButton = wrapper.getByTitle('Undo')
    const redoButton = wrapper.getByTitle('Redo')

    // Initial button states are disabled
    expect(undoButton.disabled).toEqual(true)
    expect(redoButton.disabled).toEqual(true)

    // Update undo stack state, and `<UndoRedo>` should receive new props
    // This is akin to a user editing the street once
    wrapper.store.dispatch(replaceUndoStack([{ foo: 'bar' }], 1))

    // Undo button state should become enabled
    // Redo button should remain disabled
    expect(undoButton.disabled).toEqual(false)
    expect(redoButton.disabled).toEqual(true)
  })

  it('enables redo button when undo stack position is lower than the top of the stack', () => {
    const wrapper = renderWithReduxAndIntl(<UndoRedo />, {
      initialState: {
        undo: {
          stack: [
            { foo: 'bar' },
            { foo: 'baz' }
          ],
          position: 0
        }
      }
    })

    // In this scenario, redo is available, but undo is not.
    expect(wrapper.getByTitle('Undo').disabled).toEqual(true)
    expect(wrapper.getByTitle('Redo').disabled).toEqual(false)
  })
})

@@ -57,16 +57,27 @@
  cleanup
+, fireEvent
  %7D from 
@@ -97,24 +97,24 @@
 rary/react'%0A
-
 import %7B ren
@@ -1218,16 +1218,33 @@
 ck state
+ from %22elsewhere%22
 , and %60%3C
@@ -1260,16 +1260,23 @@
 %60 should
+%0A    //
  receive
@@ -1285,23 +1285,17 @@
 ew props
-%0A    //
+.
  This is
@@ -2032,32 +2032,32 @@
 ).toEqual(true)%0A
-
     expect(wrapp
@@ -2107,12 +2107,978 @@
 se)%0A  %7D)
+%0A%0A  it('calls undo action when undo button is clicked', () =%3E %7B%0A    const wrapper = renderWithReduxAndIntl(%3CUndoRedo /%3E, %7B%0A      initialState: %7B%0A        undo: %7B%0A          stack: %5B%0A            %7B foo: 'bar' %7D,%0A            %7B foo: 'baz' %7D%0A          %5D,%0A          position: 1%0A        %7D%0A      %7D%0A    %7D)%0A%0A    // Expect the undo position to decrement when undo button is clicked%0A    fireEvent.click(wrapper.getByTitle('Undo'))%0A    expect(wrapper.store.getState().undo.position).toEqual(0)%0A  %7D)%0A%0A  it('calls redo action when redo button is clicked', () =%3E %7B%0A    const wrapper = renderWithReduxAndIntl(%3CUndoRedo /%3E, %7B%0A      initialState: %7B%0A        undo: %7B%0A          stack: %5B%0A            %7B foo: 'bar' %7D,%0A            %7B foo: 'baz' %7D%0A          %5D,%0A          position: 0%0A        %7D%0A      %7D%0A    %7D)%0A%0A    // Expect the undo position to increment when redo button is clicked%0A    fireEvent.click(wrapper.getByTitle('Redo'))%0A    expect(wrapper.store.getState().undo.position).toEqual(1)%0A  %7D)
 %0A%7D)%0A

include state changes