test: add e2e tests (#40)

* chore: switch from npmignore to including file in package.json

* chore: add minimal example site to repo and start in ci

* fix(ci): remove serve from scripts

Prevents the CI from running indefinitely. This will be reintroduced when setting up cypress"

* chore: set up cypress and run in ci

Author: robinmetral

.eslintignore

@@ -0,0 +1,2 @@
+# ignoring examples because of eslint conflicts with the nested package
+examples

.github/workflows/test.yml

@@ -15,3 +15,9 @@ jobs:
         run: yarn install
       - name: Lint
         run: yarn lint
+      - name: E2E
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+        run: yarn e2e

.gitignore

@@ -3,3 +3,13 @@ node_modules
 
 # generated source plugin
 gatsby-node.js
+robinmetral-gatsby-source-s3-0.0.0-semantically-released.tgz
+
+# example site
+.env
+.cache
+public
+examples/gatsby-starter-source-s3/yarn.lock
+
+# cypress
+tests/screenshots

.npmignore

@@ -0,0 +1,8 @@
+{
+  "integrationFolder": "tests",
+  "screenshotsFolder": "tests/screenshots",
+  "fixturesFolder": false,
+  "supportFile": false,
+  "video": false,
+  "pluginsFile": false
+}

cypress.json

@@ -0,0 +1,23 @@
+require("dotenv").config();
+
+module.exports = {
+  siteMetadata: {
+    title: `gatsby-starter-source-s3`
+  },
+  plugins: [
+    {
+      resolve: `@robinmetral/gatsby-source-s3`,
+      options: {
+        aws: {
+          accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+          secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+          region: process.env.AWS_REGION
+        },
+        buckets: ["gatsby-source-s3-example", "gatsby-source-s3-example-2"]
+      }
+    },
+    // the sharp transformer and plugin are required to process images
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`
+  ]
+};

examples/gatsby-starter-source-s3/gatsby-config.js

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "name": "gatsby-starter-source-s3",
+  "description": "A simple starter to get started with @robinmetral/gatsby-source-s3",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "Robin Métral <[email protected]>",
+  "dependencies": {
+    "@robinmetral/gatsby-source-s3": "file:../../robinmetral-gatsby-source-s3-0.0.0-semantically-released.tgz",
+    "gatsby": "^2.19.7",
+    "gatsby-image": "^2.2.39",
+    "gatsby-plugin-sharp": "^2.4.3",
+    "gatsby-transformer-sharp": "^2.3.13",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

examples/gatsby-starter-source-s3/package.json

@@ -0,0 +1,36 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Img from "gatsby-image";
+
+const IndexPage = ({ data }) => (
+  <>
+    <h1>{data.site.siteMetadata.title}</h1>
+    {data.allS3Object.nodes.map(image => (
+      <Img fixed={image.localFile.childImageSharp.fixed} alt={image.Key} />
+    ))}
+  </>
+);
+
+export const IMAGES_QUERY = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    allS3Object {
+      nodes {
+        Key
+        localFile {
+          childImageSharp {
+            fixed(width: 256) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default IndexPage;

examples/gatsby-starter-source-s3/src/pages/index.js

@@ -11,24 +11,33 @@
     "gatsby-plugin",
     "gatsby-source-plugin"
   ],
+  "files": [
+    "gatsby-node.js"
+  ],
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@types/node": "^14.0.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
+    "cypress": "^4.5.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "gatsby": "^2.21.33",
     "husky": "^4.2.5",
     "prettier": "^1.19.1",
     "semantic-release": "^17.0.7",
+    "start-server-and-test": "^1.11.0",
     "typescript": "^3.9.2"
   },
   "scripts": {
     "build": "tsc",
-    "lint": "eslint '*/**/*.{ts,tsx}'"
+    "lint": "eslint '*/**/*.{ts,tsx}'",
+    "prestart": "yarn build && npm pack && (cd examples/gatsby-starter-source-s3 && yarn install && yarn add file:../../robinmetral-gatsby-source-s3-0.0.0-semantically-released.tgz)",
+    "start": "(cd examples/gatsby-starter-source-s3 && gatsby build && gatsby serve)",
+    "test": "cypress run",
+    "e2e": "start-server-and-test http://localhost:9000"
   },
   "dependencies": {
     "aws-sdk": "^2.678.0",

package.json

@@ -0,0 +1,7 @@
+describe("e2e", () => {
+  it("should source images from S3", () => {
+    cy.visit("http://localhost:9000");
+
+    cy.get("img").should("exist");
+  });
+});