Developer Journal: 07 May 2020

Posted on Thu 07 May 2020 in dev-journal

Finishing event parsing branch

I left off with this branch last by writing a unit test

def test_event_parses_byte_string_list(self):
    test_data = [b'', b'Fetching origin\n', b"Your branch is up to date"]
    expected_output = "Fetching origin\nYour branch is up to date"
    output = parse_events(test_data)
    self.assertEqual(expected_output, output)

Once this test is passing we should have a good idea that the output is at the very least being converted from a bytestring to a normal string.

Seems pretty simple, loop through each event in the events list and convert it to utf-8. I'm also going to do a check to make sure we are actually converting a bytestring and also ignore any errors while trying to convert. Being explicit with the str function below to help me remember that the str() function takes three arguments. I often forget about the errors option.

def parse_events(events):
    event_output = ""
    for event in events:
        if type(event) is bytes:
            event = str(event, encoding='utf-8', errors='ignore')
            event_output += event
    return event_output

Now let's do some manual testing to see what this looks like in the browser.

Event Output Comparison

It is much more readable now, but the text now overflows out of the modal.

No problem, just need to add the wordwrap filter to the output and errors in the template.

{% if output %}
    <p>Output:</p>
    <p>{{ output | wordwrap}}</p>
{% endif %}
{% if errors %}
    <p>Warnings and Errors:</p>
    <p>{{ errors | wordwrap}}</p>
{% endif %}

Error Event Ouput

While this works, the padding on the right side of the element is not being obeyed. Also, there really should be a scrollbar for the vertical content within the modal, it is currently on the page element.

Did some element styling and ended up with this:

Error Event Ouput

It could be better but it is a big step ahead of where it was, this should help in debugging issues with deployments on Conveyor.

Additional Notes

To create the image comparing the output side-by-side I used the following image magick command: convert +append events*.png event_comparison.png