import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { BsProfileImg } from '../bs-profile-img';
describe('bs-profile-img', () => {
  const name = faker.name.fullName();
  const initials = faker.random.alpha(2);
  const imgSrc = faker.image.imageUrl();
  it('renders an image when src is present', async () => {
    const page = await newSpecPage({
      components: [BsProfileImg],
      html: `<bs-profile-img profile-name="${name}" src="${imgSrc}"></bs-profile-img>`,
    });
    const component = page.root;
    const imgElement = component.querySelector('img');
    expect(imgElement.getAttribute('src')).toBe(imgSrc);
    expect(imgElement.getAttribute('alt')).toBe(`${name} Profile Photo.`);
    expect(component).not.toHaveAttribute('data-no-img');
  });
  it('renders initials and no image when src is NOT present', async () => {
    const page = await newSpecPage({
      components: [BsProfileImg],
      html: `<bs-profile-img profile-name="${name}" initials="${initials}"></bs-profile-img>`,
    });
    const component = page.root;
    // Initials are displayed when no image is present, but that is done through CSS so we are just checking for the initial prop here.
    expect(component.getAttribute('data-initials')).toBe(initials);
    expect(component).toHaveAttribute('data-no-img');
    const imgElement = component.querySelector('img');
    expect(imgElement).toBeFalsy();
  });
  it('the size of the image is adjustable', async () => {
    const size = faker.helpers.arrayElement(['xs', 'sm', 'md', 'lg', 'xl']);
    const page = await newSpecPage({
      components: [BsProfileImg],
      html: `<bs-profile-img profile-name="${name}" src="${imgSrc}" size="${size}"></bs-profile-img>`,
    });
    expect(page.root.getAttribute('data-img-size')).toBe(size);
    expect(page.root).not.toHaveAttribute('data-no-img');
  });
});
//# sourceMappingURL=bs-profile-img.spec.js.map
