Set up end-to-end tests (#85)

2022-02-28 13:15:27 +01:00 · 2022-02-28 13:15:27 +01:00 · d0965d17e4
commit d0965d17e4
parent 3c369b435e
22 changed files with 1470 additions and 108 deletions
--- a/packages/playground/src/.gitignore
+++ b/packages/playground/src/.gitignore
@ -1,2 +1 @@
-personal
-index.ts
+personal
--- a/packages/playground/src/index.html
+++ b/packages/playground/src/index.html
@ -8,6 +8,13 @@
        padding: 0;
        height: 100%;
        background: black;
+        color: white;
+        font-family: sans-serif;
+        font-size: 12px;
+      }
+
+      a {
+        color: inherit;
      }
    </style>
  </head>
@ -15,6 +22,6 @@
  <body>
    <div id="root"></div>

-    <script type="module" src="./index.ts"></script>
+    <script type="module" src="./index.tsx"></script>
  </body>
 </html>
--- a/packages/playground/src/index.tsx
+++ b/packages/playground/src/index.tsx
@ -0,0 +1,92 @@
+/**
+ * TODO explain this file
+ * */
+/// <reference types="vite/client" />
+
+import type {$FixMe} from '@theatre/shared/utils/types'
+import {mapKeys} from 'lodash-es'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const groups = {
+  shared: mapKeys(import.meta.glob('./shared/*/index.tsx'), (_, path) =>
+    pathToModuleName(path),
+  ),
+  personal: mapKeys(import.meta.glob('./personal/*/index.tsx'), (_, path) =>
+    pathToModuleName(path),
+  ),
+  tests: mapKeys(import.meta.glob('./tests/*/index.tsx'), (_, path) =>
+    pathToModuleName(path),
+  ),
+}
+
+function pathToModuleName(path: string): string {
+  const matches = path.match(
+    /^\.\/(shared|personal|tests)\/([a-zA-Z0-9\-\s]+)\/index\.tsx$/,
+  )
+
+  if (!matches) {
+    throw new Error(
+      `module ${path} has invalid characters in its path. Valid names should match the regexp above this line.`,
+    )
+  }
+
+  return matches[2]
+}
+
+const Home = () => (
+  <ul>
+    {Object.entries(groups).map(([groupName, modules]) => (
+      <li key={`li-${groupName}`}>
+        <span>{groupName}</span>
+        <Group
+          key={`group-${groupName}`}
+          groupName={groupName}
+          modules={modules}
+        />
+      </li>
+    ))}
+  </ul>
+)
+
+const Group = (props: {groupName: string; modules: Record<string, $FixMe>}) => {
+  const {groupName, modules} = props
+  return (
+    <ul>
+      {Object.entries(modules).map(([moduleName, callback]) => (
+        <li key={`li-${moduleName}`}>
+          <a href={`/${groupName}/${moduleName}`}>{moduleName}</a>
+          {/* <Group key={`group-${group}`} modules={modules} /> */}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const currentPathname = document.location.pathname
+
+if (currentPathname === '/') {
+  renderHome()
+} else {
+  const parts = currentPathname.match(
+    /^\/(shared|personal|tests)\/([a-zA-Z0-9\-]+)$/,
+  )
+  if (parts) {
+    const [, groupName, moduleName] = parts
+    const group = groups[groupName as 'shared' | 'personal']
+    if (!group) {
+      throw new Error(`Unknown group ${groupName}`)
+    }
+    const module = group[moduleName]
+    if (!module) {
+      throw new Error(`Unknown module ${moduleName}`)
+    }
+    module()
+  } else {
+    throw new Error(`Unknown path ${currentPathname}`)
+  }
+}
+
+function renderHome() {
+  ReactDOM.render(React.createElement(Home), document.getElementById('root'))
+}
--- a/packages/playground/src/tests/setting-static-props/index.tsx
+++ b/packages/playground/src/tests/setting-static-props/index.tsx
@ -0,0 +1,13 @@
+import studio from '@theatre/studio'
+import {getProject} from '@theatre/core'
+
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('sample project')
+const sheet = project.sheet('sample sheet')
+const obj = sheet.object('sample object', {
+  position: {
+    x: 0,
+    y: 0,
+  },
+})
--- a/packages/playground/src/tests/setting-static-props/test.e2e.ts
+++ b/packages/playground/src/tests/setting-static-props/test.e2e.ts
@ -0,0 +1,47 @@
+import {test, expect} from '@playwright/test'
+import percySnapshot from '@percy/playwright'
+
+const isMac = process.platform === 'darwin'
+
+test.describe('setting-static-props', () => {
+  test.beforeEach(async ({page}) => {
+    // Go to the starting url before each test.
+    await page.goto('http://localhost:8080/tests/setting-static-props')
+  })
+
+  test('Undo/redo', async ({page}) => {
+    await page.locator('[data-testid="OutlinePanel-TriggerButton"]').click()
+
+    await page.locator('span:has-text("sample object")').first().click()
+
+    const detailPanel = page.locator('[data-testid="DetailPanel-Object"]')
+
+    const firstInput = detailPanel.locator('input[type="text"]').first()
+    // Click input[type="text"] >> nth=0
+    await firstInput.click()
+    // Fill input[type="text"] >> nth=0
+    await firstInput.fill('1')
+    // Press Enter
+    await firstInput.press('Enter')
+    const secondInput = detailPanel.locator('input[type="text"]').nth(1)
+    // Click input[type="text"] >> nth=1
+    await secondInput.click()
+    // Fill input[type="text"] >> nth=1
+    await secondInput.fill('2')
+    // Press Enter
+    await secondInput.press('Enter')
+
+    const metaKey = isMac ? 'Meta' : 'Control'
+
+    // Press z with modifiers
+    await page.locator('body').press(`${metaKey}+z`)
+    await expect(firstInput).toHaveAttribute('value', '1')
+    await expect(secondInput).toHaveAttribute('value', '0')
+    await page.locator('body').press(`${metaKey}+Shift+z`)
+    await expect(firstInput).toHaveAttribute('value', '1')
+    await expect(secondInput).toHaveAttribute('value', '2')
+
+    // Our first visual regression test
+    await percySnapshot(page, test.info().titlePath.join('/') + '/After redo')
+  })
+})