fleet/frontend/__mocks__
Gabriel Hernandez bd9176d67e
UI for bootstrap package flows (#11288)
relates to #10935

This is the UI for all the flows around adding, removing, downloading,
and viewing information about a bootstrap package for fleet mdm. This is
pretty comprehensive but includes:

### Backend

**Update `Get host/id`** to include bootstrap package name

```json
{
  "macos_setup": {
    ...
    "bootstrap_package_name": "test.pkg"
  }
}
```

### Frontend

**UI for ABM not being set up**:


![image](https://user-images.githubusercontent.com/1153709/234018772-3221e27b-50a4-454e-8e9f-b62c9d349010.png)

**UIs for uploading, downloading, and deleting bootstrap package**:


![image](https://user-images.githubusercontent.com/1153709/234017915-871f252f-bf80-4282-9acf-5ebea12c6efa.png)


![image](https://user-images.githubusercontent.com/1153709/234018029-322a5f30-dd22-44e3-b9ae-a4af7acb68b4.png)


![image](https://user-images.githubusercontent.com/1153709/234018163-4b84a2ce-a064-4952-a63d-0c8307391052.png)

**UIs for seeing bootstrap status aggregate data**


![image](https://user-images.githubusercontent.com/1153709/234018107-455d63ab-5b2c-4727-ad20-eef6b269c336.png)

**UIs for filtering hosts by bootstrap status**


![image](https://user-images.githubusercontent.com/1153709/234018334-170fe93a-700e-48eb-b198-2a1cc54d31a7.png)

**UIs for seeing package status on host details and my device page**:


![image](https://user-images.githubusercontent.com/1153709/234018488-7b515db4-1248-4be7-8de3-9b74bb5d4795.png)


![image](https://user-images.githubusercontent.com/1153709/234018525-d653cb2d-9ef9-437e-8eba-141e557f4f39.png)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Roberto Dip <dip.jesusr@gmail.com>
Co-authored-by: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Co-authored-by: Martin Angers <martin.n.angers@gmail.com>
2023-04-27 16:10:41 +01:00
..
activityMock.ts Add new activity types for login and user modifications (#9101) 2022-12-22 14:24:13 -06:00
deviceUserMock.ts integration test device user page with mock and custom renderer (#8475) 2022-11-01 18:59:40 +00:00
fileMock.js add prettier and have it format all fleet application code (#625) 2021-04-12 14:32:25 +01:00
hostMock.ts UI for bootstrap package flows (#11288) 2023-04-27 16:10:41 +01:00
licenseMock.ts integration test device user page with mock and custom renderer (#8475) 2022-11-01 18:59:40 +00:00
macAdminsMock.ts UI for bootstrap package flows (#11288) 2023-04-27 16:10:41 +01:00
mdmMock.ts UI for bootstrap package flows (#11288) 2023-04-27 16:10:41 +01:00
queryMock.ts Add new activity types for login and user modifications (#9101) 2022-12-22 14:24:13 -06:00
README.md Add new activity types for login and user modifications (#9101) 2022-12-22 14:24:13 -06:00
softwareMock.ts integration test device user page with mock and custom renderer (#8475) 2022-11-01 18:59:40 +00:00
teamMock.ts refactor activity items and add query name to live_query activity type (#8740) 2022-11-17 14:25:40 +00:00
userMock.ts integration test device user page with mock and custom renderer (#8475) 2022-11-01 18:59:40 +00:00

Frontend mocks

Each __mocks___/*Mock.ts file contains one or more default mock objects and their corresponding helper function to partially override the default mock creating custom mocks.

Table of contents

Default mocks

Default mocks are simple to work with objects. We limit the default mock to a single object that can be modified with the helper function as needed using overrides.

The default mock object is returned by calling the helper function with no arguments.

Example

A single default activity is defined in __mocks__/activityMock.ts as:

const DEFAULT_ACTIVITY_MOCK: IActivity = {
  created_at: "2022-11-03T17:22:14Z",
  id: 1,
  actor_full_name: "Test",
  actor_id: 1,
  actor_gravatar: "",
  actor_email: "test@example.com",
  type: ActivityType.EditedAgentOptions,
};

To return this default object, call its helper function createActivityMock() with no arguments.

Custom mocks

Custom mocks are useful when we need a mock object with specific data.

Use the helper function with arguments to override the default mock data with the specific data you need.

Example

createMockActivity({ id: 2, actor_full_name: "Gabe" }) will return modifications to the DEFAULT_ACTIVITY_MOCK to override the id and actor_full_name keys only.

Check out the frontend test directory for information about our unit and integration testing layers. We use default mocks and custom mocks when mocking server requests.

Follow this guide to run tests locally.

Visit the frontend overview of Fleet UI testing for more information on our testing strategy, philosophies, and tools.