describe('On a pages first render', () => {
  before(() => {
    cy.visit('/cypress/fixtures/samplePage.html');
  });
  beforeEach(() => {
    cy.fixture('config.js').as('config');
  });

  it('Sizes attribute is correctly set', () => {
    cy.get('[data-test-id="sizes"]', { timeout: 10000 }).each(($el) => {
      const expectedSize = Math.ceil($el.width());
      const imgSize = Number($el.attr('sizes').split('px')[0]);
      assert.isAtMost(imgSize, 500);
      assert.isAtLeast(imgSize, expectedSize);
    });
  });
});

describe('When a page gets resized', () => {
  before(() => {
    cy.visit('/cypress/fixtures/samplePage.html');
    cy.viewport(500, 500);
  });

  beforeEach(() => {
    cy.fixture('config.js').as('config');
  });

  it('Updates the sizes attribute on resize', () => {
    cy.get('[data-test-id="sizes"]', { timeout: 10000 }).each(($el) => {
      const expectedSize = Math.ceil($el.width());
      const imgSize = Number($el.attr('sizes').split('px')[0]);
      assert.isAtMost(imgSize, 500);
      assert.isAtLeast(imgSize, expectedSize);
    });
  });

  context('When multiple resizes happen', () => {
    it(`Does not update size before debounce is finished`, () => {
      cy.get('[data-test-id="sizes"]')
        .first()
        .then(($el) => {
          // store and check the image size before resize
          let imgSize = Number($el.attr('sizes').split('px')[0]);
          const expectedSize = Math.ceil($el.width());
          assert.isAtMost(imgSize, 500);
          // resize and wait only 10ms
          cy.viewport(1000, 500);
          cy.wait(10);
          // check sizes has NOT changed
          imgSize = Number($el.attr('sizes').split('px')[0]);
          assert.isAtMost(imgSize, 500);
          assert.isAtLeast(imgSize, expectedSize);
        });
    });
    it('Updates size after debounce has finished', () => {
      cy.viewport(1500, 500);
      cy.wait(300);
      cy.get('[data-test-id="sizes"]')
        .first()
        .then(($el) => {
          // check sizes HAS changed
          const newImgSize = Number($el.attr('sizes').split('px')[0]);
          assert.isAtLeast(newImgSize, 500);
          assert.isAtMost(newImgSize, 1500);
          expect(newImgSize).to.not.equal(404);
        });
    });
  });
});

describe('On an image whos width is too small or undefined', () => {
  before(() => {
    cy.visit('/cypress/fixtures/samplePage.html');
    cy.get('[data-test-id="sizes"]').invoke(
      'attr',
      'src',
      'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    );
    cy.get('[data-test-id="invalid-img"]').invoke(
      'attr',
      'src',
      'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    );
  });

  beforeEach(() => {
    cy.fixture('config.js').as('config');
  });

  it('Uses parent size as fallback', () => {
    cy.get('[data-test-id="sizes"]')
      .first()
      .then(($el) => {
        const imgSize = $el.attr('sizes');
        cy.get('[data-test-id="sizes-parent"]')
          .first()
          .then(($parent) => {
            const parentSize = $parent.width() + 'px';
            expect($el.attr('src')).to.equal(
              'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
            );
            expect(imgSize).to.equal(parentSize);
          });
      });
  });
});

@@ -2296,47 +2296,50 @@
 an i
-mage whos width is too small or undefin
+nvalid image or an image that has not load
 ed',
@@ -2347,32 +2347,36 @@
 () =%3E %7B%0A  before
+Each
 (() =%3E %7B%0A    cy.
@@ -2423,170 +2423,8 @@
 ');%0A
-    cy.get('%5Bdata-test-id=%22sizes%22%5D').invoke(%0A      'attr',%0A      'src',%0A      'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='%0A    );%0A
     
@@ -2591,36 +2591,8 @@
  );%0A
-  %7D);%0A%0A  beforeEach(() =%3E %7B%0A
     
@@ -2700,37 +2700,43 @@
 '%5Bdata-test-id=%22
-sizes
+invalid-img
 %22%5D')%0A      .firs
@@ -3177,25 +3177,858 @@
  %7D);%0A      %7D);%0A  %7D);
+%0A%0A  it('Does not update sizes on window resize', () =%3E %7B%0A    // resize the window and wait for debounce to execute%0A    cy.viewport(1500, 500);%0A    cy.wait(300);%0A    cy.get('%5Bdata-test-id=%22sizes%22%5D')%0A      .first()%0A      .then(($el) =%3E %7B%0A        // check sizes HAS changed on valid image%0A        const newImgSize = Number($el.attr('sizes').split('px')%5B0%5D);%0A        assert.isAtLeast(newImgSize, 500);%0A        assert.isAtMost(newImgSize, 1500);%0A        expect(newImgSize).to.not.equal(404);%0A%0A        //check sizes HAS NOT changed on invalid image%0A        cy.get('%5Bdata-test-id=%22invalid-img%22%5D')%0A          .first()%0A          .then(($ele) =%3E %7B%0A            const imgSize = Number($ele.attr('sizes').split('px')%5B0%5D);%0A            assert.isAtLeast(imgSize, $ele.width());%0A            assert.isAtMost(imgSize, 500);%0A          %7D);%0A      %7D);%0A  %7D);
 %0A%7D);%0A

add test for images that dont load