Skip to content

Commit

Permalink
Release 02-12
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmtrKovalenko
dmtrKovalenko authored Dec 2, 2021
2 parents c4889ed + da054db commit ea1b4e6
Show file tree
Hide file tree
Showing 13 changed files with 848 additions and 694 deletions.
1 change: 1 addition & 0 deletions .circleci/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ jobs:
steps:
- attach_workspace:
at: ~/
- run: yarn lint
- run: yarn build
- run: node scripts/release.js
- persist_to_workspace:
Expand Down
130 changes: 89 additions & 41 deletions README.md
View file

Large diffs are not rendered by default.

Binary file added coordinates-log-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions cypress/integration/click.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@ describe("cy.realClick", () => {
cy.get(".action-btn").realClick({ button: "right" });
});

it("allow for double clicks", (done) => {
cy.get(".action-btn")
.then(($button) => {
$button.get(0).addEventListener("dblclick", () => {
done()
});
})
.realClick({ clickCount: 2 });
});

describe("scroll behavior", () => {
function getScreenEdges() {
const cypressAppWindow = window.parent.document.querySelector("iframe")
Expand Down
184 changes: 109 additions & 75 deletions cypress/integration/hover.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,22 @@ describe("cy.realHover", () => {
.should("have.css", "background-color", "rgb(217, 83, 79)")
.realHover()
.should("have.css", "background-color", "rgb(201, 48, 44)");

cy.get("body").realHover({ position: "topLeft" });
cy.get(".action-btn").should(
"have.css",
"background-color",
"rgb(217, 83, 79)"
);
});

describe('scroll behavior', () => {
describe("scroll behavior", () => {
function getScreenEdges() {
const cypressAppWindow = window.parent.document.querySelector("iframe").contentWindow;
const cypressAppWindow =
window.parent.document.querySelector("iframe").contentWindow;
const windowTopEdge = cypressAppWindow.document.documentElement.scrollTop;
const windowBottomEdge = windowTopEdge + cypressAppWindow.innerHeight;
const windowCenter = windowTopEdge + (cypressAppWindow.innerHeight / 2);
const windowCenter = windowTopEdge + cypressAppWindow.innerHeight / 2;

return {
screenTop: windowTopEdge,
Expand All @@ -29,111 +37,137 @@ describe("cy.realHover", () => {

return {
$elTop,
$elBottom: $elTop + $el.outerHeight()
}
$elBottom: $elTop + $el.outerHeight(),
};
}

beforeEach(() => {
cy.window().scrollTo('top');
cy.window().scrollTo("top");
});

it('defaults to scrolling the element to the top of the viewport', () => {
cy.get('#action-canvas').realHover().then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();
it("defaults to scrolling the element to the top of the viewport", () => {
cy.get("#action-canvas")
.realHover()
.then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();

expect($elTop).to.equal(screenTop);
});
expect($elTop).to.equal(screenTop);
});
});

it('scrolls the element to center of viewport', () => {
cy.get('#action-canvas').realHover({ scrollBehavior: 'center' }).then(($canvas: JQuery) => {
const { $elTop, $elBottom } = getElementEdges($canvas);
const { screenTop, screenBottom } = getScreenEdges();
it("scrolls the element to center of viewport", () => {
cy.get("#action-canvas")
.realHover({ scrollBehavior: "center" })
.then(($canvas: JQuery) => {
const { $elTop, $elBottom } = getElementEdges($canvas);
const { screenTop, screenBottom } = getScreenEdges();

const screenCenter = screenTop + (screenBottom - screenTop) / 2;
const screenCenter = screenTop + (screenBottom - screenTop) / 2;

expect($elTop).to.equal(screenCenter - ($canvas.outerHeight() / 2));
expect($elBottom).to.equal(screenCenter + ($canvas.outerHeight() / 2));
});
expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
});
});

it('scrolls the element to the top of the viewport', () => {
cy.get('#action-canvas').realHover({ scrollBehavior: 'top' }).then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();
it("scrolls the element to the top of the viewport", () => {
cy.get("#action-canvas")
.realHover({ scrollBehavior: "top" })
.then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();

expect($elTop).to.equal(screenTop);
});
expect($elTop).to.equal(screenTop);
});
});

it('scrolls the element to the bottom of the viewport', () => {
cy.get('#action-canvas').realHover({ scrollBehavior: 'bottom' }).then(($canvas: JQuery) => {
const { $elBottom } = getElementEdges($canvas);
const { screenBottom } = getScreenEdges();
it("scrolls the element to the bottom of the viewport", () => {
cy.get("#action-canvas")
.realHover({ scrollBehavior: "bottom" })
.then(($canvas: JQuery) => {
const { $elBottom } = getElementEdges($canvas);
const { screenBottom } = getScreenEdges();

expect($elBottom).to.equal(screenBottom);
});
expect($elBottom).to.equal(screenBottom);
});
});

it('scrolls the element to the nearest edge of the viewport', () => {
cy.window().scrollTo('bottom');
it("scrolls the element to the nearest edge of the viewport", () => {
cy.window().scrollTo("bottom");

cy.get('#action-canvas').realHover({ scrollBehavior: 'nearest' }).then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();
cy.get("#action-canvas")
.realHover({ scrollBehavior: "nearest" })
.then(($canvas: JQuery) => {
const { $elTop } = getElementEdges($canvas);
const { screenTop } = getScreenEdges();

expect($elTop).to.equal(screenTop);
});
expect($elTop).to.equal(screenTop);
});

cy.window().scrollTo('top');
cy.window().scrollTo("top");

cy.get('#action-canvas').realHover({ scrollBehavior: 'nearest' }).then(($canvas: JQuery) => {
const { $elBottom } = getElementEdges($canvas);
const { screenBottom } = getScreenEdges();
cy.get("#action-canvas")
.realHover({ scrollBehavior: "nearest" })
.then(($canvas: JQuery) => {
const { $elBottom } = getElementEdges($canvas);
const { screenBottom } = getScreenEdges();

expect($elBottom).to.equal(screenBottom);
});
expect($elBottom).to.equal(screenBottom);
});
});
});
});

describe('iframe behavior', () => {
describe("iframe behavior", () => {
beforeEach(() => {
cy.visit('./cypress/fixtures/iframe-page.html');
cy.visit("./cypress/fixtures/iframe-page.html");
});

it('hovers elements inside iframes', () => {
cy.get('iframe').then(($firstIframe) => {
return cy.wrap($firstIframe.contents().find('iframe'));
}).then(($secondIframe) => {
return cy.wrap($secondIframe.contents().find('body'));
}).within(() => {
cy.get('#target').then(($target) => {
expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
});

cy.get('#target').realHover().then(($target) => {
expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
it("hovers elements inside iframes", () => {
cy.get("iframe")
.then(($firstIframe) => {
return cy.wrap($firstIframe.contents().find("iframe"));
})
.then(($secondIframe) => {
return cy.wrap($secondIframe.contents().find("body"));
})
.within(() => {
cy.get("#target").then(($target) => {
expect($target.css("background-color")).to.equal("rgb(0, 128, 0)");
});

cy.get("#target")
.realHover()
.then(($target) => {
expect($target.css("background-color")).to.equal(
"rgb(255, 192, 203)"
);
});
});
});
});

it('hovers elements inside transformed iframes', () => {
cy.get('iframe').then(($firstIframe) => {
$firstIframe.css('transform', 'scale(.5)');
return cy.wrap($firstIframe.contents().find('iframe'));
}).then(($secondIframe) => {
$secondIframe.css('transform', 'scale(.75)');
return cy.wrap($secondIframe.contents().find('body'));
}).within(() => {
cy.get('#target').then(($target) => {
expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
it("hovers elements inside transformed iframes", () => {
cy.get("iframe")
.then(($firstIframe) => {
$firstIframe.css("transform", "scale(.5)");
return cy.wrap($firstIframe.contents().find("iframe"));
})
.then(($secondIframe) => {
$secondIframe.css("transform", "scale(.75)");
return cy.wrap($secondIframe.contents().find("body"));
})
.within(() => {
cy.get("#target").then(($target) => {
expect($target.css("background-color")).to.equal("rgb(0, 128, 0)");
});

cy.get("#target")
.realHover()
.then(($target) => {
expect($target.css("background-color")).to.equal(
"rgb(255, 192, 203)"
);
});
});

cy.get('#target').realHover().then(($target) => {
expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
});
});
});
});
4 changes: 3 additions & 1 deletion cypress/integration/press.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ describe("cy.realPress", () => {
});

it("registers keypress events using", () => {
cy.get("input[name=q]").focus();

cy.realPress("c");
cy.realPress("y");
cy.realPress("p");
Expand Down Expand Up @@ -73,7 +75,7 @@ describe("cy.realPress", () => {
});
});

context.only("Keyboard a11y testing", () => {
context("Keyboard a11y testing", () => {
it("Dispatches beforeinput and keypress event for Enter", () => {
cy.visit("https://w3c.github.io/uievents/tools/key-event-viewer");
cy.realPress("Enter");
Expand Down
19 changes: 2 additions & 17 deletions cypress/integration/touch.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe("cy.realTouch", () => {
.realTouch({ x: 170, y: 165 });
});

it("touches with a default radius of 1", { retries: 4 }, (done) => {
it("touches with a default radius of 1", { retries: 4 }, (done) => {
cy.get(".action-btn")
.then(($button) => {
$button.get(0).addEventListener("pointerdown", (event) => {
Expand All @@ -48,7 +48,7 @@ describe("cy.realTouch", () => {
.realTouch();
});

it("touches with a custom radius", { retries: 4 }, (done) => {
it("touches with a custom radius", { retries: 4 }, (done) => {
cy.get(".action-btn")
.then(($button) => {
$button.get(0).addEventListener("pointerdown", (event) => {
Expand All @@ -71,19 +71,4 @@ describe("cy.realTouch", () => {
})
.realTouch({ radiusX: 5, radiusY: 7 });
});

it("touches using provided 0 for one of the axis", { retries: 4 }, (done) => {
cy.get(".action-btn")
.then(($button) => {
$button.get(0).addEventListener("pointerdown", (event) => {
const rect = (
event.currentTarget as HTMLElement
).getBoundingClientRect();
expect(event.clientX).to.be.closeTo(rect.left - 5, 5);
expect(event.clientY).to.be.closeTo(rect.top, 5);
done();
});
})
.realTouch({ x: -5, y: 0, radius: 10 });
});
});
3 changes: 2 additions & 1 deletion cypress/integration/type.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ describe("cy.realType", () => {
cy.visit("https://google.com?hl=en");
});

it("hovers and applies styles from :hover pseudo-class", () => {
it("types text into googles main search inptu", () => {
cy.realType("cypress can produce real events");
cy.get("input[name=q]").should(
"have.value",
Expand All @@ -18,6 +18,7 @@ describe("cy.realType", () => {
});

it("supports cypress's keys shortcuts", () => {
cy.get("input[name=q]").focus()
cy.realType("Something{backspace}{backspace}")
cy.get("input[name=q]").should("have.value", "Somethi");
})
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
"license": "MIT",
"scripts": {
"build": "tsc",
"lint": "yarn eslint './{src,cypress}/**/*.ts'",
"release": "yarn build && yarn version && node scripts/release.js && yarn publish dist",
"semantic-release": "semantic-release"
},
"peerDependencies": {
"cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x"
"cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.8.2",
"@typescript-eslint/parser": "^4.8.2",
"cypress": "^8.0.0",
"cypress": "^9.0.0",
"eslint": "^7.14.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-no-only-tests": "^2.4.0",
"fs-extra": "^9.0.1",
"semantic-release": "^17.3.0",
"typedoc": "^0.20.36",
"typedoc": "^0.22.10",
"typedoc-plugin-markdown": "^3.0.11",
"typescript": "^4.1.2"
},
Expand Down
Loading

0 comments on commit ea1b4e6

Please sign in to comment.