icon.spec.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { newSpecPage } from "@stencil/core/testing";
  2. import { Icon } from "../icon";
  3. describe('icon', () => {
  4. it('renders', async () => {
  5. const { root } = await newSpecPage({
  6. components: [Icon],
  7. html: '<ion-icon></ion-icon>',
  8. });
  9. expect(root).toEqualHtml(`
  10. <ion-icon class="md" role="img">
  11. <mock:shadow-root>
  12. <div class="icon-inner"></div>
  13. </mock:shadow-root>
  14. </ion-icon>
  15. `);
  16. });
  17. it('renders rtl with aria-hidden', async () => {
  18. const { root } = await newSpecPage({
  19. components: [Icon],
  20. direction: 'rtl',
  21. html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,
  22. });
  23. expect(root).toEqualHtml(`
  24. <ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">
  25. <mock:shadow-root>
  26. <div class="icon-inner"></div>
  27. </mock:shadow-root>
  28. </ion-icon>
  29. `);
  30. });
  31. it('renders custom aria-label', async () => {
  32. const { root } = await newSpecPage({
  33. components: [Icon],
  34. html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,
  35. });
  36. expect(root).toEqualHtml(`
  37. <ion-icon class="md" name="star" role="img" aria-label="custom label">
  38. <mock:shadow-root>
  39. <div class="icon-inner"></div>
  40. </mock:shadow-root>
  41. </ion-icon>
  42. `);
  43. });
  44. it('renders custom label after changing source', async () => {
  45. const page = await newSpecPage({
  46. components: [Icon],
  47. html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`,
  48. });
  49. const icon = page.root;
  50. expect(icon).toEqualHtml(`
  51. <ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">
  52. <mock:shadow-root>
  53. <div class="icon-inner"></div>
  54. </mock:shadow-root>
  55. </ion-icon>
  56. `);
  57. if (icon) {
  58. icon.name = 'trash';
  59. }
  60. await page.waitForChanges();
  61. expect(icon).toEqualHtml(`
  62. <ion-icon class="md" name="trash" role="img" aria-label="custom label">
  63. <mock:shadow-root>
  64. <div class="icon-inner"></div>
  65. </mock:shadow-root>
  66. </ion-icon>
  67. `);
  68. });
  69. });