Week_05.md

Week 5: Test & Deploy

• Learning Outcomes

1. Achievements

Cypress-Fu

---

So organise! Very satisfy!

	const app = { button: 'button[type="submit"]' };

	describe('Front-end Tests', () => {
		beforeEach(() => { cy.visit('') })

		context('Landing Page', () => { /* some stuff */ })

		context ('Input Page', () => {
			beforeEach(() => { /* some stuff */ });
			
			context('Form Submission', () => { 
				it('does stuff', () => { 
					cy.get( app.button ).do( /* some stuff */ )
				})
			});
		})
	})

---

Terminal Configurations

---

This is delightful.

name: Moodtime
	windows:
		- tabs:
			- title: Server
				layout:
					cwd: /Users/jasonwarren/Code/fac/24-09 Apprenticeship 1-1/PRO03 Back End
				color: blue
			- title: Front End
				layout:
					cwd: /Users/jasonwarren/code/fac/24-09 Apprenticeship 1-1/PRO03 Front End
				color: cyan
			- title: Cypress
				layout:
					cwd: /Users/jasonwarren/code/fac/24-09 Apprenticeship 1-1/PRO03 Front End
				color: yellow
			- title: Console
				layout:
					cwd: /Users/jasonwarren/code/fac/24-09 Apprenticeship 1-1/PRO03 Front End
				color: red

---

Filtering Inputs

---

Quick & dirty input validation

	import { Filter } from 'bad-words';

	function NameForm({ onSubmit }) {
		const [error, setError] = useState<string | null>(null);
		const filter = new Filter();
		const message = {
			warn: 'Please complete the form',
			scold: "Don't be a tit"
		}

		const validateName = (input: string): boolean => {
			if (input.trim() === '') {
				setError(message.warn);
				return false;
			} else if (filter.isProfane(input) || input.trim().includes('<')) {
				setError(message.scold);
				return false;
			} else {
				setError(null);
				return true;
			}
		};

		const handleSubmit = (event) => {
			event.preventDefault();
			if (validateName(name)) { onSubmit(name) };
		};

		return (<form></form>);
	}

---

2. Difficulties

Toggle List

---

• I lost track of what the hell was going on with the deployment process after a while. I need to figure out a better way to keep informed about the areas of the project that I'm not actively working on.

---

3. Full Progress List

Toggle Key

---

• I feel like I've learned/demonstrated this skill in the past week
• I have acquired some skill but need to develop further
• I am not yet comfortable in this skill

---

Toggle List

---

Testing

• Learn how to write and run unit tests for backend functionality using the Node testing suite and Postman
• Gain experience in using the Cypress testing library with React
• Understand how and when to use component and end to end tests
• Understand how to write maintainable and readable test cases

---

Deployment

• Gain experience in deploying a full-stack web application to a cloud platform
• Understand the differences between development, staging, and production environments
• Configure the necessary environment variables and settings for deployment
• Understand the process of building and optimizing the application for production
• Learn how to set up and configure a production environment on a cloud platform
• Gain experience in using a continuous integration and deployment (CI/CD) pipeline

---

Additional

• [ ]

---

4. Feedback

Name
Why This is Brilliant
Unrealistic Expectations