Meticulous

.github/workflows/meticulous.yaml

@@ -0,0 +1,76 @@
+# Workflow for serving app locally & running Meticulous tests against it
+
+name: Meticulous
+
+# Important: The workflow needs to run both on pushes to your main branch and on
+# pull requests. It needs to run on your main branch because it'll use the results
+# from the base commit of the PR on the main branch to compare against.
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+  # Important: We need the workflow to be triggered on workflow_dispatch events,
+  # so that Meticulous can run the workflow on the base commit to compare
+  # against if an existing workflow hasn't run
+  workflow_dispatch: {}
+
+# Important: The workflow needs all the permissions below.
+# These permissions are mainly need to post and update the status check and
+# feedback comment on your PR. Meticulous won’t work without them.
+permissions:
+  actions: write
+  contents: read
+  issues: write
+  pull-requests: write
+  statuses: read
+
+jobs:
+  test:
+    name: Report diffs
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            node-modules-${{ runner.os }}
+
+      - name: Install dependencies
+        run: |
+          npm install --frozen-lockfile --non-interactive --legacy-peer-deps
+
+      - name: Build project
+        run: |
+          npm run build
+
+      - name: Serve project
+        # TODO: Update these commands to serve your app's frontend locally, and
+        # then update the app-url to match.
+        # We strongly recommend you serve the app with a non-development server.
+        # For instance, if you are using Vite, use 'vite preview' instead of 'vite'
+        # or 'vite serve' to spin up the app.
+        # The sleep is often required to ensure your app is readily being served
+        # by the time the Meticulous tests start
+        run: |
+          npm run preview &
+          sleep 5
+
+      - name: Run Meticulous tests
+        uses: alwaysmeticulous/report-diffs-action/cloud-compute@v1
+        with:
+          api-token: ${{ secrets.METICULOUS_API_TOKEN }}
+          # TODO: Update the port and protocol below to match your app's frontend
+          app-url: 'http://localhost:4173/'

package.json

@@ -11,6 +11,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@alwaysmeticulous/recorder-loader": "^2.212.0",
     "@apollo/client": "^3.12.4",
     "@strapi/blocks-react-renderer": "^1.0.1",
     "graphql": "^16.10.0",

src/components/home/home.styled.ts

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import { FlexColumnBetween, PageContainer } from '../global/global.styled';
 
 export const HomeContainer = styled(PageContainer)`
-  max-width: 720px;
+  max-width: 940px;
   ${FlexColumnBetween};
 
   p {
-    font-size: ${({ theme }) => theme.mediumSmallText};
+    font-size: ${({ theme }) => theme.regularText};
   }
 `;

src/main.tsx

@@ -1,3 +1,4 @@
+import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
@@ -10,24 +11,35 @@ import 'normalize.css';
 import './index.css';
 import './font.css';
 
-const ApolloProvider = React.lazy(() =>
-  import('@apollo/client').then((module) => ({
-    default: module.ApolloProvider,
-  }))
-);
-
 const ThemeProvider = React.lazy(() =>
   import('styled-components').then((module) => ({
     default: module.ThemeProvider,
   }))
 );
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <ApolloProvider client={client}>
-      <ThemeProvider theme={theme}>
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </ApolloProvider>
-  </StrictMode>
-);
+async function render() {
+  if (process.env.NODE_ENV === 'development') {
+    await tryLoadAndStartRecorder({
+      recordingToken: 'VuKmc6726Q7gEYHRka1l2IpC8xCYaNEIxeMee4N5',
+      isProduction: false,
+    });
+  }
+
+  const ApolloProvider = React.lazy(() =>
+    import('@apollo/client').then((module) => ({
+      default: module.ApolloProvider,
+    }))
+  );
+
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <ApolloProvider client={client}>
+        <ThemeProvider theme={theme}>
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </ApolloProvider>
+    </StrictMode>
+  );
+}
+
+render();

src/routes/root.tsx

@@ -22,7 +22,7 @@ const Root = () => {
       <Footer>
         <MenuItem to="/home">stefano imparato</MenuItem>
         <a href="https://github.com/steoo/portfolio" target="_blank">
-          code on Github
+          you can find the code on Github
         </a>
       </Footer>
     </RootContainer>