Skip to content

Commit fdf29aa

Browse files
CrashBytesCrashBytes
authored
Updated richtext compare so that it works using semantic diff (#11)
* Updating Contentful Compare to use semeantic compare. Updated mock data. * Updated mock data and all tests pass * Working through an issue with stories * Storybook is working
1 parent b96cedc commit fdf29aa

File tree

11 files changed

+758
-973
lines changed

11 files changed

+758
-973
lines changed

‎__mocks__/richtext.mock.ts

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import { BLOCKS, type Document } from '@contentful/rich-text-types';
2+
3+
export const originalRichText: Document = {
4+
nodeType: BLOCKS.DOCUMENT,
5+
data: {},
6+
content: [
7+
{
8+
nodeType: BLOCKS.HEADING_1,
9+
content: [{ nodeType: 'text', value: 'The Fellowship of the Ring', marks: [], data: {} }],
10+
data: {}
11+
},
12+
{
13+
nodeType: BLOCKS.HEADING_2,
14+
content: [{ nodeType: 'text', value: 'The Two Towers', marks: [], data: {} }],
15+
data: {}
16+
},
17+
{
18+
nodeType: BLOCKS.HEADING_3,
19+
content: [{ nodeType: 'text', value: 'The Return of the King', marks: [], data: {} }],
20+
data: {}
21+
},
22+
{
23+
nodeType: BLOCKS.HEADING_4,
24+
content: [{ nodeType: 'text', value: 'The Shire', marks: [], data: {} }],
25+
data: {}
26+
},
27+
{
28+
nodeType: BLOCKS.HEADING_5,
29+
content: [{ nodeType: 'text', value: 'Rivendell', marks: [], data: {} }],
30+
data: {}
31+
},
32+
{
33+
nodeType: BLOCKS.HEADING_6,
34+
content: [{ nodeType: 'text', value: 'Mordor', marks: [], data: {} }],
35+
data: {}
36+
},
37+
{
38+
nodeType: BLOCKS.PARAGRAPH,
39+
content: [{ nodeType: 'text', value: 'One Ring to rule them all, One Ring to find them.', marks: [], data: {} }],
40+
data: {}
41+
},
42+
{
43+
nodeType: 'hyperlink',
44+
content: [{ nodeType: 'text', value: 'The Council of Elrond', marks: [], data: {} }],
45+
data: { uri: 'https://lotr.fandom.com/wiki/Council_of_Elrond' }
46+
},
47+
{
48+
nodeType: BLOCKS.UL_LIST,
49+
content: [
50+
{
51+
nodeType: BLOCKS.LIST_ITEM,
52+
content: [{ nodeType: 'text', value: 'Frodo Baggins', marks: [], data: {} }],
53+
data: {}
54+
},
55+
{
56+
nodeType: BLOCKS.LIST_ITEM,
57+
content: [{ nodeType: 'text', value: 'Samwise Gamgee', marks: [], data: {} }],
58+
data: {}
59+
}
60+
],
61+
data: {}
62+
},
63+
{
64+
nodeType: BLOCKS.OL_LIST,
65+
content: [
66+
{
67+
nodeType: BLOCKS.LIST_ITEM,
68+
content: [{ nodeType: 'text', value: 'Gandalf the Grey', marks: [], data: {} }],
69+
data: {}
70+
},
71+
{
72+
nodeType: BLOCKS.LIST_ITEM,
73+
content: [{ nodeType: 'text', value: 'Aragorn son of Arathorn', marks: [], data: {} }],
74+
data: {}
75+
}
76+
],
77+
data: {}
78+
},
79+
{
80+
nodeType: BLOCKS.LIST_ITEM,
81+
content: [{ nodeType: 'text', value: 'Legolas Greenleaf', marks: [], data: {} }],
82+
data: {}
83+
},
84+
{
85+
nodeType: BLOCKS.QUOTE,
86+
content: [{ nodeType: 'text', value: 'Even the smallest person can change the course of the future.', marks: [], data: {} }],
87+
data: {}
88+
},
89+
{
90+
nodeType: BLOCKS.TABLE,
91+
content: [
92+
{
93+
nodeType: 'table-row',
94+
content: [
95+
{
96+
nodeType: 'table-cell',
97+
content: [{ nodeType: 'text', value: 'Gimli', marks: [], data: {} }],
98+
data: {}
99+
},
100+
{
101+
nodeType: 'table-cell',
102+
content: [{ nodeType: 'text', value: 'Boromir', marks: [], data: {} }],
103+
data: {}
104+
}
105+
],
106+
data: {}
107+
}
108+
],
109+
data: {}
110+
},
111+
{
112+
nodeType: BLOCKS.PARAGRAPH,
113+
content: [{ nodeType: 'text', value: 'Not all those who wander are lost.', marks: [], data: {} }],
114+
data: {}
115+
},
116+
{
117+
nodeType: BLOCKS.PARAGRAPH,
118+
content: [{ nodeType: 'text', value: 'All we have to decide is what to do with the time that is given us.', marks: [{ type: 'bold' }], data: {} }],
119+
data: {}
120+
},
121+
{
122+
nodeType: BLOCKS.PARAGRAPH,
123+
content: [{ nodeType: 'text', value: 'You shall not pass!', marks: [], data: {} }],
124+
data: {}
125+
},
126+
{
127+
nodeType: BLOCKS.PARAGRAPH,
128+
content: [{ nodeType: 'text', value: 'There is some good in this world, and it’s worth fighting for.', marks: [], data: {} }],
129+
data: {}
130+
},
131+
{
132+
nodeType: BLOCKS.PARAGRAPH,
133+
content: [{ nodeType: 'text', value: 'I am no man!', marks: [], data: {} }],
134+
data: {}
135+
}
136+
]
137+
};
138+
139+
export const modifiedRichText: Document = {
140+
nodeType: BLOCKS.DOCUMENT,
141+
data: {},
142+
content: [
143+
{
144+
nodeType: BLOCKS.HEADING_1,
145+
content: [{ nodeType: 'text', value: 'The Fellowship of the Ring (Updated)', marks: [], data: {} }],
146+
data: {}
147+
},
148+
{
149+
nodeType: BLOCKS.HEADING_2,
150+
content: [{ nodeType: 'text', value: 'The Two Towers', marks: [], data: {} }],
151+
data: {}
152+
},
153+
{
154+
nodeType: BLOCKS.HEADING_3,
155+
content: [{ nodeType: 'text', value: 'The Return of the King', marks: [], data: {} }],
156+
data: {}
157+
},
158+
{
159+
nodeType: BLOCKS.HEADING_4,
160+
content: [{ nodeType: 'text', value: 'The Shire', marks: [], data: {} }],
161+
data: {}
162+
},
163+
{
164+
nodeType: BLOCKS.HEADING_5,
165+
content: [{ nodeType: 'text', value: 'Rivendell', marks: [], data: {} }],
166+
data: {}
167+
},
168+
{
169+
nodeType: BLOCKS.HEADING_6,
170+
content: [{ nodeType: 'text', value: 'Mordor', marks: [], data: {} }],
171+
data: {}
172+
},
173+
{
174+
nodeType: BLOCKS.PARAGRAPH,
175+
content: [{ nodeType: 'text', value: 'One Ring to rule them all, One Ring to find them. (Updated)', marks: [], data: {} }],
176+
data: {}
177+
},
178+
{
179+
nodeType: 'hyperlink',
180+
content: [{ nodeType: 'text', value: 'The Council of Elrond', marks: [], data: {} }],
181+
data: { uri: 'https://lotr.fandom.com/wiki/Council_of_Elrond' }
182+
},
183+
{
184+
nodeType: BLOCKS.UL_LIST,
185+
content: [
186+
{
187+
nodeType: BLOCKS.LIST_ITEM,
188+
content: [{ nodeType: 'text', value: 'Frodo Baggins', marks: [], data: {} }],
189+
data: {}
190+
},
191+
{
192+
nodeType: BLOCKS.LIST_ITEM,
193+
content: [{ nodeType: 'text', value: 'Samwise Gamgee (Updated)', marks: [], data: {} }],
194+
data: {}
195+
}
196+
],
197+
data: {}
198+
},
199+
{
200+
nodeType: BLOCKS.OL_LIST,
201+
content: [
202+
{
203+
nodeType: BLOCKS.LIST_ITEM,
204+
content: [{ nodeType: 'text', value: 'Gandalf the White', marks: [], data: {} }],
205+
data: {}
206+
},
207+
{
208+
nodeType: BLOCKS.LIST_ITEM,
209+
content: [{ nodeType: 'text', value: 'Aragorn son of Arathorn', marks: [], data: {} }],
210+
data: {}
211+
}
212+
],
213+
data: {}
214+
},
215+
{
216+
nodeType: BLOCKS.LIST_ITEM,
217+
content: [{ nodeType: 'text', value: 'Legolas Greenleaf (Updated)', marks: [], data: {} }],
218+
data: {}
219+
},
220+
{
221+
nodeType: BLOCKS.QUOTE,
222+
content: [{ nodeType: 'text', value: 'Even the smallest person can change the course of the future. (Updated)', marks: [], data: {} }],
223+
data: {}
224+
},
225+
{
226+
nodeType: BLOCKS.TABLE,
227+
content: [
228+
{
229+
nodeType: 'table-row',
230+
content: [
231+
{
232+
nodeType: 'table-cell',
233+
content: [{ nodeType: 'text', value: 'Gimli', marks: [], data: {} }],
234+
data: {}
235+
},
236+
{
237+
nodeType: 'table-cell',
238+
content: [{ nodeType: 'text', value: 'Boromir (Updated)', marks: [], data: {} }],
239+
data: {}
240+
}
241+
],
242+
data: {}
243+
}
244+
],
245+
data: {}
246+
},
247+
{
248+
nodeType: BLOCKS.PARAGRAPH,
249+
content: [{ nodeType: 'text', value: 'Not all those who wander are lost.', marks: [], data: {} }],
250+
data: {}
251+
},
252+
{
253+
nodeType: BLOCKS.PARAGRAPH,
254+
content: [{ nodeType: 'text', value: 'All we have to decide is what to do with the time that is given us.', marks: [{ type: 'bold' }], data: {} }],
255+
data: {}
256+
},
257+
{
258+
nodeType: BLOCKS.PARAGRAPH,
259+
content: [{ nodeType: 'text', value: 'You shall not pass!', marks: [], data: {} }],
260+
data: {}
261+
},
262+
{
263+
nodeType: BLOCKS.PARAGRAPH,
264+
content: [{ nodeType: 'text', value: 'There is some good in this world, and it’s worth fighting for. (Updated)', marks: [], data: {} }],
265+
data: {}
266+
},
267+
{
268+
nodeType: BLOCKS.PARAGRAPH,
269+
content: [{ nodeType: 'text', value: 'I am no man!', marks: [], data: {} }],
270+
data: {}
271+
}
272+
]
273+
};

‎__tests__/Compare.test.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import '@testing-library/jest-dom';
2+
import React from 'react';
3+
import { render, screen } from '@testing-library/react';
4+
import { Compare } from '../src/components/Compare';
5+
import { originalRichText, modifiedRichText } from '../__mocks__/richtext.mock';
6+
7+
describe('Compare', () => {
8+
it('Contentful Document Comparison handles structure mode with word-level changes in same element type', () => {
9+
render(
10+
<Compare
11+
original={originalRichText}
12+
modified={modifiedRichText}
13+
compareMode="structure"
14+
viewMode="side-by-side"
15+
/>
16+
);
17+
// Check for all expected structure types
18+
expect(screen.getAllByText('Heading').length).toBeGreaterThan(0);
19+
expect(screen.getAllByText('Text').length).toBeGreaterThan(0);
20+
expect(screen.getAllByText('List Item').length).toBeGreaterThan(0);
21+
expect(screen.getAllByText('Quote').length).toBeGreaterThan(0);
22+
// Table label may be "TablE", "Tabl", or "Table" depending on implementation, so use a flexible matcher
23+
expect(
24+
screen.getAllByText((content) => content.toLowerCase().includes('tabl')).length
25+
).toBeGreaterThan(0);
26+
expect(screen.getAllByText('Hyperlink').length).toBeGreaterThan(0);
27+
28+
// Use getAllByText for possibly duplicated content
29+
expect(screen.getAllByText((content) => content.includes('The Fellowship of the Ring')).length).toBeGreaterThan(0);
30+
expect(screen.getAllByText((content) => content.includes('One Ring to rule them all')).length).toBeGreaterThan(0);
31+
expect(screen.getAllByText((content) => content.includes('Frodo Baggins')).length).toBeGreaterThan(0);
32+
expect(screen.getAllByText((content) => content.includes('Even the smallest person can change the course of the future')).length).toBeGreaterThan(0);
33+
expect(screen.getAllByText((content) => content.includes('Gimli')).length).toBeGreaterThan(0);
34+
expect(screen.getAllByText((content) => content.includes('Boromir')).length).toBeGreaterThan(0);
35+
expect(screen.getAllByText((content) => content.includes('The Council of Elrond')).length).toBeGreaterThan(0);
36+
expect(screen.getAllByText((content) => content.includes('I am no man!')).length).toBeGreaterThan(0);
37+
// Check for updated content in the modified doc
38+
expect(screen.getAllByText((content) => content.includes('Updated')).length).toBeGreaterThan(0);
39+
});
40+
41+
it('Contentful Document Comparison handles structure mode with different heading levels', () => {
42+
const origDoc = {
43+
...originalRichText,
44+
content: [
45+
{
46+
nodeType: 'heading-1',
47+
content: [
48+
{ nodeType: 'text', value: 'Main Title', marks: [], data: {} }
49+
],
50+
data: {}
51+
},
52+
{
53+
nodeType: 'heading-2',
54+
content: [
55+
{ nodeType: 'text', value: 'Subtitle', marks: [], data: {} }
56+
],
57+
data: {}
58+
}
59+
]
60+
};
61+
const modDoc = {
62+
...modifiedRichText,
63+
content: [
64+
{
65+
nodeType: 'heading-1',
66+
content: [
67+
{ nodeType: 'text', value: 'Main Title', marks: [], data: {} }
68+
],
69+
data: {}
70+
},
71+
{
72+
nodeType: 'heading-2',
73+
content: [
74+
{ nodeType: 'text', value: 'Updated Subtitle', marks: [], data: {} }
75+
],
76+
data: {}
77+
}
78+
]
79+
};
80+
render(
81+
<Compare
82+
original={origDoc}
83+
modified={modDoc}
84+
compareMode="structure"
85+
viewMode="side-by-side"
86+
/>
87+
);
88+
expect(screen.getAllByText('Heading').length).toBeGreaterThan(0);
89+
expect(screen.getAllByText((content) => content.includes('Main Title')).length).toBeGreaterThan(0);
90+
expect(screen.getAllByText((content) => content.includes('Subtitle')).length).toBeGreaterThan(0);
91+
});
92+
93+
it('handles string comparison', () => {
94+
render(<Compare original="foo bar" modified="foo baz" />);
95+
expect(screen.getAllByText((content) => content.includes('foo')).length).toBeGreaterThan(0);
96+
expect(screen.getByText('bar')).toBeInTheDocument();
97+
expect(screen.getByText('baz')).toBeInTheDocument();
98+
});
99+
100+
it('handles array comparison', () => {
101+
render(<Compare original={['a', 'b']} modified={['a', 'c']} />);
102+
expect(screen.getAllByText('a').length).toBeGreaterThan(1);
103+
expect(screen.getByText('b')).toBeInTheDocument();
104+
expect(screen.getByText('c')).toBeInTheDocument();
105+
});
106+
107+
it('shows error for invalid input', () => {
108+
render(<Compare original={123 as any} modified={456 as any} />);
109+
expect(screen.getByText(/Error/)).toBeInTheDocument();
110+
});
111+
});

0 commit comments

Comments
 (0)