under phantomjs items are not removed from dom

[macrozone]

I show a list of elements as children in a FlipMove-component.

In a end-to-end-test elements got added to this list and got removed. I therefore have assertions on the number of items in this list.

When I run this test under chrome, the number of items is correct and the test succeeds. When I run it under phantomjs however, the items are not removed from the dom.

My workaround at the moment is to disable flipmove on phantomjs:

import FlipMoveOrg from 'react-flip-move';

const FlipMove = (props) => {
  // do the "VW" and check if we are running on PhantomJS
  /* global window*/
  if (/PhantomJS/.test(window.navigator.userAgent)) {
    return <div {...props} />;
  }
  return <FlipMoveOrg {...props} />;
};

export default FlipMove;

flipmove 2.9.1

[joshwcomeau]

Weird; I'm not super familiar with PhantomJS, but I was under the impression it was just a headless webkit engine. It should still be able to work in that environment...

While your workaround isn't ideal, it'll have to do; I don't think I'll be able to dedicate any time to this for a while. If anyone else wants to take a shot at fixing it, feel free!

[rhys-vdw]

Hi @macrozone. We're also using ReactFlipMove with PhantomJS. We have this script set up for our testing environment:

test_helper.rb

# ...
Capybara.register_driver :poltergeist do |app|
  options = {
    screen_size: [1920, 1080],
    window_size: [1920, 1080],
    # Inject a script to disable all CSS animations in the test suite.
    # This avoids failures caused by animations related timing issues, and failures
    # when Capybara refuses to `click` an element that is overlapped with another visible element.
    extensions: [Rails.root.join("test", "support", "phantomjs-disable-animations.js").to_s]
  }
  Capybara::Poltergeist::Driver.new(app, options)
end

phantomjs-disable-animations.js

var disableAnimationStyles = '-webkit-transition: none !important;' +
                             '-moz-transition: none !important;' +
                             '-ms-transition: none !important;' +
                             '-o-transition: none !important;' +
                             'transition: none !important;'

window.onload = function() {
  var animationStyles = document.createElement('style');
  animationStyles.type = 'text/css';
  animationStyles.innerHTML = '* {' + disableAnimationStyles + '}';
  document.head.appendChild(animationStyles);
};

This script predates our use of ReactFlipMove (and my working on the project) but suggests general problems with CSS animations in PhantomJS.

EDIT: This script was only added recently and may have been to address issues specific to ReactFlipMove.

[macrozone]

Hi @rhys-vdw, thanks for your solution!

We now found a much better solution by using firefox headless instead of phantomjs, which seems to be more reliable.

for anyone interested, we run the tests under gitlab-ci and use this docker file there: https://github.com/Blurri/meteor-node/blob/master/Dockerfile (for meteor)

you need to add this to the gitlab-ci.yaml:

before_script:
  - Xvfb :10 -ac &
  - export DISPLAY=:10

[joshwcomeau]

Going to close this because it sounds like a solved issue. Thanks for sharing @rhys-vdw!