Added pytest for /posts route and updated template

blogexample/templates/posts.html

@@ -7,35 +7,40 @@
 
     <title>Posts</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 
-    <link rel="stylesheet" type="text/css" href="../static/css/styles.css">
-    <style type="text/css">
-      #us{
-        float: right;
-        margin-right: 20px;
-        margin-top: 10px;
+    <style>
+      .flashes-container{
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
-      #us h3{
-        margin: 0 0 0 0;
+      .flashes{
+
+        color: rgb(77, 158, 190);
+        align-self: center;
       }
       .ps{
         width: 60%;
         margin-top: 20px;
         margin-left: 20%
       }
-      #icon{
-        float: right;
-        margin-top: -15px;
+      .icon{
+        margin-top: -20px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap:12px;
       }
-      #signout{
-        width: 100px;
-        height: 20px;
+      #myform{
+        display:inline;
       }
-      #signout a{
-        padding: 2px 0px 2px 20px;
+      #myform button{
+        padding:0; 
+
       }
     </style>
   </head>
@@ -47,20 +52,25 @@
 </div>
 {% with messages = get_flashed_messages() %}
   {% if messages %}
+  <div class="flashes-container">
     {% for message in messages %}
-      <h3 class="flashes" align="center" style="color:#337ab7">{{ message }}</h3>
+      <h3 class="flashes">{{ message }}</h3>
     {% endfor %}
+    </div>
   {% endif %}
 {% endwith %}
 <div class="ps">
 {% for each_post in posts %}
 <div class="panel panel-info">
   <div class="panel-heading">
     <div><h3 class="panel-title">{{each_post.title}}</h3></div>
-    <div id="icon">  
-      <a class="glyphicon glyphicon-sunglasses" href="/detail/{{ each_post.url }}"></a>&nbsp &nbsp
-      <a class="glyphicon glyphicon-pencil" href="/update/{{ each_post.id }}"></a>&nbsp &nbsp
-      <a class="glyphicon glyphicon-trash" id="del" href="/delete/{{ each_post.id }}"></a>
+    <div class="icon">  
+      <a class="glyphicon glyphicon-sunglasses" href="/detail/{{ each_post.url }}"></a>
+      <a class="glyphicon glyphicon-pencil" href="/update/{{ each_post.id }}"></a>
+      <form method="POST" id="myform" action="{{ url_for('blog.delete_post', pid=each_post.id) }}" onsubmit="return confirm('Are you sure you want to delete this post?');">
+        <button type="submit" class="btn btn-link glyphicon glyphicon-trash"></button>
+      </form>
+
     </div>
   </div>
   <div class="panel-body"><p>{{ each_post.body|safe }}</p> 

pytest.ini

@@ -0,0 +1,3 @@
+[pytest]
+pythonpath = .
+addopts = --maxfail=1 --disable-warnings -v

tests/conftest.py

@@ -0,0 +1,11 @@
+import pytest
+from blogexample.app import create_app  # Adjust to your actual app location
+
+@pytest.fixture
+def app():
+    app = create_app()  # If your app creation function is called create_app
+    yield app
+
+@pytest.fixture
+def client(app):
+    return app.test_client()

tests/test_routes.py

@@ -0,0 +1,4 @@
+def test_home_route_status_code(client):
+    """Test the status code of the posts route"""
+    response = client.get('/posts')
+    assert response.status_code == 200