Skip to content

feat: complete ProductForm component implementation (1.4a) #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LudoLoops merged 1 commit into from
Nov 29, 2025
Merged

feat: complete ProductForm component implementation (1.4a) #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/ROADMAP.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Quick checklist of all issues in planned order.
- [x] **1.2** - Calculate Margins and Totals Logic (TDD) (#GH-11)
- [x] **1.3** - Svelte Store for Active Order (Svelte 5 Runes - TDD) (#GH-12)
- [x] **1.4** - Product Form Component Tests (TDD) (#GH-13-test)
- [ ] **1.4a** - Product Form Component (#GH-13)
- [x] **1.4a** - Product Form Component (#GH-13)
- [ ] **1.5** - Product Grid Component Tests (POS-style - TDD) (#GH-14-test)
- [ ] **1.5a** - Product Grid Component (POS-style) (#GH-14)
- [ ] **1.6** - Order Items Display Component Tests (TDD) (#GH-15-test)
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ProductForm.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
}
</script>

<form role="form">
<form>
<div>
<label for="product-select">Product</label>
<select id="product-select" bind:value={selectedProductId}>
Expand Down
32 changes: 16 additions & 16 deletions src/lib/components/ProductForm.svelte.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('ProductForm.svelte', () => {
it('should render the form with all input fields', async () => {
render(ProductForm, { props: { products: mockProducts } });

const form = page.getByRole('form');
const form = page.locator('form');
await expect.element(form).toBeInTheDocument();

expect.hasAssertions();
Expand Down Expand Up @@ -136,7 +136,7 @@ describe('ProductForm.svelte', () => {
it('should have empty/default values initially', async () => {
render(ProductForm, { props: { products: mockProducts } });

const quantityInput = page.getByRole('spinbutton', { name: /quantity/i }) as any;
const quantityInput = page.getByRole('spinbutton', { name: /quantity/i }) as HTMLInputElement;
const value = await quantityInput.getAttribute('value');
expect(value).toBeFalsy();

Expand All @@ -155,7 +155,7 @@ describe('ProductForm.svelte', () => {
it('should have Add button disabled initially', async () => {
render(ProductForm, { props: { products: mockProducts } });

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled !== null).toBe(true);

Expand All @@ -170,7 +170,7 @@ describe('ProductForm.svelte', () => {
const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
await quantityInput.fill('5');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled !== null).toBe(true);

Expand All @@ -188,7 +188,7 @@ describe('ProductForm.svelte', () => {
const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
await quantityInput.fill('0');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled !== null).toBe(true);

Expand All @@ -212,7 +212,7 @@ describe('ProductForm.svelte', () => {
const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
await saleInput.fill('15');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled === null).toBe(true);

Expand All @@ -236,7 +236,7 @@ describe('ProductForm.svelte', () => {
const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
await saleInput.fill('10');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled !== null).toBe(true);

Expand All @@ -260,7 +260,7 @@ describe('ProductForm.svelte', () => {
const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
await saleInput.fill('15');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled === null).toBe(true);

Expand Down Expand Up @@ -363,7 +363,7 @@ describe('ProductForm.svelte', () => {
await addButton.click();

// After submission, form should be reset
const quantityValue = await (quantityInput as any).getAttribute('value');
const quantityValue = await (quantityInput as HTMLInputElement).getAttribute('value');
expect(quantityValue).toBeFalsy();

expect.hasAssertions();
Expand All @@ -378,7 +378,7 @@ describe('ProductForm.svelte', () => {
const cancelButton = page.getByRole('button', { name: /cancel/i });
await cancelButton.click();

const quantityValue = await (quantityInput as any).getAttribute('value');
const quantityValue = await (quantityInput as HTMLInputElement).getAttribute('value');
expect(quantityValue).toBeFalsy();

expect.hasAssertions();
Expand All @@ -387,7 +387,7 @@ describe('ProductForm.svelte', () => {
it('should disable Add button until form is valid', async () => {
render(ProductForm, { props: { products: mockProducts } });

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;

// Initially disabled
let disabled = await addButton.getAttribute('disabled');
Expand Down Expand Up @@ -432,7 +432,7 @@ describe('ProductForm.svelte', () => {
const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
await saleInput.fill('15.75');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled === null).toBe(true);

Expand All @@ -458,7 +458,7 @@ describe('ProductForm.svelte', () => {
const saleInput = page.getByRole('spinbutton', { name: /sale.*price|selling.*price/i });
await saleInput.fill('15');

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled === null).toBe(true);

Expand All @@ -479,8 +479,8 @@ describe('ProductForm.svelte', () => {

const productSelect = page.getByRole('combobox', { name: /product/i });
await productSelect.click();
let option1 = page.getByRole('option', { name: /apples/i });
await option1.click();
const applesOption = page.getByRole('option', { name: /apples/i });
await applesOption.click();

const quantityInput = page.getByRole('spinbutton', { name: /quantity/i });
const purchaseInput = page.getByRole('spinbutton', { name: /purchase.*price/i });
Expand All @@ -495,7 +495,7 @@ describe('ProductForm.svelte', () => {
const option2 = page.getByRole('option', { name: /oranges/i });
await option2.click();

const addButton = page.getByRole('button', { name: /add/i }) as any;
const addButton = page.getByRole('button', { name: /add/i }) as HTMLButtonElement;
const disabled = await addButton.getAttribute('disabled');
expect(disabled === null).toBe(true);

Expand Down
Loading