From 8babced290098910d080b6183dc5a561456476eb Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 10 Dec 2024 14:11:21 +0800 Subject: [PATCH] chore: refactor html test (#987) --- test/plugins/html/decoder/_samples.dart | 559 ++++++++++++++++ .../decoder/document_html_decoder_test.dart | 599 +----------------- 2 files changed, 574 insertions(+), 584 deletions(-) create mode 100644 test/plugins/html/decoder/_samples.dart diff --git a/test/plugins/html/decoder/_samples.dart b/test/plugins/html/decoder/_samples.dart new file mode 100644 index 000000000..c1989c57b --- /dev/null +++ b/test/plugins/html/decoder/_samples.dart @@ -0,0 +1,559 @@ +const htmlSample1 = + '''

AppFlowyEditor

👋 Welcome to AppFlowy Editor

AppFlowy Editor is a highly customizable rich-text editor

Here is an example your you can give a try

Span element

Span element two

Span element three

This is an anchor tag!

Features!

This is a quote!

Code block

Italic one

Italic two

Bold tag

You can also use AppFlowy Editor as a component to build your own app.

Awesome features

If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!

'''; + +const documentSample1 = { + 'document': { + 'type': 'page', + 'children': [ + { + 'type': 'heading', + 'data': { + 'level': 1, + 'delta': [ + {'insert': 'AppFlowyEditor'}, + ], + }, + }, + { + 'type': 'heading', + 'data': { + 'level': 2, + 'delta': [ + {'insert': '👋 '}, + { + 'insert': 'Welcome to', + 'attributes': {'bold': true}, + }, + {'insert': ' '}, + { + 'insert': 'AppFlowy Editor', + 'attributes': {'bold': true, 'italic': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': 'AppFlowy Editor is a '}, + { + 'insert': 'highly customizable', + 'attributes': {'bold': true}, + }, + {'insert': ' '}, + { + 'insert': 'rich-text editor', + 'attributes': {'italic': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Here', + 'attributes': {'underline': true}, + }, + {'insert': ' is an example '}, + { + 'insert': 'your', + 'attributes': {'strikethrough': true}, + }, + {'insert': ' you can give a try'}, + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Span element', + 'attributes': {'bold': true, 'italic': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Span element two', + 'attributes': {'underline': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Span element three', + 'attributes': {'bold': true, 'strikethrough': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'This is an anchor tag!', + 'attributes': {'href': 'https://appflowy.io'}, + } + ], + }, + }, + { + 'type': 'heading', + 'data': { + 'level': 3, + 'delta': [ + {'insert': 'Features!'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': '[x] Customizable'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': '[x] Test-covered'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': '[ ] more to come!'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'First item'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Second item'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'List element'}, + ], + }, + }, + { + 'type': 'quote', + 'data': { + 'delta': [ + {'insert': 'This is a quote!'}, + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + { + 'insert': ' Code block', + 'attributes': {'code': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Italic one', + 'attributes': {'italic': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Italic two', + 'attributes': {'italic': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': ' '}, + { + 'insert': 'Bold tag', + 'attributes': {'bold': true}, + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + {'insert': 'You can also use '}, + { + 'insert': 'AppFlowy Editor', + 'attributes': {'bold': true, 'italic': true}, + }, + {'insert': ' as a component to build your own app. '}, + ], + }, + }, + { + 'type': 'heading', + 'data': { + 'level': 3, + 'delta': [ + {'insert': 'Awesome features'}, + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + { + 'insert': + 'If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!', + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': {'delta': []}, + }, + { + 'type': 'paragraph', + 'data': {'delta': []}, + } + ], + }, +}; + +const htmlSample2 = + '''

a

c

b

d

'''; +const documentSample2 = { + "document": { + "type": "page", + "children": [ + { + "type": "table", + "children": [ + { + "type": "table/cell", + "children": [ + { + "type": "heading", + "data": { + "delta": [ + {"insert": "a"}, + ], + "level": 2, + }, + } + ], + "data": { + "colPosition": 0, + "rowPosition": 0, + "height": 40.0, + "width": 160.0, + }, + }, + { + "type": "table/cell", + "children": [ + { + "type": "paragraph", + "data": { + "delta": [ + { + "insert": "c", + "attributes": {"italic": true}, + } + ], + }, + } + ], + "data": { + "colPosition": 1, + "rowPosition": 0, + "height": 40.0, + "width": 160.0, + }, + }, + { + "type": "table/cell", + "children": [ + { + "type": "paragraph", + "data": { + "delta": [ + { + "insert": "b", + "attributes": {"bold": true}, + } + ], + }, + } + ], + "data": { + "colPosition": 0, + "rowPosition": 1, + "height": 40.0, + "width": 160.0, + }, + }, + { + "type": "table/cell", + "children": [ + { + "type": "paragraph", + "data": { + "delta": [ + {"insert": "d"}, + ], + }, + } + ], + "data": { + "colPosition": 1, + "rowPosition": 1, + "height": 40.0, + "width": 160.0, + }, + } + ], + "data": { + "rowsLen": 2, + "colsLen": 2, + "colDefaultWidth": 160, + "rowDefaultHeight": 40, + "colMinimumWidth": 40, + }, + } + ], + }, +}; + +const htmlSample3 = + '''

Welcome to the playground

In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with @lexical/react. Try typing in some text with different formats.

Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!

If you'd like to find out more about Lexical, you can:

Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.

'''; +const documentSample3 = { + 'document': { + 'type': 'page', + 'children': [ + { + 'type': 'heading', + 'data': { + 'level': 1, + 'delta': [ + {'insert': 'Welcome to the playground'}, + ], + }, + }, + { + 'type': 'quote', + 'data': { + 'delta': [ + { + 'insert': + 'In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with ', + }, + { + 'insert': '@lexical/react', + 'attributes': {'code': true}, + }, + {'insert': '. Try typing in '}, + { + 'insert': 'some text', + 'attributes': { + 'bold': true, + "italic": true, + 'href': 'https://appflowy.io', + }, + }, + {'insert': ' with '}, + { + 'insert': 'different', + 'attributes': {'italic': true}, + }, + {'insert': ' formats.'}, + ], + }, + }, + { + 'type': 'image', + 'data': { + 'url': 'https://richtexteditor.com/images/editor-image.png', + 'align': 'center', + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + { + 'insert': + 'Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!', + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': {'delta': []}, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + { + 'insert': + 'If you\'d like to find out more about Lexical, you can:', + } + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Visit the '}, + { + 'insert': 'Lexical website', + 'attributes': {'href': 'https://lexical.dev/'}, + }, + {'insert': ' for documentation and more information.'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'children': [ + { + 'type': 'image', + 'data': { + 'url': 'https://richtexteditor.com/images/editor-image.png', + 'align': 'center', + }, + } + ], + 'data': {'delta': []}, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Check out the code on our '}, + { + 'insert': 'GitHub repository', + 'attributes': {'href': 'https://github.com/facebook/lexical'}, + }, + {'insert': '.'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Playground code can be found '}, + { + 'insert': 'here', + 'attributes': { + 'href': + 'https://github.com/facebook/lexical/tree/main/packages/lexical-playground', + }, + }, + {'insert': '.'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Join our '}, + { + 'insert': 'Discord Server', + 'attributes': {'href': 'https://discord.com/invite/KmG4wQnnD9'}, + }, + {'insert': ' and chat with the team.'}, + ], + }, + }, + { + 'type': 'bulleted_list', + 'data': { + 'delta': [ + {'insert': 'Playground code can be found '}, + { + 'insert': 'here', + 'attributes': { + 'href': + 'https://github.com/facebook/lexical/tree/main/packages/lexical-playground', + }, + }, + {'insert': '.'}, + ], + }, + }, + { + 'type': 'paragraph', + 'data': { + 'delta': [ + { + 'insert': + 'Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.', + } + ], + }, + }, + { + 'type': 'paragraph', + 'data': {'delta': []}, + } + ], + }, +}; diff --git a/test/plugins/html/decoder/document_html_decoder_test.dart b/test/plugins/html/decoder/document_html_decoder_test.dart index 64263ac05..f75d1f106 100644 --- a/test/plugins/html/decoder/document_html_decoder_test.dart +++ b/test/plugins/html/decoder/document_html_decoder_test.dart @@ -1,599 +1,30 @@ import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter_test/flutter_test.dart'; +import '_samples.dart'; + void main() async { group('document_html_decoder_test.dart', () { setUpAll(() { TestWidgetsFlutterBinding.ensureInitialized(); }); - test('parser document', () async { - final result = DocumentHTMLDecoder().convert(rawHTML); - - expect(result.toJson(), example); + test('parse html sample 1', () async { + // sample 1 contains h1-h3 and bold, italic, underline, strikethrough + final result = DocumentHTMLDecoder().convert(htmlSample1); + expect(result.toJson(), documentSample1); }); - test('html table parser document', () async { - final result = DocumentHTMLDecoder().convert(htmlTable); - expect(result.toJson(), htmlTablejson); + test('parse html sample 2', () async { + // sample 2 contains table + final result = DocumentHTMLDecoder().convert(htmlSample2); + expect(result.toJson(), documentSample2); }); - test('nested parser document', () async { - final result = DocumentHTMLDecoder().convert(nestedHTML); - expect(result.toJson(), nestedDelta); + + test('parse html sample 3', () async { + // sample 3 contains lists + final result = DocumentHTMLDecoder().convert(htmlSample3); + expect(result.toJson(), documentSample3); }); }); } - -const rawHTML = - '''

AppFlowyEditor

👋 Welcome to AppFlowy Editor

AppFlowy Editor is a highly customizable rich-text editor

Here is an example your you can give a try

Span element

Span element two

Span element three

This is an anchor tag!

Features!

This is a quote!

Code block

Italic one

Italic two

Bold tag

You can also use AppFlowy Editor as a component to build your own app.

Awesome features

If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!

'''; -const htmlTable = - ''''

a

c

b

d

'''; -const htmlTablejson = { - "document": { - "type": "page", - "children": [ - { - "type": "paragraph", - "data": { - "delta": [ - {"insert": "'"}, - ], - }, - }, - { - "type": "table", - "children": [ - { - "type": "table/cell", - "children": [ - { - "type": "heading", - "data": { - "delta": [ - {"insert": "a"}, - ], - "level": 2, - }, - } - ], - "data": { - "colPosition": 0, - "rowPosition": 0, - "height": 40.0, - "width": 160.0, - }, - }, - { - "type": "table/cell", - "children": [ - { - "type": "paragraph", - "data": { - "delta": [ - { - "insert": "c", - "attributes": {"italic": true}, - } - ], - }, - } - ], - "data": { - "colPosition": 1, - "rowPosition": 0, - "height": 40.0, - "width": 160.0, - }, - }, - { - "type": "table/cell", - "children": [ - { - "type": "paragraph", - "data": { - "delta": [ - { - "insert": "b", - "attributes": {"bold": true}, - } - ], - }, - } - ], - "data": { - "colPosition": 0, - "rowPosition": 1, - "height": 40.0, - "width": 160.0, - }, - }, - { - "type": "table/cell", - "children": [ - { - "type": "paragraph", - "data": { - "delta": [ - {"insert": "d"}, - ], - }, - } - ], - "data": { - "colPosition": 1, - "rowPosition": 1, - "height": 40.0, - "width": 160.0, - }, - } - ], - "data": { - "rowsLen": 2, - "colsLen": 2, - "colDefaultWidth": 160, - "rowDefaultHeight": 40, - "colMinimumWidth": 40, - }, - }, - { - "type": "paragraph", - "data": { - "delta": [ - {"insert": "'"}, - ], - }, - } - ], - }, -}; - -const example = { - 'document': { - 'type': 'page', - 'children': [ - { - 'type': 'heading', - 'data': { - 'level': 1, - 'delta': [ - {'insert': 'AppFlowyEditor'}, - ], - }, - }, - { - 'type': 'heading', - 'data': { - 'level': 2, - 'delta': [ - {'insert': '👋 '}, - { - 'insert': 'Welcome to', - 'attributes': {'bold': true}, - }, - {'insert': ' '}, - { - 'insert': 'AppFlowy Editor', - 'attributes': {'bold': true, 'italic': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': 'AppFlowy Editor is a '}, - { - 'insert': 'highly customizable', - 'attributes': {'bold': true}, - }, - {'insert': ' '}, - { - 'insert': 'rich-text editor', - 'attributes': {'italic': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Here', - 'attributes': {'underline': true}, - }, - {'insert': ' is an example '}, - { - 'insert': 'your', - 'attributes': {'strikethrough': true}, - }, - {'insert': ' you can give a try'}, - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Span element', - 'attributes': {'bold': true, 'italic': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Span element two', - 'attributes': {'underline': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Span element three', - 'attributes': {'bold': true, 'strikethrough': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'This is an anchor tag!', - 'attributes': {'href': 'https://appflowy.io'}, - } - ], - }, - }, - { - 'type': 'heading', - 'data': { - 'level': 3, - 'delta': [ - {'insert': 'Features!'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': '[x] Customizable'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': '[x] Test-covered'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': '[ ] more to come!'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'First item'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Second item'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'List element'}, - ], - }, - }, - { - 'type': 'quote', - 'data': { - 'delta': [ - {'insert': 'This is a quote!'}, - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - { - 'insert': ' Code block', - 'attributes': {'code': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Italic one', - 'attributes': {'italic': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Italic two', - 'attributes': {'italic': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': ' '}, - { - 'insert': 'Bold tag', - 'attributes': {'bold': true}, - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - {'insert': 'You can also use '}, - { - 'insert': 'AppFlowy Editor', - 'attributes': {'bold': true, 'italic': true}, - }, - {'insert': ' as a component to build your own app. '}, - ], - }, - }, - { - 'type': 'heading', - 'data': { - 'level': 3, - 'delta': [ - {'insert': 'Awesome features'}, - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - { - 'insert': - 'If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!', - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': {'delta': []}, - }, - { - 'type': 'paragraph', - 'data': {'delta': []}, - } - ], - }, -}; -const nestedHTML = - '''

Welcome to the playground

In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with @lexical/react. Try typing in some text with different formats.

Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!

If you'd like to find out more about Lexical, you can:

Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.

'''; -const nestedDelta = { - 'document': { - 'type': 'page', - 'children': [ - { - 'type': 'heading', - 'data': { - 'level': 1, - 'delta': [ - {'insert': 'Welcome to the playground'}, - ], - }, - }, - { - 'type': 'quote', - 'data': { - 'delta': [ - { - 'insert': - 'In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with ', - }, - { - 'insert': '@lexical/react', - 'attributes': {'code': true}, - }, - {'insert': '. Try typing in '}, - { - 'insert': 'some text', - 'attributes': { - 'bold': true, - "italic": true, - 'href': 'https://appflowy.io', - }, - }, - {'insert': ' with '}, - { - 'insert': 'different', - 'attributes': {'italic': true}, - }, - {'insert': ' formats.'}, - ], - }, - }, - { - 'type': 'image', - 'data': { - 'url': 'https://richtexteditor.com/images/editor-image.png', - 'align': 'center', - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - { - 'insert': - 'Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!', - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': {'delta': []}, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - { - 'insert': - 'If you\'d like to find out more about Lexical, you can:', - } - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Visit the '}, - { - 'insert': 'Lexical website', - 'attributes': {'href': 'https://lexical.dev/'}, - }, - {'insert': ' for documentation and more information.'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'children': [ - { - 'type': 'image', - 'data': { - 'url': 'https://richtexteditor.com/images/editor-image.png', - 'align': 'center', - }, - } - ], - 'data': {'delta': []}, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Check out the code on our '}, - { - 'insert': 'GitHub repository', - 'attributes': {'href': 'https://github.com/facebook/lexical'}, - }, - {'insert': '.'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Playground code can be found '}, - { - 'insert': 'here', - 'attributes': { - 'href': - 'https://github.com/facebook/lexical/tree/main/packages/lexical-playground', - }, - }, - {'insert': '.'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Join our '}, - { - 'insert': 'Discord Server', - 'attributes': {'href': 'https://discord.com/invite/KmG4wQnnD9'}, - }, - {'insert': ' and chat with the team.'}, - ], - }, - }, - { - 'type': 'bulleted_list', - 'data': { - 'delta': [ - {'insert': 'Playground code can be found '}, - { - 'insert': 'here', - 'attributes': { - 'href': - 'https://github.com/facebook/lexical/tree/main/packages/lexical-playground', - }, - }, - {'insert': '.'}, - ], - }, - }, - { - 'type': 'paragraph', - 'data': { - 'delta': [ - { - 'insert': - 'Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.', - } - ], - }, - }, - { - 'type': 'paragraph', - 'data': {'delta': []}, - } - ], - }, -};