Feed Example: Move display of example from separate page into standard APG example page

content/patterns/feed/examples/feed.html

@@ -43,7 +43,8 @@ <h2>About This Example</h2>
  <h2 id="ex_label">Example</h2>
  <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
  <div id="ex1">
- <p>The example feed experience is presented on a separate <a href="feed-display.html">feed display page.</a></p>
+ <p>The example feed experience below is presented in an iframe in order not to obstruct from the rest of the content of the page. </p>
+ <iframe id="feed_frame" src="./feed-display.html" height="500" title="Feed example" style="width: 100%"></iframe>
  </div>
  <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
  </section>

test/tests/feed_feed.js

@@ -10,7 +10,7 @@ const assertAriaDescribedby = require('../util/assertAriaDescribedby');
 const exampleFile = 'content/patterns/feed/examples/feed.html';
 
 const ex = {
- feedLinkSelector: '#ex1 a',
+ frameID: 'feed_frame',
  feedSelector: '[role="feed"]',
  articleSelector: '[role="article"]',
  timeToLoad10Articles: 2500,
@@ -19,17 +19,7 @@ const ex = {
 };
 
 const navigateToFeed = async function (t) {
- await t.context.session.findElement(By.css(ex.feedLinkSelector)).click();
-
- return t.context.session.wait(
- () => {
- return t.context.session.getCurrentUrl().then((url) => {
- return url != t.context.url;
- });
- },
- t.context.waitTime,
- 'The feed url did not load after clicking: ' + ex.feedLinkSelector
- );
+ await t.context.session.switchTo().frame(ex.frameID);
 };
 
 const waitForArticlesToLoad = async function (t) {