Unit test dash_html_components and dash_core_components

Dash Python
1

I am trying to write some components made of html and core components. I wanted to make some unit tests, on this components, but I don’t know how to compare html/core components.

My first try was:

div_a = html.Div(className="a")
div_b = html.Div(className="b")
div_a == div_b # Always True

I also tried converting components to string, but I find it really clunky, specially with nested components.

Is there any better alternative? Maybe converting it to dict?

2

I also ran into this issue.

In your case you could solve it by testing as:

  div_a.__dict__ == div_b.__dict__ # False

But; that still doesn’t solve it in all (including my own) case as this also happens once you have nested components:

   div2_a = html.Div([html.Summary('a')])
   div2_b = html.Div([html.Summary('b')])
   div2_a.__dict__ == div2_b.__dict__ # True
   div2_a == div2_b # True! 
   div2_a.children[0].children == div2_b.children[0].children # finally False!

My guess is that the __eq__ implementation for the components only checks if they are instances of the same class and ignores checking on any further properties, hence what you observed and that nested children are also never equated, but haven’t actually found it in the source yet.

I’m currently trying something like this and it’s working ok but feels kinda janky…

class TestScenarioOutputs(unittest.TestCase):

maxDiff = None
def assert_html_equal(self, html1, html2):
    try:
        print('html1:', html1.__dict__, ', html2:', html2.__dict__, sep='')
        self.assertEqual(html1.__dict__, html2.__dict__)
        for h1, h2 in zip(html1.children, html2.children):
            self.assert_html_equal(h1, h2)
    except AttributeError:
        pass
3

You could also do

import json
import plotly

json.loads(json.dumps(layout, cls=plotly.utils.PlotlyJSONEncoder))
2 Likes
4

Thank yoooou - knew there must have been a cleaner way.

1 Like