Font Size feature

README.md

@@ -83,6 +83,17 @@ Otherwise, it is mandatory.
 a. Add at least 3 automated browser tests using puppeteer, testing key features of your choice.
 b. Add component tests (using `jest`) to your work from *part 1*.
 
+### Part 5 - Font Resize
+Add a way for users to resize the texts inside the list to 3 states:
+`small`, `normal`, `large`
+![Font Size](images/font-size-component.png)
+
+a. Add a new component above the heading which allows resize to the 3 sizes: `small`, `normal`, `large`
+b. Apply the changes to our list on every change  
+> the default should be normal  
+
+#### Bonus 
+Make sure you can't choose an already chosen state
 
 ## General notes
 - Test your work well. Think of edge cases. Think of how users will use it, and make sure your work is of high quality

client/src/App.scss

@@ -58,6 +58,30 @@ body {
 		font-weight: 500;
 		font-size: 12px;
 	}
+	.fontSize {
+		text-align: right;
+	}
+
+	.fontSize button {
+		border: none;
+		border-radius: 5px;
+		padding: 5px 5px;
+		margin-right: 5px;
+		font-size: 1.1em;
+		font-family: inherit;
+		background: white;
+		box-shadow: 0 2px 6px 1px #e1e5e8;
+		outline: none;
+		cursor: pointer;
+
+		&:hover {
+			box-shadow: 0 2px 6px 1px #3899ec;
+		}
+
+		&:active {
+			box-shadow: 0 2px 6px 1px red;
+		}
+	}
 
 	.tickets {
 
@@ -89,7 +113,7 @@ body {
 				font-style: normal;
 				color: #20455e;
 			}
-			
+
 			footer {
 
 				display: flex;
@@ -103,7 +127,25 @@ body {
 				}
 			}
 
-
+			&.small {
+				font-size:0.8em;
+				& .title {
+					font-size: inherit;
+				}
+				& footer .meta-data {
+					font-size: smaller;
+				}
+			}
+
+			&.large {
+				font-size:1.2em;
+				& .title {
+					font-size: inherit;
+				}
+				& footer .meta-data {
+					font-size: smaller;
+				}
+			}
 		}
 	}
 }

client/src/App.tsx

@@ -5,14 +5,18 @@ import {createApiClient, Ticket} from './api';
 export type AppState = {
 	tickets?: Ticket[],
 	search: string;
+	textSize: textSize;
 }
 
+export type textSize = 'small' |'normal' | 'large';
+
 const api = createApiClient();
 
 export class App extends React.PureComponent<{}, AppState> {
 
 	state: AppState = {
-		search: ''
+		search: '',
+		textSize: 'normal'
 	}
 
 	searchDebounce: any = null;
@@ -23,14 +27,36 @@ export class App extends React.PureComponent<{}, AppState> {
 		});
 	}
 
-	renderTickets = (tickets: Ticket[]) => {
+	setTextSize(size: textSize) {
+		this.setState({
+			textSize: size
+		});
+	}
+
+	renderTextSize = () => {
+		return (<div className='fontSize'>
+					{this.renderTextButton('small')}
+					{this.renderTextButton('normal')}
+					{this.renderTextButton('large')}
+				</div>);
+	}
+
+	renderTextButton = (size: textSize ) => {
+		const { textSize } = this.state;
+		return(
+			<button id={size} disabled={ textSize === size } onClick={() => this.setTextSize(size) }>{size}</button>
+		);
+	}
+
+	renderTickets = (tickets: Ticket[], textSize: textSize) => {
 
 		const filteredTickets = tickets
 			.filter((t) => (t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase()));
 
+		const ticketClass = `ticket ${textSize}`;
 
 		return (<ul className='tickets'>
-			{filteredTickets.map((ticket) => (<li key={ticket.id} className='ticket'>
+			{filteredTickets.map((ticket) => (<li key={ticket.id} className={ticketClass}>
 				<h5 className='title'>{ticket.title}</h5>
 				<footer>
 					<div className='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
@@ -51,17 +77,18 @@ export class App extends React.PureComponent<{}, AppState> {
 	}
 
 	render() {	
-		const {tickets} = this.state;
+		const {tickets, textSize} = this.state;
 
 		return (<main>
+			{this.renderTextSize()}
 			<h1>Tickets List</h1>
 			<header>
 				<input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
 			</header>
 			{tickets ? <div className='results'>Showing {tickets.length} results</div> : null }	
-			{tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}
+			{tickets ? this.renderTickets(tickets, textSize) : <h2>Loading..</h2>}
 		</main>)
 	}
 }
 
-export default App;
+export default App;

tester/e2e.test.ts

@@ -51,3 +51,35 @@ describe("Titles", () => {
 
 });
 
+describe("font size", () => {
+
+  test('Normal class name is rendered', async () => {
+    await goToMainPage();
+    const tickets = await page.$$('.tickets li')
+
+    let elementClass = await page.evaluate(el => el.className, tickets[0])
+    expect(elementClass).toContain('normal')
+  });
+
+  test('Small class affects font size', async () => {
+    await goToMainPage();
+    const smallButton = await page.$('#small')
+    await smallButton.click();
+    const tickets = await page.$$('.tickets li')
+    let fontSize = await page.evaluate(el => getComputedStyle(el).fontSize, tickets[0])
+    const numFontSize = fontSize.match(/\d+[\.]+\d+/ig);
+    expect(Number(numFontSize)).toBeLessThan(16);
+  });
+
+  test('Large class affects font size', async () => {
+    await goToMainPage();
+    const smallButton = await page.$('#large')
+    await smallButton.click();
+    const tickets = await page.$$('.tickets li')
+    let fontSize = await page.evaluate(el => getComputedStyle(el).fontSize, tickets[0])
+    const numFontSize = fontSize.match(/\d+[\.]+\d+/ig);
+    expect(Number(numFontSize)).toBeGreaterThan(16);
+  });
+
+});
+