diff --git a/data/mods/TEST_DATA/widgets.json b/data/mods/TEST_DATA/widgets.json
index e10ed0e315ea9..2f65d935136ba 100644
--- a/data/mods/TEST_DATA/widgets.json
+++ b/data/mods/TEST_DATA/widgets.json
@@ -85,6 +85,30 @@
     "var": "rad_badge_text",
     "style": "text"
   },
+  {
+    "id": "test_compass_N_nodir_nowidth",
+    "type": "widget",
+    "label": "N",
+    "var": "compass_text",
+    "style": "text"
+  },
+  {
+    "id": "test_compass_N_nowidth",
+    "type": "widget",
+    "label": "N",
+    "var": "compass_text",
+    "style": "text",
+    "direction": "N"
+  },
+  {
+    "id": "test_compass_N",
+    "type": "widget",
+    "label": "N",
+    "var": "compass_text",
+    "style": "text",
+    "direction": "N",
+    "width": 4
+  },
   {
     "id": "test_speed_num",
     "type": "widget",
diff --git a/tests/widget_test.cpp b/tests/widget_test.cpp
index 0044ebda34bc7..2a7a9f4a38b39 100644
--- a/tests/widget_test.cpp
+++ b/tests/widget_test.cpp
@@ -1,6 +1,9 @@
 #include "catch/catch.hpp"
 
+#include "game.h"
 #include "player_helpers.h"
+#include "map_helpers.h"
+#include "monster.h"
 #include "morale.h"
 #include "widget.h"
 
@@ -16,6 +19,9 @@ static const widget_id widget_test_bucket_graph( "test_bucket_graph" );
 static const widget_id widget_test_color_graph_10k_widget( "test_color_graph_10k_widget" );
 static const widget_id widget_test_color_graph_widget( "test_color_graph_widget" );
 static const widget_id widget_test_color_number_widget( "test_color_number_widget" );
+static const widget_id widget_test_compass_N( "test_compass_N" );
+static const widget_id widget_test_compass_N_nodir_nowidth( "test_compass_N_nodir_nowidth" );
+static const widget_id widget_test_compass_N_nowidth( "test_compass_N_nowidth" );
 static const widget_id widget_test_dex_num( "test_dex_num" );
 static const widget_id widget_test_focus_num( "test_focus_num" );
 static const widget_id widget_test_hp_head_graph( "test_hp_head_graph" );
@@ -396,6 +402,86 @@ TEST_CASE( "radiation badge widget", "[widget][radiation]" )
     CHECK( rads_w.layout( ava ) == "RADIATION: <color_c_pink> black </color>" );
 }
 
+TEST_CASE( "compass widget", "[widget]" )
+{
+    widget c5s_N = widget_test_compass_N.obj();
+    widget c5s_N_nowidth = widget_test_compass_N_nowidth.obj();
+    widget c5s_N_nodir_nowidth = widget_test_compass_N_nodir_nowidth.obj();
+
+    avatar &ava = get_avatar();
+    clear_avatar();
+    set_time( calendar::turn_zero + 12_hours );
+
+    const tripoint northeast = ava.pos() + tripoint( 10, -10, 0 );
+    const tripoint north = ava.pos() + tripoint( 0, -15, 0 );
+
+    SECTION( "No monsters" ) {
+        clear_creatures();
+        CHECK( c5s_N.layout( ava ) == "N: " );
+        CHECK( c5s_N_nowidth.layout( ava ) == "N: " );
+        CHECK( c5s_N_nodir_nowidth.layout( ava ) == "N: " );
+    }
+
+    SECTION( "1 monster NE" ) {
+        clear_creatures();
+        monster &mon1 = spawn_test_monster( "mon_test_CBM", northeast );
+        g->mon_info_update();
+        REQUIRE( ava.sees( mon1 ) );
+        REQUIRE( ava.get_mon_visible().unique_mons[static_cast<int>( cardinal_direction::NORTHEAST )].size()
+                 == 1 );
+        CHECK( c5s_N.layout( ava ) == "N: " );
+        CHECK( c5s_N_nowidth.layout( ava ) == "N: " );
+        CHECK( c5s_N_nodir_nowidth.layout( ava ) == "N: " );
+    }
+
+    SECTION( "1 monster N" ) {
+        clear_creatures();
+        monster &mon1 = spawn_test_monster( "mon_test_CBM", north );
+        g->mon_info_update();
+        REQUIRE( ava.sees( mon1 ) );
+        REQUIRE( ava.get_mon_visible().unique_mons[static_cast<int>( cardinal_direction::NORTH )].size() ==
+                 1 );
+        CHECK( c5s_N.layout( ava ) == "N: <color_c_white>B</color>" );
+        CHECK( c5s_N_nowidth.layout( ava ) == "N: <color_c_white>+</color>" );
+        CHECK( c5s_N_nodir_nowidth.layout( ava ) == "N: " );
+    }
+
+    SECTION( "3 same monsters N" ) {
+        clear_creatures();
+        monster &mon1 = spawn_test_monster( "mon_test_CBM", north );
+        //NOLINTNEXTLINE(cata-use-named-point-constants)
+        monster &mon2 = spawn_test_monster( "mon_test_CBM", north + tripoint( 0, -1, 0 ) );
+        monster &mon3 = spawn_test_monster( "mon_test_CBM", north + tripoint( 0, -2, 0 ) );
+        g->mon_info_update();
+        REQUIRE( ava.sees( mon1 ) );
+        REQUIRE( ava.sees( mon2 ) );
+        REQUIRE( ava.sees( mon3 ) );
+        REQUIRE( ava.get_mon_visible().unique_mons[static_cast<int>( cardinal_direction::NORTH )].size() ==
+                 1 );
+        CHECK( c5s_N.layout( ava ) == "N: <color_c_white>B</color>" );
+        CHECK( c5s_N_nowidth.layout( ava ) == "N: <color_c_white>+</color>" );
+        CHECK( c5s_N_nodir_nowidth.layout( ava ) == "N: " );
+    }
+
+    SECTION( "3 different monsters N" ) {
+        clear_creatures();
+        monster &mon1 = spawn_test_monster( "mon_test_CBM", north );
+        //NOLINTNEXTLINE(cata-use-named-point-constants)
+        monster &mon2 = spawn_test_monster( "mon_test_bovine", north + tripoint( 0, -1, 0 ) );
+        monster &mon3 = spawn_test_monster( "mon_test_shearable", north + tripoint( 0, -2, 0 ) );
+        g->mon_info_update();
+        REQUIRE( ava.sees( mon1 ) );
+        REQUIRE( ava.sees( mon2 ) );
+        REQUIRE( ava.sees( mon3 ) );
+        REQUIRE( ava.get_mon_visible().unique_mons[static_cast<int>( cardinal_direction::NORTH )].size() ==
+                 3 );
+        CHECK( c5s_N.layout( ava ) ==
+               "N: <color_c_white>B</color><color_c_white>B</color><color_c_white>S</color>" );
+        CHECK( c5s_N_nowidth.layout( ava ) == "N: <color_c_white>+</color>" );
+        CHECK( c5s_N_nodir_nowidth.layout( ava ) == "N: " );
+    }
+}
+
 // Widgets with "layout" style can combine other widgets in columns or rows.
 //
 // Using "arrange": "columns", width is divided as equally as possible among widgets.