Merge branch 'main' of https://github.com/ensdomains/ens-app-v3 into …

…fet-1603
ensdomains · Nov 19, 2024 · 28daabc · 28daabc
2 parents 7809f08 + bc42d4f
commit 28daabc
Show file tree

Hide file tree

Showing 63 changed files with 2,194 additions and 705 deletions.
diff --git a/.github/workflows/pages-deployment.yaml b/.github/workflows/pages-deployment.yaml
@@ -70,14 +70,16 @@ jobs:
           SITEMAP_GRAPH_KEY: ${{ secrets.SITEMAP_GRAPH_KEY }}
 
       - name: Publish
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ens-app-v3
-          directory: out
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          wranglerVersion: '3'
+          wranglerVersion: 'v3.57.1'
+          command: pages deploy --project-name=ens-app-v3
+          secrets: |
+            GITHUB_TOKEN
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Submit sitemap
         if: ${{ github.ref == 'refs/heads/main' }}

diff --git a/README.md b/README.md
@@ -123,8 +123,8 @@ have developed a design system in order to ensure consistent styling across the
 Pages folder has basic route layout and basic react needed for rendering pages. These
 files should be kept relatively simple
 
-Components that pages consume are kept in the components folder. This folder has a strucutre
-that mimicks the strucutre of the pages folder. If a component is only used on a specific page
+Components that pages consume are kept in the components folder. This folder has a structure
+that mimics the structure of the pages folder. If a component is only used on a specific page
 then it goes into the corresponding folder in the components folder.
 
 If a component is used across multiple pages and other components,
@@ -254,7 +254,7 @@ Once exited, you can commit the data to your branch. You do not need to run a se
 
 #### Stateless vs Stateful
 
-Our e2e tests are split into two categories, stateless and stateful. Stateless test use the development environment, are faster, and is the general recommended way to write integration tests. Occasionally, you may need to test a feature that requires an external api or service. In this case, you can use the stateful tests. These tests are slower, 
+Our e2e tests are split into two categories, stateless and stateful. Stateless test use the development environment, are faster, and is the general recommended way to write integration tests. Occasionally, you may need to test a feature that requires an external API or service. In this case, you can use the stateful tests. These tests are slower, 
 
 #### Running the tests
 

diff --git a/e2e/specs/stateless/createSubname.spec.ts b/e2e/specs/stateless/createSubname.spec.ts
@@ -116,13 +116,19 @@ test('should allow creating a subname', async ({ page, makeName, login, makePage
   await login.connect()
 
   await subnamesPage.getAddSubnameButton.click()
-  await subnamesPage.getAddSubnameInput.type('test')
+  await subnamesPage.getAddSubnameInput.fill('test')
   await subnamesPage.getSubmitSubnameButton.click()
+  await subnamesPage.addMoreToProfileButton.click()
+  await page.getByTestId('profile-record-option-name').click()
+  await page.getByTestId('add-profile-records-button').click()
+  await page.getByTestId('profile-record-input-input-name').fill('Test Name')
+  await subnamesPage.getSubmitSubnameProfileButton.click()
 
   const transactionModal = makePageObject('TransactionModal')
   await transactionModal.autoComplete()
 
   const subname = `test.${name}`
+  await subnamesPage.goto(subname)
 
   await expect(page).toHaveURL(new RegExp(`/${subname}`), { timeout: 15000 })
 })
@@ -150,6 +156,7 @@ test('should allow creating a subnames if the user is the wrapped owner', async
   await subnamesPage.getAddSubnameButton.click()
   await subnamesPage.getAddSubnameInput.fill('test')
   await subnamesPage.getSubmitSubnameButton.click()
+  await subnamesPage.getSubmitSubnameProfileButton.click()
 
   const transactionModal = makePageObject('TransactionModal')
   await transactionModal.autoComplete()
@@ -226,6 +233,7 @@ test('should allow creating an expired wrapped subname', async ({
   await subnamesPage.getAddSubnameButton.click()
   await subnamesPage.getAddSubnameInput.fill('test')
   await subnamesPage.getSubmitSubnameButton.click()
+  await subnamesPage.getSubmitSubnameProfileButton.click()
 
   await transactionModal.autoComplete()
 
@@ -234,6 +242,7 @@ test('should allow creating an expired wrapped subname', async ({
 })
 
 test('should allow creating an expired wrapped subname from the profile page', async ({
+  page,
   makeName,
   login,
   makePageObject,
@@ -269,7 +278,43 @@ test('should allow creating an expired wrapped subname from the profile page', a
 
   await profilePage.getRecreateButton.click()
 
+  await page.getByTestId('reclaim-profile-next').click()
+
   await transactionModal.autoComplete()
 
   await expect(profilePage.getRecreateButton).toHaveCount(0)
 })
+
+test('should allow skipping records when creating a subname', async ({
+  page,
+  makeName,
+  login,
+  makePageObject,
+}) => {
+  test.slow()
+  const name = await makeName({
+    label: 'manager-only',
+    type: 'legacy',
+    owner: 'user',
+    manager: 'user',
+  })
+
+  const subnamesPage = makePageObject('SubnamesPage')
+
+  await subnamesPage.goto(name)
+  await login.connect()
+
+  await subnamesPage.getAddSubnameButton.click()
+  await subnamesPage.getAddSubnameInput.fill('test')
+  await subnamesPage.getSubmitSubnameButton.click()
+  expect(subnamesPage.addMoreToProfileButton).toBeVisible()
+  await page.getByTestId('create-subname-profile-next').click()
+
+  const transactionModal = makePageObject('TransactionModal')
+  await transactionModal.autoComplete()
+
+  const subname = `test.${name}`
+
+  await expect(page).toHaveURL(new RegExp(`/${subname}`), { timeout: 15000 })
+  await expect(page.getByTestId('profile-empty-banner')).toBeVisible()
+})
diff --git a/e2e/specs/stateless/extendNames.spec.ts b/e2e/specs/stateless/extendNames.spec.ts
@@ -11,7 +11,7 @@ import { daysToSeconds } from '@app/utils/time'
 
 import { test } from '../../../playwright'
 
-test('should be able to register multiple names on the address page', async ({
+test('should be able to extend multiple names (including names in grace preiod) on the address page', async ({
   page,
   accounts,
   login,
@@ -26,11 +26,13 @@ test('should be able to register multiple names on the address page', async ({
       label: 'extend-legacy',
       type: 'legacy',
       owner: 'user2',
+      duration: -24 * 60 * 60,
     },
     {
       label: 'wrapped',
       type: 'wrapped',
       owner: 'user2',
+      duration: -24 * 60 * 60,
     },
   ])
 
@@ -65,20 +67,27 @@ test('should be able to register multiple names on the address page', async ({
 
   // warning message
   await expect(page.getByText('You do not own all these names')).toBeVisible()
-  await page.getByRole('button', { name: 'I understand' }).click()
+  await page.getByTestId('extend-names-confirm').click()
 
   // name list
-  await addresPage.extendNamesModalNextButton.click()
-
-  // check the invoice details
   await expect(page.getByText(`Extend ${extendableNameItems.length} Names`)).toBeVisible()
-  await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
+  await page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
+  await page.locator('button:has-text("Next")').click()
 
-  // increment and save
+  // check the invoice details
+  // TODO: Reimplement when date duration bug is fixed
+  // await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('1 year')
   await page.getByTestId('plus-minus-control-plus').click()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('2 years')
   await page.getByTestId('plus-minus-control-plus').click()
-  await page.getByTestId('extend-names-confirm').click()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('3 years')
+  await expect(page.getByTestId('invoice-item-0-amount')).not.toHaveText('0.0000 ETH')
+  await expect(page.getByTestId('invoice-item-1-amount')).not.toHaveText('0.0000 ETH')
+  await expect(page.getByTestId('invoice-total')).not.toHaveText('0.0000 ETH')
 
+  await page.getByTestId('extend-names-confirm').click()
+  await expect(transactionModal.transactionModal).toBeVisible({ timeout: 10000 })
   await transactionModal.autoComplete()
 
   await expect(page.getByText('Your "Extend names" transaction was successful')).toBeVisible({
@@ -88,13 +97,12 @@ test('should be able to register multiple names on the address page', async ({
 
   // Should be able to remove this after useQuery is fixed. Using to force a refetch.
   await time.increaseTime({ seconds: 15 })
-  await page.pause()
   await page.reload()
+  await page.waitForLoadState('networkidle')
   for (const name of extendableNameItems) {
     const label = name.replace('.eth', '')
     await addresPage.search(label)
     await expect(addresPage.getNameRow(name)).toBeVisible({ timeout: 5000 })
-    await page.pause()
     await expect(await addresPage.getTimestamp(name)).not.toBe(timestampDict[name])
     await expect(await addresPage.getTimestamp(name)).toBe(timestampDict[name] + 31536000000 * 3)
   }
@@ -124,7 +132,7 @@ test('should be able to extend a single unwrapped name from profile', async ({
 
   const extendNamesModal = makePageObject('ExtendNamesModal')
   await test.step('should show warning message', async () => {
-    await expect(page.getByText('You do not own this name')).toBeVisible()
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
     await page.getByRole('button', { name: 'I understand' }).click()
   })
 
@@ -137,12 +145,6 @@ test('should be able to extend a single unwrapped name from profile', async ({
     })
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -206,12 +208,6 @@ test('should be able to extend a single unwrapped name in grace period from prof
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -265,7 +261,7 @@ test('should be able to extend a single unwrapped name in grace period from prof
   await profilePage.getExtendButton.click()
 
   await test.step('should show warning message', async () => {
-    await expect(page.getByText('You do not own this name')).toBeVisible()
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
     await page.getByRole('button', { name: 'I understand' }).click()
   })
 
@@ -276,12 +272,6 @@ test('should be able to extend a single unwrapped name in grace period from prof
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -383,7 +373,7 @@ test('should be able to extend a name by a month', async ({
   await test.step('should show the correct price data', async () => {
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0003')
     await expect(extendNamesModal.getInvoiceTransactionFee).toContainText('0.0001')
-    await expect(extendNamesModal.getInvoiceTotal).toContainText('0.0004')
+    await expect(extendNamesModal.getInvoiceTotal).toContainText(/0\.000[3|4]/)
     await expect(page.getByText(/1 month .* extension/)).toBeVisible()
   })
 
@@ -497,12 +487,6 @@ test('should be able to extend a name in grace period by a month', async ({
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should be able to pick by date', async () => {
     const dateSelection = page.getByTestId('date-selection')
     await expect(dateSelection).toHaveText('Pick by date')
@@ -580,12 +564,6 @@ test('should be able to extend a name in grace period by 1 day', async ({
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should be able to pick by date', async () => {
     const dateSelection = page.getByTestId('date-selection')
     await expect(dateSelection).toHaveText('Pick by date')
@@ -626,3 +604,82 @@ test('should be able to extend a name in grace period by 1 day', async ({
     await expect(comparativeTimestamp).toEqual(newTimestamp)
   })
 })
+
+test('should be able to extend a single wrapped name using deep link', async ({
+  page,
+  login,
+  makePageObject,
+  makeName,
+}) => {
+  const name = await makeName({
+    label: 'legacy',
+    type: 'wrapped',
+    owner: 'user2',
+  })
+
+  const profilePage = makePageObject('ProfilePage')
+  const transactionModal = makePageObject('TransactionModal')
+
+  const homePage = makePageObject('HomePage')
+  await homePage.goto()
+  await login.connect()
+  await page.goto(`/${name}?renew`)
+
+  const timestamp = await profilePage.getExpiryTimestamp()
+
+  const extendNamesModal = makePageObject('ExtendNamesModal')
+  await test.step('should show warning message', async () => {
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
+    await page.getByRole('button', { name: 'I understand' }).click()
+  })
+
+  await test.step('should show 1 year extension', async () => {
+    await expect(page.getByText('1 year extension', { exact: true })).toBeVisible({
+      timeout: 30000,
+    })
+  })
+
+  await test.step('should be able to add more years', async () => {
+    await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
+    await extendNamesModal.getCounterPlusButton.click()
+    await expect(page.getByText('2 years extension', { exact: true })).toBeVisible({
+      timeout: 30000,
+    })
+  })
+
+  await test.step('should be able to reduce number of years', async () => {
+    await extendNamesModal.getCurrencyToggle.click({ force: true })
+    await extendNamesModal.getCounterMinusButton.click()
+  })
+
+  await test.step('should extend', async () => {
+    await extendNamesModal.getExtendButton.click()
+    await transactionModal.autoComplete()
+    const newTimestamp = await profilePage.getExpiryTimestamp()
+    expect(newTimestamp).toEqual(timestamp + 31536000000)
+  })
+})
+
+test('should not be able to extend a name which is not registered', async ({
+  page,
+  makePageObject,
+  login,
+}) => {
+  const name = 'this-name-does-not-exist.eth'
+  const homePage = makePageObject('HomePage')
+  await homePage.goto()
+  await login.connect()
+  await page.goto(`/${name}?renew`)
+  await expect(page.getByRole('heading', { name: `Register ${name}` })).toBeVisible()
+})
+
+test('renew deep link should redirect to registration when not logged in', async ({
+  page,
+  makePageObject,
+}) => {
+  const name = 'this-name-does-not-exist.eth'
+  const homePage = makePageObject('HomePage')
+  await homePage.goto()
+  await page.goto(`/${name}?renew`)
+  await expect(page.getByRole('heading', { name: `Register ${name}` })).toBeVisible()
+})