Write more tests

src/lib/style/app.scss

@@ -80,7 +80,7 @@ nav {
 	margin-bottom: 3px;
 }
 
-#btcclock-wrapper {
+#btclock-wrapper {
 	margin: 0 auto;
 }
 
@@ -158,8 +158,16 @@ nav {
 	font-size: 3rem;
 	padding-left: 5px;
 	padding-right: 5px;
-	padding-top: 20px !important;
-	padding-bottom: 20px !important;
+	@include media-breakpoint-up(sm) {
+		font-size: 1.8rem;
+		padding-top: 13px !important;
+		padding-bottom: 13px !important;
+	}
+	@include media-breakpoint-up(xxl) {
+		font-size: 3rem;
+		padding-top: 29px !important;
+		padding-bottom: 29px !important;
+	}
 }
 
 .digit {

src/routes/+layout.svelte

@@ -62,7 +62,7 @@
 			</NavItem>
 		</Nav>
 		{#if !$isLoading}
-			<Dropdown inNavbar>
+			<Dropdown id="nav-language-dropdown" inNavbar>
 				<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
 				<DropdownMenu end>
 					{#each $locales as locale}

src/routes/+page.svelte

@@ -24,7 +24,15 @@
 		leds: []
 	});
 
-	onMount(() => {
+	const fetchStatusData = () => {
+		fetch(`${PUBLIC_BASE_URL}/api/status`)
+			.then((res) => res.json())
+			.then((data) => {
+				status.set(data);
+			});
+	};
+
+	const fetchSettingsData = () => {
 		fetch(PUBLIC_BASE_URL + `/api/settings`)
 			.then((res) => res.json())
 			.then((data) => {
@@ -41,12 +49,11 @@
 				}
 				settings.set(data);
 			});
+	};
 
-		fetch(`${PUBLIC_BASE_URL}/api/status`)
-			.then((res) => res.json())
-			.then((data) => {
-				status.set(data);
-			});
+	onMount(() => {
+		fetchSettingsData();
+		fetchStatusData();
 
 		const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
 
@@ -75,7 +82,7 @@
 	<Row>
 		<Control bind:settings bind:status></Control>
 		<Status bind:settings bind:status></Status>
-		<Settings bind:settings on:showToast={showToast}></Settings>
+		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData}></Settings>
 	</Row>
 </Container>
 <div class="position-fixed bottom-0 end-0 p-2">

src/routes/Rendered.svelte

@@ -6,7 +6,7 @@
 	};
 </script>
 
-<div class="btcclock-wrapper" id="btcclock-wrapper">
+<div class="btclock-wrapper" id="btclock-wrapper">
 	<div class="btclock">
 		{#each status.data as char}
 			{#if isSplitText(char)}
@@ -15,6 +15,8 @@
 						<div class="flex-items">{part}</div>
 					{/each}
 				</div>
+			{:else if char.length >= 3}
+				<div class="mediumText">{char}</div>
 			{:else if char.length === 0 || char === ' '}
 				<div class="digit">&nbsp;&nbsp;</div>
 			{:else}

src/routes/Settings.svelte

@@ -37,6 +37,11 @@
 
 	const dispatch = createEventDispatcher();
 
+	const handleReset = (e: Event) => {
+		e.preventDefault();
+		dispatch('formReset');
+	};
+
 	const onSave = async (e: Event) => {
 		e.preventDefault();
 		let formSettings = $settings;
@@ -112,7 +117,13 @@
 					<Label md={6} for="timePerScreen" size="sm">{$_('section.settings.timePerScreen')}</Label>
 					<Col md="6">
 						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
+							<Input
+								type="number"
+								id="timePerScreen"
+								min={1}
+								step="1"
+								bind:value={$settings.timePerScreen}
+							/>
 							<InputGroupText>{$_('time.minutes')}</InputGroupText>
 						</InputGroup>
 					</Col>
@@ -123,7 +134,13 @@
 					>
 					<Col md="6">
 						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
+							<Input
+								type="number"
+								id="fullRefreshMin"
+								min={1}
+								step="1"
+								bind:value={$settings.fullRefreshMin}
+							/>
 							<InputGroupText>{$_('time.minutes')}</InputGroupText>
 						</InputGroup>
 					</Col>
@@ -134,7 +151,13 @@
 					>
 					<Col md="6">
 						<InputGroup size="sm">
-							<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
+							<Input
+								type="number"
+								id="minSecPriceUpd"
+								min={1}
+								step="1"
+								bind:value={$settings.minSecPriceUpd}
+							/>
 							<InputGroupText>{$_('time.seconds')}</InputGroupText>
 						</InputGroup>
 						<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
@@ -300,7 +323,7 @@
 						{/each}
 					{/if}
 				</Row>
-				<Button type="reset" color="secondary">{$_('button.reset')}</Button>
+				<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
 				<Button color="primary">{$_('button.save')}</Button>
 			</Form>
 		</CardBody>

src/routes/Status.svelte

@@ -106,6 +106,7 @@
 					</section>
 					{$_('section.status.screenCycle')}:
 					<a
+						id="timerStatusText"
 						href={'#'}
 						style="cursor: pointer"
 						tabindex="0"