@octopusdeploy/design-system-components
Version:
The design systems component library.
120 lines (119 loc) • 5.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const react_2 = require("react");
const vitest_1 = require("vitest");
const Text_1 = require("../Text");
(0, vitest_1.describe)("<Text />", () => {
(0, vitest_1.test)("has title attribute when using showValueAsTitleAttribute", () => {
// This ensures people can still preview long variables in our variable editor using a mouse-over via the title element.
const value = "Put 'em wayyy up inside there, as far as they can go Morty.";
const text = renderText({ value, showValueAsTitleAttribute: true });
text.assertHasTitle(value);
});
(0, vitest_1.test)("has placeholder as placeholder", () => {
const placeholder = "You pass butter.";
const text = renderText({ placeholder });
text.assertHasPlaceholder(placeholder);
});
(0, vitest_1.test)("has autoComplete set to off by default", () => {
const text = renderText({});
text.assertHasAutocompleteValue("off");
});
(0, vitest_1.test)("has a name attribute that doesn't include autofill keywords by default", () => {
// Regression test for: https://github.com/OctopusDeploy/Issues/issues/6464
//
// TL;DR - Chrome is a little too helpful.
//
// Chrome likes to help out and autocomplete values where possible.
// Chrome will autocomplete any <input name="value" /> where "value" is in the
// autofill spec e.g:
//
// <input name="name" />
// <input name="address" />
// <input name="username" />
// <input name="password" />
//
// It's really quite good at it.
//
// When a name attribute matches the spec, Chrome will:
// - suggest autofill results for the input.
// - ignore the autocomplete="off" attribute if present. Chrome knows what you
// meant, and it's here to help!
// - help autofill values _similar_ to the spec, like "name123" or "address42".
//
// Where would we be without you, Chrome?
//
// Autofill spec: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-name
// Chrome autofill docs: https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
// We don't want this behavior by default.
// By all means we should be able to opt in, but this test ensures that we don't
// get autofill unless we asked for it by explicitly assigning a name from the spec.
const text = renderText({});
text.assertNameIsNot("name");
text.assertNameIsNot("address");
text.assertNameIsNot("username");
text.assertNameIsNot("password");
});
(0, vitest_1.test)("has autoComplete set to desired value", () => {
const text = renderText({ autoComplete: "new-password" });
text.assertHasAutocompleteValue("new-password");
});
(0, vitest_1.describe)("validation", () => {
it("calls validate props when the user types and renders the returned error", async () => {
const text = renderText({ value: "" });
await text.setTextValue("test");
text.validateShouldHaveBeenCalledWith("test");
text.shouldShowValidateErrorMessage();
});
it("does not call validate props when the component is mounted", () => {
const text = renderText({});
text.validateShouldNotHaveBeenCalled();
text.shouldNotShowValidateErrorMessage();
});
});
});
const textAccessibleName = "test input";
function renderText({ value = "test", showValueAsTitleAttribute = false, placeholder, autoComplete }) {
const validate = vitest_1.vi.fn((value) => "Mock error message");
function TestWrapper() {
const [textValue, setTextValue] = (0, react_2.useState)(value);
return (0, jsx_runtime_1.jsx)(Text_1.Text, { value: textValue, showValueAsTitleAttribute: showValueAsTitleAttribute, placeholder: placeholder, autoComplete: autoComplete, onChange: setTextValue, validate: validate, accessibleName: textAccessibleName });
}
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestWrapper, {}));
return getTextInteractions(validate);
}
function getTextInteractions(validate) {
const interactions = {
assertHasTitle: (title) => {
(0, vitest_1.expect)(react_1.screen.getByTitle(title)).toBeInTheDocument();
},
assertHasPlaceholder: (placeholder) => {
(0, vitest_1.expect)(react_1.screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
},
assertHasAutocompleteValue: (value) => {
testing_library_1.domQueries.getTextInput(textAccessibleName).assertAutocompleteValue(value);
},
assertNameIsNot: (name) => {
testing_library_1.domQueries.getTextInput(textAccessibleName).assertNameIsNot(name);
},
setTextValue: async (value) => {
await testing_library_1.domQueries.getTextInput(textAccessibleName).replaceText(value);
},
validateShouldHaveBeenCalledWith: (value) => {
(0, vitest_1.expect)(validate).toHaveBeenCalledWith(value);
},
validateShouldNotHaveBeenCalled: () => {
(0, vitest_1.expect)(validate).not.toHaveBeenCalled();
},
shouldShowValidateErrorMessage: () => {
(0, vitest_1.expect)(react_1.screen.getByText("Mock error message")).toBeInTheDocument();
},
shouldNotShowValidateErrorMessage: () => {
(0, vitest_1.expect)(react_1.screen.queryByText("Mock error message")).not.toBeInTheDocument();
},
};
return interactions;
}