Detox: Testing a React-Native spinner with a stop button

Question

Was wondering if anyone has had a similar issue.

In the app I'm working with, we have a spinner showing downloading content with a stop button in the middle. When the user taps the spinner/stop button, the download is meant to cancel. For reference the spinner/stop button looks like this on iOS:

I'm trying to write an e2e test for this functionality using Detox. It doesn't work using automatic synchronisation as the animation (and the download) keeps the thread running. I've tried using device.disableSynchronization() but I haven't had any success.

Here's my e2e test for reference:

it('should start and then cancel a download from the <My Learning> screen', async() => {
  // setup
  await device.reloadReactNative()
  await expect(element(by.id('feed_screen'))).toBeVisible()
  await element(by.id('LearningPlan_Tab')).tap()
  await expect(element(by.id('learning-plan-screen'))).toBeVisible()
  
  // Tap the download icon, it will turn into a spinner
  await element(by.id('offline_download_c2a')).atIndex(1).tap()
  
  // Alert box appears with Cancel/Download options
  await expect(element(by.label('Download')).atIndex(1)).toBeVisible()
  await element(by.label('Download')).atIndex(1).tap()
  
  // Ideally this would work, but it doesn't (the above alert box doesn't dismiss properly)
  await device.disableSynchronization()
  await waitFor(element(by.id('download_spinner_c2a')).atIndex(0)).toBeVisible().withTimeout(5000)
  await element(by.id('download_spinner_c2a')).atIndex(0).tap()
  await device.enableSynchronization()
  await element(by.label('Cancel download')).tap()
  await expect(element(by.id('offline_download_c2a')).atIndex(1)).toBeVisible()
})

When this test runs the app still seems to wait for the download to finish. Does anyone know any suggestions on the best way to test this, or if it's even possible?

score 0 · Answer 1 · answered Jul 19 '18 at 10:39

I've found a way to make it work, though it seems quite flaky:

  it('should start and then cancel a download from the <My Learning> screen', async () => {
    //...
    await device.disableSynchronization()
    // This timeout seems to help
    await     waitFor(element(by.id('download_spinner_c2a')).atIndex(0)).toBeVisible().withTimeout(10000) 
    await element(by.id('download_spinner_c2a')).atIndex(0).tap()
    await device.enableSynchronization()
    await element(by.label('Cancel download')).tap()
    await expect(element(by.id('offline_download_c2a')).atIndex(1)).toBeVisible()
  })

Detox: Testing a React-Native spinner with a stop button

1 Answers1