Skip to content

Commit

Permalink
Better variable names, include formfields directly in typescript example
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitbadala
amitbadala committed Oct 31, 2023
1 parent 259699a commit 492fee9
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 98 deletions.
2 changes: 1 addition & 1 deletion examples/for-tests/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -669,7 +669,7 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
function getFormFields() {
if (localStorage.getItem("SHOW_INCORRECT_FIELDS") === "YES") {
return incorrectFormFields;
} else if (localStorage.getItem("SHOW_DEFAULT_FIELDS") === "YES") {
} else if (localStorage.getItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES") === "YES") {
return formFieldsWithDefault;
} else if (localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES") {
return customFields;
Expand Down
31 changes: 26 additions & 5 deletions test/end-to-end/signup.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ describe("SuperTokens SignUp", function () {
describe("Signup default value for fields test", function () {
beforeEach(async function () {
// set cookie and reload which loads the form fields with default values
await page.evaluate(() => window.localStorage.setItem("SHOW_DEFAULT_FIELDS", "YES"));
await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES", "YES"));

await page.reload({
waitUntil: "domcontentloaded",
Expand Down Expand Up @@ -480,14 +480,35 @@ describe("SuperTokens SignUp", function () {

// input field default value
const countryInput = await getInputField(page, "country");
const defaultCountry = await countryInput.evaluate((f) => f.value);
assert.strictEqual(defaultCountry, updatedFields["country"]);
const updatedCountry = await countryInput.evaluate((f) => f.value);
assert.strictEqual(updatedCountry, updatedFields["country"]);

// dropdown default value is also getting set correctly
const ratingsDropdown = await waitForSTElement(page, "select");
const defaultRating = await ratingsDropdown.evaluate((f) => f.value);
assert.strictEqual(defaultRating, updatedFields["ratings"]);
const updatedRating = await ratingsDropdown.evaluate((f) => f.value);
assert.strictEqual(updatedRating, updatedFields["ratings"]);
});

// TODO
// it("Check if default values are getting sent in signup-payload", async function () {
// const updatedFields = {
// country: "USA",
// ratings: "good",
// };

// await setInputValues(page, [{ name: "country", value: updatedFields["country"] }]);
// await setSelectDropdownValue(page, 'select[name="ratings"]', updatedFields["ratings"]);

// // input field default value
// const countryInput = await getInputField(page, "country");
// const updatedCountry = await countryInput.evaluate((f) => f.value);
// assert.strictEqual(updatedCountry, updatedFields["country"]);

// // dropdown default value is also getting set correctly
// const ratingsDropdown = await waitForSTElement(page, "select");
// const updatedRating = await ratingsDropdown.evaluate((f) => f.value);
// assert.strictEqual(updatedRating, updatedFields["ratings"]);
// });
});
});

Expand Down
185 changes: 93 additions & 92 deletions test/with-typescript/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,97 +326,6 @@ function getRecipeList() {
];
}

const formFieldsForSignUp = [
{
id: "email",
label: "Your Email",
placeholder: "Your work email",
},
{
id: "name",
label: "Full name",
placeholder: "First name and last name",
},
{
id: "age",
label: "Your age",
placeholder: "How old are you?",
validate: async (value) => {
if (parseInt(value) > 18) {
return undefined;
}

return "You must be over 18 to register";
},
},
{
id: "country",
label: "Your Country",
placeholder: "Where do you live?",
optional: true,
},
];

const customFormFieldsWithDefault = [
{
id: "terms",
label: "",
optional: false,
inputComponent: (inputProps) => (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "left",
}}>
<input
name={inputProps.name}
type="checkbox"
onChange={(e) => {
if (inputProps.onChange) {
inputProps.onChange(e.target.checked.toString());
}
}}></input>
<span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
</div>
),
validate: async (value) => {
if (value === "true") {
return undefined;
}
return "Please check Terms and conditions";
},
},
{
id: "ratings",
label: "Ratings",
getDefaultValue: () => "best",
inputComponent: (inputProps) => (
<select
value={inputProps.value}
name={inputProps.name}
onChange={(e) => {
if (inputProps.onChange) {
inputProps.onChange(e.target.value.toString());
}
}}
placeholder="Add Ratings">
<option value="" disabled hidden>
Select an option
</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
),
optional: true,
},
];

const getFormFieldsForSignUp = () => {
return localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES" ? customFormFieldsWithDefault : formFieldsForSignUp;
};

function getEmailPasswordConfigs() {
return EmailPassword.init({
resetPasswordUsingTokenFeature: {
Expand All @@ -435,7 +344,99 @@ function getEmailPasswordConfigs() {
style: theme.style,
privacyPolicyLink: "https://supertokens.io/legal/privacy-policy",
termsOfServiceLink: "https://supertokens.io/legal/terms-and-conditions",
formFields: getFormFieldsForSignUp(),
formFields: [
{
id: "email",
label: "Your Email",
placeholder: "Your work email",
},
{
id: "name",
label: "Full name",
placeholder: "First name and last name",
},
{
id: "age",
label: "Your age",
placeholder: "How old are you?",
validate: async (value) => {
if (parseInt(value) > 18) {
return undefined;
}

return "You must be over 18 to register";
},
},
{
id: "country",
label: "Your Country",
placeholder: "Where do you live?",
optional: true,
},
{
id: "terms",
label: "",
optional: false,
inputComponent: (inputProps) => (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "left",
}}>
<input
name={inputProps.name}
type="checkbox"
onChange={(e) => {
if (inputProps.onChange) {
inputProps.onChange(e.target.checked.toString());
}
}}></input>
<span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
</div>
),
validate: async (value) => {
if (value === "true") {
return undefined;
}
return "Please check Terms and conditions";
},
},
{
id: "select",
label: "Select",
getDefaultValue: () => "option 2",
inputComponent: (inputProps) => (
<select
onBlur={(e) => {
if (inputProps.onInputBlur) {
inputProps.onInputBlur(e.target.value);
}
}}
onFocus={(e) => {
if (inputProps.onInputFocus) {
inputProps.onInputFocus(e.target.value);
}
}}
value={inputProps.value}
name={inputProps.name}
onChange={(e) => {
if (inputProps.onChange) {
inputProps.onChange(e.target.value);
}
}}
placeholder="Select option">
<option value="" disabled hidden>
Select an option
</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
),
optional: true,
},
],
},
},

Expand Down

0 comments on commit 492fee9

Please sign in to comment.