FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

test: Adjusting the visual regression test ratios and fixing test bugs by castastrophe · Pull Request #1528 · patternfly/patternfly-elements · GitHub

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension .css  (1) .html  (1) .js  (14) .png  (4) .scss  (1) All 5 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
2 changes: 1 addition & 1 deletion elements/pfe-badge/test/pfe-badge_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.6);
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.85);
});
});
2 changes: 1 addition & 1 deletion elements/pfe-codeblock/test/pfe-codeblock_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(2.1);
expect(browser.checkFullPageScreen(element)).toBeLessThan(2.2);
});
});
2 changes: 1 addition & 1 deletion elements/pfe-collapse/test/pfe-collapse_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
expect(browser.checkFullPageScreen(element)).toBeLessThan(4.7);
});
});
2 changes: 0 additions & 2 deletions elements/pfe-content-set/src/pfe-content-set.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,6 @@ class PfeContentSet extends PFElement {
constructor() {
super(PfeContentSet, { type: PfeContentSet.PfeType });

this.isIE11 = /MSIE|Trident|Edge\//.test(window.navigator.userAgent);

this.build = this.build.bind(this);

this._mutationHandler = this._mutationHandler.bind(this);
Expand Down
2 changes: 1 addition & 1 deletion elements/pfe-cta/test/pfe-cta_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.4);
});
});
2 changes: 1 addition & 1 deletion elements/pfe-dropdown/test/pfe-dropdown_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.45);
});
});
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(2.35);
expect(browser.checkFullPageScreen(element)).toBeLessThan(2.4);
});
});
2 changes: 1 addition & 1 deletion elements/pfe-icon/test/pfe-icon_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ const element = require("../package.json").pfelement.elementName;
describe(element, () => {
before(() => {
browser.url(`/elements/${element}/demo/index_e2e.html`);
browser.pause(12000);
});

it("should take a screenshot", () => {
browser.pause(15000);
browser.saveFullPageScreen(element);
});

Expand Down
6 changes: 5 additions & 1 deletion elements/pfe-modal/test/pfe-modal_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ describe(element, () => {

browser.execute(function () {
window.scrollTo(0, 0);
document.querySelector("pfe-modal").open();
Promise.all([
Comment thread
castastrophe marked this conversation as resolved.
customElements.whenDefined("pfe-modal")
]).then(function () {
document.querySelector("pfe-modal").open();
});
});

browser.pause(1000);
Expand Down
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe(element, () => {
});

browser.saveFullPageScreen(`${element}--desktop`);
expect(browser.checkScreen(`${element}--desktop`)).toBeLessThan(5.76);
expect(browser.checkScreen(`${element}--desktop`)).toBeLessThan(6);
});

it("should validate a screenshot at mobile", () => {
Expand Down
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.75);
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.8);
});
});
2 changes: 1 addition & 1 deletion elements/pfe-select/test/pfe-select_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ describe(element, () => {
});

it("should compare to the baseline", () => {
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.25);
expect(browser.checkFullPageScreen(element)).toBeLessThan(1.35);
});
});
14 changes: 14 additions & 0 deletions elements/pfe-styles/src/pfe-context.scss
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,17 @@
--context: #{$context};
}
}

@each $color in (darker, accent, complement, base, lighter, lightest) {
Comment thread
castastrophe marked this conversation as resolved.
.surface--#{$color} {
$context: #{pfe-get-context(surface--#{$color}--context)};
@include pfe-set-broadcast-context($context);
--context: #{$context};
background-color: pfe-fetch(surface--#{$color});
color: pfe-broadcasted(text);
Comment thread
castastrophe marked this conversation as resolved.
@include browser-query(ie11) {
background-color: pfe-fetch(surface--lightest);
color: pfe-fetch(text);
}
}
}
8 changes: 6 additions & 2 deletions elements/pfe-tabs/demo/demo.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ html {
scroll-behavior: smooth;
}

.pfe-jump-links__section--spacer {
margin-top: 3em;
body {
color: var(--pfe-broadcasted--text, var(--pfe-theme--color--text, #151515));
}

pfe-tabs {
margin-bottom: 5em;
}

@media screen and (max-width: 899px) {
Expand Down
499 changes: 499 additions & 0 deletions elements/pfe-tabs/demo/index_e2e.html

Large diffs are not rendered by default.

54 changes: 38 additions & 16 deletions elements/pfe-tabs/test/pfe-tabs_e2e.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
const element = require("../package.json").pfelement.elementName;
let windowSize;

describe(element, () => {
let snapshotOptions;

before(() => {
browser.url(`/elements/${element}/demo`);
// Capture window size
windowSize = browser.getWindowSize();

snapshotOptions = {
removeElements: [
$("#toc"),
$$(".skip-e2e")
]
};
browser.url(`/elements/${element}/demo/index_e2e.html`);

browser.setWindowSize(1200, 1000);
});

["light", "dark", "saturated"].forEach(context => {
it(`should take a screenshot and compare for ${context} context`, () => {
$("#context").selectByAttribute("value", context);
browser.saveFullPageScreen(`${element}--${context}`, snapshotOptions);
expect(browser.checkFullPageScreen(`${element}--${context}`, snapshotOptions)).toBeLessThan(3.1);
});
after(function() {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Why set the browser window size after these tests?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

An observation - I noticed that if you change the browser size between tests, it persists between test files unless you unset that update.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Future option is to set up a global before that sets the initial browser size

browser.setWindowSize(windowSize.width, windowSize.height);
});
});

if (browser.capabilities.browserName === "IE") {
Comment thread
castastrophe marked this conversation as resolved.
it(`should take a screenshot and compare`, () => {
browser.saveFullPageScreen(element, {});
expect(browser.checkFullPageScreen(element, {})).toBeLessThan(3.1);
});
} else {

["light", "dark", "saturated"].forEach(context => {
it(`should take a screenshot and compare for ${context} context`, () => {
if (context !== "light") {
let color = "darker";
if (context === "saturated") color = "accent";

browser.execute(function (color) {
document.querySelector("#wrapper").className = `surface--${color}`;
Promise.all([customElements.whenDefined("pfe-tabs")]).then(function () {
document.querySelectorAll("pfe-tabs").forEach(function (tab) {
tab.resetContext();
});
});
}, color);
}

browser.saveFullPageScreen(`${element}--${context}`, {});
expect(browser.checkFullPageScreen(`${element}--${context}`, {})).toBeLessThan(3.1);
});
});
}
});
3 changes: 3 additions & 0 deletions elements/pfelement/src/pfelement.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,8 @@ class PFElement extends HTMLElement {
}

resetContext(fallback) {
if (this.isIE11) return;
Comment thread
castastrophe marked this conversation as resolved.

this.log(`Resetting context on ${this.tag}`);
// Priority order for context values to be pulled from:
//--> 1. context (OLD: pfe-theme)
Expand All @@ -301,6 +303,7 @@ class PFElement extends HTMLElement {
this._pfeClass = pfeClass;
this.tag = pfeClass.tag;
this._parseObserver = this._parseObserver.bind(this);
this.isIE11 = /MSIE|Trident|Edge\//.test(window.navigator.userAgent);

// Set up the mark ID based on existing ID on component if it exists
if (!this.id) {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Binary file modified test/vrt-baseline/desktop_chrome/pfe-tabs--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.

Back | FazBrowse Home | New Git URL