mercredi 20 novembre 2019

Testing a change in state with Jest and React

I'm having some issue with testing a change of state using Jest. The state that will be changing in this instance is playerMessage. I have a bunch of if statements which trigger the state change and therefore a different case in a switch statement. I'm basically changing the state if certain factors are true or false. I'm having some issues with writing the correct tests in order to fully test this implementation.

My test code is below as well. I have a mock object in my test too which is what is returned from the login.getUser() function and subsequent promise I feel i need to test this asynchronously but i'm just not sure of the correct syntax

Any help with this would be appreciated. Thanks

constructor(props) {
    super(props)
    this.state = {
      playerMessage: '',
      showCardFields: true,
    }
  }

  componentDidMount() {
    this.getSubscriptionDetails()
  }

  getSubscriptionDetails = () => {
    login.getUser()
      .then((user) => {
        if (!user.subscriptions) return
        const appleUser = user.subscriptions.includes('device')
        const subscriptionDetails = JSON.parse(user.subscriptions) //this is returned as a string hence the JSON parse
        console.log(subscriptionDetails)
        const { usedTrial, isTrial, expiry } = subscriptionDetails.device.paymentPlan
        const today = moment().format()
        const expiredTrial = today > expiry

        if (usedTrial) {
          this.setState({
            playerMessage: 'usedTrial',
          })
        }
        if (isTrial || usedTrial) {
          this.setState({
            showCardFields: false,
          })
        }
        if (deviceUser && !expiredTrial) {
          this.setState({
            playerMessage: 'subscribedViaDevice',
          })
        }
      })
      .catch((error) => {
        this.setState({
          playerMessage: 'Error',
        })
      })
  }

  handleIsTrial = (playerMessage) => {
    switch (playerMessage) {
      case 'usedTrial':
        return (
          'Upgrade please'
        )
      default:
        return (
          'Start your 7 day free trial'
        )
    }
  }

const mockSubscriptionObject = {
  device: {
    subscriptionDetails: { expiry: '2075-02-26T09:09:56+00:00', isTrial: false, usedTrial: true },
  },
}

let playerWrapper = mount(<Player {...mockSubscriptionObject} />)

describe('<Player /> page component', () => {
  playerWrapper = mount(<Player {...mockSubscriptionObject} />)

  it('renders the Player page component', () => {
    expect(playerWrapper.exists()).toBe(true)
  })

  it('returns a landing page for users to upgrade their subscription after their trial has expired ', () => {
    playerWrapper = mount(<Player {...mockSubscriptionObject} />)
    const instance = playerWrapper.instance()
    expect(playerWrapper.state('playerMessage')).toEqual('')
    instance.getSubscriptionDetails()
    expect(playerWrapper.state('playerMessage')).toEqual('usedTrial')
  })
})

Aucun commentaire:

Enregistrer un commentaire