Initial version of Cypress component test (#3079)

This commit is contained in:
Erik Jan de Wit 2022-08-12 21:55:27 +02:00 committed by GitHub
parent 63b8f08be0
commit fe6d4a1c76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 0 deletions

View file

@ -16,9 +16,11 @@ export default defineConfig({
videoCompression: false, videoCompression: false,
numTestsKeptInMemory: 30, numTestsKeptInMemory: 30,
videoUploadOnPasses: false, videoUploadOnPasses: false,
retries: { retries: {
runMode: 3, runMode: 3,
}, },
e2e: { e2e: {
setupNodeEvents(on) { setupNodeEvents(on) {
on( on(
@ -48,4 +50,11 @@ export default defineConfig({
slowTestThreshold: 30000, slowTestThreshold: 30000,
specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}", specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
}, },
component: {
devServer: {
framework: "react",
bundler: "vite",
},
},
}); });

View file

@ -0,0 +1,30 @@
import { mount } from "cypress/react";
import { ConfirmDialogModal } from "../../src/components/confirm-dialog/ConfirmDialog";
describe("ConfirmDialogModal", () => {
const bodySelector = "#pf-modal-part-2";
it("should mount", () => {
const toggle = cy.spy().as("toggleDialogSpy");
const confirm = cy.spy().as("onConfirmSpy");
mount(
<ConfirmDialogModal
continueButtonLabel="Yes"
cancelButtonLabel="No"
titleKey="Hello"
open
toggleDialog={toggle}
onConfirm={confirm}
>
Some text
</ConfirmDialogModal>
);
cy.get(bodySelector).should("have.text", "Some text");
cy.findByTestId("confirm").click();
cy.get("@onConfirmSpy").should("have.been.called");
cy.findAllByTestId("cancel").click();
cy.get("@toggleDialogSpy").should("have.been.called");
});
});

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

View file

@ -0,0 +1,16 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
import "@patternfly/react-core/dist/styles/base.css";
import "./commands";