[explorer] adds Preview Cards

explorer/client/README.md

@@ -20,31 +20,35 @@ When running most of the below yarn commands, the SuiExplorer Client will extrac
 
 If the environment variable `REACT_APP_DATA` is set to `static`, then the SuiExplorer will instead pull data from a local, static JSON dataset that can be found at `./src/utils/static/mock_data.json`.
 
-For example, suppose we wish to locally run the website using the static JSON dataset and not the API, then we would run the following:
+For example, suppose we wish to locally run the website using the static JSON dataset and not the API, then we could run the following:
 
 ```bash
 REACT_APP_DATA=static yarn start
 ```
 
-Note that the command `yarn test` is the exception. Here the SuiExplorer will instead use the static JSON dataset. The tests have been written to specifically check the UI and not the API connection.
+Note that the commands `yarn test` and `yarn start:static` are the exceptions. Here the SuiExplorer will instead use the static JSON dataset. The tests have been written to specifically check the UI and not the API connection and so use the static JSON dataset.
 
 ## Yarn Commands and what they do
 
 ### `yarn start`
 
-Runs the app in the development mode.
+Runs the app as connected to the API at https://demo-rpc.sui.io.
 
 Open http://localhost:3000 to view it in the browser.
 
 The page will reload if you make edits. You will also see any lint errors in the console.
 
-### `yarn start:dev`
+### `yarn start:static`
 
-Same as `yarn start` but runs `prettier:fix:watch` to format the files.
+Runs the app as connected to the static JSON dataset with `REACT_APP_DATA` set to `static`.
+
+Open http://localhost:8080 to view it in the browser.
+
+The page will reload when edits are made. You can run `yarn start` and `yarn start:static` at the same time because they use different ports.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.
+This runs a series of end-to-end browser tests using the website as connected to the static JSON dataset. This command is run by the GitHub checks. The tests must pass before merging a branch into main.
 
 ### `yarn build`
 
@@ -60,11 +64,6 @@ Run linting check (prettier/eslint/stylelint).
 
 Run linting check but also try to fix any issues.
 
-### `yarn prettier:fix:watch`
-
-Run prettier in watch mode and format any file that changes. (Also runs prettier once in the beginning for all the files)\
-It can be useful during development to format automatically all the files that change.
-
 ## Deployment
 
 For guidance on deployment, plese see here: https://create-react-app.dev/docs/deployment/

explorer/client/jest.config.js

@@ -0,0 +1,6 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+    preset: 'jest-puppeteer',
+};

explorer/client/package.json

@@ -7,16 +7,20 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.4.0",
+        "@types/jest-environment-puppeteer": "^5.0.0",
         "@types/node": "^16.11.24",
+        "@types/puppeteer": "^5.4.5",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
         "autoprefixer": "^10.4.2",
         "concurrently": "^7.0.0",
         "eslint-config-prettier": "^8.3.0",
+        "jest-puppeteer": "^6.1.0",
         "onchange": "^7.1.0",
         "postcss": "^8.4.6",
         "prettier": "2.5.1",
         "react-scripts": "5.0.1",
+        "puppeteer": "^13.5.1",
         "stylelint": "^14.5.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-standard": "^25.0.0",
@@ -36,8 +40,9 @@
     },
     "scripts": {
         "start": "react-scripts start",
+        "start:static": "REACT_APP_DATA=static PORT=8080 react-scripts start",
+        "test": "npx start-server-and-test 'npm run start:static' 8080 'react-scripts test --detectOpenHandles --watchAll=false'",
         "build": "react-scripts build",
-        "test": "REACT_APP_DATA=static react-scripts test",
         "eslint:check": "eslint --max-warnings=0 .eslintrc.js \"./src/**/*.{js,jsx,ts,tsx}\"",
         "eslint:fix": "yarn eslint:check --fix",
         "prettier:check": "prettier -c --ignore-unknown .",