import {PageContainer} from '../../src/BookReader/PageContainer.js';

describe('constructor', () => {
  test('protected books', () => {
    const pc = new PageContainer(null, {isProtected: true});
    expect(pc.$container.hasClass('protected')).toBe(true);
    expect(pc.$container.find('.BRscreen').length).toBe(1);
  });

  test('non-protected books', () => {
    const pc = new PageContainer(null, {isProtected: false});
    expect(pc.$container.hasClass('protected')).toBe(false);
    expect(pc.$container.find('.BRscreen').length).toBe(0);
  });

  test('empty page', () => {
    const pc = new PageContainer(null, {isProtected: false});
    expect(pc.$container.hasClass('BRemptypage')).toBe(true);
  });

  test('non-empty page', () => {
    const pc = new PageContainer({index: 7}, {isProtected: false});
    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
    expect(pc.$container.hasClass('pagediv7')).toBe(true);
  });

  test('adds side attribute', () => {
    const pc = new PageContainer({index: 7, pageSide: 'R'}, {isProtected: false});
    expect(pc.$container.hasClass('BRemptypage')).toBe(false);
    expect(pc.$container.attr('data-side')).toBe('R');
  });
});

describe('update', () => {
  test('dimensions sets CSS', () => {
    const pc = new PageContainer(null, {});
    pc.update({ dimensions: { left: 20 } });
    expect(pc.$container[0].style.left).toBe('20px');
  });

  test('does not create image if empty page', () => {
    const pc = new PageContainer(null, {});
    pc.update({ reduce: null });
    expect(pc.$img).toBeNull();
    pc.update({ reduce: 7 });
    expect(pc.$img).toBeNull();
  });

  test('does not create image if no reduce', () => {
    const pc = new PageContainer({index: 17}, {});
    pc.update({ reduce: null });
    expect(pc.$img).toBeNull();
  });

  test('does not set background image if already loaded', () => {
    const fakeImageCache = {
      imageLoaded: () => true,
      image: () => $('<img/>'),
    };
    const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache});
    pc.update({ reduce: 7 });
    expect(pc.$img[0].style.background).toBe('');
  });

  test('removes image between updates', () => {
    const fakeImageCache = {
      imageLoaded: () => true,
      image: () => $('<img/>'),
    };
    const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache});
    pc.update({ reduce: 7 });
    const $im1 = pc.$img;
    pc.update({ reduce: 7 });
    const $im2 = pc.$img;
    expect($im1).not.toBe($im2);
    expect($im1.parent().length).toBe(0);
  });

  test('adds/removes loading indicators while loading', () => {
    const fakeImageCache = {
      imageLoaded: () => false,
      image: () => $('<img/>'),
      getBestLoadedReduce: () => undefined,
    };
    const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache, loadingImage: 'loading.gif'});
    pc.update({ reduce: 7 });
    expect(pc.$container.hasClass('BRpageloading')).toBe(true);
    // See https://github.com/jsdom/jsdom/issues/3169
    // expect(pc.$img.css('background')).toBeTruthy();
    // expect(pc.$img.css('background').includes('loading.gif')).toBe(true);
    // expect(pc.$img.css('background').includes(',')).toBe(false);

    pc.$img.trigger('loadend');
    expect(pc.$container.hasClass('BRpageloading')).toBe(false);
    expect(pc.$img.css('background')).toBeFalsy();
  });

  test('shows lower res image while loading if one available', () => {
    const fakeImageCache = {
      imageLoaded: () => false,
      image: () => $('<img/>'),
      getBestLoadedReduce: () => 3,
    };
    const fakePage = {
      index: 12,
      getURI: () => 'page12.jpg',
    };
    const pc = new PageContainer(fakePage, {imageCache: fakeImageCache, loadingImage: 'loading.gif'});
    pc.update({ reduce: 7 });
    // See https://github.com/jsdom/jsdom/issues/3169
    // expect(pc.$img.css('background').includes('page12.jpg')).toBe(true);
    pc.$img.trigger('loadend');
    expect(pc.$img.css('background')).toBeFalsy();
  });
});

@@ -14,16 +14,50 @@
 ontainer
+, boxToSVGRect, createSVGPageLayer
 %7D from '
@@ -4039,20 +4039,650 @@
 eFalsy();%0A  %7D);%0A%7D);%0A
+%0Adescribe('createSVGPageLayer', () =%3E %7B%0A  test('Does what it says', () =%3E %7B%0A    const svg = createSVGPageLayer(%7B width: 100, height: 200%7D, 'myClass');%0A    expect(svg.getAttribute('viewBox')).toBe('0 0 100 200');%0A    expect(svg.getAttribute('class')).toContain('myClass');%0A  %7D);%0A%7D);%0A%0Adescribe('boxToSVGRect', () =%3E %7B%0A  test('Does what it says', () =%3E %7B%0A    const rect = boxToSVGRect(%7B l: 100, r: 200, t: 300, b: 500 %7D);%0A    expect(rect.getAttribute('x')).toBe('100');%0A    expect(rect.getAttribute('y')).toBe('300');%0A    expect(rect.getAttribute('width')).toBe('100');%0A    expect(rect.getAttribute('height')).toBe('200');%0A  %7D);%0A%7D);%0A

Add some unit tests