Skip to content

Commit

Permalink
Amp-Img Bind Integration Tests (ampproject#7721)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kmh287 @mrjoro
kmh287 authored and mrjoro committed Apr 28, 2017
1 parent 1b68a6f commit fd0dc3b
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 15 deletions.
71 changes: 66 additions & 5 deletions extensions/amp-bind/0.1/test/test-bind-integration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ describe.configure().retryOnSaucelabs().run('integration amp-bind', function() {
this.timeout(5000);

beforeEach(() => {

return createFixtureIframe(fixtureLocation).then(f => {
fixture = f;
toggleExperiment(fixture, 'amp-bind', true, true);
Expand All @@ -56,7 +55,7 @@ describe.configure().retryOnSaucelabs().run('integration amp-bind', function() {
describe('text integration', () => {
it('should update text when text attribute binding changes', () => {
const textElement = fixture.doc.getElementById('textElement');
const button = fixture.doc.getElementById('mutateTextButton');
const button = fixture.doc.getElementById('changeTextButton');
expect(textElement.textContent).to.equal('unbound');
button.click();
return waitForBindApplication().then(() => {
Expand All @@ -66,7 +65,7 @@ describe.configure().retryOnSaucelabs().run('integration amp-bind', function() {

it('should update CSS class when class binding changes', () => {
const textElement = fixture.doc.getElementById('textElement');
const button = fixture.doc.getElementById('mutateTextButton');
const button = fixture.doc.getElementById('changeTextClassButton');
expect(textElement.className).to.equal('original');
button.click();
return waitForBindApplication().then(() => {
Expand All @@ -89,16 +88,78 @@ describe.configure().retryOnSaucelabs().run('integration amp-bind', function() {

it('should change slides when the slide attribute binding changes', () => {
const carousel = fixture.doc.getElementById('carousel');
const goToSlide1Button = fixture.doc.getElementById('goToSlide1Button');
const button = fixture.doc.getElementById('goToSlide1Button');
const impl = carousel.implementation_;
// No previous slide as current slide is 0th side
expect(impl.hasPrev()).to.be.false;
goToSlide1Button.click();
button.click();
return waitForBindApplication().then(() => {
// Has previous slide since the index has changed
expect(impl.hasPrev()).to.be.true;
});
});
});

describe('amp-img integration', () => {
it('should change src when the src attribute binding changes', () => {
const button = fixture.doc.getElementById('changeImgSrcButton');
const img = fixture.doc.getElementById('image');
expect(img.getAttribute('src')).to.equal('http://www.google.com/image1');
button.click();
return waitForBindApplication().then(() => {
expect(img.getAttribute('src')).to
.equal('http://www.google.com/image2');
});
});

it('should NOT change src when new value is a blocked URL', () => {
const button = fixture.doc.getElementById('invalidSrcButton');
const img = fixture.doc.getElementById('image');
expect(img.getAttribute('src')).to.equal('http://www.google.com/image1');
button.click();
return waitForBindApplication().then(() => {
expect(img.getAttribute('src')).to
.equal('http://www.google.com/image1');
});
});

it('should NOT change src when new value uses an invalid protocol', () => {
const img = fixture.doc.getElementById('image');
expect(img.getAttribute('src')).to.equal('http://www.google.com/image1');
const ftpSrcButton = fixture.doc.getElementById('ftpSrcButton');
ftpSrcButton.click();
return waitForBindApplication().then(() => {
expect(img.getAttribute('src')).to.equal('http://www.google.com/image1');
const telSrcButton = fixture.doc.getElementById('telSrcButton');
telSrcButton.click();
return waitForBindApplication();
}).then(() => {
expect(img.getAttribute('src')).to
.equal('http://www.google.com/image1');
});
});

it('should change alt when the alt attribute binding changes', () => {
const button = fixture.doc.getElementById('changeImgAltButton');
const img = fixture.doc.getElementById('image');
expect(img.getAttribute('alt')).to.equal('unbound');
button.click();
return waitForBindApplication().then(() => {
expect(img.getAttribute('alt')).to.equal('hello world');
});
});

it('should change width and height when their bindings change', () => {
const button = fixture.doc.getElementById('changeImgDimensButton');
const img = fixture.doc.getElementById('image');
expect(img.getAttribute('height')).to.equal('200');
expect(img.getAttribute('width')).to.equal('200');
button.click();
return waitForBindApplication().then(() => {
expect(img.getAttribute('height')).to.equal('300');
expect(img.getAttribute('width')).to.equal('300');
});
});
});

});
30 changes: 20 additions & 10 deletions test/fixtures/amp-bind-integrations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,33 @@

<body>
<p>P TAG TEST</p>
<button on="tap:AMP.setState(boundText='hello world', boundClass='new')" id="mutateTextButton">hello world!</button>
<button on="tap:AMP.setState(boundText='hello world')" id="changeTextButton"></button>
<button on="tap:AMP.setState(boundClass='new')" id="changeTextClassButton"></button>
<p id="textElement" class="original" [class]="boundClass" [text]="boundText">unbound</p>

<p>CAROUSEL TEST</p>
<button on="tap:AMP.setState(selectedSlide=1)" id="goToSlide1Button">slide 1!</button>
<p id="slideNum" [text]="selectedSlide">0</p>
<amp-carousel width="300" height="100" type="slides" id="carousel" on="slideChange:AMP.setState(selectedSlide=event.index)" [slide]="selectedSlide">
<amp-img
src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no"
height="200" width="200"></amp-img>
<amp-img
src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no"
height="200" width="200"></amp-img>
<amp-img
src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no"
height="200" width="200"></amp-img>
<amp-img src="http://www.google.com/image1" height="200" width="200"></amp-img>
<amp-img src="http://www.google.com/image1" height="200" width="200"></amp-img>
<amp-img src="http://www.google.com/image1" height="200" width="200"></amp-img>
</amp-carousel>

<p>AMP-IMG TEST</p>
<button on="tap:AMP.setState(imageSrc='http://www.google.com/image2')" id="changeImgSrcButton"></button>
<button on="tap:AMP.setState(imageSrc='__amp_source_origin')" id="invalidSrcButton"></button>
<button on="tap:AMP.setState(imageSrc='ftp://foo:[email protected]/lol.jpg')" id="ftpSrcButton"></button>
<button on="tap:AMP.setState(imageSrc='tel:1-555-867-5309')" id="telSrcButton"></button>
<button on="tap:AMP.setState(imageAlt='hello world')" id="changeImgAltButton"></button>
<button on="tap:AMP.setState(imageWidth=300, imageHeight=300)" id="changeImgDimensButton"></button>

<amp-img id="image"
src="http://www.google.com/image1" [src]="imageSrc"
alt="unbound" [alt]="imageAlt"
width="200" [width]="imageWidth"
height="200" [height]="imageHeight"
layout="responsive">

</body>
</html>

0 comments on commit fd0dc3b

Please sign in to comment.