Simple Page Test
Hello World
`; const CONTENT_WITHOUT_HEADER = `\Hello World
`; export const FULL_DOCUMENT = ` ${STYLE_TAG}This is a title
This is a title
This is a title
This is a title
This is a title
This is a title
${iconHtml}
`);
}
}
class IconToHtml {
private readonly _icon: string | undefined;
private readonly _id: string;
constructor(icon: string | undefined, id: string) {
this._icon = icon;
this._id = id;
}
async toHtml(): Promise${await blockToInnerHtml(this._block)}
💡
`;
if (!this._icon.startsWith('http')) return `${this._icon}
`;
const url = `https://www.notion.so/image/${encodeURIComponent(this._icon)}?table=block&id=${this._id}`;
const imageSource = await Base64Converter.convert(url);
const caption = 'callout icon';
return `${blockToInnerText(this._block).replace(/(\s{4}|\t)/g, ' ')}${this._text}`);
}
}
================================================
FILE: src/data/use-cases/blocks-to-html-converter/block-parsers/decorations/decoration-parsers/color.test.ts
================================================
import { ColorDecorationToHtml } from './color';
import { Decoration } from '../../../../../protocols/blocks';
describe('#convert', () => {
describe('When color is given as foreground color', () => {
it('styles using css color property', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'purple' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toMatch('style="color:');
});
});
describe('When color is given as background color', () => {
it('styles using css background-color property', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'purple_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toMatch('style="background-color:');
});
it('do not preserves color value on style', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'purple_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).not.toMatch('purple_background');
});
});
describe('When purple color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'purple' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When yellow color is given as color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'yellow' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When gray color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'gray' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When brown color is given as color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'brown' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When orange color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'orange' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When green color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'green' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When pink color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'pink' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When red color is given as foreground color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'red' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When unknown color is given as foreground color', () => {
it('converts to equivalent default foreground color hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'refafad' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When no color value is given as foreground color', () => {
it('converts to equivalent default foreground color hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When gray color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'gray_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When brown color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'brown_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When orange color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'orange_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When yellow color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'yellow_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When green color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'green_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When blue color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'blue_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When purple color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'purple_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When pink color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'pink_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When red color is given as background color', () => {
it('converts to equivalent hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'red_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
describe('When unknown color is given as background color', () => {
it('converts to equivalent default background color hex code and apply style to html', async () => {
const text = 'Text with color';
const decoration: Decoration = { type: 'color', value: 'refafad_background' };
const result = await new ColorDecorationToHtml(text, decoration).convert();
expect(result).toBe('Text with color');
});
});
});
================================================
FILE: src/data/use-cases/blocks-to-html-converter/block-parsers/decorations/decoration-parsers/color.ts
================================================
import { Decoration } from '../../../../../../data/protocols/blocks';
import { ToHtml } from '../../../../../../domain/use-cases/to-html';
import { foregroundColorToHex, backgroundColorToHex } from '../../../../../helpers/color-to-hex';
export class ColorDecorationToHtml implements ToHtml {
private readonly _text: string;
private readonly _decoration: Decoration;
constructor(text: string, decoration: Decoration) {
this._text = text;
this._decoration = decoration;
}
async convert(): Promise`); } } ================================================ FILE: src/data/use-cases/blocks-to-html-converter/block-parsers/equation.ts ================================================ import { Block } from '../../../protocols/blocks'; import { ToHtml } from '../../../../domain/use-cases/to-html'; import { blockToInnerText } from '../../../helpers/block-to-inner-text'; export class EquationBlockToHtml implements ToHtml { private readonly _block: Block; constructor(block: Block) { this._block = block; } async convert(): Promise
$$${blockToInnerText(this._block)}$$
` : '');
}
}
================================================
FILE: src/data/use-cases/blocks-to-html-converter/block-parsers/header.ts
================================================
import { blockToInnerHtml } from '../../../helpers/block-to-inner-html';
import { Block } from '../../../protocols/blocks';
import { ToHtml } from '../../../../domain/use-cases/to-html';
import { FormatToStyle } from '../../format-to-style';
export class HeaderBlockToHtml implements ToHtml {
private readonly _block: Block;
constructor(block: Block) {
this._block = block;
}
async convert(): Promise- ${await blockToInnerHtml( this._block, )}${childrenHtml}
${await blockToInnerHtml(this._block)}
${childrenHtml}Hello World
'); }); }); describe('When single text block has children', () => { it('returns html with p tag and children blocks inside', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_CHILDREN).convert(); expect(html.replace(/\s/g, '')).toBe( `Hello World
This is a child
This is a child too
`.replace(/\s/g, ''), ); }); }); describe('When single line text with bold part', () => { it('returns html with single p paragraph with strong tag nested', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_BOLD).convert(); expect(html).toBe('Hello World
'); }); }); describe('When single line text with italic part', () => { it('returns html with single p paragraph with strong tag nested', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_ITALIC).convert(); expect(html).toBe('Hello World
'); }); }); describe('When single line text with underline part', () => { it('returns html with single p paragraph with span tag and underline style nested', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_UNDERLINE).convert(); expect(html).toBe('Hello World
'); }); }); describe('When single line text with strikethrough part', () => { it('returns html with single p paragraph with del tag inside', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_STRIKETHROUGH).convert(); expect(html).toBe('Hello World
Hello myVar
Hello World
'); }); }); describe('When single line text with inline equation part', () => { it('returns html with single p paragraph equation wrapped inside $$', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_EQUATION_DECORATION).convert(); expect(html).toBe('Hello World $2x$
'); }); }); describe('When single line text with color part', () => { it('returns html with single p paragraph with span tag and color style inside', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_COLOR).convert(); expect(html).toBe('Hello
'); }); }); describe('When single line text with color background part', () => { it('returns html with single p paragraph with span tag and background color style inside', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_COLOR_BACKGROUND).convert(); expect(html).toBe('Hello
'); }); }); describe('When single line text with bold and italic parts together', () => { it('returns html with single p paragraph with strong and em tags nested', async () => { const html = await makeSut(BlockMocks.SINGLE_TEXT_WITH_BOLD_AND_ITALIC).convert(); expect(html).toBe('Hello World
'); }); }); describe('When single line text with bold and italic parts apart', () => { it('returns html with single p paragraph with strong and em tags nested', async () => { const html = await makeSut(BlockMocks.TEXT_WITH_DECORATION).convert(); expect(html).toBe( 'Hello World and Sun
', ); }); }); describe('When multiline text block is given', () => { it('returns html with two p tags', async () => { const html = await makeSut(BlockMocks.MULTILINE_TEXT).convert(); expect(html).toBe('Hello WorldIs everything alright?Yes, Dude!
'); }); }); describe('When text block has background color', () => { it('returns html p tag with style and background-color prop', async () => { const html = await makeSut(BlockMocks.TEXT_WITH_FORMAT).convert(); expect(html).toBe('This is a text with red background
'); }); }); describe('When text block has foreground color', () => { it('returns html p tag with style and color prop', async () => { const html = await makeSut(BlockMocks.TEXT_WITH_FORMAT_FOREGROUND).convert(); expect(html).toBe('This is a text with purple color
'); }); }); }); describe('When only a h1 title block is given', () => { describe('When single block is given', () => { it('returns html with h1 tag', async () => { const html = await makeSut(BlockMocks.H1_TEXT).convert(); expect(html).toBe('This is a h1 title
'); }); }); describe('When single line header with decoration', () => { it('returns html with single h1 with decoration tags inside', async () => { const html = await makeSut(BlockMocks.H1_TEXT_WITH_DECORATIONS).convert(); expect(html).toBe( 'Hello World and Sun
', ); }); }); describe('When header block has background color', () => { it('returns html h1 tag with style and background-color prop', async () => { const html = await makeSut(BlockMocks.H1_WITH_FORMAT).convert(); expect(html).toBe('This is a h1 with red background
'); }); }); describe('When header block has foreground color', () => { it('returns html h1 tag with style and color prop', async () => { const html = await makeSut(BlockMocks.H1_WITH_FORMAT_FOREGROUND).convert(); expect(html).toBe('This is a h1 with yellow color
'); }); }); }); describe('When only a h2 title block is given', () => { describe('When single block is given', () => { it('returns html with h2 tag', async () => { const html = await makeSut(BlockMocks.H2_TEXT).convert(); expect(html).toBe('This is a h2 title
'); }); }); describe('When single line h2 with decoration', () => { it('returns html with single h1 with decoration tags inside', async () => { const html = await makeSut(BlockMocks.H2_TEXT_WITH_DECORATIONS).convert(); expect(html).toBe( 'Hello World and Sun
', ); }); }); describe('When sub header block has background color', () => { it('returns html h2 tag with style and background-color prop', async () => { const html = await makeSut(BlockMocks.H2_WITH_FORMAT).convert(); expect(html).toBe('This is a h2 with yellow background
'); }); }); describe('When sub header block has foreground color', () => { it('returns html h2 tag with style and color prop', async () => { const html = await makeSut(BlockMocks.H2_WITH_FORMAT_FOREGROUND).convert(); expect(html).toBe('This is a h2 with gray color
'); }); }); }); describe('When only a h3 title block is given', () => { describe('When single block is given', () => { it('returns html with h3 tag', async () => { const html = await makeSut(BlockMocks.H3_TEXT).convert(); expect(html).toBe('This is a h3 title
'); }); }); describe('When single line h3 with decoration', () => { it('returns html with single h1 with decoration tags inside', async () => { const html = await makeSut(BlockMocks.H3_TEXT_WITH_DECORATIONS).convert(); expect(html).toBe( 'Hello World and Sun
', ); }); }); describe('When sub header block has background color', () => { it('returns html h3 tag with style and background-color prop', async () => { const html = await makeSut(BlockMocks.H3_WITH_FORMAT).convert(); expect(html).toBe('This is a h3 with orange background
'); }); }); describe('When sub sub header block has foreground color', () => { it('returns html h3 tag with style and color prop', async () => { const html = await makeSut(BlockMocks.H3_WITH_FORMAT_FOREGROUND).convert(); expect(html).toBe('This is a h3 with brown color
'); }); }); }); describe('When only an unordered list block is given', () => { describe('When single block is given', () => { it('returns html with ul tag with li tag inside', async () => { const html = await makeSut(BlockMocks.UNORDERED_LIST_WITH_SINGLE_ITEM).convert(); expect(html).toBe('- \n
- This is a test \n
- Hello World
- This is a child
- This is a child too
- \n
- This is a item with background \n
- \n
- This is a item with color \n
- \n
- This is a test \n
- This is a test too \n
- \n
- Hello World and Sun \n
- \n
- This is a test \n
- Hello World
- This is a child
- This is a child too
- \n
- This is a item with background \n
- \n
- This is a item with color \n
- \n
- This is a test \n
- This is a test too \n
- \n
- Hello World and Sun \n
- This is a test\ \
-
Hello World\
- This is a child\ \
- This is a child too\ \
\
- This is a todo with style\ \
- This is a todo with style\ \
- This is a test\ \
- This is a test\ \
- This is a test too\ \
function test() {\n var isTesting = true;\n return isTesting;\n}function test() {\n var isTesting = true;\n return isTesting;\n}This a quote'); }); }); describe('When there is style on quote block', () => { it('returns html with blockquote tag and decorations inside', async () => { const html = await makeSut(BlockMocks.QUOTE_WITH_DECORATION).convert(); expect(html).toBe( `
Hello World and Sun`, ); }); }); describe('When there is background color on quote', () => { it('returns html with style with background color prop', async () => { const html = await makeSut(BlockMocks.QUOTE_WITH_FORMAT).convert(); expect(html).toBe('
This a quote with background'); }); }); describe('When there is background color on quote', () => { it('returns html with style with background color prop', async () => { const html = await makeSut(BlockMocks.QUOTE_WITH_FORMAT_FOREGROUND).convert(); expect(html).toBe('
This a quote with color'); }); }); }); describe('When divider block is given', () => { it('returns html with hr tag', async () => { const html = await makeSut(BlockMocks.TEXT_BETWEEN_DIVIDER).convert(); expect(html).toBe(`
This a text
\n\n
This a text too
`); }); }); describe('When equation block is given', () => { describe('When there is no equation content', () => { it('returns empty string', async () => { const html = await makeSut(BlockMocks.EMPTY_EQUATION).convert(); expect(html).toBe(''); }); }); describe('When there is no equation content', () => { it('returns html with div tag and equation class with equation inside', async () => { const html = await makeSut(BlockMocks.EQUATION).convert(); expect(html).toBe(`$$\\int 2xdx = x^2 + C$$
`);
});
});
});
describe('When video block is given', () => {
describe('When it is not a youtube video', () => {
it('returns empty string', async () => {
const html = await makeSut(BlockMocks.NO_YOUTUBE_VIDEO).convert();
expect(html).toBe('');
});
});
describe('When it is a youtube video', () => {
it('returns html with iframe tag and embed id', async () => {
const html = await makeSut(BlockMocks.YOUTUBE_VIDEO).convert();
expect(html.replace(/\s/g, '')).toBe(
``.replace(/\s/g, ''),
);
});
});
});
describe('When image block is given', () => {
beforeEach(() => {
const imageSource =
'https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bcedd078-56cd-4137-a28a-af16b5746874/767-50x50.jpg';
const blockId = 'ec3b36fd-f77d-46b4-8592-5966488612b1';
nock('https://www.notion.so')
.get(`/image/${encodeURIComponent(imageSource)}?table=block&id=${blockId}`)
.replyWithFile(200, resolve('src/__tests__/mocks/img/baseImage.jpeg'), {
'content-type': 'image/jpeg',
});
});
describe('When image has no caption', () => {
it('returns html with img tag with src as base64', async () => {
const html = await makeSut(BlockMocks.IMAGE).convert();
expect(html.replace(/\s/g, '')).toBe(
`
This is a detail
Hello World
Hello World and Sun
Hello World
This is a detail
Hello World
💡
This is a callout
This is a callout
💡
This is a callout