test: provide an end to end test for the plugin

.github/workflows/e2e.yaml

@@ -0,0 +1,43 @@
+name: e2e test
+
+on:
+  push:
+    branches:
+      - '**'
+jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16]
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+      - name: use node ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+      - name: install dependencies
+        uses: cypress-io/github-action@v2
+        with:
+          runTests: false
+      - name: print cypress info
+        run: npx cypress info
+      - name: test on chrome
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: e2e
+          browser: chrome
+          record: true
+          build: true
+          install: false
+          start: npm run start:gatsby
+          wait-on: http://localhost:8000
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GATSBY_NOTION_TOKEN: ${{ secrets.GATSBY_NOTION_TOKEN }}
+          GATSBY_NOTION_DATABASES: ${{ secrets.GATSBY_NOTION_DATABASES }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          DEBUG: '@cypress/github-action'

e2e/.presetterrc.json

@@ -0,0 +1,17 @@
+{
+  "preset": "presetter-preset-strict",
+  "config": {
+    "gitignore": ["/.cache", "/public", "/screenshots", "/types/~*", "/videos"],
+    "tsconfig": {
+      "compilerOptions": {
+        "lib": ["DOM"],
+        "types": ["cypress"]
+      }
+    }
+  },
+  "variable": {
+    "source": "src",
+    "output": "public"
+  },
+  "ignores": [".babelrc.json"]
+}

e2e/cypress.json

@@ -0,0 +1,10 @@
+{
+  "downloadsFolder": "downloads",
+  "fixturesFolder": "fixtures",
+  "integrationFolder": "integration",
+  "pluginsFile": false,
+  "screenshotsFolder": "screenshots",
+  "supportFile": false,
+  "testFiles": "**/*.ts",
+  "videosFolder": "videos"
+}

e2e/gatsby-config.ts

@@ -0,0 +1,41 @@
+/*
+ *                            *** MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ *
+ * @summary   Specify the configuration for Gatsby.
+ *
+ *            See https://www.gatsbyjs.org/docs/gatsby-config
+ *            for detailed usage
+ *
+ * @author    Alvis HT Tang <[email protected]>
+ * @license   MIT
+ * @copyright Copyright (c) 2021 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+
+/* istanbul ignore file */
+
+import type { GatsbyConfig } from 'gatsby';
+
+export const plugins: GatsbyConfig['plugins'] = [
+  {
+    resolve: 'gatsby-plugin-graphql-codegen',
+    options: {
+      fileName: './types/~graphql.ts',
+      documentPaths: ['./src/**/*.{ts,tsx}'],
+    },
+  },
+  {
+    resolve: 'gatsby-source-notion',
+    options: {
+      previewCallRate: 0.5,
+    },
+  },
+];
+
+export default {
+  plugins,
+};

e2e/integration/records.ts

@@ -0,0 +1,31 @@
+/*
+ *                            *** MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ *
+ * @summary   Tests on the ability read data from notion
+ *
+ * @author    Alvis HT Tang <[email protected]>
+ * @license   MIT
+ * @copyright Copyright (c) 2021 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+
+import { after } from 'cypress/types/lodash';
+
+describe('capture databases and pages from notion', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8000');
+  });
+
+  afterEach(() => {
+    cy.screenshot();
+  });
+
+  it('print database and page titles', () => {
+    cy.get('#databases li').should('have.length.gt', 0);
+    cy.get('#pages li').should('have.length.gt', 0);
+  });
+});

e2e/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "e2e",
+  "version": "0.0.0",
+  "description": "end to end test for the plugin",
+  "private": true,
+  "scripts": {
+    "build": "ts-node-cwd --transpile-only -- ../node_modules/.bin/gatsby build --verbose",
+    "prepare": "presetter bootstrap",
+    "start": "start-server-and-test start:gatsby 8000 \"cypress open\"",
+    "start:gatsby": "cross-env CYPRESS_SUPPORT=y ts-node-cwd --transpile-only -- ../node_modules/.bin/gatsby develop --port 8000 --verbose",
+    "test": "start-server-and-test start:gatsby 8000 \"cypress run\""
+  },
+  "devDependencies": {
+    "cypress": "^8.7.0",
+    "gatsby-plugin-graphql-codegen": "^3.0.0",
+    "presetter": "^3.0.0",
+    "presetter-preset-strict": "^3.0.0",
+    "start-server-and-test": "^1.0.0"
+  },
+  "dependencies": {
+    "gatsby": "^3.0.0-next.0"
+  }
+}

e2e/src/pages/index.tsx

@@ -0,0 +1,76 @@
+/*
+ *                            *** MIT LICENSE ***
+ * -------------------------------------------------------------------------
+ * This code may be modified and distributed under the MIT license.
+ * See the LICENSE file for details.
+ * -------------------------------------------------------------------------
+ *
+ * @summary   Test page
+ *
+ * @author    Alvis HT Tang <[email protected]>
+ * @license   MIT
+ * @copyright Copyright (c) 2021 - All Rights Reserved.
+ * -------------------------------------------------------------------------
+ */
+
+import { graphql } from 'gatsby';
+import React from 'react';
+
+import type { PageProps } from 'gatsby';
+import type { FC } from 'react';
+
+import type { IndexPageQuery } from '~graphql';
+
+// page query
+export const query = graphql`
+  query IndexPage {
+    allNotionDatabase {
+      nodes {
+        ref
+        title
+      }
+    }
+    allNotionPage {
+      nodes {
+        ref
+        title
+      }
+    }
+  }
+`;
+
+/**
+ * the test page
+ * @inheritdoc
+ * @returns a component holding the test page
+ */
+const Test: FC<PageProps<IndexPageQuery>> = ({ data }) => (
+  <>
+    <section id="databases">
+      <h1>Databases</h1>
+      <ul>
+        {data.allNotionDatabase.nodes.map(({ ref, title }) => (
+          <li key={ref}>{title}</li>
+        ))}
+      </ul>
+    </section>
+    <section id="pages">
+      <h1>Pages</h1>
+      <ul>
+        {data.allNotionPage.nodes.map(({ ref, title }) => (
+            <li key={ref}>{title}</li>
+        ))}
+      </ul>
+    </section>
+  </>
+);
+
+/**
+ * the test page
+ * @inheritdoc
+ * @returns a component holding the test page
+ */
+// const Test: FC<PageProps> = ({ data }) => <div>hi!</div>;
+
+export default Test;
+