JS tests in browser in container

I recently started a project with ionic5 and angular6 and wanted to execute tests, in a container of course.

droxy.toml

 [[command]]
    name            = "npm-test"
    entrypoint      = "npm"
    command         = "test"
    image           = "npm-chrome:latest"
    removeContainer = true
    impersonate     = true
    addGroups       = true
    workDir         = "${PWD}"
    isInteractive   = true
    requireEnvVars  = true
    envvars         = [
      "PWD=${PWD}",
      "HOME=${HOME}",
      "SSH_AUTH_SOCK=/run/ssh.sock",
      "DISPLAY=unix${DISPLAY}",
    ]
    volumes         = [
        "${PWD}:${PWD}",
        "${HOME}:${HOME}",
        "${SSH_AUTH_SOCK}:/run/ssh.sock",
        "/etc/passwd:/etc/passwd:ro",
        "/etc/group:/etc/group:ro",
        "/tmp/.X11-unix:/tmp/.X11-unix",
    ]

Enable Sandbox mode for Parma and Protractor

karma.conf.js

        browsers: ['chrome_in_container'],
        customLaunchers: {
            chrome_in_container: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },

protractor.conf.js

    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            'args': ['--no-sandbox']
        }
    },

Rebuild sass

As a workaround I patched the npm test command to rebuild sass inside the container.
This of course takes longer to start, but once karma has been started it keeps running watching for changes.

package.json

"test": "npm rebuild node-sass && ng test",

Run Chrome in a container

Whenever you try to run some application inside a container there probably was someone faster than you.
In many times it will be JessFraz.
So it's always a good idea to take a look at her dockerfiles repo for solutions:
JessFraz's Dockerfile for chrome in a container

Here's the sample Dockerfile I used to test this integration:
npm-chrome

FROM ubuntu:bionic

# Debian package configuration use the noninteractive frontend: It never interacts with the user at all, and makes the default answers be used for all questions.
# http://manpages.ubuntu.com/manpages/wily/man7/debconf.7.html
ENV DEBIAN_FRONTEND noninteractive

# Update is used to resynchronize the package index files from their sources. An update should always be performed before an upgrade.
RUN apt-get update -qqy \
  && apt-get -qqy install \
    apt-utils \
    wget \
    sudo \
    curl \
    git

# Font libraries
RUN apt-get update -qqy \
  && apt-get -qqy install \
    fonts-ipafont-gothic \
    xfonts-100dpi \
    xfonts-75dpi \
    xfonts-cyrillic \
    xfonts-scalable \
    ttf-ubuntu-font-family \
    libfreetype6 \
    libfontconfig \
    libcanberra-gtk-module \
    libcanberra-gtk3-module

# Nodejs 10 with npm install
# https://github.com/nodesource/distributions#installation-instructions
RUN apt-get update -qqy \
  && apt-get -qqy install \
    software-properties-common
RUN curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
RUN apt-get update -qqy \
  && apt-get -qqy install \
    nodejs \
    build-essential

# Yarn
RUN wget -q -O - https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - \
  && sh -c 'echo "deb https://dl.yarnpkg.com/debian/ stable main" >> /etc/apt/sources.list.d/yarn.list'

# Latest Google Chrome installation package
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - \
  && sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'

# Latest Ubuntu Google Chrome, JRE
RUN apt-get update -qqy \
  && apt-get -qqy install \
    google-chrome-stable \
    firefox \
    default-jre \
    yarn

RUN GECKODRIVER_VERSION=$(curl --silent "https://api.github.com/repos/mozilla/geckodriver/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/') \
  && echo $GECKODRIVER_VERSION \
  && wget --no-verbose --output-document /tmp/geckodriver.tar.gz https://github.com/mozilla/geckodriver/releases/download/$GECKODRIVER_VERSION/geckodriver-$GECKODRIVER_VERSION-linux64.tar.gz \
  && tar --directory /opt -zxf /tmp/geckodriver.tar.gz \
  && chmod +x /opt/geckodriver \
  && ln -fs /opt/geckodriver /usr/bin/geckodriver

RUN apt-get clean \
  && rm -rf /var/lib/apt/lists/*

RUN rm -fr /root/tmp
RUN yarn global add \
    protractor \
    typescript \
  && npm update \
  && webdriver-manager update

WORKDIR /protractor/

ENV HOME=/protractor/project
RUN chmod -Rf 777 .

ENTRYPOINT ["npm"]