chore(docs): Added docs for playwright, removed docs for cypress and …

…renamed docs for testing to unit tests
nocodb · Nov 23, 2022 · 7d583a9 · 7d583a9
1 parent 5c95f60
commit 7d583a9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 172 deletions.
diff --git a/packages/noco-docs/content/en/engineering/playwright.md b/packages/noco-docs/content/en/engineering/playwright.md
@@ -1,9 +1,9 @@
 ---
 title: "Playwright"
 description: "Overview to playwright based e2e tests"
-position: 3250
+position: 3260
 category: "Engineering"
-menuTitle: "Testing"
+menuTitle: "Playwright Testing"
 ---
 
 ## How to run tests
@@ -50,13 +50,13 @@ npm run test:debug
 </br>
 </br>
 
-For setting up mysql:
+For setting up mysql(sakila):
 
 ```bash
 docker-compose -f ./tests/playwright/scripts/docker-compose-mysql-playwright.yml  up -d
 ```
 
-For setting up postgres:
+For setting up postgres(sakila):
 
 ```bash
 docker-compose -f ./tests/playwright/scripts/docker-compose-playwright-pg.yml 
@@ -82,31 +82,31 @@ npm run test
 
 - All tests are independent of each other.
 - Each test starts with a fresh project with a fresh sakila database(option to not use sakila db is also there).
-- Each test creates a new user and logs in with that user.
+- Each test creates a new user(email as `user@nocodb.com`) and logs in with that user to the dashboard.
 
 Caveats:
 
-- Some stuffs are shared i.e, users, plugins etc. So be catious while writing tests. A fix for this is in the works.
-- In test, we prefix email and project with its id, which will be deleted after the test is done.
+- Some stuffs are shared i.e, users, plugins etc. So be catious while writing tests touching that. A fix for this is in the works.
+- In test, we prefix email and project with the test id, which will be deleted after the test is done.
 
 ### What to test
 
 - UI verification. This includes verifying the state of the UI element, i.e if the element is visible, if the element has a particular text etc.
-- Test should verify a user flow. A test has a default timeout of 60 seconds. If a test is taking more than 60 seconds, it is a sign that the test should be broken down into smaller tests
-- Deciding what 
-todo: add more
+- Test should verify all user flow. A test has a default timeout of 60 seconds. If a test is taking more than 60 seconds, it is a sign that the test should be broken down into smaller tests.
+- Test should also verify all the side effects the feature(i.e. On adding a new column type, should verify column deletion as well) will have, and also error cases.
+- Test name should be descriptive. It should be easy to understand what the test is doing by just reading the test name.
 
 ### Playwright
 
 - Playwright is a nodejs library for automating chromium, firefox and webkit.
-- For each test, a new browser context is created. This means that each test runs in a new incognito window. In test `page` is provided by playwright where you can do all the actions.
+- For each test, a new browser context is created. This means that each test runs in a new incognito window.
 - For assertion always use `expect` from `@playwright/test` library. This library provides a lot of useful assertions, which also has retry logic built in.
 
 ## Page Objects
 
 - Page objects are used to abstract over the components/page. This makes the tests more readable and maintainable.
 - All page objects are in `tests/playwright/pages` folder.
-- All the test related code should be in page objects. This makes the tests more readable and maintainable.
+- All the test related code should be in page objects.
 - Methods should be as thin as possible and its better to have multiple methods than one big method, which improves reusability.
 
 The methods of a page object can be classified into 2 categories:
@@ -173,8 +173,8 @@ export class ToolbarFilterPage extends BasePage {
 
 Here `BasePage` is an abstract class, which used to enforce structure for all page objects. Thus all page object *should* inherit `BasePage`.
 
-- Common methods like `waitForResponse` and `getClipboardText`.
-- Provides structure for page objects, enforces all Page objects to have `rootPage` property, which is the root page object of the test.
+- Helper methods like `waitForResponse` and `getClipboardText` (this can be access on any page object, with `this.waitForResponse`)
+- Provides structure for page objects, enforces all Page objects to have `rootPage` property, which is the page object created in the test setup.
 - Enforces all pages to have a `get` method which will return the locator of the main container of that page, hence we can have focused dom selection, i.e.
 
 ```js
@@ -214,3 +214,11 @@ async verifyFilter({ title }: { title: string }) {
 
 - If an ui action, causes an api call or the UI state change, then wait for that api call to complete or the UI state to change.
 - What to wait out can be situation specific, but in general, is best to wait for the final state to be reached, i.e. in the case of creating filter, while it seems like waiting for the filter api to complete is enough, but after its return the table rows are reloaded and the UI state changes, so its better to wait for the table rows to be reloaded.
+
+
+## Accessing playwright report in the CI
+
+- Open `Summary` tab in the CI workflow in github actions.
+- Scroll down to `Artifacts` section.
+- Access reports which suffixed with the db type and shard number(corresponding to the CI workerflow name). i.e `playwright-report-mysql-2` is for `playwright-mysql-2` workflow.
+- Download it and run `npm install -D @playwright/test && npx playwright show-report ./` inside the downloaded folder.
diff --git a/...co-docs/content/en/engineering/testing.md → ...cs/content/en/engineering/unit-testing.md b/...co-docs/content/en/engineering/testing.md → ...cs/content/en/engineering/unit-testing.md
@@ -1,9 +1,9 @@
 ---
-title: "Writing Tests"
-description: "Overview to testing"
+title: "Writing Unit Tests"
+description: "Overview to unit testing"
 position: 3250
 category: "Engineering"
-menuTitle: "Testing"
+menuTitle: "Unit Test"
 ---
 
 ## Unit Tests
@@ -188,158 +188,3 @@ function tableTest() {
   });
 }
 ```
-
-## Cypress Tests
-
-### End-to-end (E2E) Tests
-Cypress tests are divided into 4 suites
-- SQLite tests
-- Postgres tests
-- MySQL tests
-- Quick import tests
-
-First 3 suites, each have 4 test category
-- Table operations (create, delete, rename, add column, delete column, rename column)
-- Views (Grid, Gallery, Form)
-- Roles (user profiles, access control & preview)
-- Miscellaneous (Import, i18n, etc)
-
-### SQLite Tests (XCDB Project)
-
-```shell
-# install dependencies(cypress)
-npm install
-# start MySQL database using docker compose
-docker-compose -f ./scripts/cypress/docker-compose-cypress.yml up
-
-# Run backend api using following command
-npm run start:xcdb-api:cache
-# Run frontend web UI using following command
-npm run start:web
-
-# wait until both 3000 and 8080 ports are available
-# or run following command to run it with GUI
-npm run cypress:open
-
-# run one of 4 test scripts
-# - Table operations : xcdb-restTableOps.js
-# - Views : xcdb-restViews.js
-# - Roles & access control : xcdb-restRoles.js
-# - Miscellaneous : xcdb-restMisc.js
-```
-
-### MySQL Tests (External DB Project)
-
-```shell
-# install dependencies(cypress)
-npm install
-# start MySQL database using docker compose
-docker-compose -f ./scripts/cypress/docker-compose-cypress.yml up
-
-# Run backend api using following command
-npm run start:api:cache
-# Run frontend web UI using following command
-npm run start:web
-
-# wait until both 3000 and 8080 ports are available
-# or run following command to run it with GUI
-npm run cypress:open
-
-# run one of 4 test scripts
-# - Table operations : restTableOps.js
-# - Views : restViews.js
-# - Roles & access control : restRoles.js
-# - Miscellaneous : restMisc.js
-```
-
-### Postgres Tests (External DB Project)
-
-```shell
-# install dependencies(cypress)
-npm install
-# start Postgres database using docker compose
-docker-compose -f ./scripts/cypress/docker-compose-pg.yml up -d
-
-# Run backend api using following command
-npm run start:api:cache
-# Run frontend web UI using following command
-npm run start:web
-
-# wait until both 3000 and 8080 ports are available
-# or run following command to run it with GUI
-npm run cypress:open
-
-# run one of 4 test scripts
-# - Table operations : pg-restTableOps.js
-# - Views : pg-restViews.js
-# - Roles & access control : pg-restRoles.js
-# - Miscellaneous : pg-restMisc.js
-```
-
-### Quick Import Tests (SQLite Project)
-
-```shell
-# install dependencies(cypress)
-npm install
-# start MySQL database using docker compose
-docker-compose -f ./scripts/cypress/docker-compose-cypress.yml up
-
-# copy existing xcdb (v0.91.7) database to ./packages/nocodb/
-cp ./scripts/cypress/fixtures/quickTest/noco_0_91_7.db ./packages/nocodb/noco.db
-
-# Run backend api using following command
-npm run start:api:cache
-# Run frontend web UI using following command
-npm run start:web
-
-# wait until both 3000 and 8080 ports are available
-# or run following command to run it with GUI
-npm run cypress:open
-
-# run test script
-# - quickTest.js
-```
-
-### Quick import tests (Postgres)
-
-```shell
-# install dependencies(cypress)
-npm install
-# start PG database using docker compose
-docker-compose -f ./scripts/cypress/docker-compose-pg.yml up -d
-
-# copy existing xcdb (v0.91.7) database to ./packages/nocodb/
-cp ./scripts/cypress/fixtures/quickTest/noco_0_91_7.db ./packages/nocodb/noco.db
-
-# Run backend api using following command
-npm run start:api:cache
-# Run frontend web UI using following command
-npm run start:web
-
-# wait until both 3000 and 8080 ports are available
-# or run following command to run it with GUI
-npm run cypress:open
-
-# run test script
-# - quickTest.js
-```
-
-## Accessing CI-CD CY Screenshots
-
-1. On Jobs link, click on `Summary`
-  
-  
-![Screenshot 2022-10-31 at 9 25 23 PM](https://user-images.githubusercontent.com/86527202/199052696-af0bf066-d82f-487a-b487-602f55594fd7.png)
-
-  
-2. Click on `Artifacts`
-  
-  
-![Screenshot 2022-10-31 at 9 26 01 PM](https://user-images.githubusercontent.com/86527202/199052712-04508921-32b1-4926-8291-396c804f7c3b.png)
-
-  
-3. Download logs for desired suite
-  
-  
-![Screenshot 2022-10-31 at 9 26 34 PM](https://user-images.githubusercontent.com/86527202/199052727-9aebbdd1-749e-4bda-ab00-3cdd0e3f48fe.png)
-
diff --git a/tests/playwright/pages/Base.ts b/tests/playwright/pages/Base.ts
@@ -16,9 +16,11 @@ export default abstract class BasePage {
   }
 
   async waitForResponse({
+    // Playwright action that triggers the request i.e locatorSomething.click()
     uiAction,
     httpMethodsToMatch = [],
     requestUrlPathToMatch,
+    // A function that takes the response body and returns true if the response is the one we are looking for
     responseJsonMatcher,
   }: {
     uiAction: Promise<any>;