-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/near/neardevhub-widgets int…
…o patch/285-solution-posts
- Loading branch information
Showing
16 changed files
with
1,178 additions
and
37 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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 |
---|---|---|
@@ -0,0 +1,124 @@ | ||
const { test, expect } = require("@playwright/test"); | ||
|
||
test.describe("Wallet is connected", () => { | ||
test.use({ | ||
storageState: "playwright-tests/storage-states/wallet-connected.json", | ||
}); | ||
|
||
test.describe("AddonsConfigurator", () => { | ||
const baseUrl = | ||
"/devgovgigs.near/widget/app?page=community.configuration&handle=devhub-test"; | ||
// const dropdownSelector = | ||
// 'input[data-component="near/widget/DIG.InputSelect"]'; | ||
// const addButtonSelector = "button.btn-success:has(i.bi.bi-plus)"; | ||
// const toggleButtonSelector = 'button[role="switch"]'; | ||
// const moveUpButtonSelector = "button.btn-secondary:has(i.bi.bi-arrow-up)"; | ||
// const removeButtonSelector = | ||
// "button.btn-outline-danger:has(i.bi.bi-trash-fill)"; | ||
|
||
test("Addons configuration section comes up on load", async ({ page }) => { | ||
await page.goto(baseUrl); | ||
|
||
const addonsConfiguratorSelector = 'span:has-text("Add-Ons")'; | ||
|
||
await page.waitForSelector(addonsConfiguratorSelector, { | ||
state: "visible", | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
// NOTE: | ||
// The below tests need some more work. | ||
// We are using the DIG component, which is essentially a Radix Select field. | ||
// Radix select renders as an input and requires to be focused, then value inputted, before the option can be selected. | ||
// I was having trouble making this work. | ||
|
||
// test('Can add an addon to the list', async ({ page }) => { | ||
// await page.goto(baseUrl); | ||
|
||
// await page.click(dropdownSelector); | ||
// await page.fill(dropdownSelector, 'Wiki'); | ||
// await page.click(`li:has-text('Wiki')`); | ||
|
||
// await page.waitForSelector(addButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(addButtonSelector); | ||
|
||
// const addedAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]'); // You will need to fill this in | ||
// expect(addedAddon).toBeTruthy(); | ||
// }); | ||
|
||
// test('Can reorder addons in the list', async ({ page }) => { | ||
// await page.goto(baseUrl); | ||
|
||
// await page.click(dropdownSelector); | ||
// await page.inputValue(dropdownSelector, 'Wiki'); | ||
// await page.click(`li:has-text('Wiki')`); | ||
|
||
// await page.waitForSelector(addButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(addButtonSelector); | ||
|
||
// await page.inputValue(dropdownSelector, 'telegram'); | ||
// await page.click(addButtonSelector); | ||
|
||
// await page.waitForSelector(moveUpButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(moveUpButtonSelector); | ||
|
||
// const firstAddon = await page.$('input[type="text"].form-control[disabled][value="Telegram"]'); | ||
// const secondAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]'); | ||
// expect(firstAddon).toBeTruthy(); | ||
// expect(secondAddon).toBeTruthy(); | ||
// }); | ||
|
||
// test('Can remove an addon from the list', async ({ page }) => { | ||
// await page.goto(baseUrl); | ||
|
||
// await page.inputValue(dropdownSelector, 'Wiki'); | ||
|
||
// await page.waitForSelector(addButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(addButtonSelector); | ||
|
||
// await page.waitForSelector(removeButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(removeButtonSelector); | ||
|
||
// const removedAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]'); // You will need to fill this in | ||
// expect(removedAddon).toBeNull(); | ||
// }); | ||
|
||
// test('Can toggle to disable an addon', async ({ page }) => { | ||
// await page.goto(baseUrl); | ||
|
||
// await page.inputValue(dropdownSelector, 'Wiki'); | ||
// await page.waitForSelector(addButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(addButtonSelector); | ||
|
||
// await page.waitForSelector(toggleButtonSelector, { | ||
// state: "visible", | ||
// }); | ||
|
||
// await page.click(toggleButtonSelector); | ||
|
||
// const toggleState = await page.getAttribute(toggleButtonSelector, 'aria-checked'); | ||
// expect(toggleState).toBe('false'); | ||
// }); | ||
// }); | ||
|
||
// }); |
This file contains 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
This file contains 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
This file contains 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 |
---|---|---|
@@ -0,0 +1,99 @@ | ||
const TextInput = ({ | ||
className, | ||
format, | ||
inputProps: { className: inputClassName, ...inputProps }, | ||
key, | ||
label, | ||
multiline, | ||
onChange, | ||
placeholder, | ||
type, | ||
value, | ||
skipPaddingGap, | ||
style, | ||
...otherProps | ||
}) => { | ||
const typeAttribute = | ||
type === "text" || type === "password" || type === "number" ? type : "text"; | ||
|
||
const renderedLabels = [ | ||
(label?.length ?? 0) > 0 ? ( | ||
<span className="d-inline-flex gap-1 text-wrap"> | ||
<span>{label}</span> | ||
|
||
{inputProps.required ? <span className="text-danger">*</span> : null} | ||
</span> | ||
) : null, | ||
|
||
format === "markdown" ? ( | ||
<i class="bi bi-markdown text-muted" title="Markdown" /> | ||
) : null, | ||
|
||
format === "comma-separated" ? ( | ||
<span | ||
className="d-inline-flex align-items-center text-muted" | ||
style={{ fontSize: 12 }} | ||
> | ||
{format} | ||
</span> | ||
) : null, | ||
|
||
(inputProps.max ?? null) !== null ? ( | ||
<span className="d-inline-flex text-muted" style={{ fontSize: 12 }}>{`${ | ||
value?.length ?? 0 | ||
} / ${inputProps.max}`}</span> | ||
) : null, | ||
].filter((label) => label !== null); | ||
|
||
return ( | ||
<div | ||
className={[ | ||
"d-flex flex-column flex-1 align-items-start justify-content-evenly", | ||
skipPaddingGap ? "" : "gap-1 p-2", | ||
className ?? "", | ||
].join(" ")} | ||
style={style} | ||
{...otherProps} | ||
> | ||
{renderedLabels.length > 0 ? ( | ||
<span | ||
className="d-flex justify-content-between align-items-center gap-3 w-100" | ||
id={key} | ||
> | ||
{renderedLabels.map((label) => label)} | ||
</span> | ||
) : null} | ||
|
||
{!multiline ? ( | ||
<div className="input-group"> | ||
{inputProps.prefix && ( | ||
<span className="input-group-text">{inputProps.prefix}</span> | ||
)} | ||
<input | ||
aria-describedby={key} | ||
aria-label={label} | ||
className={["form-control border border-2", inputClassName].join( | ||
" " | ||
)} | ||
type={typeAttribute} | ||
{...{ onChange, placeholder, value, ...inputProps }} | ||
/> | ||
</div> | ||
) : ( | ||
<textarea | ||
aria-describedby={key} | ||
aria-label={label} | ||
className={["form-control border border-2", inputClassName].join(" ")} | ||
placeholder={ | ||
placeholder + (inputProps.required ? " ( required )" : "") | ||
} | ||
style={{ resize: inputProps.resize ?? "vertical" }} | ||
type={typeAttribute} | ||
{...{ onChange, placeholder, value, ...inputProps }} | ||
/> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
return TextInput(props); |
This file contains 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
Oops, something went wrong.