From 5c92bd69b92dcc2a8fcf8d202043b4529c83f7ef Mon Sep 17 00:00:00 2001 From: RaenonX Date: Thu, 5 Aug 2021 21:19:02 -0500 Subject: [PATCH] IMP - Markdown tests refactor Signed-off-by: RaenonX --- .../elements/markdown/main.test.tsx | 396 +++++++++--------- 1 file changed, 206 insertions(+), 190 deletions(-) diff --git a/src/components/elements/markdown/main.test.tsx b/src/components/elements/markdown/main.test.tsx index 9efda5c2..5f0514d7 100644 --- a/src/components/elements/markdown/main.test.tsx +++ b/src/components/elements/markdown/main.test.tsx @@ -10,292 +10,308 @@ import {Markdown} from './main'; describe('Markdown', () => { - it('renders normal links as ', async () => { - renderReact(() => {'[some link](/link)'}); + describe('Markdown - Regression', () => { + it('renders normal links as ', async () => { + renderReact(() => {'[some link](/link)'}); - const linkElement = screen.getByText('some link'); - expect(linkElement).toHaveAttribute('href', '/link'); - expect(linkElement).toHaveAttribute('target', '_blank'); + const linkElement = screen.getByText('some link'); + expect(linkElement).toHaveAttribute('href', '/link'); + expect(linkElement).toHaveAttribute('target', '_blank'); + }); }); - it('uses custom syntax within ', async () => { - renderReact(() => {'**==5+5==**'}); + describe('Markdown - Syntax Nesting', () => { + it('uses custom syntax within ', async () => { + renderReact(() => {'**==5+5==**'}); - expect(screen.getByText('10', {selector: 'strong > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'strong > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within

', async () => { - renderReact(() => {'# ==5+5=='}); + it('uses custom syntax within

', async () => { + renderReact(() => {'# ==5+5=='}); - expect(screen.getByText('10', {selector: 'h1 > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'h1 > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within

', async () => { - renderReact(() => {'## ==5+5=='}); + it('uses custom syntax within

', async () => { + renderReact(() => {'## ==5+5=='}); - expect(screen.getByText('10', {selector: 'h2 > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'h2 > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within

', async () => { - renderReact(() => {'### ==5+5=='}); + it('uses custom syntax within

', async () => { + renderReact(() => {'### ==5+5=='}); - expect(screen.getByText('10', {selector: 'h3 > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'h3 > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within

', async () => { - renderReact(() => {'#### ==5+5=='}); + it('uses custom syntax within

', async () => { + renderReact(() => {'#### ==5+5=='}); - expect(screen.getByText('10', {selector: 'h4 > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'h4 > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within

', async () => { - renderReact(() => {'##### ==5+5=='}); + it('uses custom syntax within
', async () => { + renderReact(() => {'##### ==5+5=='}); - expect(screen.getByText('10', {selector: 'h5 > span'})).toBeInTheDocument(); - }); + expect(screen.getByText('10', {selector: 'h5 > span'})).toBeInTheDocument(); + }); - it('uses custom syntax within
', async () => { - renderReact(() => {'###### ==5+5=='}); + it('uses custom syntax within
', async () => { + renderReact(() => {'###### ==5+5=='}); - expect(screen.getByText('10', {selector: 'h6 > span'})).toBeInTheDocument(); + expect(screen.getByText('10', {selector: 'h6 > span'})).toBeInTheDocument(); + }); }); - it('renders long youtube video link as embed', async () => { - renderReact(() => {'https://www.youtube.com/watch?v=m8B_tlk-pl0'}); + describe('Markdown - Text Transform', () => { + it('renders long youtube video link as embed', async () => { + renderReact(() => {'https://www.youtube.com/watch?v=m8B_tlk-pl0'}); - const embedElement = screen.getByTestId('youtubeEmbed'); - expect(embedElement).toHaveAttribute('src', '//www.youtube.com/embed/m8B_tlk-pl0'); - }); + const embedElement = screen.getByTestId('youtubeEmbed'); + expect(embedElement).toHaveAttribute('src', '//www.youtube.com/embed/m8B_tlk-pl0'); + }); - it('renders short youtube video link as embed', async () => { - renderReact(() => {'https://youtu.be/m8B_tlk-pl0'}); + it('renders short youtube video link as embed', async () => { + renderReact(() => {'https://youtu.be/m8B_tlk-pl0'}); - const embedElement = screen.getByTestId('youtubeEmbed'); - expect(embedElement).toHaveAttribute('src', '//www.youtube.com/embed/m8B_tlk-pl0'); - }); + const embedElement = screen.getByTestId('youtubeEmbed'); + expect(embedElement).toHaveAttribute('src', '//www.youtube.com/embed/m8B_tlk-pl0'); + }); - it('renders texts as
', async () => { - renderReact(() => {'some text'}); + it('renders texts as
', async () => { + renderReact(() => {'some text'}); - expect(screen.getByText('some text', {selector: 'div'})).toBeInTheDocument(); + expect(screen.getByText('some text', {selector: 'div'})).toBeInTheDocument(); + }); }); - it('renders a table correctly', async () => { - const tableText = 'head | col 2\n:---: | :---:\nX | Y'; + describe('Markdown - Table', () => { + it('renders a table correctly', async () => { + const tableText = 'head | col 2\n:---: | :---:\nX | Y'; - renderReact(() => {tableText}); + renderReact(() => {tableText}); - expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); - expect(screen.getByText('Y', {selector: 'td'})).toBeInTheDocument(); - }); + expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); + expect(screen.getByText('Y', {selector: 'td'})).toBeInTheDocument(); + }); - it('does not crash if the table is incomplete', async () => { - const tableText = 'head | col 2\n:---: | :---:\nX'; + it('does not crash if the table is incomplete', async () => { + const tableText = 'head | col 2\n:---: | :---:\nX'; - renderReact(() => {tableText}); + renderReact(() => {tableText}); - expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); - }); + expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); + }); - it('renders multiple tables correctly', async () => { - const tableText = 'head | col 2\n:---: | :---:\nX | Y'; - const table2Text = 'footer | col B\n:---: | :---:\nZ | A'; + it('renders multiple tables correctly', async () => { + const tableText = 'head | col 2\n:---: | :---:\nX | Y'; + const table2Text = 'footer | col B\n:---: | :---:\nZ | A'; - renderReact(() => {`${tableText}\n\n${table2Text}`}); + renderReact(() => {`${tableText}\n\n${table2Text}`}); - expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); - expect(screen.getByText('Y', {selector: 'td'})).toBeInTheDocument(); - expect(screen.getByText('footer', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('col B', {selector: 'th'})).toBeInTheDocument(); - expect(screen.getByText('Z', {selector: 'td'})).toBeInTheDocument(); - expect(screen.getByText('A', {selector: 'td'})).toBeInTheDocument(); + expect(screen.getByText('head', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('col 2', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('X', {selector: 'td'})).toBeInTheDocument(); + expect(screen.getByText('Y', {selector: 'td'})).toBeInTheDocument(); + expect(screen.getByText('footer', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('col B', {selector: 'th'})).toBeInTheDocument(); + expect(screen.getByText('Z', {selector: 'td'})).toBeInTheDocument(); + expect(screen.getByText('A', {selector: 'td'})).toBeInTheDocument(); + }); }); - it('colors the text by RGB', async () => { - const markdown = '::[#757575]Text::'; + describe('Markdown - Text Coloring', () => { + it('colors the text by RGB', async () => { + const markdown = '::[#757575]Text::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('Text', {selector: 'span'})).toHaveStyle({color: '#757575'}); - }); + expect(screen.getByText('Text', {selector: 'span'})).toHaveStyle({color: '#757575'}); + }); - it('colors the text by preset color', async () => { - const markdown = '::[red]Text::'; + it('colors the text by preset color', async () => { + const markdown = '::[red]Text::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('Text', {selector: 'span'})).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('Text', {selector: 'span'})).toHaveStyle({color: 'red'}); + }); - it('colors multiple texts', async () => { - const markdown = 'No color ::[#757575]Text 1:: ::[red]Text 2::'; + it('colors multiple texts', async () => { + const markdown = 'No color ::[#757575]Text 1:: ::[red]Text 2::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('Text 1', {selector: 'span'})).toHaveStyle({color: '#757575'}); - expect(screen.getByText('Text 2', {selector: 'span'})).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('Text 1', {selector: 'span'})).toHaveStyle({color: '#757575'}); + expect(screen.getByText('Text 2', {selector: 'span'})).toHaveStyle({color: 'red'}); + }); - it('colors text in table', async () => { - const markdown = 'head | ::[red]col 2::\n:---: | :---:\nX | Y'; + it('colors text in table', async () => { + const markdown = 'head | ::[red]col 2::\n:---: | :---:\nX | Y'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - const headCell = screen.getByText('col 2', {selector: 'span'}); - expect(headCell).toHaveStyle({color: 'red'}); - expect(headCell.parentElement?.tagName).toBe('TH'); - }); + const headCell = screen.getByText('col 2', {selector: 'span'}); + expect(headCell).toHaveStyle({color: 'red'}); + expect(headCell.parentElement?.tagName).toBe('TH'); + }); - it('colors text in table header', async () => { - const markdown = 'head | col 2\n:---: | :---:\nX | ::[red]Y::'; + it('colors text in table header', async () => { + const markdown = 'head | col 2\n:---: | :---:\nX | ::[red]Y::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('Y', {selector: 'span'})).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('Y', {selector: 'span'})).toHaveStyle({color: 'red'}); + }); - it('colors text in list', async () => { - const markdown = '- X\n- ::[red]Y::'; + it('colors text in list', async () => { + const markdown = '- X\n- ::[red]Y::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('Y', {selector: 'span'})).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('Y', {selector: 'span'})).toHaveStyle({color: 'red'}); + }); - it('only color the desired text', async () => { - const markdown = 'Highlight ::[red]red:: only'; + it('only color the desired text', async () => { + const markdown = 'Highlight ::[red]red:: only'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('red', {selector: 'span'})).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('red', {selector: 'span'})).toHaveStyle({color: 'red'}); + }); - it('does not color if the syntax is incomplete', async () => { - const markdown = '[red]red'; + it('does not color if the syntax is incomplete', async () => { + const markdown = '[red]red'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('[red]red')).toBeInTheDocument(); - }); + expect(screen.getByText('[red]red')).toBeInTheDocument(); + }); - it('enlarges the whole text', async () => { - const markdown = '!!whole!!'; + it('shows original if the color syntax is unclosed', async () => { + const markdown = '::[#757575]Text'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('whole', {selector: 'span'})).toHaveStyle({fontSize: '1.5rem'}); + expect(screen.getByText('::[#757575]Text')).toBeInTheDocument(); + }); }); - it('enlarges the desired text', async () => { - const markdown = 'Partial !!enlarge!! me'; + describe('Markdown - Text Enlarging', () => { + it('enlarges the whole text', async () => { + const markdown = '!!whole!!'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('enlarge', {selector: 'span'})).toHaveStyle({fontSize: '1.5rem'}); - }); + expect(screen.getByText('whole', {selector: 'span'})).toHaveStyle({fontSize: '1.5rem'}); + }); - it('enlarges within colored text', async () => { - const markdown = '::[red]Some !!enlarged!! text::'; + it('enlarges the desired text', async () => { + const markdown = 'Partial !!enlarge!! me'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - const elem = screen.getByText('enlarged', {selector: 'span'}); - expect(elem).toHaveStyle({fontSize: '1.5rem'}); - expect(elem.parentElement).toHaveStyle({color: 'red'}); - }); + expect(screen.getByText('enlarge', {selector: 'span'})).toHaveStyle({fontSize: '1.5rem'}); + }); - it('colors text with some enlarged', async () => { - const markdown = '!!Enlarged and ::[red]colored::!!'; + it('enlarges within colored text', async () => { + const markdown = '::[red]Some !!enlarged!! text::'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - const elem = screen.getByText('colored', {selector: 'span'}); - expect(elem).toHaveStyle({color: 'red'}); - expect(elem.parentElement).toHaveStyle({fontSize: '1.5rem'}); - }); + const elem = screen.getByText('enlarged', {selector: 'span'}); + expect(elem).toHaveStyle({fontSize: '1.5rem'}); + expect(elem.parentElement).toHaveStyle({color: 'red'}); + }); - it('shows original if the color syntax is unclosed', async () => { - const markdown = '::[#757575]Text'; + it('colors text with some enlarged', async () => { + const markdown = '!!Enlarged and ::[red]colored::!!'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('::[#757575]Text')).toBeInTheDocument(); + const elem = screen.getByText('colored', {selector: 'span'}); + expect(elem).toHaveStyle({color: 'red'}); + expect(elem.parentElement).toHaveStyle({fontSize: '1.5rem'}); + }); }); - it('calculates and show the result', async () => { - const markdown = '==5 + 5 [fx]=='; + describe('Markdown - Text Calculator', () => { + it('calculates and show the result', async () => { + const markdown = '==5 + 5 [fx]=='; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('10 (5 + 5)')).toBeInTheDocument(); - }); + expect(screen.getByText('10 (5 + 5)')).toBeInTheDocument(); + }); - it('calculates complicating expression', async () => { - const markdown = '==[fx] 13% x 2 + 38% x 1== (3 Hit)'; + it('calculates complicating expression', async () => { + const markdown = '==[fx] 13% x 2 + 38% x 1== (3 Hit)'; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('(13% x 2 + 38% x 1) 64%')).toBeInTheDocument(); - expect(screen.getByText(/(3 Hit)/)).toBeInTheDocument(); - }); + expect(screen.getByText('(13% x 2 + 38% x 1) 64%')).toBeInTheDocument(); + expect(screen.getByText(/(3 Hit)/)).toBeInTheDocument(); + }); - it('skips calculating invalid expression', async () => { - const markdown = '==something=='; + it('skips calculating invalid expression', async () => { + const markdown = '==something=='; - renderReact(() => {markdown}); + renderReact(() => {markdown}); - expect(screen.getByText('something')).toBeInTheDocument(); + expect(screen.getByText('something')).toBeInTheDocument(); + }); }); - const simpleUnitInfo: SimpleUnitInfo = { - '10950101': { - name: { - [SupportedLanguages.CHT]: 'CHT', - [SupportedLanguages.EN]: 'EN', - [SupportedLanguages.JP]: 'JP', + describe('Markdown - Unit Link', () => { + const simpleUnitInfo: SimpleUnitInfo = { + '10950101': { + name: { + [SupportedLanguages.CHT]: 'CHT', + [SupportedLanguages.EN]: 'EN', + [SupportedLanguages.JP]: 'JP', + }, + type: UnitType.CHARACTER, + icon: '100013_04_r05', }, - type: UnitType.CHARACTER, - icon: '100013_04_r05', - }, - }; + }; - it('transforms to unit link', async () => { - const markdown = '--10950101--'; + it('transforms to unit link', async () => { + const markdown = '--10950101--'; - renderReact( - () => {markdown}, - {resources: {simpleUnitInfo}}, - ); + renderReact( + () => {markdown}, + {resources: {simpleUnitInfo}}, + ); - const unitIcon = screen.getByText('', {selector: 'img'}); - expect(unitIcon).toHaveAttribute('src', DepotPaths.getCharaIconURL('100013_04_r05')); + const unitIcon = screen.getByText('', {selector: 'img'}); + expect(unitIcon).toHaveAttribute('src', DepotPaths.getCharaIconURL('100013_04_r05')); - const unitLink = screen.getByText('EN'); - userEvent.click(unitLink); + const unitLink = screen.getByText('EN'); + userEvent.click(unitLink); - expect(await screen.findByText('Analysis')).toBeInTheDocument(); - }); + expect(await screen.findByText('Analysis')).toBeInTheDocument(); + }); - it('transforms to unit link in a sentence', async () => { - const markdown = 'Some text --10950101-- about an unit.'; + it('transforms to unit link in a sentence', async () => { + const markdown = 'Some text --10950101-- about an unit.'; - renderReact( - () => {markdown}, - {resources: {simpleUnitInfo}}, - ); + renderReact( + () => {markdown}, + {resources: {simpleUnitInfo}}, + ); - const unitIcon = screen.getByText('', {selector: 'img'}); - expect(unitIcon).toHaveAttribute('src', DepotPaths.getCharaIconURL('100013_04_r05')); + const unitIcon = screen.getByText('', {selector: 'img'}); + expect(unitIcon).toHaveAttribute('src', DepotPaths.getCharaIconURL('100013_04_r05')); - const unitLink = screen.getByText('EN'); - userEvent.click(unitLink); + const unitLink = screen.getByText('EN'); + userEvent.click(unitLink); - expect(await screen.findByText('Analysis')).toBeInTheDocument(); + expect(await screen.findByText('Analysis')).toBeInTheDocument(); + }); }); });