Test/Add custom NFT Collection

source/views/Extension/Views/AddNFT/components/CustomNFT.jsx

@@ -83,7 +83,7 @@ const CustomNFT = ({ handleChangeSelectedNFT }) => {
                 onChange={handleChangeId}
                 type="text"
                 error={invalidToken}
-                data-testid="token-canister-id-input"
+                data-testid="nft-canister-id-input"
               />
             )}
           />
@@ -99,7 +99,7 @@ const CustomNFT = ({ handleChangeSelectedNFT }) => {
                 onClick={() => setDialogOpen(true)}
                 shadow
                 className={classes.select}
-                data-testid="token-standard-select"
+                data-testid="nft-standard-select"
               />
             )}
           />
@@ -121,7 +121,7 @@ const CustomNFT = ({ handleChangeSelectedNFT }) => {
                 type="danger"
                 title={(
                   <div>
-                    <span data-testid="token-error">
+                    <span data-testid="nft-canister-error">
                       {isInvalidCanisterError
                         ? t('addNFT.invalidCanisterTokenError')
                         : isNFTNotSupportedError

source/views/Extension/Views/AddNFT/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')} onClick={handleClose} data-testid="close-button"/>;
 
   const steps = [
     {

tests/e2e/add-custom-nft.test.js

@@ -0,0 +1,88 @@
+const CONTINUE_BUTTON_DISABLED_TEST_ID = '[data-testid="continue-button"][disabled]';
+
+// 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 addCustomNFTButtonClick = (page) => clickFoundElement(page, 'add-custom-nft-button');
+const nftCanisterIDInputClick = (page) => clickFoundElement(page, 'nft-canister-id-input');
+const closeButtonClick = (page) => clickFoundElement(page, 'close-button');
+const backButtonClick = (page) => clickFoundElement(page, 'back-button');
+const continueButtonClick = (page) => clickFoundElement(page, 'continue-button');
+const addButtonClick = (page) => clickFoundElement(page, 'add-button');
+const nftsTabClick = (page) => clickFoundElement(page, 'tab-item-NFTs');
+
+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 addCustomNFTButtonClick(page);
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  test('canceling custom nft adding', async () => {
+    await closeButtonClick(page);
+    await addButtonClick(page);
+  });
+
+  test('back to the main flow', async () => {
+    await backButtonClick(page);
+    await addButtonClick(page);
+  });
+
+  test('checking that continue button disabled if entered canister is wrong', async () => {
+    const canisterIdInput = await nftCanisterIDInputClick(page);
+    await canisterIdInput.type(secrets.wrongNFTCanisterID);
+    await page.waitForSelector(CONTINUE_BUTTON_DISABLED_TEST_ID);
+  });
+
+  test('checking that continue button disabled if canister input is empty', async () => {
+    await nftCanisterIDInputClick(page);
+    await page.keyboard.type('1');
+    await pressKey(page, 'Backspace', 1);
+    await page.waitForSelector(CONTINUE_BUTTON_DISABLED_TEST_ID);
+  });
+  test('adding the custom nft collection sucessfully', async () => {
+    const canisterIdInput = await nftCanisterIDInputClick(page);
+    await canisterIdInput.type(secrets.nftCanisterID);
+    await continueButtonClick(page);
+    await addButtonClick(page);
+    await nftsTabClick(page);
+  });
+});

tests/e2e/settings-contacts.test.js

@@ -88,13 +88,13 @@ describe('Contacts', () => {
   const errorText = 'Incorrect ID format.';
 
   const correctData = [
-    { handle: secrets.sub4PrincipalId, name: 'Subaccount PrincipalID' },
+    { handle: secrets.sub5PrincipalId, name: 'Subaccount PrincipalID' },
     { handle: secrets.subAccountId, name: 'Subaccount AccountID' },
     { handle: secrets.icnsName, name: 'Subaccount ICNS' },
   ];
 
   const wrongData = [
-    { handle: secrets.sub4PrincipalId, errorMessage: 'This contact already exists under "Subaccount PrincipalID".' },
+    { handle: secrets.sub5PrincipalId, errorMessage: 'This contact already exists under "Subaccount PrincipalID".' },
     { handle: secrets.wrongId, errorMessage: errorText },
     { handle: secrets.wrongAccountId, errorMessage: errorText },
     { handle: secrets.wrongICNSName, errorMessage: errorText },

tests/setup/jestSetup.js

@@ -14,6 +14,7 @@ global.secrets = {
   subAccountId: process.env.SUB_ACCOUNT_ID,
   subPrincipalId: process.env.SUB_PRINCIPAL_ID,
   sub4PrincipalId: process.env.SUB4_PRINCIPAL_ID,
+  sub5PrincipalId: process.env.SUB5_PRINCIPAL_ID,
   icnsName: process.env.ICNS_NAME,
   password: process.env.PASSWORD,
   dustCanisterId: process.env.DUST_CANISTER_ID,
@@ -30,6 +31,8 @@ global.secrets = {
   hostName: process.env.HOST_NAME,
   canisterID: process.env.CANISTER_ID,
   wrongHostName: process.env.WRONG_HOST_NAME,
+  nftCanisterID: process.env.NFT_CANISTER_ID,
+  wrongNFTCanisterID: process.env.NFT_WRONG_CANISTER_ID,
 };
 
 const grantRawPermissions = async (context, url, permissions) => {