chore: initial cypress tests

.github/workflows/build.yml

@@ -23,7 +23,7 @@ jobs:
             packages/app/yarn.lock
             packages/core/yarn.lock
             packages/docs/yarn.lock
-          node-version: 16
+          node-version: 18
 
       - name: Install
         run: |
@@ -50,7 +50,7 @@ jobs:
             packages/app/yarn.lock
             packages/core/yarn.lock
             packages/docs/yarn.lock
-          node-version: 16
+          node-version: 18
 
       - name: Install
         run: |
@@ -75,7 +75,7 @@ jobs:
             packages/app/yarn.lock
             packages/core/yarn.lock
             packages/docs/yarn.lock
-          node-version: 16
+          node-version: 18
 
       - name: Install
         run: |
@@ -105,7 +105,7 @@ jobs:
             packages/app/yarn.lock
             packages/core/yarn.lock
             packages/docs/yarn.lock
-          node-version: 16
+          node-version: 18
 
       - name: Install
         run: |

.github/workflows/cypress.yml

@@ -0,0 +1,35 @@
+name: Cypress Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ["main", "next"]
+  pull_request:
+    branches: ["main", "next"]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          cache-dependency-path: |
+            yarn.lock
+            packages/app/yarn.lock
+            packages/core/yarn.lock
+            packages/docs/yarn.lock
+          node-version: 18
+
+      - name: Install
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run Cypress Tests
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn dev

.gitignore

@@ -2,3 +2,7 @@
 /node_modules
 *.log
 .vscode
+cypress/screenshots
+cypress/downloads
+.env
+.temp

.prettierignore

@@ -0,0 +1,4 @@
+dist/
+bin/
+public/
+.cache/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100
+}

BREAKING_CHANGES.md

@@ -0,0 +1,9 @@
+- View Filters config structure changed
+- View Groups config structure changed
+- `theme` props removed (use new `useTheme` hook instead)
+- date string template filter now use date-fns instead of momentjs
+- filter rules behavior changed for objects and lists
+- i18n settings `defaultLocale` => `default_locale`
+
+# Typescript
+- `StringOrTextField` has been split into `StringField` and `TextField`.

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "cypress";
+import setupNodeEvents from "./cypress/plugins";
+
+export default defineConfig({
+  projectId: "1c35bs",
+  retries: {
+    runMode: 0,
+    openMode: 0,
+  },
+  chromeWebSecurity: false,
+  e2e: {
+    video: false,
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents,
+    baseUrl: "http://localhost:8080",
+    specPattern: "cypress/e2e/*.spec.ts",
+  },
+});

cypress/README.md

@@ -0,0 +1,72 @@
+# Cypress Tests Guide
+
+## Introduction
+
+[Cypress](https://www.cypress.io/) is a JavaScript End to End Testing Framework that runs in the browser.
+
+Cypress tests run with a [local version](../packages/core/dev-test) of the CMS.
+
+During the setup of a spec file, the relevant `index.html` and `config.yml` are copied from `packages/core/dev-test/backends/<backend>` to `dev-test`.
+
+Tests for the `test` backend use mock data generated in `dev-test/backends/test/index.html`.
+
+Tests for the other backends use previously [recorded data](fixtures) and stub `fetch` [calls](support/commands.js#L52). See more about recording tests data [here](#recording-tests-data).
+
+## Run Tests Locally
+
+```bash
+yarn test:e2e # builds the demo site and runs Cypress in headless mode with mock data
+```
+
+## Debug Tests
+
+```bash
+yarn develop # starts a local dev server with the demo site
+yarn test:e2e:exec # runs Cypress in non-headless mode with mock data
+```
+
+## Recording Tests Data
+
+When recording tests, access to the relevant backend API is required, thus one must set up a `.env` file in the root project directory in the following format:
+
+```bash
+GITHUB_REPO_OWNER=owner
+GITHUB_REPO_NAME=repo
+GITHUB_REPO_TOKEN=tokenWithWritePermissions
+GITHUB_OPEN_AUTHORING_OWNER=forkOwner
+GITHUB_OPEN_AUTHORING_TOKEN=tokenWithWritePermissions
+
+GITLAB_REPO_OWNER=owner
+GITLAB_REPO_NAME=repo
+GITLAB_REPO_TOKEN=tokenWithWritePermissions
+
+BITBUCKET_REPO_OWNER=owner
+BITBUCKET_REPO_NAME=repo
+BITBUCKET_OUATH_CONSUMER_KEY=ouathConsumerKey
+BITBUCKET_OUATH_CONSUMER_SECRET=ouathConsumerSecret
+
+NETLIFY_API_TOKEN=netlifyApiToken
+NETLIFY_INSTALLATION_ID=netlifyGitHubInstallationId
+```
+
+> The structure of the relevant repo should match the settings in [`config.yml`](../packages/core/dev-test/backends/<backend>/config.yml#L1)
+
+To start a recording run the following commands:
+
+```bash
+yarn develop # starts a local dev server with the demo site
+yarn mock:server:start # starts the recording proxy
+yarn test:e2e:record-fixtures:dev # runs Cypress in non-headless and pass data through the recording proxy
+yarn mock:server:stop # stops the recording proxy
+```
+
+> During the recorded process a clone of the relevant repo will be created under `.temp` and reset between tests.
+
+Recordings are sanitized from any possible sensitive data and [transformed](plugins/common.js#L34) into an easier to process format.
+
+To avoid recording all the tests over and over again, a recommended process is to:
+
+1. Mark the specific test as `only` by changing `it("some test...` to `it.only("some test...` for the relevant test.
+2. Run the test in recording mode.
+3. Exit Cypress and stop the proxy.
+4. Run the test normally (with mock data) to verify the recording works.

cypress/cypress.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="cypress" />
+
+import type {
+  SetupBackendProps,
+  SetupBackendTestProps,
+  SeedRepoProps,
+  TeardownBackendTestProps,
+  TeardownBackendProps,
+} from './interface';
+import type { Config as CMSConfig, DeepPartial } from '@staticcms/core/interface';
+
+interface KeyProps {
+  shift?: boolean;
+  times?: number;
+}
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      task(event: 'setupBackend', props: SetupBackendProps): Chainable<SetupBackendResponse>;
+      task(event: 'setupBackendTest', props: SetupBackendTestProps): Chainable<Promise<null>>;
+      task(event: 'seedRepo', props: SeedRepoProps): Chainable<Promise<null>>;
+      task(event: 'teardownBackendTest', props: TeardownBackendTestProps): Chainable<Promise<null>>;
+      task(event: 'teardownBackend', props: TeardownBackendProps): Chainable<Promise<null>>;
+      task(event: 'updateConfig', props: DeepPartial<CMSConfig>): Chainable<Promise<null>>;
+
+      login(): Chainable;
+      loginAndNewPost(): Chainable;
+
+      dragTo(selector: string, options?: { delay?: number }): Chainable;
+
+      getMarkdownEditor(): Chainable;
+      confirmMarkdownEditorContent(expected: string): Chainable;
+      clearMarkdownEditorContent(): Chainable;
+      confirmRawEditorContent(expected: string): Chainable;
+
+      enter(props?: KeyProps): Chainable;
+      backspace(props?: KeyProps): Chainable;
+      selectAll(props?: KeyProps): Chainable;
+      up(props?: KeyProps): Chainable;
+      down(props?: KeyProps): Chainable;
+      left(props?: KeyProps): Chainable;
+      right(props?: KeyProps): Chainable;
+      tabkey(props?: KeyProps): Chainable;
+
+      selection(
+        fn: (this: Cypress.ObjectLike, currentSubject: JQuery<any>) => Chainable,
+      ): Chainable;
+      setSelection(
+        query:
+          | string
+          | {
+              anchorQuery: string;
+              anchorOffset?: number;
+              focusQuery: string;
+              focusOffset?: number;
+            },
+        endQuery: string,
+      ): Chainable;
+
+      setCursor(query: string, atStart?: boolean): Chainable;
+      setCursorBefore(query: string): Chainable;
+      setCursorAfter(query: string): Chainable;
+
+      print(message: string): Chainable;
+
+      insertCodeBlock(): Chainable;
+      insertEditorComponent(title: string): Chainable;
+
+      clickToolbarButton(title: string, opts: { times: number }): Chainable;
+      clickHeadingOneButton(opts: { times: number }): Chainable;
+      clickHeadingTwoButton(opts: { times: number }): Chainable;
+      clickOrderedListButton(opts: { times: number }): Chainable;
+      clickUnorderedListButton(opts: { times: number }): Chainable;
+      clickCodeButton(opts: { times: number }): Chainable;
+      clickItalicButton(opts: { times: number }): Chainable;
+      clickQuoteButton(opts: { times: number }): Chainable;
+      clickLinkButton(opts: { times: number }): Chainable;
+      clickModeToggle(): Chainable;
+    }
+  }
+}

cypress/e2e/_old/editorial_workflow_spec_bitbucket_backend.js

@@ -0,0 +1,30 @@
+import fixture from '../common/editorial_workflow';
+import * as specUtils from '../common/spec_utils';
+import { entry1, entry2, entry3 } from '../common/entries';
+
+const backend = 'bitbucket';
+
+describe('BitBucket Backend Editorial Workflow', () => {
+  let taskResult = { data: {} };
+
+  before(() => {
+    specUtils.before(taskResult, { publish_mode: 'editorial_workflow' }, backend);
+  });
+
+  after(() => {
+    specUtils.after(taskResult, backend);
+  });
+
+  beforeEach(() => {
+    specUtils.beforeEach(taskResult, backend);
+  });
+
+  afterEach(() => {
+    specUtils.afterEach(taskResult, backend);
+  });
+
+  fixture({
+    entries: [entry1, entry2, entry3],
+    getUser: () => taskResult.data.user,
+  });
+});

cypress/e2e/_old/editorial_workflow_spec_git-gateway_github_backend.js

@@ -0,0 +1,31 @@
+import fixture from '../common/editorial_workflow';
+import * as specUtils from '../common/spec_utils';
+import { entry1, entry2, entry3 } from '../common/entries';
+
+const backend = 'git-gateway';
+const provider = 'github';
+
+describe('Git Gateway (GitHub) Backend Editorial Workflow', () => {
+  let taskResult = { data: {} };
+
+  before(() => {
+    specUtils.before(taskResult, { publish_mode: 'editorial_workflow', provider }, backend);
+  });
+
+  after(() => {
+    specUtils.after(taskResult, backend);
+  });
+
+  beforeEach(() => {
+    specUtils.beforeEach(taskResult, backend);
+  });
+
+  afterEach(() => {
+    specUtils.afterEach(taskResult, backend);
+  });
+
+  fixture({
+    entries: [entry1, entry2, entry3],
+    getUser: () => taskResult.data.user,
+  });
+});

cypress/e2e/_old/editorial_workflow_spec_git-gateway_gitlab_backend.js

@@ -0,0 +1,31 @@
+import fixture from '../common/editorial_workflow';
+import * as specUtils from '../common/spec_utils';
+import { entry1, entry2, entry3 } from '../common/entries';
+
+const backend = 'git-gateway';
+const provider = 'gitlab';
+
+describe('Git Gateway (GitLab) Backend Editorial Workflow', () => {
+  let taskResult = { data: {} };
+
+  before(() => {
+    specUtils.before(taskResult, { publish_mode: 'editorial_workflow', provider }, backend);
+  });
+
+  after(() => {
+    specUtils.after(taskResult, backend);
+  });
+
+  beforeEach(() => {
+    specUtils.beforeEach(taskResult, backend);
+  });
+
+  afterEach(() => {
+    specUtils.afterEach(taskResult, backend);
+  });
+
+  fixture({
+    entries: [entry1, entry2, entry3],
+    getUser: () => taskResult.data.user,
+  });
+});