Repository: cypress-io/cypress
File: packages/reporter/src/commands/command.spec.tsx (TypeScript)

Code before:
    })
  })

  context('other contents', () => {
    it('renders a <FlashOnClick /> around the contents', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('FlashOnClick')).to.exist
    })

    it('the <FlashOnClick /> has a pinned snapshot and console print message', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('FlashOnClick')).to.have.prop('message', 'Printed output to your console')
    })

    it('renders the number', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('.command-number')).to.have.text('1')
    })

    it('displays the timeout progress indicator', () => {
      const component = shallow(<Command model={model({ state: 'pending' })} aliasesWithDuplicates={null} />)

      expect(component.find(Progress).first()).to.exist
    })
  })

  context('snapshots', () => {
    let clock: SinonFakeTimers
    let events: Events
    let runnablesStore: RunnablesStore
    let command: ShallowWrapper<Command>

    beforeEach(() => {
      clock = sinon.useFakeTimers()
    })

    beforeEach(() => {
      events = eventsStub()
      runnablesStore = runnablesStoreStub()
      command = shallow(<Command
        model={model()}
        events={events}
        runnablesStore={runnablesStore}
        aliasesWithDuplicates={null}
      />)
    })

    describe('on mouse over', () => {

Review comment (bug):
I do not believe this spec can fail meaningfully. It only shows that Progress is rendered, not that it works properly.

Do you understand why this spec was failing when you were looking for the DOM structure of `Progress` to assert the indicator was working? (e.g. the difference between shallow and a full mount?)

Code after:
    })
  })

  context('other contents', () => {
    it('renders a <FlashOnClick /> around the contents', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('FlashOnClick')).to.exist
    })

    it('the <FlashOnClick /> has a pinned snapshot and console print message', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('FlashOnClick')).to.have.prop('message', 'Printed output to your console')
    })

    it('renders the number', () => {
      const component = shallow(<Command model={model()} aliasesWithDuplicates={null} />)

      expect(component.find('.command-number')).to.have.text('1')
    })

    context('progress indicator', () => {
      let clock : SinonFakeTimers

      beforeEach(() => {
        clock = sinon.useFakeTimers()
      })

      afterEach(() => {
        clock.restore()
      })

      it('renders the progress indicator', () => {
        const component = shallow(<Command model={model({ state: 'pending' })} aliasesWithDuplicates={null} />)

        expect(component.find(Progress)).to.exist
      })

      it('modifies the timer width based on time elapsed', () => {
        const initialDate = new Date(Date.now())
        const timeout = 1000

        clock.tick(timeout / 2)

        const component = mount(<Progress
          model={
            model({
              wallClockStartedAt: initialDate.toJSON(),
              timeout,
            })}