btclock/webui
3
0
Fork 2
Code Issues Pull requests 1 Projects Releases 16 Wiki Activity Actions

Write more tests

Browse source
This commit is contained in:
Djuri Baars 2023-11-25 00:42:37 +01:00
parent 60360ef76b
commit 2a50c76cc0
8 changed files with 178 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -12,3 +12,4 @@ dist
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
yarn-error.log
test-results/

14
src/lib/style/app.scss
View file

@ -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 {

2
src/routes/+layout.svelte
View file

@ -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}

21
src/routes/+page.svelte
View file

@ -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">

4
src/routes/Rendered.svelte
View file

@ -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}

31
src/routes/Settings.svelte
View file

@ -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>

1
src/routes/Status.svelte
View file

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

146
tests/test.ts
View file

@ -1,26 +1,27 @@
import { expect, test } from '@playwright/test';
const statusJson = {
currentScreen: 0,
numScreens: 7,
timerRunning: true,
espUptime: 4479,
espFreeHeap: 58508,
espHeapSize: 342108,
connectionStatus: { price: true, blocks: true },
rssi: -66,
data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
leds: [
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' }
]
};
test.beforeEach(async ({ page }) => {
await page.route('*/**/api/status', async (route) => {
const json = {
currentScreen: 0,
numScreens: 7,
timerRunning: true,
espUptime: 4479,
espFreeHeap: 58508,
espHeapSize: 342108,
connectionStatus: { price: true, blocks: true },
rssi: -66,
data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
leds: [
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' },
{ red: 0, green: 0, blue: 0, hex: '#000000' }
]
};
await route.fulfill({ json });
await route.fulfill({ json: statusJson });
});
await page.route('*/**/api/settings', async (route) => {
const json = {
@ -60,24 +61,117 @@ test.beforeEach(async ({ page }) => {
};
await route.fulfill({ json });
});
await page.route('**/events', (route) => {
//statusJson.data = ['S', 'S', 'E', 'V', 'E', 'N', 'T'];
// Respond with a custom SSE message
route.fulfill({
status: 200,
contentType: 'text/event-stream',
body: `data: ${JSON.stringify(statusJson)}\n\n`
});
});
});
test('index page has expected status', async ({ page }) => {
test('index page has expected columns control, status, settings', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
});
test('index page has expected settings', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
});
test('index page has expected control', async ({ page }) => {
test('index page has working language selector', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
await expect(page.locator('//*[@id="nav-language-dropdown"]/a')).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/a').click();
await expect(page.locator('//*[@id="nav-language-dropdown"]/div/button[1]')).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/div/button[2]').click();
await expect(page.getByRole('heading', { name: 'Instellingen' })).toBeVisible();
page.locator('//*[@id="nav-language-dropdown"]/a').click();
page.locator('//*[@id="nav-language-dropdown"]/div/button[3]').click();
await expect(page.getByRole('heading', { name: 'Configuración' })).toBeVisible();
});
test('api page has expected load button', async ({ page }) => {
await page.goto('/api');
await expect(page.getByRole('button', { name: 'Load' })).toBeVisible();
});
test('timezone can be negative, zero and positive', async ({ page }) => {
await page.goto('/');
const tzOffsetField = 'input#tzOffset';
for (const val of ['-10', '0', '42']) {
await page.fill(tzOffsetField, val);
const resultValue = await page.$eval(tzOffsetField, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
}
});
test('time values can not be zero or negative', async ({ page }) => {
await page.goto('/');
for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
for (const val of ['42', '210']) {
await page.fill(field, val);
const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
const validationMessage = await page.$eval(
field,
(input: HTMLInputElement) => input.validationMessage
);
expect(validationMessage).not.toContain('Value must be greater');
}
for (const val of ['-10', '0']) {
await page.fill(field, val);
const resultValue = await page.$eval(field, (input: HTMLInputElement) => input.value);
expect(resultValue).toBe(val);
await page.getByRole('button', { name: 'Save' }).click();
const validationMessage = await page.$eval(
field,
(input: HTMLInputElement) => input.validationMessage
);
expect(validationMessage).toContain('Value must be greater');
}
}
});
test('info message when fetch eur price is enabled', async ({ page }) => {
await page.goto('/');
const inputField = 'input#fetchEurPrice';
const switchElement = await page.$(inputField);
expect(switchElement).toBeTruthy();
const isSwitchEnabled = await switchElement.isChecked();
expect(isSwitchEnabled).toBe(false);
await expect(page.getByText('the WS Price connection will show')).toBeHidden();
await switchElement.click();
const isSwitchNowEnabled = await switchElement.isChecked();
expect(isSwitchNowEnabled).toBe(true);
await expect(page.getByText('the WS Price connection will show')).toBeVisible();
});
test('parse all types of EPD content correctly', async ({ page }) => {
statusJson.data[2] = '123';
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
await page.waitForSelector('#timerStatusText:has-text("running")');
await page.waitForSelector('#btclock-wrapper > div > div:nth-child(1)');
expect(statusJson.data[0]).toContain('/');
await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toBeTruthy();
await expect(page.locator('#btclock-wrapper > div > div:nth-child(1)')).toHaveClass('splitText');
expect(statusJson.data[1]).toHaveLength(1);
await expect(page.locator('#btclock-wrapper > div > div:nth-child(2)')).toHaveClass('digit');
expect(statusJson.data[2]).toHaveLength(3);
await expect(page.locator('#btclock-wrapper > div > div:nth-child(3)')).toHaveClass('mediumText');
});