wip: canary

.github/workflows/publish_canary.yml

@@ -0,0 +1,64 @@
+name: Publish Canary Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - V4
+
+concurrency: ${{ github.workflow }}
+
+env:
+  TERM: linux
+
+jobs:
+  push:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_ECR_DEPLOYER }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+        with:
+          mask-password: 'true'
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+      - name: Build, tag, and push image to Amazon ECR
+        uses: docker/build-push-action@v5
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: web3inbox-canary
+          IMAGE_TAG: V4
+        with:
+          context: .
+          file: Dockerfile.canary
+          push: true
+          tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      # Temp fix
+      # https://github.com/docker/build-push-action/issues/252
+      # https://github.com/moby/buildkit/issues/1896
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

Dockerfile.canary

@@ -0,0 +1,13 @@
+FROM node:20-bookworm as base
+
+WORKDIR /src
+
+COPY ../ ./
+RUN npm ci
+RUN npm run build
+
+WORKDIR ./apps/laboratory/
+
+RUN npm run playwright:install
+
+CMD ["npm", "run", "playwright:test:canary"]

package.json

@@ -14,9 +14,11 @@
     "prettier": "prettier --check '**/*.{js,ts,jsx,tsx,scss}'",
     "prettier:write": "prettier --write '**/*.{js,ts,jsx,tsx,scss}'",
     "playwright:install": "playwright install --with-deps",
-    "playwright:test": "playwright test",
     "playwright:start": "VITE_CI=true yarn dev",
-    "playwright:debug": "playwright test --debug"
+    "playwright:test": "playwright test",
+    "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='chromium'",
+    "playwright:debug": "npm run playwright:test -- --debug",
+    "playwright:debug:canary": "npm run playwright:test:canary -- --debug"
   },
   "dependencies": {
     "@sentry/react": "^7.93.0",

playwright.config.ts

@@ -1,5 +1,6 @@
-import { config } from 'dotenv'
 import { defineConfig, devices } from '@playwright/test'
+import { config } from 'dotenv'
+
 config({ path: './.env' })
 
 const baseURL = 'http://localhost:5173'
@@ -38,7 +39,7 @@ export default defineConfig({
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] }
-    },
+    }
   ],
 
   /* Run your local dev server before starting the tests */

tests/shared/pages/InboxPage.ts

@@ -55,21 +55,34 @@ export class InboxPage {
     return address;
   }
 
-  async subscribe(nth: number) {
-    const appCard = this.page.locator('.AppCard__body').nth(nth)
-    await appCard.locator('.AppCard__body__subscribe').click()
+  async subscribe(appName: string) {
+    const appCard = this.page.locator('.AppCard', {
+      has: this.page.locator('.AppCard__body__title', {
+        hasText: appName
+      })
+    })
+    await appCard.locator('.AppCard__body > .AppCard__body__subscribe').click()
 
-    await appCard.locator('.AppCard__body__subscribed').getByText('Subscribed', { exact: false }).isVisible()
+    await appCard
+      .locator('.AppCard__body > .AppCard__body__subscribed')
+      .getByText('Subscribed', { exact: false })
+      .isVisible()
   }
 
-  async navigateToNewSubscription(nth: number) {
-    await this.page.getByRole('button', { name: 'Subscribed' }).nth(nth).click()
-    await this.page.getByRole('button', { name: 'Subscribed' }).nth(nth).isHidden()
+  async navigateToNewSubscription(appName: string) {
+    const appCard = this.page.locator('.AppCard', {
+      has: this.page.locator('.AppCard__body__title', {
+        hasText: appName
+      })
+    })
+    const subscribeButton = appCard.getByRole('button', { name: 'Subscribed' })
+    await subscribeButton.click()
+    await subscribeButton.isHidden()
   }
 
-  async subscribeAndNavigateToDapp(nth: number) {
-    await this.subscribe(nth);
-    await this.navigateToNewSubscription(nth);
+  async subscribeAndNavigateToDapp(appName: string) {
+    await this.subscribe(appName)
+    await this.navigateToNewSubscription(appName)
   }
 
   async unsubscribe() {
@@ -80,8 +93,12 @@ export class InboxPage {
     await this.page.waitForTimeout(2000)
   }
 
-  async navigateToDappFromSidebar(nth: number) {
-    await this.page.locator('.AppSelector__notifications-link').nth(nth).click()
+  async navigateToDappFromSidebar(appName: string) {
+    await this.page
+      .locator('.AppSelector__notifications-link', {
+        has: this.page.locator('.AppSelector__link__title', { hasText: appName })
+      })
+      .click()
   }
 
   async countSubscribedDapps() {

tests/subscribe.spec.ts

@@ -19,6 +19,7 @@ test.afterEach(async ({ inboxValidator, walletValidator }) => {
 test('it should subscribe and unsubscribe', async ({
   inboxPage,
   walletPage,
+  settingsPage,
   walletValidator,
   browserName
 }) => {
@@ -30,13 +31,19 @@ test('it should subscribe and unsubscribe', async ({
   await walletValidator.expectReceivedSign({})
   await walletPage.handleRequest({ accept: true })
   await inboxPage.rejectNotifications()
-  await inboxPage.subscribeAndNavigateToDapp(0)
+
+  await settingsPage.goToNotificationSettings()
+  await settingsPage.displayCustomDapp(CUSTOM_TEST_DAPP.appDomain)
+  await inboxPage.gotoDiscoverPage()
+
+  await inboxPage.subscribeAndNavigateToDapp(CUSTOM_TEST_DAPP.name)
   await inboxPage.unsubscribe()
 })
 
 test('it should subscribe, update preferences and unsubscribe', async ({
   inboxPage,
   walletPage,
+  settingsPage,
   walletValidator,
   browserName
 }) => {
@@ -48,14 +55,20 @@ test('it should subscribe, update preferences and unsubscribe', async ({
   await walletValidator.expectReceivedSign({})
   await walletPage.handleRequest({ accept: true })
   await inboxPage.rejectNotifications()
-  await inboxPage.subscribeAndNavigateToDapp(0)
+
+  await settingsPage.goToNotificationSettings()
+  await settingsPage.displayCustomDapp(CUSTOM_TEST_DAPP.appDomain)
+  await inboxPage.gotoDiscoverPage()
+
+  await inboxPage.subscribeAndNavigateToDapp(CUSTOM_TEST_DAPP.name)
   await inboxPage.updatePreferences()
   await inboxPage.unsubscribe()
 })
 
 test('it should subscribe and unsubscribe to and from multiple dapps', async ({
   inboxPage,
   walletPage,
+  settingsPage,
   walletValidator,
   browserName
 }) => {
@@ -67,8 +80,13 @@ test('it should subscribe and unsubscribe to and from multiple dapps', async ({
   await walletValidator.expectReceivedSign({})
   await walletPage.handleRequest({ accept: true })
   await inboxPage.rejectNotifications()
-  await inboxPage.subscribe(0)
-  await inboxPage.subscribe(1)
+
+  await settingsPage.goToNotificationSettings()
+  await settingsPage.displayCustomDapp(CUSTOM_TEST_DAPP.appDomain)
+  await inboxPage.gotoDiscoverPage()
+
+  await inboxPage.subscribe(CUSTOM_TEST_DAPP.name)
+  await inboxPage.subscribe('GM Dapp')
 
   await inboxPage.waitForSubscriptions(2)
 
@@ -81,7 +99,7 @@ test('it should subscribe and unsubscribe to and from multiple dapps', async ({
 
   expect(await inboxPage.countSubscribedDapps()).toEqual(2);
 
-  await inboxPage.navigateToDappFromSidebar(0);
+  await inboxPage.navigateToDappFromSidebar(CUSTOM_TEST_DAPP.name)
   await inboxPage.unsubscribe()
   expect(await inboxPage.countSubscribedDapps()).toEqual(1);
 
@@ -119,11 +137,7 @@ test('it should subscribe, receive messages and unsubscribe', async ({
 
   expect(await inboxPage.page.getByText("Notify Swift", {exact: false}).isVisible()).toEqual(true);
 
-  await inboxPage.subscribeAndNavigateToDapp(0)
-
-  if(!CUSTOM_TEST_DAPP.projectId || !(CUSTOM_TEST_DAPP.projectSecret)) {
-    throw new Error("TEST_DAPP_SECRET and TEST_DAPP_ID are required")
-  }
+  await inboxPage.subscribeAndNavigateToDapp(CUSTOM_TEST_DAPP.name)
 
   const address = await inboxPage.getAddress()