Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1408 support array column type in recordedit #2340

Merged
merged 79 commits into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
54608a2
#1408 added draggable components for array fields
ladukaraniket Jul 7, 2023
6b863f0
#1408 - implemented Apply All and Clear all functionality for multi-edit
ladukaraniket Jul 14, 2023
eae6a7a
#1408 squish array input buttons when cell width is small
ladukaraniket Jul 18, 2023
ff96ebc
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Jul 18, 2023
3df280a
minor fixes
ladukaraniket Jul 18, 2023
e50cf43
#1408 addressed PR comments, added validations for array fields
ladukaraniket Oct 4, 2023
2c9b643
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Oct 4, 2023
bfa3c2a
fix scss formatting
ladukaraniket Oct 4, 2023
d7a95a8
fixed Strict Mode related issue with other minor fixes
ladukaraniket Oct 6, 2023
8f471b0
minor refactoring
ladukaraniket Oct 6, 2023
31e0b5f
fixed padding for add button
ladukaraniket Oct 18, 2023
bb6d22f
fixed coloring of buttons in Set All
ladukaraniket Oct 18, 2023
a472d75
fixed action button spacing in timestamp field
ladukaraniket Oct 18, 2023
a6fbe13
fix 'uncontrolled inputs warning'
ladukaraniket Oct 18, 2023
aeb6c19
bugfix and incremental performance improvement
ladukaraniket Oct 26, 2023
f821e49
improved performance for Apply all and Clear All
ladukaraniket Nov 27, 2023
b154d58
fix import
ladukaraniket Nov 27, 2023
781d953
refactoring
ladukaraniket Dec 6, 2023
a01807d
implement Apply All and Clear All for Foreign Key
ladukaraniket Dec 7, 2023
6618eb7
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Jan 31, 2024
3883a9f
minor refactoring to remove unnecessary imports and useState hook
ladukaraniket Feb 7, 2024
a415714
implement arrayfield using useFieldArray. Isolate ChaiseDroppable to …
ladukaraniket Feb 20, 2024
6562bbe
fix behavior of TimeStamp ArrayField
ladukaraniket Feb 21, 2024
e17f417
containerized testing using docker
ladukaraniket Mar 13, 2024
acfaa0a
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Mar 14, 2024
f76a172
Merge branch 'containerize-e2e-docker' of https://github.com/informat…
ladukaraniket Mar 14, 2024
7568d85
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Mar 21, 2024
aaf7523
testing array inputs - initial commit
ladukaraniket Mar 21, 2024
a213c0e
Bump follow-redirects from 1.15.4 to 1.15.6 (#2414)
dependabot[bot] Mar 18, 2024
3d56d83
minor fixes
ladukaraniket Jul 18, 2023
e1b23dc
fix scss formatting
ladukaraniket Oct 4, 2023
0c8836f
fixed Strict Mode related issue with other minor fixes
ladukaraniket Oct 6, 2023
7b4d51e
minor refactoring
ladukaraniket Oct 6, 2023
5309c0c
fixed padding for add button
ladukaraniket Oct 18, 2023
07053c2
fixed coloring of buttons in Set All
ladukaraniket Oct 18, 2023
871c82e
fixed action button spacing in timestamp field
ladukaraniket Oct 18, 2023
0a127db
fix 'uncontrolled inputs warning'
ladukaraniket Oct 18, 2023
4aeccad
bugfix and incremental performance improvement
ladukaraniket Oct 26, 2023
01f7819
improved performance for Apply all and Clear All
ladukaraniket Nov 27, 2023
bf2ad91
fix import
ladukaraniket Nov 27, 2023
10521bd
refactoring
ladukaraniket Dec 6, 2023
2286dde
implement Apply All and Clear All for Foreign Key
ladukaraniket Dec 7, 2023
01da382
minor refactoring to remove unnecessary imports and useState hook
ladukaraniket Feb 7, 2024
ff0a871
implement arrayfield using useFieldArray. Isolate ChaiseDroppable to …
ladukaraniket Feb 20, 2024
8e1cff6
fix behavior of TimeStamp ArrayField
ladukaraniket Feb 21, 2024
dd9b73e
containerized testing using docker
ladukaraniket Mar 13, 2024
434367b
testing array inputs - initial commit
ladukaraniket Mar 21, 2024
907d399
add validation and add new arrayItem test cases
ladukaraniket Mar 26, 2024
8e8a9d3
Merge branch 'master' of https://github.com/informatics-isi-edu/chais…
ladukaraniket Mar 26, 2024
c8eb0e2
Merge branch '1408-support-array-column-type-in-recordedit' of https:…
ladukaraniket Mar 26, 2024
c6f512b
add skeleton for testing array in multi-form-input spec
RFSH Mar 27, 2024
7cec1eb
refactored element selectors
ladukaraniket Apr 2, 2024
2c44c3a
cleanup the e2e-test-docker.md + add toc
RFSH Apr 3, 2024
5d39352
Fixed behavior of clear all for array type
ladukaraniket Apr 9, 2024
43b2f28
Update test cases for multi-form to support array type. Minor fixes
ladukaraniket Apr 9, 2024
98f4449
Merge branch '1408-support-array-column-type-in-recordedit' of https:…
ladukaraniket Apr 9, 2024
043076c
no longer need to copy ssh file in the container
ladukaraniket Apr 10, 2024
5196420
address PR review comments
ladukaraniket Apr 16, 2024
acc5c4d
modify array field values before submission
ladukaraniket Apr 17, 2024
867df8d
fixed loading of default values. Fixed behavior of timestamp field wi…
ladukaraniket Apr 18, 2024
411a67d
clear addNewField value once element is added. some styling changes
ladukaraniket Apr 18, 2024
37a036c
css formatting
ladukaraniket Apr 18, 2024
011265f
revert css to the version in master
ladukaraniket Apr 18, 2024
53ed9ce
address PR review comments
ladukaraniket Apr 18, 2024
65d0a40
show error message for required arrayfield
ladukaraniket Apr 19, 2024
f8af8f0
Merge branch 'master' of github.com:informatics-isi-edu/chaise into 1…
RFSH Apr 23, 2024
95fb466
address review comments and update test cases
ladukaraniket Apr 24, 2024
4229219
Merge branch '1408-support-array-column-type-in-recordedit' of https:…
ladukaraniket Apr 24, 2024
c723f81
modify test cases to use values from test params for arrayfields.
ladukaraniket Apr 26, 2024
95dd756
add a case to test required arrayfield. Add tests for boolean arrayfield
ladukaraniket Apr 29, 2024
8af9d4d
minor fix
ladukaraniket Apr 29, 2024
a560e8f
Merge branch 'master' of github.com:informatics-isi-edu/chaise into 1…
RFSH May 1, 2024
8ccca2a
fix issues in the code and test cases + refactor new code
RFSH May 2, 2024
91b3f16
fixed warnings in dev mode
ladukaraniket May 2, 2024
34d3417
Merge branch '1408-support-array-column-type-in-recordedit' of https:…
ladukaraniket May 2, 2024
f8aaed7
remove array_text from multi-form-input spec
RFSH May 2, 2024
d911d0f
fix the ref issue in array-field
RFSH May 2, 2024
590b798
add a test case for array inputs in multi-form-input
RFSH May 6, 2024
9ee3767
Merge branch 'master' of github.com:informatics-isi-edu/chaise into 1…
RFSH May 6, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,4 @@ config/*-config.js
# old config files (should be removed when we deprecated these locations
/chaise-config.js
/google-dataset-config.js
viewer/viewer-config.js
viewer/viewer-config.js
303 changes: 303 additions & 0 deletions docs/dev-docs/e2e-test-docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
# End to End Testing using Docker

This guide outlines the process to containerize chaise using docker to facilitate quick and easy end to end testing.

## Table of contents

- [1. Install dependencies](#1-install-dependencies)
* [1.1 Install Docker](#11-install-docker)
+ [What is Docker?](#what-is-docker)
+ [Different ways to install Docker](#different-ways-to-install-docker)
* [1.2 Install X11 server](#12-install-x11-server)
+ [What is X11 server?](#what-is-x11-server)
+ [Different ways to install X11 server](#different-ways-to-install-x11-server)
- [2. Build a Docker image using Dockerfile](#2-build-a-docker-image-using-dockerfile)
+ [What is a Dockerfile](#what-is-a-dockerfile)
+ [Chaise Dockerfiles](#chaise-dockerfiles)
+ [How to build a Docker image](#how-to-build-a-docker-image)
- [3. Run the container](#3-run-the-container)
- [4. Run the tests](#4-run-the-tests)
- [5. Cleanup](#5-cleanup)

## 1. Install dependencies

### 1.1 Install Docker

#### What is Docker?

Docker is a platform that allows you to package, distribute, and run applications within containers. Containers provide a lightweight, portable environment that ensures consistency across different environments. Docker simplifies the deployment process by enabling developers to encapsulate their applications and all their dependencies into a single unit called a container.


#### Different ways to install Docker

There are several methods to install Docker depending on your operating system:

1. **Docker Desktop (for Windows and macOS) `recommended`:** Docker Desktop is an easy-to-install application that provides a Docker environment for Windows and macOS users. It includes Docker Engine, Docker CLI client, Docker Compose, Docker Content Trust, Kubernetes, and Credential Helper. [Download Docker Desktop Here](https://www.docker.com/products/docker-desktop/)

2. **Docker Engine (for Linux):** Docker Engine is available for Linux distributions like Ubuntu, Debian, CentOS, and others. You can install Docker Engine using package managers like apt, yum, or dnf, depending on your Linux distribution.

Choose the installation method that best suits your requirements and operating system.

### 1.2 Install X11 server

#### What is X11 server?

[X11](https://en.wikipedia.org/wiki/X_Window_System), also known as X Window System or X, is a graphical windowing system that provides a framework for building graphical user interfaces (GUIs) on Unix-like operating systems. The X11 server is a crucial component of this system. The X11 server serves as a mediator between the hardware (graphics hardware) and software (applications) layers, facilitating the display of graphical elements on the screen and handling user input events such as mouse clicks and keyboard input.

Using an X11 server is necessary to run graphical applications within the container and display their graphical output on the host system. This way we can support **Headful Testing**

#### Different ways to install X11 server

1. **Microsoft Windows** - Download and install VcXsrv [here](https://sourceforge.net/projects/vcxsrv/).
2. **Mac and Linux** - will be updated soon

## 2. Build a Docker image using Dockerfile

#### What is a Dockerfile

A Dockerfile is a text file that contains instructions for building a Docker image. It specifies the base image, commands to install dependencies, configure the environment, and run applications within the container. Dockerfiles streamline the process of creating reproducible and portable Docker images for deploying applications in containerized environments.

#### Chaise Dockerfiles

You have a choice between two Dockerfiles:

1. `Dockerfile.chaise-test-env`: @aniket explain

2. `Dockerfile.chaise-test-env.local`: @aniket explain

<details>
<summary>Click here for step by step explanation of Dockerfile</summary>

This following provides an in-depth explanation of each step in the provided Dockerfile. It also highlights commonly faced problems and solutions.

##### Step 1: Base Image
```dockerfile
FROM ubuntu:20.04
```
This line sets the base image as Ubuntu 20.04 for the Docker container.

##### Step 2: Update package repository and install dependencies
```dockerfile
RUN apt-get update \
&& apt-get install -y wget gnupg \
&& wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
&& sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] https://dl-ssl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
&& apt-get update \
&& apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 \
--no-install-recommends \
&& service dbus start \
&& rm -rf /var/lib/apt/lists/*
```
Notes:
- This step updates the package repository and installs necessary dependencies including `wget`, `gnupg`, and Google Chrome Stable.
- It adds Google Chrome's GPG key to ensure the integrity of the downloaded packages.
- Fonts and other necessary packages for Google Chrome are installed.
- `dbus` service is started. DBus, or Desktop Bus, is a message bus system that provides a simple way for applications to communicate with each other. It's a communication mechanism between software components within the same system or even across different systems.
1. Google Chrome Stability: Here, DBus is started explicitly before installing Google Chrome. This is crucial because Chrome relies on DBus for certain functionalities like accessing the system's notification system or interacting with hardware devices.

2. Graphical User Interface (GUI) Applications: Since our containerized application requires interaction with graphical elements or desktop services, DBus becomes essential. It enables the containerized application to communicate with the host's desktop environment.

- Finally, it cleans up temporary files to reduce the image size.

Common Problems:
- If the Google Chrome installation fails, it could be due to network issues or an expired GPG key. Ensure that the network connection is stable and try updating the key or using an alternative mirror for downloading Google Chrome.

##### Step 3: Install additional dependencies
```dockerfile
RUN apt-get update && \
apt-get install -y \
curl \
make \
rsync \
git \
sudo \
openjdk-8-jdk
```
This step installs additional dependencies required for the subsequent steps including `curl`, `make`, `rsync`, `git`, `sudo`, and `openjdk-8-jdk`.

##### Step 4: Install Node.js
```dockerfile
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nodejs
```
- It downloads and executes the Node.js setup script for version 16.x.
- Node.js is installed using `apt-get`.

##### Step 5: Set working directory and copy application files
```dockerfile
WORKDIR /app
COPY ./chaise /app/chaise
```
- Sets the working directory as `/app`.
- Copies application files `chaise` from the host to the container's `/app` directory.

##### Step 6: Install test dependencies
```dockerfile
RUN cd chaise && \
make deps-test
```
Changes directory to `/app/chaise` and installs test dependencies using `make`.

##### Step 7: Add user and set permissions
```dockerfile
RUN echo 'chaiseuser ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers.d/chaiseuser

RUN groupadd -r chaiseuser && useradd -rm -g chaiseuser -G audio,video chaiseuser && \
echo 'chaiseuser:test' | chpasswd && \
chmod -R 777 /app && \
chmod -R 777 /home
```
- Adds `chaiseuser` to sudoers without requiring a password.
- Creates a user `chaiseuser`, assigns it to groups `audio` and `video`, and sets its password.
- Adjusts permissions for `/app` and `/home`.

##### Step 8: Set environment variables
```dockerfile
ENV DBUS_SESSION_BUS_ADDRESS autolaunch:
ENV DISPLAY host.docker.internal:0.0
```
- `DBUS_SESSION_BUS_ADDRESS`:
- Specifies the address of the DBus session bus. The session bus is responsible for communication between user applications.
- Setting this variable ensures that applications running within the Docker container can communicate with the DBus session bus on the host system.
- In this Dockerfile, `autolaunch:` is set as the value, indicating that the DBus session bus address should be determined automatically based on the current session.

- `DISPLAY`:
- Specifies the X11 display server to use.
- When running GUI applications within a Docker container, it's crucial to set the `DISPLAY` variable correctly so that the application can display its graphical user interface on the host system's display.
- In this Dockerfile, `host.docker.internal:0.0` is set as the value, telling the application within the container to display its GUI on the X11 server running on the host system.

##### Step 9: Set User
```dockerfile
USER chaiseuser
```
Sets the user for subsequent commands to `chaiseuser`. We cannot run chrome inside a container as root user.

##### Step 10: Define default command
```dockerfile
CMD ["/bin/bash"]
```
Specifies the default command to run when the container starts, in this case, it opens a Bash shell.

</details>


#### How to build a Docker image

To build a Docker image follow these steps:

1. Open a terminal or command prompt.
2. Navigate to the directory containing `chaise`.
```
parent_dir
└── chaise
```

3. Run the following command to build the Docker image:
```
docker build -t chaise-test-env -f chaise/test/e2e/docker/Dockerfile.chaise-test-env .
```
or
```
docker build -t chaise-test-env -f chaise/test/e2e/docker/Dockerfile.chaise-test-env.local .
```
- `docker build`: This is the Docker command used to build Docker images.
- `-t chaise-test-env`: The `-t` flag is used to specify a tag for the image being built. In this case, the tag is `chaise-test-env`. Tags are used to identify different versions or variations of an image.
- `-f chaise/test/e2e/docker/Dockerfile.chaise-test-env`: The `-f` flag is used to specify the path to the Dockerfile to be used for building the image.
- `.`: The dot `.` at the end of the command specifies the build context. It tells Docker to use the current directory as the build context. The build context includes the Dockerfile and any files or directories referenced by the Dockerfile (e.g., files copied into the image using `COPY` instructions).

4. After building, you can verify that the image was created successfully by running:
```
docker images
```

## 3. Run the container

1. Once the image is built, you can run a container by using the following command:
```
docker run --name <container_name> -d -i chaise-test-env
```

Or if running tests locally, you can run a container by using the following command:
```
docker run --name <container_name> -d -i \
-v <path-to-chaise>/chaise:/app/chaise \
-v <path-to-ssh-directory>:/etc/ssh \
chaise-test-local
```
Notes
- `docker run`: Command to run a Docker container.
- `--name <container_name>`: Specifies the name of the container.
- `-d`: Runs the container in detached mode, meaning it runs in the background.
- `-i`: Keeps STDIN open even if not attached, allowing interaction.
- `-v <path-to-chaise>/chaise:/app/chaise`: Mounts the local directory "<path-to-chaise>/chaise" to "/app/chaise" in the container.
- `-v <path-to-ssh-directory>:/etc/ssh`: Mounts the local "ssh" directory to "/etc/ssh" in the container.
- `chaise-test-local`: Specifies the Docker image used to create and run the container.


2. To see the running containers, use the following command:
```
docker ps
```
This command will show the container ID, name, status, ports, etc.

3. You can interact with the container using various Docker commands:
- `docker exec -it <container_name> bash`: This command opens a bash shell inside the running container, allowing you to execute commands.
- `docker logs <container_name>`: Use this command to view the logs of the container.
- `docker stop <container_name>`: Stops the running container.
- `docker start <container_name>`: Starts a stopped container.
- `docker rm <container_name>`: Removes a stopped container.

## 4. Run the tests

To run the test cases,

1. Open a terminal and run the following command which will give you bash access to the container
```
docker exec -it <container_name> bash
```

2. Add your private key to the ssh-agent
```
ssh-agent bash
ssh-add sshKey
```

3. Set the environemnt variables that are needed for running test cases:
```
HOST=dev.derivacloud.org
USERNAME=aniketl # Replace with your username
export CHAISE_BASE_URL=https://${HOST}/~${USERNAME}/chaise
export ERMREST_URL=https://${HOST}/ermrest
export REMOTE_CHAISE_DIR_PATH=${USERNAME}@${HOST}:public_html/chaise
export WEB_AUTH_TOKEN="E19wWB1Mh0S5pv04NcI0CcpS" #Replace with your token
export AUTH_COOKIE="webauthn=${WEB_AUTH_TOKEN};"
export RESTRICTED_AUTH_COOKIE="webauthn=${WEB_AUTH_TOKEN};"
export SHARDING=false
export HEADLESS=false
```

4. change directory to chaise:

```
cd chaise
```

5. Run the test cases. For example:

```
make testnavbar
```

## 5. Cleanup

After you're done with the container, you can remove it using:

```
docker rm <container_name>
```

You can also remove the Docker image using:

```
docker rmi <image_name>:<tag>
```
Loading
Loading