Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar espacios en blanco
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Estilos de texto
Resaltado de sintaxis

icon spec test diff

Creado El diff expira
0 eliminaciones
79 líneas
121 adiciones
195 líneas
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>
`);
});
});
});

Diferencias guardadas