+ There are multiple ways to create radio buttons using the tailwind component
+ libray. You can either create them manually using the
+ InputRadio and InputLabel components, but this
+ requires a but more work to link form elements to ensure they are part of
+ the same group. The examples below demonstrate the three different ways to
+ use the InputRadioGroup component.
+
+
+
Default use: setting the name and values
+
+ Custom labels: passing an array of labels to display instead of the values
+
+
+ Showing a clear selection button: rendering the radio inputs with a clear
+ selection button, labels and a default value
+
+
+
Input radio group examples
+
+
+
+
diff --git a/e2e/README.md b/e2e/README.md
index cecdcc6704..93ba252dc6 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -1,45 +1,71 @@
-We have e2e tests using playwright
+# MOLGENIS End-to-end testing
+
+For the EMX2 component libraries and applications, we use [playwright](https://playwright.dev) for end-to-end testing. In the `e2e` folder, you will find the tests, documentation, and other configurations for running the molgenis E2E tests. In principle, a single file (`*.spec.ts`) contains one or more tests for one component.
+
+## Geting started
+
+To get started with end-to-end testing in MOLGENIS, clone the molgenis-emx2 repository and navigate to the `e2e` directory.
+
+```bash
+git clone https://github.com/molgenis/molgenis-emx2
+cd e2e
+```
+
+If you are creating a new test or fixing an existing test, create a new branch.
+
+```bash
+git switch -c fix/e2e-...
+git switch -c feat/e2e-...
+```
+
+### Install the dependencies
-#### To install
```bash
yarn install
```
-#### To test against a localhost:8080 run
+### Running the tests
+
+To test against a localhost:8080 run the following command.
+
```bash
npx playwright test
```
-#### You can also make the test start/stop emx2
+Additionally, you can also start/stop emx2 when running the tests.
+
```bash
set CI=true && npx playwright test
```
-#### You can also run from the molgenis-emx2 project root as follows
+Rather than changing the working directory to the `e2e` folder, you can also run the tests from the molgenis-emx2 project root.
+
```bash
npx playwright test --config e2e --project=chromium
```
-The test is part of .circleci/config.yml running that same command.
-When running this on a local emx2 server, run the following first (or add it to `.bash_profile`):
+The test is part of .circleci/config.yml running that same command. When running this on a local emx2 server, run the following first (or add it to `.bash_profile`):
+
```bash
export E2E_BASE_URL=http://localhost:8080/
```
-IMPORTANT: Do note that some tests will fail unless the local server is set up correctly!
+
+> [!IMPORTANT]
+> Some e2e tests will fail unless the local server is set up correctly!
## playwright vscode plugin
-[Playwright: Getting started - VS Code](https://playwright.dev/docs/getting-started-vscode)
+If you are using vscode, we recommend installing the extension: [Playwright: Getting started - VS Code](https://playwright.dev/docs/getting-started-vscode)
-To make the plugin use a local running version of EMX2, add the following to your `settings.json`:
+Once installed, you can configure the plugin use a local running version of EMX2. In the `settings.json` file, add the following setting.
```json
"playwright.env": {
- "E2E_BASE_URL":"http://localhost:8080/"
- },
+ "E2E_BASE_URL":"http://localhost:8080/"
+}
```
-When running tests in files which name start with `admin!`, be sure to run `auth.setup.spec.ts` first to ensure login session is defined. See also: https://playwright.dev/docs/auth#authenticating-in-ui-mode
+When running tests in files which name start with `admin!`, be sure to run `auth.setup.spec.ts` first to ensure login session is defined. See also: [https://playwright.dev/docs/auth#authenticating-in-ui-mode](https://playwright.dev/docs/auth#authenticating-in-ui-mode).
As the monorepo contains multiple `playwright.config.ts` files, not all test files might appear in the test explorer by default. One can toggle the selected config files in the "Playwright" menu within the "Tesing" tab. Here, click the gear icon to the right of the current active playwright config path to select one or more config files. If selecting multiple config files, the combination of their tests will be shown, though keep in mind tests need their specific config file to be the active one because otherwise they might not function properly.
@@ -49,4 +75,4 @@ We suggest to use the vscode plugin for [creating/recording](https://playwright.
By default tests are run for all pull requests, on the server connected to the pull request preview ( i.e. test for pr `007` will by ( default ) run on `https://preview-emx2-pr-007.dev.molgenis.org/`
-If creating tests that require being logged in, ensure the filename starts with `admin!`. For more information about this, see https://playwright.dev/docs/auth#basic-shared-account-in-all-tests.
\ No newline at end of file
+If creating tests that require being logged in, ensure the filename starts with `admin!`. For more information about this, see [https://playwright.dev/docs/auth#basic-shared-account-in-all-tests](https://playwright.dev/docs/auth#basic-shared-account-in-all-tests).
diff --git a/e2e/package.json b/e2e/package.json
index 2225384063..06963d5d92 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -9,7 +9,8 @@
},
"scripts": {
"e2e": "playwright test",
- "test:tw": "playwright test --grep '@tw-components' --reporter=line"
+ "test:tw": "playwright test --grep '@tw-components' --reporter=line",
+ "test:tw-forms": "playwright test --grep '@tw-forms' --reporter=line"
},
"dependencies": {
"@playwright/test": "1.47.1",
diff --git a/e2e/tests/tailwind-components/input/radio.spec.ts b/e2e/tests/tailwind-components/input/radio.spec.ts
new file mode 100644
index 0000000000..eb89130bd3
--- /dev/null
+++ b/e2e/tests/tailwind-components/input/radio.spec.ts
@@ -0,0 +1,48 @@
+import {test, expect } from "@playwright/test";
+
+test(
+ "Radio Input: values are properly defined @tw-components @tw-forms @input-radio",
+ async ({ page }) => {
+ await page.goto('/apps/tailwind-components/#/input/Radio.story');
+ await expect(page.getByText('no', { exact: true })).toHaveText('no');
+ await expect(page.getByText('yes')).toHaveText('yes');
+ }
+);
+
+test(
+ 'Radio Input: labels are properly displayed @tw-components @tw-forms @input-radio',
+ async ({ page }) => {
+ await page.goto('/apps/tailwind-components/#/input/Radio.story');
+ await expect(page.getByText('Level 1 (A)')).toHaveValue('level-1');
+ await expect(page.getByText('Level 2 (AA)')).toHaveValue('level-2');
+ await expect(page.getByText('Level 3 (AAA)')).toHaveValue('level-3');
+ }
+);
+
+test(
+ "Radio Input: default value is set @tw-components @tw-forms @input-radio",
+ async ({ page }) => {
+ await page.goto('/apps/tailwind-components/#/input/Radio.story');
+ await expect(page.getByLabel('Experimental cohort')).toBeChecked({checked: true});
+ }
+)
+
+test(
+ 'Radio Input: clear button is shown when indicated @tw-components @tw-forms @input-radio',
+ async ({ page }) => {
+ await page.goto('/apps/tailwind-components/#/input/Radio.story');
+ await expect(page.getByRole('button', { name: 'Clear' })).toBeVisible();
+ }
+)
+
+test(
+ 'Radio Input: inputs are properly reset @tw-components @tw-forms @input-radio',
+ async ({ page }) => {
+ await page.goto('/apps/tailwind-components/#/input/Radio.story');
+ await page.getByText('Healthy controls').click();
+ await page.getByRole('button', { name: 'Clear' }).click();
+ await expect(page.getByLabel('Healthy controls')).toBeChecked({ checked: false });
+ await expect(page.getByLabel('Experimental cohort')).toBeChecked({ checked: false });
+ await expect(page.getByLabel('Placebo cohort')).toBeChecked({ checked: false });
+ }
+)