Action Button and Add scenario for Action

Makefile

@@ -32,7 +32,7 @@ lint: ## Run the linter
 	flake8 service tests --count --max-complexity=10 --max-line-length=127 --statistics
 	pylint service tests --max-line-length=127
 
-.PHONY: tests
+.PHONY: test
 test: ## Run the unit tests
 	$(info Running tests...)
 	green -vvv --processes=1 --run-coverage --termcolor --minimum-coverage=95

features/products.feature

@@ -182,4 +182,26 @@ Scenario: Query a Product by Available
     And I select "False" in the "Available" dropdown
     And I press the "Search" button
     Then I should see the message "Success"
-    And I should see "iPhone 16" in the results
+    And I should see "iPhone 16" in the results
+
+Scenario: Action Change the Availability of a Product
+    When I visit the "Home Page"
+    And I press the "Search" button
+    Then I should see the message "Success"
+    When I copy the "Id" field
+    And I press the "Clear" button
+    Then the "Id" field should be empty
+    And the "Name" field should be empty
+    And the "Category" field should be empty
+    And the "Description" field should be empty
+    And the "Price" field should be empty
+    And the "image_url" field should be empty
+    When I paste the "Id" field
+    And I press the "Change Availability" button
+    Then I should see the message "Product availability changed to False"
+    And I should see "iPhone 15" in the "name" field
+    And I should see "Best iphone for now" in the "description" field
+    And I should see "999" in the "price" field
+    And I should see "False" in the "available" dropdown
+    And I should see "sample.url" in the "image_url" field
+    And I should see "ELECTRONICS" in the "category" field

features/steps/web_steps.py

@@ -116,7 +116,7 @@ def step_impl(context, element_name):
 
 @when('I press the "{button}" button')
 def step_impl(context, button):
-    button_id = button.lower() + "-btn"
+    button_id = button.lower().replace(" ", "_") + "-btn"
     context.driver.find_element(By.ID, button_id).click()
 
 

service/routes.py

@@ -226,12 +226,12 @@ def change_product_availability(product_id):
     new_availability = not product.available
     product.available = new_availability
     db.session.commit()
+    message = {"message": f"Product availability changed to {new_availability}"}
+    message = {**message, **product.serialize()}
 
     app.logger.info("Product availability changed for ID [%s].", product_id)
-    return (
-        jsonify({"message": f"Product availability changed to {new_availability}"}),
-        status.HTTP_200_OK,
-    )
+
+    return jsonify(message), status.HTTP_200_OK
 
 
 ######################################################################

service/static/index.html

@@ -103,7 +103,7 @@ <h3>Create, Retrieve, Update, and Delete a Product:</h3>
                 <button type="submit" class="btn btn-primary" id="clear-btn">Clear</button>
                 <button type="submit" class="btn btn-success" id="create-btn">Create</button>
                 <button type="submit" class="btn btn-warning" id="update-btn">Update</button>
-                <button type="submit" class="btn btn-danger" id="availability-btn">Change Availability</button>
+                <button type="submit" class="btn btn-warning" id="change_availability-btn">Change Availability</button>
               </div>
             </div>
           </div> <!-- form horizontal -->

service/static/js/rest_api.js

@@ -277,26 +277,27 @@ $(function () {
     // Change Availability
     // ****************************************
 
-    $("#availability-btn").click(function () {
-        // let product_id = $("#product_id").val();
-
-        // $("#flash_message").empty();
-
-        // let ajax = $.ajax({
-        //     type: "DELETE",
-        //     url: `/products/${product_id}`,
-        //     contentType: "application/json",
-        //     data: '',
-        // })
-
-        // ajax.done(function(res){
-        //     clear_form_data()
-        //     flash_message("Product has been Deleted!")
-        // });
-
-        // ajax.fail(function(res){
-        //     flash_message("Server error!")
-        // });
+    $("#change_availability-btn").click(function () {
+        let product_id = $("#product_id").val();
+
+        $("#flash_message").empty();
+
+        let ajax = $.ajax({
+            type: "PUT",
+            url: `/products/${product_id}/change_availability`,
+            contentType: "application/json",
+            data: '',
+        })
+
+        ajax.done(function(res){
+            update_form_data(res)
+            flash_message(res.message)
+        });
+
+        ajax.fail(function(res){
+            clear_form_data()
+            flash_message(res.responseJSON.message)
+        });
     });