formatOutput = true; $DOM->preserveWhiteSpace = false; $DOM->loadXML( $html ); return $DOM->saveXML(); } /** * @covers PortableInfoboxRenderService::renderInfobox * @covers PortableInfobox\Helpers\PortableInfoboxTemplateEngine * @param $input * @param $expectedOutput * @param $description * @param $accentColor * @param $accentColorText * @dataProvider renderInfoboxDataProvider */ public function testRenderInfobox( $input, $expectedOutput, $description, $accentColor, $accentColorText ) { $infoboxRenderService = new PortableInfoboxRenderService(); $actualOutput = $infoboxRenderService->renderInfobox( $input, '', '', $accentColor, $accentColorText ); $expectedHtml = $this->normalizeHTML( $expectedOutput ); $actualHtml = $this->normalizeHTML( $actualOutput ); $this->assertEquals( $expectedHtml, $actualHtml, $description ); } public function renderInfoboxDataProvider() { return [ [ 'input' => [], 'output' => '', 'description' => 'Empty data should yield no infobox markup', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ] ], 'output' => '', 'description' => 'Only title', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ] ], 'output' => '', 'description' => 'Only title with custom colors', 'accentColor' => '#FFF', 'accentColorText' => '#000' ], [ 'input' => [ [ 'type' => 'media', 'data' => [ [ 'alt' => 'image alt', 'url' => 'http://image.jpg', 'caption' => 'Lorem ipsum dolor', 'width' => '400', 'height' => '200', 'thumbnail' => 'http://thumbnail.jpg', 'thumbnail2x' => 'http://thumbnail2x.jpg', 'isImage' => true ] ] ] ], 'output' => '', 'description' => 'Only image', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'media', 'data' => [ [ 'alt' => 'image alt', 'url' => 'http://image.jpg', 'caption' => 'Lorem ipsum dolor', 'isVideo' => true ] ] ] ], 'output' => '', 'description' => 'Only video', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'navigation', 'data' => [ 'value' => 'navigation value', ] ] ], 'output' => '', 'description' => 'navigation only', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'output' => '', 'description' => 'Only pair', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'media', 'data' => [ [ 'alt' => 'image alt', 'url' => 'http://image.jpg', 'width' => '400', 'height' => '200', 'thumbnail' => 'http://thumbnail.jpg', 'thumbnail2x' => 'http://thumbnail2x.jpg', 'isImage' => true ] ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'output' => '', 'description' => 'Simple infobox with title, image and key-value pair', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'media', 'data' => [] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'output' => '', 'description' => 'Simple infobox with title, INVALID image and key-value pair', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'output' => '', 'description' => 'Simple infobox with title, empty image and key-value pair', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'Test Header' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'layout' => 'default', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '', 'description' => 'Infobox with title, group with header and two key-value pairs', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'Test Header' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'layout' => 'default', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '', 'description' => 'Infobox with title, group with header and two key-value pairs, custom accent color and accent text color', 'accentColor' => '#FFF', 'accentColorText' => '#000' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'Test header' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'layout' => 'horizontal', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '

Test header
test label	test label
test value	test value

', 'description' => 'Infobox with horizontal group', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => '', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => '', 'value' => 'test value' ] ] ], 'layout' => 'horizontal', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '', 'description' => 'Infobox with horizontal group without header and labels', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'navigation', 'data' => [ 'value' => '

Links

' ] ] ], 'output' => '', 'description' => 'Infobox with navigation', 'accentColor' => '', 'accentColorText' => '' ], // horizontal group tests [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'test label 1', 'value' => 'test value 1' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label 2', 'value' => 'test value 2' ] ] ], 'layout' => 'horizontal', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '

test label 1	test label 2
test value 1	test value 2

', 'description' => 'Horizontal group data without header', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'test header' ] ], [ 'type' => 'data', 'data' => [ 'label' => '', 'value' => 'test value 1' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label 2', 'value' => 'test value 2' ] ] ], 'layout' => 'horizontal', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '

test header
	test label 2
test value 1	test value 2

', 'description' => 'Horizontal group data with empty label', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => '', 'value' => 'test value 1' ] ], [ 'type' => 'data', 'data' => [ 'label' => '', 'value' => 'test value 2' ] ] ], 'layout' => 'horizontal', 'collapse' => null, 'row-items' => null ] ] ], 'output' => '', 'description' => 'Horizontal group data with empty label', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 4', 'value' => 'test value 4', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 5', 'value' => 'test value 5', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 5 elements with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 4', 'value' => 'test value 4', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 4 elements with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of a single element with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 2, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 2 + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 2, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 7 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 2 + 1 with row size 7', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 2, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 2, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 2, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 2 + 2 + 2 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => null, 'layout' => 'default' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 4', 'value' => 'test value 4', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 5', 'value' => 'test value 5', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 6', 'value' => 'test value 6', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 1 + 1 + default + 1 + 1 + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 4', 'value' => 'test value 4', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 5', 'value' => 'test value 5', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 6', 'value' => 'test value 6', 'span' => null, 'layout' => 'default' ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 1 + 1 + 1 + 1 + 1 + default with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 40, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 40 + 1 + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 40, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 1 + 40 + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => 'Test 1', 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 2', 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'title', 'data' => [ 'value' => 'title value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 3', 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 1 + 1 + title + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'data', 'data' => [ 'label' => null, 'value' => 'test value 1', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => null, 'value' => 'test value 2', 'span' => 1, 'layout' => null ] ], [ 'type' => 'title', 'data' => [ 'value' => 'title value' ] ], [ 'type' => 'data', 'data' => [ 'label' => null, 'value' => 'test value 3', 'span' => 1, 'layout' => null ] ], [ 'type' => 'data', 'data' => [ 'label' => 'Test 4', 'value' => 'test value 4', 'span' => 1, 'layout' => null ] ] ], 'layout' => null, 'collapse' => null, 'row-items' => 3 ] ] ], 'output' => '', 'description' => 'Flex wrapped group of 1 (no label) + 1 (no label) + title + 1 (no label) + 1 with row size 3', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'media', 'data' => [ [ 'alt' => 'image alt', 'url' => 'http://image.jpg', 'caption' => 'caption', 'ref' => 1, 'width' => '400', 'height' => '200', 'thumbnail' => 'http://thumbnail.jpg', 'thumbnail2x' => 'http://thumbnail2x.jpg', 'isImage' => true, 'isFirst' => true ], [ 'alt' => 'image alt', 'url' => 'http://image.jpg', 'caption' => 'caption', 'ref' => 2, 'width' => '400', 'height' => '200', 'thumbnail' => 'http://thumbnail.jpg', 'thumbnail2x' => 'http://thumbnail2x.jpg', 'isImage' => true ] ] ] ], 'output' => '', 'description' => 'Simple infobox with title and image collection', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'Test Header' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'layout' => 'default', 'collapse' => 'open', 'row-items' => null ] ] ], 'output' => '', 'description' => 'Infobox with title, collapsible group with header and two key-value pairs', 'accentColor' => '', 'accentColorText' => '' ], [ 'input' => [ [ 'type' => 'title', 'data' => [ 'value' => 'Test Title' ] ], [ 'type' => 'group', 'data' => [ 'value' => [ [ 'type' => 'header', 'data' => [ 'value' => 'Test Header' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ], [ 'type' => 'data', 'data' => [ 'label' => 'test label', 'value' => 'test value' ] ] ], 'layout' => 'default', 'collapse' => 'closed', 'row-items' => null ] ] ], 'output' => '', 'description' => 'Infobox with title, collapsed group with header and two key-value pairs', 'accentColor' => '', 'accentColorText' => '' ] ]; } }