Skip to content

Instantly share code, notes, and snippets.

@heaversm
Created August 30, 2022 16:07
Show Gist options
  • Select an option

  • Save heaversm/204c65326809cad4f44b09354d6f138b to your computer and use it in GitHub Desktop.

Select an option

Save heaversm/204c65326809cad4f44b09354d6f138b to your computer and use it in GitHub Desktop.

Revisions

  1. heaversm created this gist Aug 30, 2022.
    37 changes: 37 additions & 0 deletions docker-compose.yml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    version: '3'

    services:

    # the client container, running webpack and the dev server
    client:
    image: path_to/image
    networks:
    - allhosts
    volumes:
    # this is where our code is mounted into the running container
    - ./client/:/client
    - ./shared/:/client/src/shared-copied # see shared-copied.md
    working_dir: /client
    command: yarn start
    environment:
    PORT: 3000
    ports:
    - "3000:3000"
    e2e:
    #cypress/included runs tests immediately upon mount - less boilerplate but not sure how to defer loading until client is ready
    #image: "cypress/included:10.6.0"
    image: "cypress"
    build: ./e2e
    container_name: cypress
    network_mode: host
    depends_on:
    - client
    environment:
    - CYPRESS_baseUrl=http://localhost:3000
    # TODO: temporary - 30 second delay to wait for localhost to be ready, followed by execution of cypress tests
    command: ["./wait-for-it.sh", "-t","30","http://localhost:3000", "--", "npx","cypress","run"]
    # TODO: try to run wait-on vs wait-for-it to avoid arbitrary timeouts
    volumes:
    - ./e2e/cypress:/app/cypress
    - ./e2e/cypress.config.js:/app/cypress.config.js
    - ./e2e/wait-for-it.sh:/app/wait-for-it.sh
    18 changes: 18 additions & 0 deletions e2e->Dockerfile
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    FROM cypress/base:14
    WORKDIR /app

    # dependencies will be installed only if the package files change
    COPY package.json .
    COPY package-lock.json .
    # delay script
    COPY wait-for-it.sh .

    # by setting CI environment variable we switch the Cypress install messages
    # to small "started / finished" and avoid 1000s of lines of progress messages
    # https://github.com/cypress-io/cypress/issues/1243
    ENV CI=1
    RUN npm ci
    # verify that Cypress has been installed correctly.
    # running this command separately from "cypress run" will also cache its result
    # to avoid verifying again when running the tests
    RUN npx cypress verify
    5 changes: 5 additions & 0 deletions e2e->cypress->e2e->spec.cy.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    //your tests here
    it("contains foo", () => {
    cy.visit("/");
    cy.get(".foo").should("contain", "foo");
    });
    8 changes: 8 additions & 0 deletions e2e->cypress.config.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    const { defineConfig } = require("cypress");

    module.exports = defineConfig({
    e2e: {
    baseUrl: "http://localhost:3000",
    supportFile: false,
    },
    });
    14 changes: 14 additions & 0 deletions e2e->package.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    {
    "name": "e2e",
    "version": "1.0.0",
    "main": "cypress.config.js",
    "scripts": {
    "start": "yarn && wait-on http://localhost:3000 && npx cypress run",
    },
    "devDependencies": {
    "cypress": "10.6.0"
    },
    "dependencies": {
    "wait-on": "6.0.1"
    }
    }