Comparar texto

Encontre a diferença entre dois arquivos de texto

Editor live
Ocultar espaços em branco
Recolher inalteradas
Sem quebra de linha
Layout
Nível de detalhe
Estilos de texto
Realce de sintaxe

icon spec test diff

Criado O diff expira
0 remoções
79 linhas
121 adições
195 linhas
import { newSpecPage } from 'jest-stencil-runner';
import { newSpecPage } from 'jest-stencil-runner';
import { Icon } from '../icon';
import { Icon } from '../icon';


describe('icon', () => {
describe('icon', () => {
it('renders', async () => {
it('renders', async () => {
const { root } = await newSpecPage({
const { root } = await newSpecPage({
components: [Icon],
components: [Icon],
html: '<ion-icon></ion-icon>',
html: '<ion-icon></ion-icon>',
});
});
expect(root).toEqualHtml(`
expect(root).toEqualHtml(`
<ion-icon class="md" role="img">
<ion-icon class="md" role="img">
<mock:shadow-root>
<mock:shadow-root>
<div class="icon-inner"></div>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
</mock:shadow-root>
</ion-icon>
</ion-icon>
`);
`);
});
});


it('renders rtl with aria-hidden', async () => {
it('renders rtl with aria-hidden', async () => {
const { root } = await newSpecPage({
const { root } = await newSpecPage({
components: [Icon],
components: [Icon],
direction: 'rtl',
direction: 'rtl',
html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,
html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,
});
});


expect(root).toEqualHtml(`
expect(root).toEqualHtml(`
<ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">
<ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">
<mock:shadow-root>
<mock:shadow-root>
<div class="icon-inner"></div>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
</mock:shadow-root>
</ion-icon>
</ion-icon>
`);
`);
});
});


it('renders custom aria-label', async () => {
it('renders custom aria-label', async () => {
const { root } = await newSpecPage({
const { root } = await newSpecPage({
components: [Icon],
components: [Icon],
html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,
html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,
});
});


expect(root).toEqualHtml(`
expect(root).toEqualHtml(`
<ion-icon class="md" name="star" role="img" aria-label="custom label">
<ion-icon class="md" name="star" role="img" aria-label="custom label">
<mock:shadow-root>
<mock:shadow-root>
<div class="icon-inner"></div>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
</mock:shadow-root>
</ion-icon>
</ion-icon>
`);
`);
});
});


it('renders custom label after changing source', async () => {
it('renders custom label after changing source', async () => {
const page = await newSpecPage({
const page = await newSpecPage({
components: [Icon],
components: [Icon],
html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`,
html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`,
});
});


const icon = page.root;
const icon = page.root;


expect(icon).toEqualHtml(`
expect(icon).toEqualHtml(`
<ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">
<ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">
<mock:shadow-root>
<mock:shadow-root>
<div class="icon-inner"></div>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
</mock:shadow-root>
</ion-icon>
</ion-icon>
`);
`);


if (icon) {
if (icon) {
icon.name = 'trash';
icon.name = 'trash';
}
}
await page.waitForChanges();
await page.waitForChanges();


expect(icon).toEqualHtml(`
expect(icon).toEqualHtml(`
<ion-icon class="md" name="trash" role="img" aria-label="custom label">
<ion-icon class="md" name="trash" role="img" aria-label="custom label">
<mock:shadow-root>
<mock:shadow-root>
<div class="icon-inner"></div>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
</mock:shadow-root>
</ion-icon>
</ion-icon>
`);
`);
});
});

it('svgContent=true: renders svg without slot', async () => {
const page = await newSpecPage({
components: [Icon],
html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,
});

const icon = page.root as any;
const instance = page.rootInstance as any;
instance.svgContent = '<svg><circle cx="50" cy="50" r="40"/></svg>';
await page.waitForChanges();

const shadowRoot = icon.shadowRoot;
const iconInner = shadowRoot?.querySelector('.icon-inner');

// Should have no slot
const slot = iconInner?.querySelector('slot');
expect(slot).toBeNull();

// SVG should be a direct child of icon-inner,
// not nested in another div
expect(iconInner?.children.length).toBe(1);
const firstChild = iconInner?.children[0];
expect((firstChild as any)?.tagName?.toLowerCase()).toBe('svg');
expect(firstChild?.querySelector('circle')).not.toBeNull();
});

it('svgContent=false: renders slot for custom content', async () => {
const page = await newSpecPage({
components: [Icon],
html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,
});

const icon = page.root as any;
const shadowRoot = icon.shadowRoot;
const iconInner = shadowRoot?.querySelector('.icon-inner');
const slot = iconInner?.querySelector('slot');
const svg = iconInner?.querySelector('svg');

expect(slot).not.toBeNull();
expect(svg).toBeNull();
});

it('renders slotted font icon (Font Awesome)', async () => {
const { root } = await newSpecPage({
components: [Icon],
html: `
<ion-icon>
<i class="fa fa-home"></i>
</ion-icon>
`,
});
expect(root).toEqualHtml(`
<ion-icon class="md" role="img">
<mock:shadow-root>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
<i class="fa fa-home"></i>
</ion-icon>
`);
});

it('renders slotted font icon with color', async () => {
const { root } = await newSpecPage({
components: [Icon],
html: `
<ion-icon color="primary">
<i class="fa fa-heart"></i>
</ion-icon>
`,
});
expect(root).toEqualHtml(`
<ion-icon class="md ion-color ion-color-primary" color="primary" role="img">
<mock:shadow-root>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
<i class="fa fa-heart"></i>
</ion-icon>
`);
});

it('renders slotted font icon with custom style', async () => {
const { root } = await newSpecPage({
components: [Icon],
html: `
<ion-icon style="font-size: 48px">
<i class="fa fa-star"></i>
</ion-icon>
`,
});
expect(root).toEqualHtml(`
<ion-icon class="md" role="img" style="font-size: 48px">
<mock:shadow-root>
<div class="icon-inner">
<slot></slot>
</div>
</mock:shadow-root>
<i class="fa fa-star"></i>
</ion-icon>
`);
});
});
});

Diferenças salvas