Skip to content

Commit

Permalink
Merge branch 'master' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
@e2tha-e
e2tha-e committed Feb 4, 2020
2 parents 0680d3b + d935ab9 commit 6356fca
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 28 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"coveralls": "3.x",
"eslint": "6.x",
"husky": "4.x",
"mkdirp": "^0.5.1",
"mocha": "7.x",
"nyc": "15.x",
"rollup": "^1.16.7",
Expand Down
110 changes: 82 additions & 28 deletions test/e2e/pattern.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
const fs = require('fs');
const mkdirp = require('mkdirp');
const fepperUiDir = 'node_modules/fepper-ui';
const scriptsPatternDir = 'scripts/pattern';
const dhtmlFile = 'html-scraper-dhtml.js';

if (!fs.existsSync(`${fepperUiDir}/${scriptsPatternDir}`)) {
mkdirp.sync(`${fepperUiDir}/${scriptsPatternDir}`);
}

fs.copyFileSync(`${scriptsPatternDir}/${dhtmlFile}`, `${fepperUiDir}/${scriptsPatternDir}/${dhtmlFile}`);

describe('Pattern end-to-end tests', function () {
describe('annotations-viewer.js', function () {
describe('click', function () {
Expand Down Expand Up @@ -178,6 +190,69 @@ menu anchor.</p>
});

/* eslint-disable max-len */
it('pre-import submit button posts correctly', function () {
$('[name="url"]').click();
$('[name="url"]').setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');
$('[name="selector"]').click();
$('[name="selector"]').setValue('p');
$('[name="url-form"]').click();
browser.pause(100);
expect($('html').getHTML(false)).to.equal(`<head>
<title id="title">Fepper HTML Scraper</title>
<meta charset="UTF-8">
<!-- Disable cache -->
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
</head>
<body class="text">
<main id="scraper" class="scraper">
<div id="message" class="message "></div>
<h1 id="scraper-heading" class="scraper-heading">Fepper HTML Scraper</h1>
<div style="border: 1px solid black;margin: 10px 0 20px;overflow-x: scroll;padding: 20px;width: 100%;"><div>&lt;p&gt;Fepper Base&lt;/p&gt;<br></div>
</div>
<h3>Does this HTML look right?</h3>
<form id="html-scraper-importer" action="/html-scraper" method="post" name="importer" style="margin-bottom: 20px;">
<div>Yes, import into Fepper.</div>
<label for="import-form">Enter a filename to save this under (extension not necessary):</label>
<input name="filename" type="text" value="" style="width: 100%">
<input name="url" type="hidden" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">
<input name="selector" type="hidden" value="p">
<textarea name="html2json" style="display: none;"></textarea>
<textarea name="mustache" style="display: none;">&lt;p&gt;{{ p }}&lt;/p&gt;
</textarea>
<textarea name="json" style="display: none;">{
"p": "Fepper Base"
}
</textarea>
<input name="import-form" type="submit" value="Submit" style="margin-top: 10px;">
</form>
<h3>Otherwise, correct the URL and Target Selector and submit again.</h3><script src="/scripts/pattern/html-scraper-ajax.js"></script>
<form id="html-scraper-targeter" action="/html-scraper" method="post" name="targeter">
<div>
<label for="url">URL:</label>
<input name="url" type="text" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html" style="width: 100%;">
</div>
<div>
<label for="selector">Target Selector:</label>
<input name="selector" type="text" value="p" style="width: 100%;">
</div>
<textarea name="html2json" style="display: none;"></textarea>
<div class="cf" style="padding-top: 10px;">
<input name="url-form" type="submit" value="Submit" style="float: left;">
<button id="help-button" style="float: right;">Help</button>
</div>
</form><script src="../../node_modules/fepper-ui/scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
<p></p>
<p>Use this tool to scrape and import Mustache templates and JSON data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the JSON file, but will only save the first instance of the target to a Mustache template.</p>
<p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save Mustache and JSON files by that name in your patterns' scrape directory, also viewable under the Scrape menu of the toolbar. The Scraper will correctly indent the Mustache code. However, the JSON parsing requires a conversion from HTML to XHTML, so don't expect an exact copy of the HTML structure of the source HTML.</p>
</div></main>
</body>`);
});

it('import-form submit button posts correctly', function () {
$('[name="url"]').click();
$('[name="url"]').setValue('/patterns/04-pages-00-homepage/04-pages-00-homepage.html');
Expand Down Expand Up @@ -216,7 +291,7 @@ menu anchor.</p>
<input name="url-form" type="submit" value="Submit" style="float: left;">
<button id="help-button" style="float: right;">Help</button>
</div>
</form><script src="../../scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
</form><script src="../../node_modules/fepper-ui/scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
<p></p>
<p>Use this tool to scrape and import Mustache templates and JSON data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the JSON file, but will only save the first instance of the target to a Mustache template.</p>
<p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save Mustache and JSON files by that name in your patterns' scrape directory, also viewable under the Scrape menu of the toolbar. The Scraper will correctly indent the Mustache code. However, the JSON parsing requires a conversion from HTML to XHTML, so don't expect an exact copy of the HTML structure of the source HTML.</p>
Expand All @@ -231,10 +306,8 @@ menu anchor.</p>
$('[name="selector"]').click();
$('[name="selector"]').setValue('p');
$('[name="url-form"]').click();
$('[name="filename"]').click();
$('[name="filename"]').setValue('test');
$('[name="import-form"]').click();
$('[name="url-form"]').click();
$('#html-scraper-targeter').$('[name="selector"]').setValue('h1');
$('#html-scraper-targeter').$('[name="url-form"]').click();
browser.pause(100);
expect($('html').getHTML(false)).to.equal(`<head>
<title id="title">Fepper HTML Scraper</title>
Expand All @@ -248,27 +321,8 @@ menu anchor.</p>
</head>
<body class="text">
<main id="scraper" class="scraper">
<div id="message" class="message "></div>
<h1 id="scraper-heading" class="scraper-heading">Fepper HTML Scraper</h1>
<div style="border: 1px solid black;margin: 10px 0 20px;overflow-x: scroll;padding: 20px;width: 100%;"><div>&lt;p&gt;Fepper Base&lt;/p&gt;<br></div>
</div>
<h3>Does this HTML look right?</h3>
<form id="html-scraper-importer" action="/html-scraper" method="post" name="importer" style="margin-bottom: 20px;">
<div>Yes, import into Fepper.</div>
<label for="import-form">Enter a filename to save this under (extension not necessary):</label>
<input name="filename" type="text" value="" style="width: 100%">
<input name="url" type="hidden" value="/patterns/04-pages-00-homepage/04-pages-00-homepage.html">
<input name="selector" type="hidden" value="p">
<textarea name="html2json" style="display: none;"></textarea>
<textarea name="mustache" style="display: none;">&lt;p&gt;{{ p }}&lt;/p&gt;
</textarea>
<textarea name="json" style="display: none;">{
"p": "Fepper Base"
}
</textarea>
<input name="import-form" type="submit" value="Submit" style="margin-top: 10px;">
</form>
<h3>Otherwise, correct the URL and Target Selector and submit again.</h3><script src="/scripts/pattern/html-scraper-ajax.js"></script>
<div id="message" class="message success">Success! Refresh the browser to check that your template appears under the "Scrape" menu.</div>
<h1 id="scraper-heading" class="scraper-heading">Fepper HTML Scraper</h1><script src="/scripts/pattern/html-scraper-ajax.js"></script>
<form id="html-scraper-targeter" action="/html-scraper" method="post" name="targeter">
<div>
<label for="url">URL:</label>
Expand All @@ -283,7 +337,7 @@ menu anchor.</p>
<input name="url-form" type="submit" value="Submit" style="float: left;">
<button id="help-button" style="float: right;">Help</button>
</div>
</form><script src="../../scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
</form><script src="../../node_modules/fepper-ui/scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
<p></p>
<p>Use this tool to scrape and import Mustache templates and JSON data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the JSON file, but will only save the first instance of the target to a Mustache template.</p>
<p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save Mustache and JSON files by that name in your patterns' scrape directory, also viewable under the Scrape menu of the toolbar. The Scraper will correctly indent the Mustache code. However, the JSON parsing requires a conversion from HTML to XHTML, so don't expect an exact copy of the HTML structure of the source HTML.</p>
Expand Down Expand Up @@ -363,7 +417,7 @@ menu anchor.</p>
<input name="url-form" type="submit" value="Submit" style="float: left;">
<button id="help-button" style="float: right;">Help</button>
</div>
</form><script src="../../scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
</form><script src="../../node_modules/fepper-ui/scripts/pattern/html-scraper-dhtml.js"></script><div id="help-text" style="border: 1px solid black;visibility: hidden;margin-top: 5.50px;padding: 0 20px;width: 100%">
<p></p>
<p>Use this tool to scrape and import Mustache templates and JSON data files from actual web pages, preferably the actual backend CMS that Fepper is prototyping for. Simply enter the URL of the page you wish to scrape. Then, enter the CSS selector you wish to target (prepended with "#" for IDs and "." for classes). Classnames and tagnames may be appended with array index notation ([n]). Otherwise, the Scraper will scrape all elements of that class or tag sequentially. Such a loosely targeted scrape will save many of the targeted fields to the JSON file, but will only save the first instance of the target to a Mustache template.</p>
<p>Upon submit, you should be able to review the scraped output on the subsequent page. If the output looks correct, enter a filename and submit again. The Scraper will save Mustache and JSON files by that name in your patterns' scrape directory, also viewable under the Scrape menu of the toolbar. The Scraper will correctly indent the Mustache code. However, the JSON parsing requires a conversion from HTML to XHTML, so don't expect an exact copy of the HTML structure of the source HTML.</p>
Expand Down

0 comments on commit 6356fca

Please sign in to comment.