title: How to test MutationObserver
body: <p>I want to synchronize some DOM node attributes. If an attribute is changed then it changes other elements attribute.</p>
  
  <p>I can change it but I cannot write an test for it. The test changes the attribute of the observed element and then checks if the changes where applied to other elements. The change sync will eventually happen, but not immediately after the observed element attribute change.</p>
  
  <p>In <a href="https://codepen.io/microo8/pen/jwjGOr" rel="nofollow noreferrer">this example</a> I've created three divs and want to synchronize the class attribute of <code>#div1</code> to other two.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="div1" class="foo"&gt;&lt;/div&gt;
  &lt;div id="div2" class="foo"&gt;&lt;/div&gt;
  &lt;div id="div3" class="foo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>let div1 = document.getElementById("div1")
  let div2 = document.getElementById("div2")
  let div3 = document.getElementById("div3")
  
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation.target.getAttribute("class"))
      //sync the new attribute value to
      div2.setAttribute("class", mutation.target.getAttribute("class"))
      div3.setAttribute("class", mutation.target.getAttribute("class"))
    })
  })
  // pass in the target node, as well as the observer options
  observer.observe(div1, { attributes: true, attributeFilter: ["class"]})
  
  //the test sets the class attribute of div1 to 'bar'
  div1.setAttribute("class", "bar")
  //then checks if div2 and div3 class is set to 'bar'
  console.log("is div2.class = 'bar'?", div2.getAttribute("class") == "bar")
  console.log("is div3.class = 'bar'?", div3.getAttribute("class") == "bar")
  </code></pre>
  
  <p>the output is:</p>
  
  <pre><code>is div2.class = 'bar'? false
  is div3.class = 'bar'? false
  bar
  </code></pre>
  
  <p><code>MutationObserver</code> runs only after the checks and then the <code>div2.class</code> and <code>div3.class</code> are set to <code>'bar'</code>. So my question is, how to test the synchronization of attributes with <code>MutationObserver</code>.</p>