Test/add custom token

source/components/AssetItem/index.jsx

@@ -94,6 +94,8 @@ const AssetItem = ({
         buttonVariant="danger"
         onClick={handleRemoveAssetDisplay}
         onClose={handleModalClose}
+        cancelButtonProps={{ 'data-testid': 'cancel-button' }}
+        submitButtonProps={{ 'data-testid': 'delete-token-button' }}
       />
       <TokenIcon className={classes.image} logo={logo} alt={name} symbol={symbol} />
       <div className={classes.leftContainer}>
@@ -155,6 +157,7 @@ const AssetItem = ({
           <img
             onClick={() => setOpenDelete(true)}
             alt="delete-token"
+            data-testid="delete-token-button"
             src={DeleteIcon}
           />
         </div>

source/views/Extension/Views/AddToken/components/SearchToken.jsx

@@ -60,6 +60,7 @@ const SearchToken = ({ handleChangeSelectedToken, handleChangeTab }) => {
           <TextInput
             type="text"
             value={search}
+            data-testid="token-search-input"
             startIcon={(
               <InputAdornment position="start">
                 <SearchIcon />
@@ -94,7 +95,7 @@ const SearchToken = ({ handleChangeSelectedToken, handleChangeTab }) => {
                             && <img src={VerifiedImg} className={classes.verified} />
                           }
                         </div>
-                        <Typography variant="h4">{ft.name} ({ft.symbol})</Typography>
+                        <Typography variant="h4" data-testid={`custom-token-${ft.name}`}>{ft.name} ({ft.symbol})</Typography>
                       </div>
                     ))}
                     <div className={classes.poweredByDab}>
@@ -112,6 +113,7 @@ const SearchToken = ({ handleChangeSelectedToken, handleChangeTab }) => {
                       style={{ marginTop: 6 }}
                       value={t('addToken.addCustomToken')}
                       onClick={() => handleChangeTab(1)}
+                      data-testid="add-custom-token-button"
                     />
                     <div className={classes.poweredByDab}>
                       <PoweredByDab />

source/views/Extension/Views/AddToken/hooks/useSteps.jsx

@@ -21,8 +21,8 @@ const useSteps = () => {
   const handleChangeStep = (index) => setStep(index);
   const handleClose = () => navigator.navigate('home');
 
-  const leftButton = (onClick) => <LinkButton value={t('common.back')} onClick={onClick} startIcon={BackIcon} />;
-  const rightButton = <LinkButton value={t('common.close')} onClick={() => handleClose()} />;
+  const leftButton = (onClick) => <LinkButton value={t('common.back')} onClick={onClick} startIcon={BackIcon} data-testid='back-button' />;
+  const rightButton = <LinkButton value={t('common.close')} data-testid='close-button' onClick={() => handleClose()} />;
 
   const steps = [
     {

tests/e2e/custom-token.test.js

@@ -0,0 +1,87 @@
+// Clicks
+async function pressKey(page, key, numberOfPresses = 4) {
+  const array = Array.from(Array(numberOfPresses).keys());
+
+  // eslint-disable-next-line no-unused-vars
+  for (const _ of array) {
+    await page.keyboard.press(key);
+  }
+}
+
+const clickFoundElement = async (page, testId) => {
+  const element = await page.getByTestId(testId, true);
+  await element.click();
+
+  return element;
+};
+
+const addButtonClick = (page) => clickFoundElement(page, 'add-button');
+const addCustomTokenButtonClick = (page) => clickFoundElement(page, 'add-custom-token-button');
+const tokenSearchInputClick = (page) => clickFoundElement(page, 'token-search-input');
+const searchTabClick = (page) => clickFoundElement(page, 'tab-item-Search');
+const foundTokenClick = (page, name) => clickFoundElement(page, `custom-token-${name}`);
+const deleteTokenButtonClick = (page) => clickFoundElement(page, 'delete-token-button');
+const cancelButtonClick = (page) => clickFoundElement(page, 'cancel-button');
+const closeButtonClick = (page) => clickFoundElement(page, 'close-button');
+const backButtonClick = (page) => clickFoundElement(page, 'back-button');
+
+describe('Add Custom NFT', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await setupChrome();
+
+    // Importing and unlocking the accoun
+    page = await utils.createNewPage(browser);
+
+    await optionsPageUtils.importAccount(page, secrets.seedphrase, secrets.password);
+    await optionsPageUtils.unlock(page, secrets.password);
+
+    await page.close();
+  });
+
+  beforeEach(async () => {
+    page = await utils.createNewPage(browser);
+    await page.goto(chromeData.popupUrl);
+    await addButtonClick(page);
+    await addCustomTokenButtonClick(page);
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  test('canceling custom token adding', async () => {
+    await closeButtonClick(page);
+    await addButtonClick(page);
+  });
+
+  test('back to the main flow', async () => {
+    await backButtonClick(page);
+    await addButtonClick(page);
+  });
+
+  test('checking search custom token flow', async () => {
+    await tokenSearchInputClick(page);
+    await page.keyboard.type('pp');
+    await addCustomTokenButtonClick(page);
+    await page.waitForTestIdSelector('token-canister-id-input');
+
+    await searchTabClick(page);
+    await tokenSearchInputClick(page);
+    await page.keyboard.type('d');
+    await pressKey(page, 'Backspace', 1);
+    await page.keyboard.type('d');
+    await foundTokenClick(page, 'BOXY DUDE');
+    await addButtonClick(page);
+    await page.waitForTestIdSelector('asset-name-BOX Token');
+    await deleteTokenButtonClick(page);
+    await deleteTokenButtonClick(page);
+    await page.waitForTestIdSelector('asset-name-BOX Token', { hidden: true });
+  });
+});