Payment option selection and wrap step test cases and parallelisation…

… of tests (#221) * WIP widget wrap steps tests * WIP EthHelper * add script to build tests as NodeNext output with ESM modules by default * Minor cleanup and add visual check for token icons in the widget * Add test step descriptions * Try sharding again and add id to trigger test workflow * This should fix up the sharding * Fix test cases broken due to refactor * Seperate test files to not break currents * Update snapshots in the new file folders * Add id to trigger tests * Adjust snapshot tresholds so tests pass in CI * Split up tests a little bit more * Skip a flaky low priority test --------- Co-authored-by: Kaspar Kallas <[email protected]>
superfluid-finance · Nov 2, 2023 · 3a9d03c · 3a9d03c · vercel · Nov 2, 2023
1 parent bb7ef6f
commit 3a9d03c
Show file tree

Hide file tree

Showing 74 changed files with 1,987 additions and 1,169 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -7,25 +7,20 @@
   "features": {
     "ghcr.io/devcontainers-contrib/features/pnpm:2": {}
   },
-
   "hostRequirements": {
     "cpus": 4,
     "memory": "8gb",
     "storage": "32gb"
   },
-
   // Features to add to the dev container. More info: https://containers.dev/features.
   // "features": {},
-
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   // "forwardPorts": [],
-
+  // "onCreateCommand": "pnpm dlx playwright install-deps",
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "pnpm install && pnpm build"
-
   // Configure tool-specific properties.
   // "customizations": {},
-
   // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
   // "remoteUser": "root"
-}
+}
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -2,14 +2,13 @@ name: Playwright Tests
 
 on:
   deployment_status:
-  workflow_dispatch:  
-    inputs: 
+  workflow_dispatch:
+    inputs:
       environment:
-        description: 'Url to run tests against'
+        description: "Url to run tests against"
         type: string
         required: true
 
-
 jobs:
   test:
     if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' && github.event.deployment_status.environment == 'Preview – widget-builder' || github.event_name == 'workflow_dispatch '
@@ -18,6 +17,10 @@ jobs:
       run:
         working-directory: tests
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        file: [builderCommon, builderExportTab, builderGatingTab, builderJSONEditor, builderProductsTab, builderStylingTab,builderPaymentTab, widgetConfigurationTests, widgetMetamaskStreamTransactions,widgetMetamaskTokenTransactions, widgetMetamaskUITests, widgetMetamaskValidationErrors , widgetNoWallet]
 
     steps:
       - uses: actions/checkout@v3
@@ -41,24 +44,24 @@ jobs:
         run: |
           sudo apt-get install --no-install-recommends -y \
           fluxbox \
-          xvfb          
-          
+          xvfb
+
       - name: Set url the tests should run on
         run: |
           if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
             echo "BASE_URL=${{ github.event.inputs.environment }}" >> $GITHUB_ENV
           elif [[ "${{ github.event_name }}" == "deployment_status" ]]; then
             echo "BASE_URL=${{ github.event.deployment_status.environment_url }}" >> $GITHUB_ENV
-          fi        
+          fi
 
-        # https://playwright.dev/docs/next/ci#running-headed  
+        # https://playwright.dev/docs/next/ci#running-headed
       - name: Run Playwright tests
-        run: xvfb-run pnpm playwright test
+        run: xvfb-run pnpm playwright test ${{ matrix.file }}.spec.ts
         env:
           BASE_URL: ${{ env.BASE_URL }}
           WIDGET_WALLET_PUBLIC_KEY: "0x7c5de59A1b31e3D00279A825Cb95fAEDb09eA9FD"
           CURRENTS_PROJECT_ID: 3TQU8o
           CURRENTS_RECORD_KEY: ${{ secrets.CURRENTS_RECORD_KEY }}
           CURRENTS_CI_BUILD_ID: ${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt}}
           WIDGET_WALLET_PRIVATE_KEY: ${{ secrets.WIDGET_WALLET_PRIVATE_KEY}}
-          CI: true
+          CI: true
diff --git a/packages/widget/src/AccountAddressCard.tsx b/packages/widget/src/AccountAddressCard.tsx
@@ -91,6 +91,7 @@ export function AccountAddressCard({
             </Typography>
 
             <IconButton
+              data-testid={`${dataTest}-copy-button`}
               size="small"
               title="Copy address to clipboard"
               onClick={() => onCopyAddressButtonClick(checksumAddress)}
@@ -99,9 +100,13 @@ export function AccountAddressCard({
               }}
             >
               {copied ? (
-                <CheckIcon fontSize="inherit" color="primary" />
+                <CheckIcon
+                  data-testid="check-icon"
+                  fontSize="inherit"
+                  color="primary"
+                />
               ) : (
-                <ContentCopyIcon fontSize="inherit" />
+                <ContentCopyIcon data-testid="copy-icon" fontSize="inherit" />
               )}
             </IconButton>
           </Stack>

diff --git a/packages/widget/src/CheckoutProduct.tsx b/packages/widget/src/CheckoutProduct.tsx
@@ -122,7 +122,11 @@ export default function CheckoutProduct({ CardProps }: CheckoutProductProps) {
                 </Stack>
                 {paymentOptionWithTokenInfo.paymentOption
                   .transferAmountEther && (
-                  <Typography variant="body1" color="text.secondary">
+                  <Typography
+                    data-testid="upfront-fee"
+                    variant="body1"
+                    color="text.secondary"
+                  >
                     +
                     {
                       paymentOptionWithTokenInfo.paymentOption

diff --git a/packages/widget/src/CheckoutSummary.tsx b/packages/widget/src/CheckoutSummary.tsx
@@ -80,16 +80,23 @@ export function CheckoutSummary() {
   return (
     <Box>
       <Stack direction="column" alignItems="center">
-        <Typography variant="h5" component="span">
+        <Typography
+          data-testid="success-msg-title"
+          variant="h5"
+          component="span"
+        >
           Success!
         </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          data-testid="success-msg-text"
+          variant="body2"
+          color="text.secondary"
+        >
           Your purchase was confirmed.
         </Typography>
       </Stack>
 
-      <SuccessImage sx={{ mx: "auto", my: 3 }} />
-
+      <SuccessImage data-testid="success-image" sx={{ mx: "auto", my: 3 }} />
       <Stack direction="column" alignItems="center">
         <Typography variant="body2" color="text.secondary">
           {`You've streamed`}
@@ -136,6 +143,7 @@ export function CheckoutSummary() {
           PaperProps={{ sx: { zIndex: 2 } }}
         />
         <StreamIndicator
+          data-testid="stream-indicator"
           sx={{
             mx: -1,
             zIndex: 0,
@@ -155,6 +163,7 @@ export function CheckoutSummary() {
       </Stack>
 
       <Stack
+        data-testid="continue-buttons"
         direction="column"
         justifyContent="center"
         alignItems="stretch"

diff --git a/packages/widget/src/StepContentWrap.tsx b/packages/widget/src/StepContentWrap.tsx
@@ -56,6 +56,7 @@ const WrapCard: FC<WrapCardProps> = ({
 
       {token && (
         <Stack
+          data-testid={`${dataTest}-wrap-card`}
           component={Paper}
           variant="outlined"
           direction="row"
@@ -64,7 +65,11 @@ const WrapCard: FC<WrapCardProps> = ({
           title={token.address}
           sx={{ pl: 1.25, pr: 2, py: 1, borderRadius: 0.5 }}
         >
-          <TokenAvatar tokenInfo={token} sx={{ width: 24, height: 24 }} />
+          <TokenAvatar
+            data-testid={`${dataTest}-icon`}
+            tokenInfo={token}
+            sx={{ width: 24, height: 24 }}
+          />
           <Typography data-testid={`${dataTest}-symbol`} variant="body1">
             {token.symbol}
           </Typography>

diff --git a/packages/widget/src/previews/WrapIntoSuperTokensPreview.tsx b/packages/widget/src/previews/WrapIntoSuperTokensPreview.tsx
@@ -42,14 +42,18 @@ export function WrapIntoSuperTokensPreview({
         </Typography>
 
         <Stack
+          data-testid="review-underlying-wrap-component"
           component={Paper}
           direction="column"
           alignItems="center"
           justifyContent="center"
           flex={1}
           sx={{ p: 1.5, borderRadius: 0.75 }}
         >
-          <TokenAvatar tokenInfo={underlyingToken} />
+          <TokenAvatar
+            data-testid="review-underlying-icon"
+            tokenInfo={underlyingToken}
+          />
           <Typography
             data-testid="review-underlying-wrap-amount"
             variant="body1"
@@ -70,13 +74,14 @@ export function WrapIntoSuperTokensPreview({
         </Stack>
 
         <Stack
+          data-testid="review-super-wrap-component"
           component={Paper}
           direction="column"
           alignItems="center"
           justifyContent="center"
           sx={{ p: 1.5, borderRadius: 0.75 }}
         >
-          <TokenAvatar tokenInfo={superToken} />
+          <TokenAvatar data-testid="review-super-icon" tokenInfo={superToken} />
           <Typography
             data-testid="review-super-wrap-amount"
             variant="body1"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/.gitignore b/tests/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 results
 playwright-report
-downloads
+downloads
+dist