{"id":15698683,"url":"https://github.com/adriaanbd/simple_survey_form","last_synced_at":"2025-05-09T01:50:13.227Z","repository":{"id":50200193,"uuid":"159000100","full_name":"adriaanbd/simple_survey_form","owner":"adriaanbd","description":"Survey Form with CSS Grid, Python's Flask framework and User Interface test using Selenium.","archived":false,"fork":false,"pushed_at":"2022-09-16T17:54:34.000Z","size":79,"stargazers_count":6,"open_issues_count":4,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-09T01:50:04.069Z","etag":null,"topics":["css-grid","flask","flask-wtf","page-object","page-object-model","pageobject-pattern","selenium","survey","survey-form","unittest","unittesting","wtforms"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adriaanbd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-25T05:13:53.000Z","updated_at":"2023-09-26T03:11:34.000Z","dependencies_parsed_at":"2022-09-12T01:00:51.496Z","dependency_job_id":null,"html_url":"https://github.com/adriaanbd/simple_survey_form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriaanbd%2Fsimple_survey_form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriaanbd%2Fsimple_survey_form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriaanbd%2Fsimple_survey_form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriaanbd%2Fsimple_survey_form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adriaanbd","download_url":"https://codeload.github.com/adriaanbd/simple_survey_form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176437,"owners_count":21866142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","flask","flask-wtf","page-object","page-object-model","pageobject-pattern","selenium","survey","survey-form","unittest","unittesting","wtforms"],"created_at":"2024-10-03T19:32:05.079Z","updated_at":"2025-05-09T01:50:13.199Z","avatar_url":"https://github.com/adriaanbd.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Survey Form with CSS Grid\n\n## About\n\nThis project was created with the following ideas:\n\n1. Comply with the HTML/CSS requirements set forth by the *Build a\n   Survey Form* project, which is the second project out of five, from\n   [FreeCodeCamp](https://www.freecodecamp.org/)'s (FCC) [Responsive Web Design\n   Certification](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects),\n   which can be found\n   [here](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/).\n   The strict HTML/CSS version of this project can be found in my CodePen [here](https://codepen.io/adriaanbd/full/pQRqrq/).\n\n2. Build the Back End to the Survey Form.\n\n3. Build a User Interface test, which would validate that the main html requirements\n   set forth by FCC are maintained throughout.\n\n## Purpose\n\nThe purpose of this project is to experience horizontal development, integrating all layers of the\nproject:\n\n* The user interface (HTML/CSS),\n* Middleware (Flask), and\n* Database (SQLite).\n\n## Getting started\n\n1. This project was done with Python 3.7.\n\n2. Clone this repository locally. This is done by typing `git clone\n   https://github.com/adriaanbd/simple_survey_form simple-survey` in your terminal.\n\n3. I'd recommend setting up a virtual environment, which is an isolated python\n   environment in your chosen directory. Do this with `python venv myvenv` in\n   your terminal. This will create a virtual environment called `myvenv`. If\n   you have other version of Python installed, you'd need to make sure that you\n   are accessing the desired `python` when typing that term. You can check this\n   out by typing `python --version`. If it says 3.7, you're good to go. If not,\n   type `py --version`, which should display 3.7 if you installed it\n   succesfully. If so, then you'd need to setup your virtual environment with\n   the following comman `py venv myvenv`.\n\n4. If you're using a Bash terminal, activate your virtual environment with `source\n   venv/myvenv/activate`. If it doesn't work for you, please Google it online.\n   There are plenty of resources available.\n\n5. Install all requirements. In your local directory where you cloned the repo,\n   type `pip install -r requirements.txt` in your terminal.\n\n## Set up the database\n\n1. From the terminal, run the command `flask db init`\n\n2. You should see a `migrations` folder in your root directory.\n\n3. Migrate your db by running `flask db migrate`\n\n4. You should see some new files in your `/migrations` folder\n\n5. Make the db setup permanent by running `flask db upgrade`\n\n## Play with your database to check everything's alright\n\n1. From your terminal, run `flask shell`\n\n2. This will load all configuration values with access to the db model.\n\n3. Enter and check the following:\n\n```\n\u003e\u003e\u003e Voter.query.all()\n[]\n\u003e\u003e\u003e v = Voter(name=\"John Doe\", email=\"john@doe.com\")\n\u003e\u003e\u003e v\n\u003cVoter John Doe\u003e\n\u003e\u003e\u003e db.session.add(v)\n\u003e\u003e\u003e db.session.commit()\n\u003e\u003e\u003e a = Answer(age=31, gender='Male', path='Full Stack', voter=v)\n\u003e\u003e\u003e a\n\u003cAnswer (31, 'Male', 'Full Stack')\u003e\n\u003e\u003e\u003e a.voter\n\u003cVoter John Doe\u003e\n\u003e\u003e\u003e db.session.add(a)\n\u003e\u003e\u003e db.session.commit()\n\u003e\u003e\u003e l = Language(language='Python', voter=v)\n\u003e\u003e\u003e l.language, l.voter\n('Python', \u003cVoter John Doe\u003e)\n\u003e\u003e\u003e db.session.add(l)\n\u003e\u003e\u003e db.session.commit()\n\u003e\u003e\u003e c = Comment(comment='I love to code', voter=v)\n\u003e\u003e\u003e c.comment, c.voter\n('I love to code', \u003cVoter John Doe\u003e)\n\u003e\u003e\u003e db.session.add(c)\n\u003e\u003e\u003e db.session.commit()\n```\n\n## Starting the server locally to interact with the Survey Form\n\n1. In your terminal, type `flask run`\n\n2. Either click on the link provided in your terminal `http://127.0.0.1:5000/`\n\n   or insert it directly on your web browser.\n\n## Fill and submit the form\n\n1. Fill all the values in the form\n\n2. Name and email are required values\n\n3. Click on submit, at which point you *should* receive a \"Your form was submitted\" message in red.\n\n## Check your db again to check that it received the values from the form\n\n1. `flask shell`\n\n2. Run the following and check that the output is the same as the values you entered in the form.\n\n```\n\u003e\u003e\u003eVoter.query.all()\n\u003e\u003e\u003eAnswer.query.all()\n\u003e\u003e\u003eLanguage.query.all()\n\u003e\u003e\u003eComment.query.all()\n```\n\n## Running the User Interface tests (this hasn't been thoroughly tested with db)\n\n1. Make sure your local server is running.\n2. In the terminal, type `python -m unittest`\n3. Alternatively, you can run the file directly, typing: `python tests/test_survey_ui.py`\n\n## How does the User Interface tests work\n\nI've used the page object design pattern, separating the location of the web\nelements (located either by id, css selector, tag name) on the `locators.py`\nfile, the page method actions using those web elements on `page.py`, and the\ntests themselves on `test_survey_ui.py`. Feel\nfree to look at them. The idea behind this separation, is that if something\nchanges to the html or css, the locators would only need to be updated in one\nplace.\n\n## Further notes\n\nDevelopment is still in progress:\n\n* Unittest will be replaced by pytest.\n* More tests will be added.\n\n## Here's a snippet of the Survey Form\n\n![Snippet of Survey Form](https://github.com/adriaanbd/simple_survey_form/blob/master/resources/survey_form.PNG \"Snippet of Survey Form\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriaanbd%2Fsimple_survey_form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadriaanbd%2Fsimple_survey_form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriaanbd%2Fsimple_survey_form/lists"}