Skip to content

Commit 33f57ec

Browse files
webJosewebJose
authored
fix: Correctly skip empty cells (#9)
1 parent 7eac960 commit 33f57ec

13 files changed

Lines changed: 119 additions & 60 deletions

‎src/lib/Cell/Cell.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,5 @@
1010
1111
const rowCtx = rowContext();
1212
// svelte-ignore state_referenced_locally
13-
if (children) {
14-
rowCtx.children.push(children);
15-
}
13+
rowCtx.children.push(children);
1614
</script>

‎src/lib/Table/RsTable.svelte.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { page } from 'vitest/browser';
33
import { render } from 'vitest-browser-svelte';
44
import type { TableContextOptions } from '$lib/types.js';
55
import Layout from '$lib/tests/Layout.svelte';
6-
import Children1Col from '$lib/tests/Children1Col.svelte';
6+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
77
import type { TableContext } from '$lib/table-context.svelte.js';
88

99
describe('RsTable', () => {
1010
const ctxOptions: TableContextOptions = {
1111
breakpoint: window.innerWidth,
1212
};
1313
test('Should render the root div with the expected attributes.', async () => {
14-
render(Layout, { ctxOptions });
14+
render(Layout, { props: { ctxOptions } });
1515
const tableLocator = page.getByRole('table');
1616
await expect.element(tableLocator).toBeInTheDocument();
1717
const table = await tableLocator.element();
@@ -23,7 +23,7 @@ describe('RsTable', () => {
2323
render(Layout, {
2424
props: {
2525
ctxOptions,
26-
children: Children1Col,
26+
children: children1Col,
2727
get tableCtx() {
2828
return tableCtx!;
2929
},

‎src/lib/Tbody/Tbody.svelte.test.ts‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe } from 'vitest';
22
import { breakpointTests } from '$lib/tests/breakpoint-tests.js';
3-
import Children1Col from '$lib/tests/Children1Col.svelte';
3+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
44

55
describe(
66
'Tbody',
@@ -9,20 +9,26 @@ describe(
99
expectedTagName: 'tbody',
1010
renderAsText: 'a body row group',
1111
locator: (page) =>
12-
page.getByRole('rowgroup').all().find(locator => {
13-
return locator.element().tagName.toLowerCase() === 'tbody';
14-
})!,
15-
children: Children1Col
12+
page
13+
.getByRole('rowgroup')
14+
.all()
15+
.find((locator) => {
16+
return locator.element().tagName.toLowerCase() === 'tbody';
17+
})!,
18+
children: children1Col,
1619
},
1720
{
1821
expectedTagName: 'div',
1922
renderAsText: 'a div',
2023
locator: (page) =>
21-
page.getByRole('rowgroup').all().find(locator => {
22-
const el = locator.element();
23-
return el.tagName.toLowerCase() === 'div' && el.getAttribute('data-mdsvex-table') === 'tbody';
24-
})!,
25-
children: Children1Col
26-
}
27-
])
24+
page
25+
.getByRole('rowgroup')
26+
.all()
27+
.find((locator) => {
28+
const el = locator.element();
29+
return el.tagName.toLowerCase() === 'div' && el.getAttribute('data-mdsvex-table') === 'tbody';
30+
})!,
31+
children: children1Col,
32+
},
33+
]),
2834
);

‎src/lib/Td/Td.svelte.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe } from 'vitest';
22
import { breakpointTests } from '$lib/tests/breakpoint-tests.js';
3-
import Children1Col from '$lib/tests/Children1Col.svelte';
3+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
44

55
describe(
66
'Td',
@@ -9,13 +9,13 @@ describe(
99
expectedTagName: 'td',
1010
renderAsText: 'a table data cell',
1111
locator: (page) => page.getByRole('cell'),
12-
children: Children1Col
12+
children: children1Col,
1313
},
1414
{
1515
expectedTagName: 'div',
1616
renderAsText: 'a div',
1717
locator: (page) => page.getByRole('cell'),
18-
children: Children1Col
19-
}
20-
])
18+
children: children1Col,
19+
},
20+
]),
2121
);

‎src/lib/Th/Th.svelte.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe } from 'vitest';
22
import { breakpointTests } from '$lib/tests/breakpoint-tests.js';
3-
import Children1Col from '$lib/tests/Children1Col.svelte';
3+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
44

55
describe(
66
'Th',
@@ -9,13 +9,13 @@ describe(
99
expectedTagName: 'th',
1010
renderAsText: 'a table header cell',
1111
locator: (page) => page.getByRole('columnheader'),
12-
children: Children1Col
12+
children: children1Col,
1313
},
1414
{
1515
expectedTagName: 'div',
1616
renderAsText: 'a div',
1717
locator: (page) => page.getByRole('columnheader'),
18-
children: Children1Col
19-
}
20-
])
18+
children: children1Col,
19+
},
20+
]),
2121
);

‎src/lib/Thead/Thead.svelte.test.ts‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe } from 'vitest';
22
import { breakpointTests } from '$lib/tests/breakpoint-tests.js';
3-
import Children1Col from '$lib/tests/Children1Col.svelte';
3+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
44

55
describe(
66
'Thead',
@@ -9,20 +9,26 @@ describe(
99
expectedTagName: 'thead',
1010
renderAsText: 'a header row group',
1111
locator: (page) =>
12-
page.getByRole('rowgroup').all().find(locator => {
13-
return locator.element().tagName.toLowerCase() === 'thead';
14-
})!,
15-
children: Children1Col
12+
page
13+
.getByRole('rowgroup')
14+
.all()
15+
.find((locator) => {
16+
return locator.element().tagName.toLowerCase() === 'thead';
17+
})!,
18+
children: children1Col,
1619
},
1720
{
1821
expectedTagName: 'div',
1922
renderAsText: 'a div',
2023
locator: (page) =>
21-
page.getByRole('rowgroup').all().find(locator => {
22-
const el = locator.element();
23-
return el.tagName.toLowerCase() === 'div' && el.getAttribute('data-mdsvex-table') === 'thead';
24-
})!,
25-
children: Children1Col
26-
}
27-
])
24+
page
25+
.getByRole('rowgroup')
26+
.all()
27+
.find((locator) => {
28+
const el = locator.element();
29+
return el.tagName.toLowerCase() === 'div' && el.getAttribute('data-mdsvex-table') === 'thead';
30+
})!,
31+
children: children1Col,
32+
},
33+
]),
2834
);

‎src/lib/Tr/RsTr.svelte.test.ts‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@ import { page } from 'vitest/browser';
33
import { render } from 'vitest-browser-svelte';
44
import type { TableContextOptions } from '$lib/types.js';
55
import Layout from '$lib/tests/Layout.svelte';
6-
import Children1Col from '$lib/tests/Children1Col.svelte';
6+
import { children1Col, childrenEmptyCell } from '$lib/tests/TestSnippets.svelte';
77

88
describe('RsTr', () => {
9-
test("Should render data rows as lists.", async () => {
9+
test('Should render data rows as lists.', async () => {
1010
const optionsCtx: TableContextOptions = {
1111
breakpoint: window.innerWidth,
1212
};
1313
render(Layout, {
1414
props: {
1515
optionsCtx,
16-
children: Children1Col,
17-
}
16+
children: children1Col,
17+
},
1818
});
1919
await expect.element(page.getByRole('list')).toBeInTheDocument();
2020
});
21-
test("Should render header content as list items.", async () => {
21+
test('Should render header content as list items.', async () => {
2222
const optionsCtx: TableContextOptions = {
2323
breakpoint: window.innerWidth,
2424
};
2525
render(Layout, {
2626
props: {
2727
optionsCtx,
28-
children: Children1Col,
29-
}
28+
children: children1Col,
29+
},
3030
});
3131
const el = page.getByRole('listitem').element();
3232
await expect.element(el).toBeInTheDocument();
@@ -39,8 +39,8 @@ describe('RsTr', () => {
3939
render(Layout, {
4040
props: {
4141
optionsCtx,
42-
children: Children1Col,
43-
}
42+
children: children1Col,
43+
},
4444
});
4545
const el = page.getByRole('cell').element();
4646
await expect.element(el).toBeInTheDocument();
@@ -53,13 +53,29 @@ describe('RsTr', () => {
5353
render(Layout, {
5454
props: {
5555
optionsCtx,
56-
children: Children1Col,
57-
}
56+
children: children1Col,
57+
},
5858
});
5959
const el = page.getByRole('cell').element();
6060
await expect.element(el).toBeInTheDocument();
6161
expect(el.getAttribute('data-mdsvex-table')).toBe('td');
6262
expect(el.getAttribute('aria-rowindex')).toBe('1');
6363
expect(el.getAttribute('aria-colindex')).toBe('1');
6464
});
65+
test('#7: Should render the correct cell content when the row has one empty cell.', async () => {
66+
const optionsCtx: TableContextOptions = {
67+
breakpoint: window.innerWidth,
68+
};
69+
render(Layout, {
70+
props: {
71+
optionsCtx,
72+
children: childrenEmptyCell,
73+
},
74+
});
75+
const els = page.getByRole('cell').all();
76+
await expect.element(els[0].element()).toBeInTheDocument();
77+
expect(els[0].element().textContent).toBe('');
78+
await expect.element(els[1].element()).toBeInTheDocument();
79+
expect(els[1].element().textContent).toBe('Cell 2');
80+
});
6581
});

‎src/lib/Tr/Tr.svelte.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe } from 'vitest';
22
import { breakpointTests } from '$lib/tests/breakpoint-tests.js';
3-
import Children1Col from '$lib/tests/Children1Col.svelte';
3+
import { children1Col } from '$lib/tests/TestSnippets.svelte';
44

55
describe(
66
'Tr',
@@ -9,13 +9,13 @@ describe(
99
expectedTagName: 'tr',
1010
renderAsText: 'a table row',
1111
locator: (page) => page.getByRole('row').all()[0],
12-
children: Children1Col
12+
children: children1Col,
1313
},
1414
{
1515
expectedTagName: 'div',
1616
renderAsText: 'a div',
1717
locator: (page) => page.getByRole('row').all()[0],
18-
children: Children1Col
19-
}
20-
])
18+
children: children1Col,
19+
},
20+
]),
2121
);

‎src/lib/children-context.svelte.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { type Snippet } from "svelte";
22

33
export class ChildrenContext {
4-
children: Snippet[];
4+
children: (Snippet | undefined)[];
55

66
constructor() {
77
this.children = $state([]);

‎src/lib/tests/ChildrenEmptyCell.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import Tbody from "$lib/Tbody/Tbody.svelte";
3+
import Td from "$lib/Td/Td.svelte";
4+
import Th from "$lib/Th/Th.svelte";
5+
import Thead from "$lib/Thead/Thead.svelte";
6+
import Tr from "$lib/Tr/Tr.svelte";
7+
</script>
8+
<Thead>
9+
<Tr>
10+
<Th>Header 1</Th>
11+
<Th>Header 2</Th>
12+
</Tr>
13+
</Thead>
14+
<Tbody>
15+
<Tr>
16+
<Td></Td>
17+
<Td>Cell 2</Td>
18+
</Tr>
19+
</Tbody>

0 commit comments

Comments
 (0)