Skip to content

feat(test): test cafe #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sambacha wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(test): test cafe #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17,213 changes: 13,141 additions & 4,072 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 18 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
"test": "test",
"dappspec": "dappspec"
},
"scripts": {},
"scripts": {
"test:stylelint": "stylelint dist/dappspec.css",
"test:chrome": "testcafe chrome:headless test/acceptance/chrome --app \"http-server . --silent\"",
"test:firefox": "testcafe firefox:headless test/acceptance/firefox --app \"http-server . --silent\"",
"test:safari": "testcafe safari test/acceptance/safari --app \"http-server . --silent\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/sambacha/dappspec-css.git"
Expand All @@ -26,10 +31,21 @@
"@jest/types": "^28.1.3",
"browserslist": "^4.21.3",
"cssnano": "^5.1.13",
"http-server": "^14.1.1",
"postcss": "^8.4.16",
"postcss-preset-env": "^7.8.0",
"postcss-scss": "^4.0.4",
"prettier": "^2.7.1",
"stylelint": "^14.10.0"
"stylelint": "^14.10.0",
"stylelint-config-xo": "^0.21.0",
"testcafe": "^2.0.0"
},
"stylelint": {
"extends": "stylelint-config-xo",
"rules": {
"no-duplicate-selectors": null,
"no-descending-specificity": null,
"property-no-vendor-prefix": null
}
}
}
168 changes: 168 additions & 0 deletions test/acceptance/chrome/rules.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import {Selector} from 'testcafe';

fixture `Chrome Rules Tests`
.page `http://localhost:8080/test/page/with-css.html`;

test('Use a better box model (opinionated).', async t => {
await t
.expect(Selector('html').getStyleProperty('box-sizing')).eql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
await t
.expect(Selector('html').getStyleProperty('tab-size')).eql('4');
});

test('Correct the line height in all browsers.', async t => {
await t
.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
.expect(Selector('html').getStyleProperty('line-height')).eql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
await t
.expect(Selector('html').getStyleProperty('text-size-adjust')).eql('100%');
});

test('Remove the margin in all browsers.', async t => {
await t
.expect(Selector('body').getStyleProperty('margin-top')).eql('0px')
.expect(Selector('body').getStyleProperty('margin-right')).eql('0px')
.expect(Selector('body').getStyleProperty('margin-bottom')).eql('0px')
.expect(Selector('body').getStyleProperty('margin-left')).eql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
await t
.expect(Selector('body').getStyleProperty('font-family')).eql(`system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`);
});

test('Add the correct height in Firefox.', async t => {
await t
.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).eql('2px');
});

test('Add the correct text decoration in Edge, and Safari.', async t => {
await t
.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome, Edge, and Safari.', async t => {
await t
.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).eql('900')
.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).eql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
await t
.expect(Selector('[data-test--code]').getStyleProperty('font-family')).eql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
await t
.expect(Selector('[data-test--code]').getStyleProperty('font-size')).eql('16px');
});

test('Add the correct font size in all browsers.', async t => {
await t
.expect(Selector('[data-test--small]').getStyleProperty('font-size')).eql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
await t
.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).eql('12px')
.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).eql('0px')
.expect(Selector('[data-test--subsup]').getStyleProperty('position')).eql('relative')
.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).eql('baseline')
.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).eql('-3px')
.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).eql('-6px');
});

test('Change the font styles in all browsers.', async t => {
await t
.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).eql('MYCUSTOMFONT')
.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).eql('16px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).eql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
await t
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Remove the inheritance of text transform in Firefox.', async t => {
await t
.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
await t
.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button');
});

test('Remove the inner border and padding in Firefox.', async t => {
// `-moz-focus-inner` does not exist in Chrome
});

test('Restore the focus styles unset by the previous rule.', async t => {
// `-moz-focusring` does not exist in Chrome
});

test('Correct the padding in Firefox.', async t => {
await t
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
await t
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).eql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).eql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
await t
.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).eql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
await t
.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('textfield');
});

test('Correct the outline style in Safari.', async t => {
await t
.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
await t
.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).eql('list-item');
});
168 changes: 168 additions & 0 deletions test/acceptance/chrome/validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import {Selector} from 'testcafe';

fixture `Chrome Validation Tests`
.page `http://localhost:8080/test/page/without-css.html`;

test('Use a better box model (opinionated).', async t => {
await t
.expect(Selector('html').getStyleProperty('box-sizing')).notEql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
await t
.expect(Selector('html').getStyleProperty('tab-size')).notEql('4');
});

test('Correct the line height in all browsers.', async t => {
await t
.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
.expect(Selector('html').getStyleProperty('line-height')).notEql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
await t
.expect(Selector('html').getStyleProperty('text-size-adjust')).notEql('100%');
});

test('Remove the margin in all browsers.', async t => {
await t
.expect(Selector('body').getStyleProperty('margin-top')).notEql('0px')
.expect(Selector('body').getStyleProperty('margin-right')).notEql('0px')
.expect(Selector('body').getStyleProperty('margin-bottom')).notEql('0px')
.expect(Selector('body').getStyleProperty('margin-left')).notEql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
await t
.expect(Selector('body').getStyleProperty('font-family')).notEql('system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"');
});

test('Add the correct height in Firefox.', async t => {
await t
.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).notEql('2px');
});

test('Add the correct text decoration in Edge, and Safari.', async t => {
await t
.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome, Edge, and Safari.', async t => {
await t
.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).notEql('900')
.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).notEql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
await t
.expect(Selector('[data-test--code]').getStyleProperty('font-family')).notEql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
await t
.expect(Selector('[data-test--code]').getStyleProperty('font-size')).notEql('16px');
});

test('Add the correct font size in all browsers.', async t => {
await t
.expect(Selector('[data-test--small]').getStyleProperty('font-size')).notEql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
await t
.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).notEql('12px')
.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).notEql('0px')
.expect(Selector('[data-test--subsup]').getStyleProperty('position')).notEql('relative')
.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).notEql('baseline')
.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).notEql('-3px')
.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).notEql('-6px');
});

test('Change the font styles in all browsers.', async t => {
await t
.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).notEql('MYCUSTOMFONT')
.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).notEql('16px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).notEql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
await t
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Remove the inheritance of text transform in Firefox.', async t => {
await t
.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
await t
.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button');
});

test('Remove the inner border and padding in Firefox.', async t => {
// `-moz-focus-inner` does not exist in Chrome
});

test('Restore the focus styles unset by the previous rule.', async t => {
// `-moz-focusring` does not exist in Chrome
});

test('Correct the padding in Firefox.', async t => {
await t
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
await t
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).notEql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).notEql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
await t
.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).notEql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
await t
.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('textfield');
});

test('Correct the outline style in Safari.', async t => {
await t
.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
await t
.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).notEql('list-item');
});
Loading