Skip to content

feat: add support for list meta property (start and counterType) #87

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

Open
Maverick341 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add support for list meta property (start and counterType) #87

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
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

153 changes: 153 additions & 0 deletions src/renderers/list/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<List /> backward compatibility renders ordered list without meta property (default behavior) 1`] = `
<ol>
<li>
Item without meta
</li>
<li>
Another item
</li>
</ol>
`;

exports[`<List /> backward compatibility renders unordered list without meta property 1`] = `
<ul>
<li>
Bullet item
</li>
<li>
Another bullet
</li>
</ul>
`;

exports[`<List /> when receives a list "ordered" block renders a <ol> block 1`] = `
<ol>
<li>
Expand Down Expand Up @@ -36,6 +58,137 @@ exports[`<List /> when receives a list "unordered" block renders a <ul> block 1`
</ul>
`;

exports[`<List /> when receives a list with meta property with custom start value renders an <ol> block with start attribute 1`] = `
<ol
start={5}
>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ol>
`;

exports[`<List /> when receives a list with meta property with lower-alpha counter type renders an <ol> block with lower-alpha list style 1`] = `
<ol
style={
Object {
"listStyleType": "lower-alpha",
}
}
>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ol>
`;

exports[`<List /> when receives a list with meta property with lower-roman counter type renders an <ol> block with lower-roman list style 1`] = `
<ol
style={
Object {
"listStyleType": "lower-roman",
}
}
>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ol>
`;

exports[`<List /> when receives a list with meta property with nested lists and meta properties renders nested <ol> blocks with inherited meta properties 1`] = `
<ol
start={3}
style={
Object {
"listStyleType": "upper-roman",
}
}
>
<li>
First level item 1
</li>
<li>
First level item 2
<ol
start={3}
style={
Object {
"listStyleType": "upper-roman",
}
}
>
<li>
Nested item 1
</li>
<li>
Nested item 2
</li>
</ol>
</li>
</ol>
`;

exports[`<List /> when receives a list with meta property with upper-alpha counter type renders an <ol> block with upper-alpha list style and custom start 1`] = `
<ol
start={2}
style={
Object {
"listStyleType": "upper-alpha",
}
}
>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ol>
`;

exports[`<List /> when receives a list with meta property with upper-roman counter type renders an <ol> block with upper-roman list style and custom start 1`] = `
<ol
start={3}
style={
Object {
"listStyleType": "upper-roman",
}
}
>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ol>
`;

exports[`<List /> when receives a nested list "ordered" block and when className is provided renders className to all <ol> blocks 1`] = `
<ol
className="list"
Expand Down
183 changes: 182 additions & 1 deletion src/renderers/list/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,185 @@ describe('<List />', () => {
});
});
});
});

describe('when receives a list with meta property', () => {
describe('with custom start value', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'First item',
'Second item',
'Third item',
],
meta: {
start: 5,
counterType: 'numeric',
},
};

it('renders an <ol> block with start attribute', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// @ts-expect-error - accessing props for testing
expect(tree.props.start).toBe(5);
});
});

describe('with lower-roman counter type', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'First item',
'Second item',
'Third item',
],
meta: {
start: 1,
counterType: 'lower-roman',
},
};

it('renders an <ol> block with lower-roman list style', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// @ts-expect-error - accessing props for testing
expect(tree.props.style.listStyleType).toBe('lower-roman');
});
});

describe('with upper-roman counter type', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'First item',
'Second item',
'Third item',
],
meta: {
start: 3,
counterType: 'upper-roman',
},
};

it('renders an <ol> block with upper-roman list style and custom start', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// @ts-expect-error - accessing props for testing
expect(tree.props.start).toBe(3);
// @ts-expect-error - accessing props for testing
expect(tree.props.style.listStyleType).toBe('upper-roman');
});
});

describe('with lower-alpha counter type', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'First item',
'Second item',
'Third item',
],
meta: {
start: 1,
counterType: 'lower-alpha',
},
};

it('renders an <ol> block with lower-alpha list style', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// @ts-expect-error - accessing props for testing
expect(tree.props.style.listStyleType).toBe('lower-alpha');
});
});

describe('with upper-alpha counter type', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'First item',
'Second item',
'Third item',
],
meta: {
start: 2,
counterType: 'upper-alpha',
},
};

it('renders an <ol> block with upper-alpha list style and custom start', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// @ts-expect-error - accessing props for testing
expect(tree.props.start).toBe(2);
// @ts-expect-error - accessing props for testing
expect(tree.props.style.listStyleType).toBe('upper-alpha');
});
});

describe('with nested lists and meta properties', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
{
content: 'First level item 1',
items: [],
},
{
content: 'First level item 2',
items: [
{
content: 'Nested item 1',
items: [],
},
{
content: 'Nested item 2',
items: [],
},
],
},
],
meta: {
start: 3,
counterType: 'upper-roman',
},
};

it('renders nested <ol> blocks with inherited meta properties', () => {
const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
});
});
});

describe('backward compatibility', () => {
it('renders ordered list without meta property (default behavior)', () => {
const data: ListBlockData = {
style: 'ordered',
items: [
'Item without meta',
'Another item',
],
};

const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
// Should not have start attribute when start is 1 (default)
// @ts-expect-error - accessing props for testing
expect(tree.props.start).toBeUndefined();
});

it('renders unordered list without meta property', () => {
const data: ListBlockData = {
style: 'unordered',
items: [
'Bullet item',
'Another bullet',
],
};

const tree = create(<List data={data} />).toJSON();
expect(tree).toMatchSnapshot();
});
});
});
Loading