build studio before testing

.github/workflows/test.yml

@@ -25,7 +25,9 @@ jobs:
         ln -s $PWD ./test/studio/plugins
         cd test/
         yarn
-        cd ../
+        cd studio/
+        npx sanity build
+        cd ../../
         yarn test
       env:
         GITHUB: 1

.gitignore

@@ -5,4 +5,5 @@ logs
 node_modules
 test/studio/plugins/sanity-plugin-media-library
 .env*
-test/state.json
+test/state.json
+test/studio/dist

package.json

@@ -28,27 +28,27 @@
   "scripts": {
     "build": "rimraf lib && tsc",
     "dev": "tsc -w",
-    "prepublishOnly": "yarn build && yarn test",
+    "prepublishOnly": "yarn build && yarn build-studio && yarn test",
+    "build-studio": "cd test && yarn build",
     "dev-studio": "cd test && yarn start",
-    "test-studio": "cd test && yarn start-test-studio",
-    "test": "start-server-and-test \"cd test && yarn start-test-studio\" http-get://localhost:3000 \"cd test && yarn test\""
+    "test": "start-server-and-test \"cd test && yarn start\" http-get://localhost:3000 \"cd test && yarn test\""
   },
   "dependencies": {
     "@sanity/icons": "^1.1.2",
     "@sanity/ui": "^0.34.4",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@babel/cli": "7.14.5",
     "@babel/core": "7.14.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.14.5",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
     "@types/react": "17.0.11",
     "@types/styled-components": "^5.1.7",
-    "babel-plugin-styled-components": "^1.12.0",
-    "prettier": "^2.2.1",
+    "babel-plugin-styled-components": "^1.13.1",
+    "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
     "start-server-and-test": "^1.12.5",
     "typescript": "4.3.4"

src/AppContainer.tsx

@@ -1,7 +1,7 @@
 import { App } from './App';
 import { Asset } from './types/Asset';
 import { Modal } from './components/Modal';
-import { studioTheme, ThemeProvider, Portal, Layer,ToastProvider } from '@sanity/ui';
+import { studioTheme, ThemeProvider, Portal, Layer, ToastProvider } from '@sanity/ui';
 import React from 'react';
 
 type Props = {
@@ -14,19 +14,19 @@ type Props = {
 export const AppContainer = ({ onClose, onSelect, selectedAssets, tool }: Props) => (
   <ThemeProvider theme={studioTheme}>
     <ToastProvider>
-    {tool ? (
-      <App tool={tool} mode="tool" />
-    ) : (
-      <Portal>
-        <Layer zOffset={999}>
-          <Modal onClose={onClose ? onClose : () => {}} width={3}>
-            <div style={{ height: 1024 }}>
-              <App mode="modal" onClose={onClose} onSelect={onSelect} selectedAssets={selectedAssets} tool={tool} />
-            </div>
-          </Modal>
-        </Layer>
-      </Portal>
-    )}
+      {tool ? (
+        <App tool={tool} mode="tool" />
+      ) : (
+        <Portal>
+          <Layer zOffset={999}>
+            <Modal onClose={onClose ? onClose : () => {}} width={3}>
+              <div style={{ height: 1024 }}>
+                <App mode="modal" onClose={onClose} onSelect={onSelect} selectedAssets={selectedAssets} tool={tool} />
+              </div>
+            </Modal>
+          </Layer>
+        </Portal>
+      )}
     </ToastProvider>
   </ThemeProvider>
 );

src/components/MediaGrid.tsx

@@ -89,7 +89,7 @@ export const MediaGrid = ({
             <StyledMediaInfo>
               <DocumentIcon />
               <Text muted size={1}>
-              <StyledFilename>{asset.title || asset.originalFilename}</StyledFilename>
+                <StyledFilename>{asset.title || asset.originalFilename}</StyledFilename>
               </Text>
             </StyledMediaInfo>
           )}

test/media-library.spec.ts

@@ -32,7 +32,8 @@ async function dialogHidden(page) {
 
 test.describe('Media library', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(`${DOMAIN}/media-library`, { timeout: 60000 });
+    await page.goto(`${DOMAIN}/testing/media-library`, { timeout: 60000 });
+
     if (process.env.GITHUB) {
       await page.waitForTimeout(INTERNET_SPEED_TIMEOUT);
     }
@@ -196,10 +197,11 @@ test.describe('Media library', () => {
 
   test('asset source', async ({ page }) => {
     await page.click('text=Desk');
+    await page.reload(); // somehow the asset source isn't showing up inside sanity
     await page.waitForTimeout(INTERNET_SPEED_TIMEOUT);
     await page.click('text=Image Asset');
     await page.waitForTimeout(INTERNET_SPEED_TIMEOUT);
-    await page.click('[href="/intent/create/type=imageAsset;template=imageAsset/"]');
+    await page.click('[title="Create new Image Asset"]');
     await page.waitForTimeout(INTERNET_SPEED_TIMEOUT);
     await page.click('text=Select');
     await dialogVisible(page);

test/package.json

@@ -5,28 +5,30 @@
   "main": "package.json",
   "license": "UNLICENSED",
   "scripts": {
-    "start": "cd studio && SANITY_STUDIO_API_DATASET=production sanity start --port 3001",
-    "start-test-studio": "cd studio && SANITY_STUDIO_API_DATASET=testing sanity start --port 3000",
     "test": "DEBUG=pw:api playwright test test/media-library.spec.ts --headed",
-    "test-headed": "yarn test --headed"
+    "start": "PORT=3000 node ./server",
+    "build": "cd studio && sanity build",
+    "dev": "cd studio && sanity start"
   },
   "devDependencies": {
-    "@playwright/test": "^1.12.2",
-    "@sanity/base": "^2.11.0",
-    "@sanity/cli": "^2.10.0",
+    "@playwright/test": "^1.12.3",
+    "@sanity/base": "^2.12.2",
+    "@sanity/cli": "^2.12.2",
     "@sanity/components": "^2.2.6",
-    "@sanity/core": "^2.10.2",
-    "@sanity/default-layout": "^2.11.0",
+    "@sanity/core": "^2.12.2",
+    "@sanity/default-layout": "^2.12.2",
     "@sanity/default-login": "^2.11.0",
-    "@sanity/desk-tool": "^2.11.0",
+    "@sanity/desk-tool": "^2.12.2",
     "@types/react": "17.0.11",
     "dotenv": "^10.0.0",
-    "playwright": "^1.12.2",
-    "prettier": "^2.2.1",
+    "express-history-api-fallback": "^2.2.1",
+    "playwright": "^1.12.3",
+    "prettier": "^2.3.2",
     "react": "^17.0",
-    "react-dom": "^17.0"
+    "react-dom": "^17.0",
+    "sanity-plugin-asset-source-unsplash": "^0.1.3"
   },
   "dependencies": {
-    "sanity-plugin-asset-source-unsplash": "^0.1.3"
+    "express": "^4.17.1"
   }
 }

test/server.js

@@ -0,0 +1,16 @@
+var path = require('path');
+var express = require('express');
+var fallback = require('express-history-api-fallback');
+
+var port = process.env.PORT || 3000;
+var rootDir = process.env.ROOT_DIR || path.join(__dirname, 'studio', 'dist');
+
+var app = express();
+app.use(express.static(rootDir));
+app.use(fallback('index.html', { root: rootDir }));
+
+var server = app.listen(port, function () {
+  console.log('Sanity studio listening on http://localhost:' + port);
+});
+
+module.exports = server;

test/studio/sanity.json

@@ -20,5 +20,24 @@
       "name": "part:@sanity/base/schema",
       "path": "./schemas/schema"
     }
+  ],
+  "__experimental_spaces": [
+    {
+      "name": "production",
+      "title": "Prod",
+      "default": true,
+      "api": {
+        "projectId": "q74m7lt8",
+        "dataset": "production"
+      }
+    },
+    {
+      "name": "testing",
+      "title": "Testing",
+      "api": {
+        "projectId": "q74m7lt8",
+        "dataset": "testing"
+      }
+    }
   ]
 }