Make newlines visible in deleted messages

https://github.com/python-discord/site/issues/302

This commit makes newlines in deleted messages visible in the deleted
messages front-end and makes sure they are not stripped during the
conversion to HTML. To represent newlines, I've chosen a commonly
used symbol: `↵`.

In addition, I've kaizened the colour filter that translates integer
representations of colours to their RGB hex-value. The Discord dark
theme shows black colours (int: 0; hex: #000000) as white instead, to
make reading them against the dark background easier. This commit
makes sure our front-end displays the same behavior.

This closes #302

1 files changed, 38 insertions, 5 deletions

diff --git a/pydis_site/apps/staff/tests/test_deletedmessage_filters.py b/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
index d9179044..31215784 100644
--- a/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
+++ b/pydis_site/apps/staff/tests/test_deletedmessage_filters.py
@@ -18,16 +18,49 @@ class Colour(enum.IntEnum):
 
 class DeletedMessageFilterTests(TestCase):
     def test_hex_colour_filter(self):
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.BLACK), "#000000")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.BLUE), "#0000FF")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.GREEN), "#00FF00")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.RED), "#FF0000")
-        self.assertEqual(deletedmessage_filters.hex_colour(Colour.WHITE), "#FFFFFF")
+        """The filter should produce the correct hex values from the integer representations."""
+        test_values = (
+            (Colour.BLUE, "#0000FF"),
+            (Colour.GREEN, "#00FF00"),
+            (Colour.RED, "#FF0000"),
+            (Colour.WHITE, "#FFFFFF"),
+
+            # Since we're using a "Discord dark theme"-like front-end, show black text as white.
+            (Colour.BLACK, "#FFFFFF"),
+        )
+
+        for colour, hex_value in test_values:
+            with self.subTest(colour=colour, hex_value=hex_value):
+                self.assertEqual(deletedmessage_filters.hex_colour(colour), hex_value)
 
     def test_footer_datetime_filter(self):
+        """The filter should parse the ISO-datetime string and return a timezone-aware datetime."""
         datetime_aware = timezone.now()
         iso_string = datetime_aware.isoformat()
 
         datetime_returned = deletedmessage_filters.footer_datetime(iso_string)
         self.assertTrue(timezone.is_aware(datetime_returned))
         self.assertEqual(datetime_aware, datetime_returned)
+
+    def test_visual_newlines_filter(self):
+        """The filter should replace newline characters by newline character and html linebreak."""
+        html_br = " <span class='has-text-grey'>↵</span><br>"
+
+        test_values = (
+            (
+                "Hello, this line does not contain a linebreak",
+                "Hello, this line does not contain a linebreak"
+            ),
+            (
+                "A single linebreak\nin a string",
+                f"A single linebreak{html_br}in a string"
+            ),
+            (
+                "Consecutive linebreaks\n\n\nwork, too",
+                f"Consecutive linebreaks{html_br}{html_br}{html_br}work, too"
+            )
+        )
+
+        for input_, expected_output in test_values:
+            with self.subTest(input=input_, expected_output=expected_output):
+                self.assertEqual(deletedmessage_filters.visible_newlines(input_), expected_output)