Skip to content

Commit bb65e64

Browse files
zonia3000zonia3000
committed
Used switches to represent boolean flags
1 parent 6d0f945 commit bb65e64

File tree

7 files changed

+91
-27
lines changed

7 files changed

+91
-27
lines changed

‎__tests__/v1/JSchema.test.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
import { describe, it, expect } from 'vitest';
1+
import { describe, it, expect, vi } from 'vitest';
22
import { fireEvent, render, screen } from '@testing-library/svelte';
3+
import { readable } from 'svelte/store';
34

45
import JSchema from '../../src/lib/components/v1/workflow/JSchema.svelte';
56

7+
// Mocking the page store
8+
vi.mock('$app/stores', () => {
9+
return {
10+
page: readable({
11+
url: { pathname: '/v1/projects/1/workflows/1' }
12+
})
13+
};
14+
});
15+
616
describe('JSchema', () => {
717
it('Required NumberProperty with title', async () => {
818
const result = renderSchemaWithSingleProperty(

‎__tests__/v2/AttributesTypesForm.test.js‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,40 @@ describe('AttributesTypesForm', () => {
7676
expect(result.getByText('Invalid number')).toBeDefined();
7777
});
7878

79-
it('switch to boolean attribute', async () => {
79+
it('switch to number attribute from string containing a numeric value (number is preserved)', async () => {
8080
const result = render(AttributesTypesForm);
8181
await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
8282
await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
83+
await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: '42' } });
84+
await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
85+
expect(result.getByPlaceholderText('Value').value).eq('42');
86+
expect(result.component.validateFields()).true;
87+
});
88+
89+
it('switch to number attribute from string containing text (number is reset)', async () => {
90+
const result = render(AttributesTypesForm);
91+
await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
92+
await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
93+
await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'foo' } });
94+
await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
95+
expect(result.getByPlaceholderText('Value').value).eq('');
96+
expect(result.component.validateFields()).false;
97+
});
98+
99+
it('switch to boolean attribute, default to false', async () => {
100+
const result = render(AttributesTypesForm);
101+
await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
102+
await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
103+
await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
104+
expect(result.getByLabelText('Value').value).eq('false');
105+
expect(result.component.validateFields()).true;
106+
});
107+
108+
it('switch to boolean attribute from string equals to "true", true is set', async () => {
109+
const result = render(AttributesTypesForm);
110+
await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
111+
await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
112+
await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'true' } });
83113
await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
84114
expect(result.getByLabelText('Value').value).eq('true');
85115
expect(result.component.validateFields()).true;

‎src/lib/components/common/jschema/BooleanProperty.svelte‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { getContext } from 'svelte';
33
import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
4+
import { page } from '$app/stores';
45
56
const schemaManager = getContext('schemaManager');
67
@@ -14,21 +15,36 @@
1415

1516
<div class="d-flex align-items-center p-2">
1617
<div class="property-metadata d-flex flex-row align-self-center w-50">
17-
<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>{schemaProperty.title || 'Boolean argument'}</span>
18+
<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>
19+
{schemaProperty.title || 'Boolean argument'}
20+
</span>
1821
<PropertyDescription description={schemaProperty.description} />
1922
</div>
2023
<div class="property-input ms-auto w-25">
21-
<div class="form-check">
22-
<input
23-
id="property-{schemaProperty.key}"
24-
type="checkbox"
25-
bind:checked={schemaProperty.value}
26-
on:change={handleValueChange}
27-
class="form-check-input"
28-
/>
29-
<label class="form-check-label" for="property-{schemaProperty.key}">
30-
{schemaProperty.value}
31-
</label>
32-
</div>
24+
{#if $page.url.pathname.startsWith('/v1')}
25+
<div class="form-check">
26+
<input
27+
id="property-{schemaProperty.key}"
28+
type="checkbox"
29+
bind:checked={schemaProperty.value}
30+
on:change={handleValueChange}
31+
class="form-check-input"
32+
/>
33+
<label class="form-check-label" for="property-{schemaProperty.key}">
34+
{schemaProperty.value}
35+
</label>
36+
</div>
37+
{:else}
38+
<div class="form-check form-switch">
39+
<input
40+
id="property-{schemaProperty.key}"
41+
class="form-check-input"
42+
type="checkbox"
43+
bind:checked={schemaProperty.value}
44+
on:change={handleValueChange}
45+
role="switch"
46+
/>
47+
</div>
48+
{/if}
3349
</div>
3450
</div>

‎src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -168,13 +168,19 @@
168168
169169
/**
170170
* @param {{ key: string, value: string, type: string, error: string }} field
171+
* @param {number} index
171172
*/
172-
function fieldTypeChanged(field) {
173+
function fieldTypeChanged(field, index) {
173174
if (field.type === 'boolean') {
174-
field.value = 'true';
175+
if (field.value.toLowerCase() === 'true') {
176+
field.value = 'true';
177+
} else {
178+
field.value = 'false';
179+
}
175180
} else if (field.type !== 'number' || !field.value.match(/^\d+\.*\d*$/)) {
176181
field.value = '';
177182
}
183+
attributeFields = attributeFields.filter((f, i) => (i === index ? field : f));
178184
}
179185
180186
async function addAttribute() {
@@ -249,7 +255,7 @@
249255
bind:value={field.type}
250256
class:is-invalid={field.error}
251257
aria-label="Type"
252-
on:change={() => fieldTypeChanged(field)}
258+
on:change={() => fieldTypeChanged(field, index)}
253259
>
254260
<option value="string">String</option>
255261
<option value="number">Number</option>
@@ -290,15 +296,16 @@
290296
class:is-invalid={field.error}
291297
/>
292298
<div class="input-group-text">
293-
<label>
299+
<div class="form-check form-switch">
294300
<input
295-
class="form-check-input me-1"
301+
id="type-{index}"
302+
class="form-check-input"
296303
type="checkbox"
297304
bind:checked={field.value}
305+
role="switch"
298306
aria-label="Value for {field.key}"
299307
/>
300-
{field.value}
301-
</label>
308+
</div>
302309
</div>
303310
<button
304311
class="btn btn-outline-danger"

‎tests/v2/images.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
5757
await createImage(page, 'img5', async function (modal) {
5858
await modal.getByRole('button', { name: 'Add type' }).click();
5959
await modal.getByPlaceholder('Key').fill('k3');
60-
await modal.getByRole('checkbox').check();
60+
await modal.getByRole('switch').check();
6161
});
6262
});
6363

‎tests/v2/run_mock_tasks.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ test('Collect and run mock tasks [v2]', async ({ page, workflow, request }) => {
178178
});
179179

180180
await test.step('Fill arguments', async () => {
181-
await page.getByRole('checkbox').check();
181+
await page.getByRole('switch').check();
182182
await page.getByRole('button', { name: 'Save changes' }).click();
183183
await page.getByText('Arguments changes saved successfully').waitFor();
184184
});

‎tests/v2/workflow_task_input_filters.spec.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
3838
await modal.getByRole('combobox').nth(1).selectOption('Number');
3939
await modal.getByRole('button', { name: 'Add attribute' }).click();
4040
await modal.getByPlaceholder('Key').nth(2).fill('k3');
41+
await modal.getByPlaceholder('Value').nth(2).fill('true');
4142
await modal.getByRole('combobox').nth(2).selectOption('Boolean');
4243
await modal.getByRole('button', { name: 'Add type' }).click();
4344
await modal.getByPlaceholder('Key').nth(3).fill('k4');
@@ -55,7 +56,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
5556
await modal.getByPlaceholder('Value').fill('value2');
5657
await modal.getByRole('button', { name: 'Add type' }).click();
5758
await modal.getByPlaceholder('Key').nth(1).fill('k4');
58-
await modal.getByRole('checkbox').check();
59+
await modal.getByRole('switch').check();
5960
saveBtn = modal.getByRole('button', { name: 'Save' });
6061
await saveBtn.click();
6162
await waitModalClosed(page);
@@ -235,7 +236,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
235236
await waitModalClosed(page);
236237
await expect(page.getByPlaceholder('Key')).toHaveCount(4);
237238
await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
238-
await expect(page.getByRole('checkbox')).toBeChecked();
239+
await expect(page.getByRole('switch')).toBeChecked();
239240
});
240241

241242
await test.step('Add already existing type filter from dataset', async () => {
@@ -248,7 +249,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
248249
await waitModalClosed(page);
249250
await expect(page.getByPlaceholder('Key')).toHaveCount(4);
250251
await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
251-
await expect(page.getByRole('checkbox')).not.toBeChecked();
252+
await expect(page.getByRole('switch')).not.toBeChecked();
252253
});
253254

254255
await test.step('Cleanup', async () => {

0 commit comments

Comments
 (0)