Merge pull request #31 from plotly/fix-tests-wip

* Clean up tests

* Copy updated `nanodash/` into each exercise folder

Author: emilykl

.gitignore

@@ -3,6 +3,7 @@
 *.pyc
 *~
 .#*
+*.DS_Store
 .jekyll-cache
 .pytest_cache
 .ruff_cache

README.md

@@ -1,4 +1,12 @@
-# NanoDash Tutorial Exercises
+# Welcome to the NanoDash tutorial!
+
+This tutorial will demonstrate how interactive web dashboard frameworks like Plotly Dash work, by building a simplified version of Dash itself from scratch using Python, the Flask framework, and a little bit of vanilla JavaScript. 
+
+## Setup
+
+If you haven't already, please complete the setup instructions outlined in [SETUP.md]((https://github.com/plotly/tutorial-nanodash/blob/main/SETUP.md)) before continuing.
+
+## Exercises
 
 The 7 exercises to be completed for this tutorial are located in the directories `exercise1/` through `exercise7/`.
 
@@ -7,19 +15,20 @@ Each exercise folder contains the following:
 - A partial copy of the NanoDash codebase (under `exerciseN/nanodash/`), containing one or more spots for you to "fill-in-the-blanks" by implementing part of the NanoDash logic
 
 - A sample app (`exerciseN/app.py`) which will run correctly once the exercise has been completed
+  - To run the app from the repository root: `python exerciseN/app.py`
 
 - A tests file (`test_exerciseN.py`) which will pass once the exercise has been completed.
   - To run the tests for exercise N from the repository root: `python -m pytest exerciseN/`
-  - To run the tests for exercise N from within the exercise directory: `python -m pytest`
 
-## Note on Running Pytest
-We recommend running `python -m pytest` rather than just `pytest`, because it ensures using the python in your virtual environment rather than the system python. 
+## A note on running Pytest
+We recommend using the command `python -m pytest` rather than just `pytest`, because it ensures using the Python in your virtual environment rather than the system Python. 
 
 ## Exercise outline
 
 Each exercise focuses on implementing a specific part of the NanoDash framework.
 
 ### Exercise 1: Making a basic Flask server which serves a static HTML page
+---
 
 **Goal**: Set up a simple Flask server that serves one static HTML page.
 
@@ -32,42 +41,45 @@ Each exercise focuses on implementing a specific part of the NanoDash framework.
 **Command to run tests**
 `python -m pytest exercise1/`
 
-### Exercise 2: Implement UI components
+### Exercise 2: Implementing input components
+---
 
-**Goal**: Implement basic UI component objects to use as building blocks for page layouts.
+**Goal**: Implement basic input components as Python objects, to be used as building blocks for interactive dashboards.
 
 **Tasks**:
 - Review the implementations of the `Page`, `Header` and `Text` classes in `exercise2/nanodash/components.py`
-- Implement the `__init__()` and `html()` methods of the `TextInput` class
-- Implement the `__init__()` and `html()` methods of the `Dropdown` class
+- Implement the `html()` method of the `TextInput` class
+- Implement the `html()` method of the `Dropdown` class
 
 **Files to modify**:
 - `exercise2/nanodash/components.py`
 
 **Command to run tests**
 `python -m pytest exercise2/`
 
-### Exercise 3: Implement Graph component 
+### Exercise 3: Implementing the Graph component
+---
 
 **Goal**: Implement the Graph component, which uses Plotly.js to display Plotly figures in the browser.
 
 **Tasks**:
-- Implement the the `__init__()` and `html()` methods of the `Graph` class in `exercise3/nanodash/components.py`
+- Implement the `html()` method of the `Graph` class in `exercise3/nanodash/components.py`
 
 **Files to modify**:
 - `exercise3/nanodash/components.py`
 
 **Command to run tests**
 `python -m pytest exercise3/`
 
-### Exercise 4: Browser to Server Communication — Gathering the page state
+### Exercise 4: Gathering the page state when an input changes
+---
 
 **Goal**: Implement the Javascript logic to capture the state of all components on the page, and bundle it into a JSON request to send to the Flask server.
 
 Don't worry — we've provided some useful helper functions inside the Javascript file; all you need to do is put them together in the right way.
 
 **Tasks**:
-- Implement the `getState()` function in `exercise4/nanodash/static/index.js`.
+- Implement the `getState()` Javascript function in `exercise4/nanodash/static/index.js`.
 
 **Files to modify**:
 - `exercise4/static/index.js`
@@ -76,12 +88,13 @@ Don't worry — we've provided some useful helper functions inside the Javascrip
 `python -m pytest exercise4/`
 
 ### Exercise 5: Running callbacks
+---
 
 **Goal**: Implement the Python logic which receives the page state from the frontend, runs the necessary callbacks, and sends the results back to the frontend. Also implement the logic which allows a user to add a callback to their app.
 
 **Tasks**:
-- Implement the `handle_change()` function in `exercise5/nanodash/nanodash.py`
-- Implement the `add_callback()` function in `exercise5/nanodash/nanodash.py`
+- Implement the `handle_change()` Python function in `exercise5/nanodash/nanodash.py`
+- Implement the `add_callback()` Python function in `exercise5/nanodash/nanodash.py`
 
 **Files to modify**:
 - `exercise5/nanodash/nanodash.py`
@@ -90,19 +103,21 @@ Don't worry — we've provided some useful helper functions inside the Javascrip
 `python -m pytest exercise5/`
 
 ### Exercise 6: Updating the page with callback results
+---
 
 **Goal**: Implement the Javascript logic to update the page's UI components based on the callback results received from the server.
 
 **Tasks**:
-- Implement the `updateValues()` function in `exercise6/nanodash/static/index.js`
+- Implement the `updateValues()` Javascript function in `exercise6/nanodash/static/index.js`
 
 **Files to modify**:
 - `exercise6/nanodash/static/index.js`
 
 **Command to run tests**
 `python -m pytest exercise6/`
 
-### Exercise 7: Write your own NanoDash Application
+### Exercise 7: Writing your own NanoDash application
+---
 
 **Goal**: Use the NanoDash framework to write your own interactive dashboard. You can modify the framework or add new components if you like.
 

exercise7/data_example.csv renamed to data/pgh_community_centers.csv

@@ -1,6 +1,7 @@
 """
 NanoDash - A lightweight dashboard framework for Python
 """
+
 from .nanodash import NanoDash
 
-__version__ = "0.1.0"
+__version__ = "0.1.0"

exercise1/nanodash/__init__.py

@@ -1,5 +1,12 @@
+"""
+This file contains the definition for the NanoDash class itself,
+including logic for running the Flask server, returning the HTML layout
+of the app, and handling callbacks.
+"""
+
 import flask
 
+
 class NanoDash:
     def __init__(self, title: str = "NanoDash App") -> None:
         self.app = flask.Flask(__name__)
@@ -39,11 +46,13 @@ def full_html(self) -> str:
         '''
         """
         ## EXERCISE 1 START
-        raise NotImplementedError()
+        raise NotImplementedError(
+            "The full_html() method of the NanoDash class is not implemented yet!"
+        )
         ## EXERCISE 1 END
 
-    def run(self) -> None:
+    def run(self, debug=True, **kwargs) -> None:
         """
         Run the NanoDash application by starting the Flask server.
         """
-        self.app.run()
+        self.app.run(debug=debug, **kwargs)

exercise1/nanodash/nanodash.py

@@ -2,20 +2,28 @@
 Exercise 1: Testing the basic Flask server with static HTML capabilities
 """
 import requests
-from selenium.webdriver.common.by import By
 import pytest
-from test_utils import start_server, app_test_context
+
+from exercise1.app import app
+from test_utils import start_app
+
+
+# Set up the tests by launching the test app in another thread
+# Will run once at the start of the test file
+@pytest.fixture(scope="module", autouse=True)
+def setup_module():
+    start_app(app)
+    return
 
 def test_page_structure():
     """Test if the Flask server is running and returning HTML content."""
-    server_thread = start_server("exercise1/app.py")
+
+    # Check if the server is running and responding to requests
     response = requests.get("http://127.0.0.1:5000")
-    assert response.status_code == 200
-    assert "<html" in response.text, "Response does not contain HTML"
+    assert response.status_code == 200, "Request to the server failed"
 
-    """Test if the base HTML structure is correct."""
-    with app_test_context("exercise1/app.py") as driver:
-        # Check for basic page elements
-        assert driver.title, "Page should have a title"
-        
+    # Check if the response contains HTML content
+    assert "<html>" in response.text, "Response does not contain HTML"
 
+    # Check if the page contains a title
+    assert "<title>" in response.text, "Response does not contain a title"

exercise1/test_exercise_1.py

@@ -1,34 +1,60 @@
 try:
     from nanodash import NanoDash
-    from nanodash.components import Header, TextInput, Dropdown, Page
+    from nanodash.components import Dropdown, Header, Text, Page, TextInput
 except ModuleNotFoundError:
     from exercise2.nanodash import NanoDash
-    from exercise2.nanodash.components import Header, TextInput, Dropdown, Page
+    from exercise2.nanodash.components import Dropdown, Header, Text, Page, TextInput
 
 # Create a new Flask web server
-app = NanoDash()
+app = NanoDash(title="Exercise 2 test app")
 
-# Create a header component
-header = Header(text="Exercise 2: TextInput and Dropdown Components")
+# Create page layout
+header = Header(text="Exercise 2: Dropdown and TextInput components")
+description1 = Text(
+    text="This app tests whether the Dropdown and TextInput components are implemented correctly. "
+)
+description2 = Text(
+    text="Below, you should see a dropdown menu containing a list of animals, and a text input field. "
+)
 
-# Create the components needed for the test
-text_input = TextInput(id="input-test", value="Test Value")
+# Create components
+animal_dropdown_label = Text(text="Choose an animal:")
+animal_dropdown = Dropdown(
+    id="animal-dropdown",
+    value="Porcupine",
+    options=[
+        "Deer",
+        "Bear",
+        "Beaver",
+        "Porcupine",
+        "Squirrel",
+        "Raccoon",
+        "Fox",
+    ],
+)
 
-dropdown = Dropdown(
-    id="dropdown-test",
-    options=["Option 1", "Option 2", "Option 3"],
+animal_textinput_label = Text(text="Or, enter another animal here:")
+animal_textinput = TextInput(
+    id="animal-textinput",
+    value="Your favorite animal",
 )
 
-# Create a page with the components
-page = Page(children=[
-    header,
-    text_input,
-    dropdown
-])
+# Create the page layout with all components
+page = Page(
+    children=[
+        header,
+        description1,
+        description2,
+        animal_dropdown_label,
+        animal_dropdown,
+        animal_textinput_label,
+        animal_textinput,
+    ]
+)
 
 # Add layout to the app
 app.set_layout(page)
 
-# Run the app if this file is executed directly
+# Run the app
 if __name__ == "__main__":
-    app.run()
+    app.run()

exercise2/app.py

@@ -1,13 +1,7 @@
 """
 NanoDash - A lightweight dashboard framework for Python
 """
+
 from .nanodash import NanoDash
-from .components import (
-    Header,
-    TextInput,
-    Button,
-    Dropdown,
-    Page,
-)
 
-__version__ = "0.1.0"
+__version__ = "0.1.0"