Skip to content

Commit

Permalink
refactor(libs): Migrating BoB
Browse files Browse the repository at this point in the history
  • Loading branch information
Schalk Neethling committed Aug 22, 2018
1 parent 549e8ec commit f8dc31d
Show file tree
Hide file tree
Showing 118 changed files with 3,760 additions and 766 deletions.
2 changes: 1 addition & 1 deletion .bobconfigrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"editorMediaDest": "./docs/media/",
"examplesMediaRoot": "live-examples/media",
"examplesMediaDest": "./docs/media/examples/",
"fontsMediaRoot": "fonts",
"fontsMediaRoot": "live-examples/fonts",
"fontsMediaDest": "./docs/media/fonts/",
"jsExamplesDir": "./docs/pages/js/",
"metaGlob": "live-examples/**/meta.json",
Expand Down
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,8 @@ typings/
# dotenv environment variables file
.env

# macOS specific
.DS_Store

# project specific
/docs/
2 changes: 2 additions & 0 deletions .stylelintignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
editor/css/libs/*
docs/*
76 changes: 76 additions & 0 deletions .stylelintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
{
"rules": {
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always",
"block-no-empty": true,
"block-opening-brace-newline-after": "always",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-named": "never",
"color-no-invalid-hex": true,
"comment-no-empty": true,
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-no-shorthand-property-overrides": true,
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-empty-line-before": ["never", { ignore: ["after-comment", "after-declaration"] }],
"declaration-no-important": true,
"font-family-name-quotes": "always-where-recommended",
"font-family-no-duplicate-names": true,
"function-comma-space-after": "always-single-line",
"function-name-case": "lower",
"function-url-no-scheme-relative": true,
"function-url-quotes": "always",
"indentation": [4, { ignore: ["value"] }],
"keyframe-declaration-no-important": true,
"length-zero-no-unit": true,
"max-empty-lines": 2,
"max-nesting-depth": 5,
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-name-no-unknown": [true, { ignoreMediaFeatureNames: ["min--moz-device-pixel-ratio"]}],
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-newline-before": "never-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"media-query-list-comma-space-before": "never",
"no-eol-whitespace": true,
"no-extra-semicolons": true,
"no-invalid-double-slash-comments": true,
"no-missing-end-of-source-newline": true,
"no-unknown-animations": true,
"number-leading-zero": "never",
"number-no-trailing-zeros": true,
"property-case": "lower",
"property-no-unknown": true,
"rule-empty-line-before": ["always", { ignore: ["after-comment", "inside-block"] }],
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-list-comma-newline-after": "always",
"selector-list-comma-newline-before": "never-multi-line",
"selector-max-empty-lines": 0,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-type-no-unknown": true,
"string-no-newline": true,
"string-quotes": "single",
"unit-case": "lower",
"unit-no-unknown": true,
"value-keyword-case": "lower",
}
}
120 changes: 120 additions & 0 deletions __tests__/console-utils.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
const consoleUtils = require('../editor/js/editor-libs/console-utils');

describe('console utils', () => {
describe('formatOutput', () => {
test('String', function() {
expect(consoleUtils.formatOutput('lorem ipsum')).toBe(
'"lorem ipsum"'
);
});
test('undefined', function() {
expect(consoleUtils.formatOutput(undefined)).toBe('undefined');
});
test('null', function() {
expect(consoleUtils.formatOutput(null)).toBe('null');
});
test('NaN', function() {
expect(consoleUtils.formatOutput(NaN)).toBe('NaN');
});
test('Boolean: true', function() {
expect(consoleUtils.formatOutput(true)).toBe('true');
});
test('Boolean: false', function() {
expect(consoleUtils.formatOutput(false)).toBe('false');
});
test('Positive integer', function() {
expect(consoleUtils.formatOutput(42)).toBe('42');
});
test('Positive floating point', function() {
expect(consoleUtils.formatOutput(4.2)).toBe('4.2');
});
test('Negative integer', function() {
expect(consoleUtils.formatOutput(-42)).toBe('-42');
});
test('Negative floating point', function() {
expect(consoleUtils.formatOutput(-4.2)).toBe('-4.2');
});
test('Infinity', function() {
expect(consoleUtils.formatOutput(Infinity)).toBe('Infinity');
});
test('Negative Infinity', function() {
expect(consoleUtils.formatOutput(-Infinity)).toBe('-Infinity');
});
test('Positive zero', function() {
expect(consoleUtils.formatOutput(0)).toBe('0');
});
test('Negative zero', function() {
expect(consoleUtils.formatOutput(-0)).toBe('-0');
});
test('String object', function() {
expect(consoleUtils.formatOutput(new String('foo'))).toBe(
'String { "foo" }'
);
});
test('Object.getPrototypeOf should return String { "" }', function() {
expect(
consoleUtils.formatOutput(Object.getPrototypeOf('foo'))
).toBe('String { "" }');
});
});

describe('formatArray', () => {
test('Array formatting', function() {
expect(consoleUtils.formatArray(new Array(1, 2, 3, 4))).toBe(
'1, 2, 3, 4'
);
});
test('Mixed array', function() {
expect(
consoleUtils.formatArray(
new Array(1, 'a', { x: 2 }, null, undefined)
)
).toBe('1, "a", Object { x: 2 }, null, undefined');
});
});

describe('formatObject', () => {
test('Int8Array', () => {
expect(consoleUtils.formatObject(new Int8Array(4))).toBe(
'Int8Array [0, 0, 0, 0]'
);
});
test('ArrayBuffer nested inside DataView', () => {
expect(
consoleUtils.formatObject(new DataView(new ArrayBuffer()))
).toBe('DataView {}');
});
test('Empty object', () => {
expect(consoleUtils.formatObject({})).toBe('Object { }');
});
describe('Simple object', () => {
test('string -> numbers', () => {
expect(consoleUtils.formatObject({ a: 1, b: 2, c: 3 })).toBe(
'Object { a: 1, b: 2, c: 3 }'
);
});
test('string -> mix of number and strings', () => {
expect(
consoleUtils.formatObject({ a: 1, b: 'something', c: 3 })
).toBe('Object { a: 1, b: "something", c: 3 }');
});
test('string -> mix of number and null', () => {
expect(consoleUtils.formatObject({ a: 1, b: null, c: 3 })).toBe(
'Object { a: 1, b: null, c: 3 }'
);
});
});
describe('Nested object', () => {
test('string -> numbers', () => {
expect(
consoleUtils.formatObject({ a: 1, b: { d: 2, e: 4 }, c: 3 })
).toBe('Object { a: 1, b: Object { d: 2, e: 4 }, c: 3 }');
});
test('string -> mix of array and numbers', () => {
expect(
consoleUtils.formatObject({ a: 1, b: [1, 2, 3], c: 3 })
).toBe('Object { a: 1, b: Array [1, 2, 3], c: 3 }');
});
});
});
});
154 changes: 101 additions & 53 deletions __tests__/puppeteer-tabbed-editor.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,114 @@
describe('Tabbed Editor', () => {
beforeAll(async () => {
await page.goto('http://127.0.0.1:4444/pages/tabbed/table.html');
});
describe('base test', () => {
beforeAll(async () => {
await page.goto('http://127.0.0.1:4444/pages/tabbed/table.html');
});

it('loads the expected HTML into the output element', async () => {
const expectedOutput =
'<style>table,' +
'td { border: 1px solid #333;}' +
'thead,tfoot { background-color: #333; color: #fff;}' +
'</style><table> <thead> <tr> ' +
'<th colspan="2">This is the table header</th> </tr> </thead> ' +
'<tbody> <tr> ' +
'<td>This is the table body</td> ' +
'<td>with two columns</td> ' +
'</tr> </tbody> ' +
'<tfoot> ' +
'<tr> ' +
'<td colspan="2">This is the table footer</td> ' +
'</tr> </tfoot></table>';

await page.waitForSelector('#output');

let outputContent = await page.$eval('#output', elem =>
/* trim new lines, then trim matches of two or more consecutive
whitespace characters with a single whitespace character */
elem.innerHTML.replace(/\r?\n|\r/g, '').replace(/\s{2,}/g, ' ')
);
await expect(outputContent).toBe(expectedOutput);
});
it('loads the expected HTML into the output element', async () => {
const expectedOutput =
'<style>.output{background-color:#fff;border:15px solid #eee;' +
'box-shadow:inset 5px 5px 10px rgba(0, 0, 0, .3), inset -5px -5px 10px rgba(0, 0, 0, .2);' +
'font-size:0.9rem;line-height:1.5;margin:24px 1em 0 0;overflow:scroll;' +
'padding:30px}</style>' +
'<style>table,' +
'td { border: 1px solid #333;}' +
'thead,tfoot { background-color: #333; color: #fff;}' +
'</style><div class="output" style="height: 76%;"><table> <thead> <tr> ' +
'<th colspan="2">The table header</th> </tr> </thead> ' +
'<tbody> <tr> ' +
'<td>The table body</td> ' +
'<td>with two columns</td> ' +
'</tr> </tbody> ' +
'<tfoot> ' +
'<tr> ' +
'<td colspan="2">The table footer</td> ' +
'</tr> </tfoot></table></div>';

await page.waitForSelector('#output');

let outputContent = await page.$eval(
'#output shadow-output',
elem =>
/* trim new lines, then trim matches of two or more consecutive
whitespace characters with a single whitespace character */
elem.shadowRoot.innerHTML
.replace(/\r?\n|\r/g, '')
.replace(/\s{2,}/g, ' ')
);
await expect(outputContent).toBe(expectedOutput);
});

it('should switch to CSS editor on tab click', async () => {
await page.waitForSelector('#tablist');
await page.click('#css');

let cssPanelClassAttr = await page.$eval('#css-panel', elem =>
elem.getAttribute('class')
);

let htmlPanelClassAttr = await page.$eval('#html-panel', elem =>
elem.getAttribute('class')
);

it('should switch to CSS editor on tab click', async () => {
await page.waitForSelector('#tablist');
await page.click('#css');
await expect(cssPanelClassAttr).toBe('');
await expect(htmlPanelClassAttr).toBe('hidden');
});

let cssPanelClassAttr = await page.$eval('#css-panel', elem =>
elem.getAttribute('class')
);
it('should switch to HTML editor on tab click', async () => {
await page.waitForSelector('#tablist');
// switch to CSS panel
await page.click('#css');
// then back to the HTML panel
await page.click('#html');

let htmlPanelClassAttr = await page.$eval('#html-panel', elem =>
elem.getAttribute('class')
);
let cssPanelClassAttr = await page.$eval('#css-panel', elem =>
elem.getAttribute('class')
);

await expect(cssPanelClassAttr).toBe('');
await expect(htmlPanelClassAttr).toBe('hidden');
let htmlPanelClassAttr = await page.$eval('#html-panel', elem =>
elem.getAttribute('class')
);

await expect(cssPanelClassAttr).toBe('hidden');
await expect(htmlPanelClassAttr).toBe('');
});
});

it('should switch to HTML editor on tab click', async () => {
await page.waitForSelector('#tablist');
// switch to CSS panel
await page.click('#css');
// then back to the HTML panel
await page.click('#html');
describe('test dynamic output container height', () => {
test('set the approriate height for shorter examples', async () => {
const expectedStyleValue = 'height: 62%;';

await page.goto('http://127.0.0.1:4444/pages/tabbed/abbr.html');
await page.waitForSelector('#output');

let styleValue = await page.$eval('shadow-output', elem =>
elem.shadowRoot.querySelector('.output').getAttribute('style')
);
await expect(styleValue).toBe(expectedStyleValue);
});

test('set the approriate height for standard examples', async () => {
const expectedStyleValue = 'height: 67%;';

await page.goto('http://127.0.0.1:4444/pages/tabbed/datalist.html');
await page.waitForSelector('#output');

let styleValue = await page.$eval('shadow-output', elem =>
elem.shadowRoot.querySelector('.output').getAttribute('style')
);
await expect(styleValue).toBe(expectedStyleValue);
});

let cssPanelClassAttr = await page.$eval('#css-panel', elem =>
elem.getAttribute('class')
);
test('set the approriate height for taller examples', async () => {
const expectedStyleValue = 'height: 76%;';

let htmlPanelClassAttr = await page.$eval('#html-panel', elem =>
elem.getAttribute('class')
);
await page.goto('http://127.0.0.1:4444/pages/tabbed/table.html');
await page.waitForSelector('#output');

await expect(cssPanelClassAttr).toBe('hidden');
await expect(htmlPanelClassAttr).toBe('');
let styleValue = await page.$eval('shadow-output', elem =>
elem.shadowRoot.querySelector('.output').getAttribute('style')
);
await expect(styleValue).toBe(expectedStyleValue);
});
});
});
Loading

0 comments on commit f8dc31d

Please sign in to comment.