element', () => {
+ // https://on.cypress.io/select
+
+ // at first, no option should be selected
+ cy.get('.action-select')
+ .should('have.value', '--Select a fruit--')
+
+ // Select option(s) with matching text content
+ cy.get('.action-select').select('apples')
+ // confirm the apples were selected
+ // note that each value starts with "fr-" in our HTML
+ cy.get('.action-select').should('have.value', 'fr-apples')
+
+ cy.get('.action-select-multiple')
+ .select(['apples', 'oranges', 'bananas'])
+ // when getting multiple values, invoke "val" method first
+ .invoke('val')
+ .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+ // Select option(s) with matching value
+ cy.get('.action-select').select('fr-bananas')
+ // can attach an assertion right away to the element
+ .should('have.value', 'fr-bananas')
+
+ cy.get('.action-select-multiple')
+ .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+ .invoke('val')
+ .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+ // assert the selected values include oranges
+ cy.get('.action-select-multiple')
+ .invoke('val').should('include', 'fr-oranges')
+ })
+
+ it('.scrollIntoView() - scroll an element into view', () => {
+ // https://on.cypress.io/scrollintoview
+
+ // normally all of these buttons are hidden,
+ // because they're not within
+ // the viewable area of their parent
+ // (we need to scroll to see them)
+ cy.get('#scroll-horizontal button')
+ .should('not.be.visible')
+
+ // scroll the button into view, as if the user had scrolled
+ cy.get('#scroll-horizontal button').scrollIntoView()
+ .should('be.visible')
+
+ cy.get('#scroll-vertical button')
+ .should('not.be.visible')
+
+ // Cypress handles the scroll direction needed
+ cy.get('#scroll-vertical button').scrollIntoView()
+ .should('be.visible')
+
+ cy.get('#scroll-both button')
+ .should('not.be.visible')
+
+ // Cypress knows to scroll to the right and down
+ cy.get('#scroll-both button').scrollIntoView()
+ .should('be.visible')
+ })
+
+ it('.trigger() - trigger an event on a DOM element', () => {
+ // https://on.cypress.io/trigger
+
+ // To interact with a range input (slider)
+ // we need to set its value & trigger the
+ // event to signal it changed
+
+ // Here, we invoke jQuery's val() method to set
+ // the value and trigger the 'change' event
+ cy.get('.trigger-input-range')
+ .invoke('val', 25)
+ .trigger('change')
+ .get('input[type=range]').siblings('p')
+ .should('have.text', '25')
+ })
+
+ it('cy.scrollTo() - scroll the window or element to a position', () => {
+ // https://on.cypress.io/scrollto
+
+ // You can scroll to 9 specific positions of an element:
+ // -----------------------------------
+ // | topLeft top topRight |
+ // | |
+ // | |
+ // | |
+ // | left center right |
+ // | |
+ // | |
+ // | |
+ // | bottomLeft bottom bottomRight |
+ // -----------------------------------
+
+ // if you chain .scrollTo() off of cy, we will
+ // scroll the entire window
+ cy.scrollTo('bottom')
+
+ cy.get('#scrollable-horizontal').scrollTo('right')
+
+ // or you can scroll to a specific coordinate:
+ // (x axis, y axis) in pixels
+ cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+ // or you can scroll to a specific percentage
+ // of the (width, height) of the element
+ cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+ // control the easing of the scroll (default is 'swing')
+ cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+ // control the duration of the scroll (in ms)
+ cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+ })
+})
diff --git a/src/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js b/src/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js
new file mode 100644
index 00000000..a02fb2bb
--- /dev/null
+++ b/src/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js
@@ -0,0 +1,39 @@
+/// element in various ways
+ .should('have.text', 'Column content')
+ .should('contain', 'Column content')
+ .should('have.html', 'Column content')
+ // chai-jquery uses "is()" to check if element matches selector
+ .should('match', 'td')
+ // to match text content against a regular expression
+ // first need to invoke jQuery method text()
+ // and then match using regular expression
+ .invoke('text')
+ .should('match', /column content/i)
+
+ // a better way to check element's text content against a regular expression
+ // is to use "cy.contains"
+ // https://on.cypress.io/contains
+ cy.get('.assertion-table')
+ .find('tbody tr:last')
+ // finds first element with text content matching regular expression
+ .contains('td', /column content/i)
+ .should('be.visible')
+
+ // for more information about asserting element's text
+ // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+ })
+
+ it('.and() - chain multiple assertions together', () => {
+ // https://on.cypress.io/and
+ cy.get('.assertions-link')
+ .should('have.class', 'active')
+ .and('have.attr', 'href')
+ .and('include', 'cypress.io')
+ })
+ })
+
+ describe('Explicit Assertions', () => {
+ // https://on.cypress.io/assertions
+ it('expect - make an assertion about a specified subject', () => {
+ // We can use Chai's BDD style assertions
+ expect(true).to.be.true
+ const o = { foo: 'bar' }
+
+ expect(o).to.equal(o)
+ expect(o).to.deep.equal({ foo: 'bar' })
+ // matching text using regular expression
+ expect('FooBar').to.match(/bar$/i)
+ })
+
+ it('pass your own callback function to should()', () => {
+ // Pass a function to should that can have any number
+ // of explicit assertions within it.
+ // The ".should(cb)" function will be retried
+ // automatically until it passes all your explicit assertions or times out.
+ cy.get('.assertions-p')
+ .find('p')
+ .should(($p) => {
+ // https://on.cypress.io/$
+ // return an array of texts from all of the p's
+ const texts = $p.map((i, el) => Cypress.$(el).text())
+
+ // jquery map returns jquery object
+ // and .get() convert this to simple array
+ const paragraphs = texts.get()
+
+ // array should have length of 3
+ expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+ // use second argument to expect(...) to provide clear
+ // message with each assertion
+ expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+ 'Some text from first p',
+ 'More text from second p',
+ 'And even more text from third p',
+ ])
+ })
+ })
+
+ it('finds element by class name regex', () => {
+ cy.get('.docs-header')
+ .find('div')
+ // .should(cb) callback function will be retried
+ .should(($div) => {
+ expect($div).to.have.length(1)
+
+ const className = $div[0].className
+
+ expect(className).to.match(/heading-/)
+ })
+ // .then(cb) callback is not retried,
+ // it either passes or fails
+ .then(($div) => {
+ expect($div, 'text content').to.have.text('Introduction')
+ })
+ })
+
+ it('can throw any error', () => {
+ cy.get('.docs-header')
+ .find('div')
+ .should(($div) => {
+ if ($div.length !== 1) {
+ // you can throw your own errors
+ throw new Error('Did not find 1 element')
+ }
+
+ const className = $div[0].className
+
+ if (!className.match(/heading-/)) {
+ throw new Error(`Could not find class "heading-" in ${className}`)
+ }
+ })
+ })
+
+ it('matches unknown text between two elements', () => {
+ /**
+ * Text from the first element.
+ * @type {string}
+ */
+ let text
+
+ /**
+ * Normalizes passed text,
+ * useful before comparing text with spaces and different capitalization.
+ * @param {string} s Text to normalize
+ */
+ const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+ cy.get('.two-elements')
+ .find('.first')
+ .then(($first) => {
+ // save text from the first element
+ text = normalizeText($first.text())
+ })
+
+ cy.get('.two-elements')
+ .find('.second')
+ .should(($div) => {
+ // we can massage text before comparing
+ const secondText = normalizeText($div.text())
+
+ expect(secondText, 'second text').to.equal(text)
+ })
+ })
+
+ it('assert - assert shape of an object', () => {
+ const person = {
+ name: 'Joe',
+ age: 20,
+ }
+
+ assert.isObject(person, 'value is object')
+ })
+
+ it('retries the should callback until assertions pass', () => {
+ cy.get('#random-number')
+ .should(($div) => {
+ const n = parseFloat($div.text())
+
+ expect(n).to.be.gte(1).and.be.lte(10)
+ })
+ })
+ })
+})
diff --git a/src/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js b/src/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js
new file mode 100644
index 00000000..ae879918
--- /dev/null
+++ b/src/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js
@@ -0,0 +1,97 @@
+///
+ */
+ function waitOneSecond () {
+ // return a promise that resolves after 1 second
+ return new Cypress.Promise((resolve, reject) => {
+ setTimeout(() => {
+ // set waited to true
+ waited = true
+
+ // resolve with 'foo' string
+ resolve('foo')
+ }, 1000)
+ })
+ }
+
+ cy.then(() => {
+ // return a promise to cy.then() that
+ // is awaited until it resolves
+ return waitOneSecond().then((str) => {
+ expect(str).to.eq('foo')
+ expect(waited).to.be.true
+ })
+ })
+ })
+})
diff --git a/src/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js b/src/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js
new file mode 100644
index 00000000..95d3eb45
--- /dev/null
+++ b/src/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js
@@ -0,0 +1,59 @@
+/// {
+// customCommand(param: any): typeof customCommand;
+// }
+// }
+//
+// function customCommand(param: any): void {
+// console.warn(param);
+// }
+//
+// NOTE: You can use it like so:
+// Cypress.Commands.add('customCommand', customCommand);
+//
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/src/frontend/cypress/support/component-index.html b/src/frontend/cypress/support/component-index.html
new file mode 100644
index 00000000..ac6e79fd
--- /dev/null
+++ b/src/frontend/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+
+
+
+ Components App
+
+
+
+
+
\ No newline at end of file
diff --git a/src/frontend/cypress/support/component.ts b/src/frontend/cypress/support/component.ts
new file mode 100644
index 00000000..96e1d279
--- /dev/null
+++ b/src/frontend/cypress/support/component.ts
@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/angular'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a ;
+ let component: AppComponent;
let compiled: any;
+ let shardService: ShardService
const fakeCookieService = null;
+ const vmcServiceStub = {
+ getNamespaceList() {
+ return of<{items:any[]}>({
+ items: [
+ {
+ "metadata": {
+ "name": "cnsi-system",
+ "uid": "8fc590fc-3b1a-4099-80fc-95559c58f5c7",
+ "resourceVersion": "3218730",
+ "creationTimestamp": "2023-01-04T07:30:54Z",
+ "labels": {
+ "control-plane": "cnsi-controller",
+ "kubernetes.io/metadata.name": "cnsi-system"
+ },
+ "annotations": {
+ "kubectl.kubernetes.io/last-applied-configuration": "{\"apiVersion\":\"v1\",\"kind\":\"Namespace\",\"metadata\":{\"annotations\":{},\"labels\":{\"control-plane\":\"cnsi-controller\"},\"name\":\"cnsi-system\"}}\n"
+ },
+ "managedFields": [
+ {
+ "manager": "kubectl-client-side-apply",
+ "operation": "Update",
+ "apiVersion": "v1",
+ "time": "2023-01-04T07:30:57Z",
+ "fieldsType": "FieldsV1",
+ "fieldsV1": {
+ "f:metadata": {
+ "f:annotations": {
+ ".": {},
+ "f:kubectl.kubernetes.io/last-applied-configuration": {}
+ },
+ "f:labels": {
+ ".": {},
+ "f:control-plane": {},
+ "f:kubernetes.io/metadata.name": {}
+ }
+ }
+ }
+ }
+ ]
+ },
+ "spec": {
+ "finalizers": [
+ "kubernetes"
+ ]
+ },
+ "status": {
+ "phase": "Active"
+ }
+ }
+ ]
+ });
+ },
+ }
let fakeSessionService = {
getCurrentUser: function () {
return { has_admin_role: true };
@@ -48,6 +105,7 @@ describe('AppComponent', () => {
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: Title, useValue: fakeTitle },
+ ShardService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
});
@@ -55,6 +113,8 @@ describe('AppComponent', () => {
fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
compiled = fixture.nativeElement;
+ component = fixture.componentInstance;
+ shardService = TestBed.get(ShardService);
});
afterEach(() => {
@@ -64,4 +124,18 @@ describe('AppComponent', () => {
it('should create the app', () => {
expect(compiled).toBeTruthy();
});
+
+ describe('AppComponent Function', () => {
+ it('getNamespaceList', fakeAsync(() => {
+ spyOn(shardService, 'getNamespaceList').and.returnValue(
+ vmcServiceStub.getNamespaceList()
+ );
+ component.getNamespaceList();
+ fixture.detectChanges();
+ expect(shardService.getNamespaceList).toHaveBeenCalled();
+ tick(1500);
+ expect(shardService.getNamespaceList);
+ }));
+ });
});
+
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index a335110e..c1661081 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -13,10 +13,14 @@ import { ShardService } from './service/shard.service';
})
export class AppComponent implements OnInit{
title='';
+ lang: any = ''
constructor(private shardService:ShardService, private i18: AppService) {
- const lang = localStorage.getItem('tsi-language')
- if (lang) {
- this.i18.changeLanguage(lang)
+ this.getLang()
+ }
+ getLang() {
+ this.lang = localStorage.getItem('tsi-language')
+ if (this.lang) {
+ this.i18.changeLanguage(this.lang)
} else {
if (window.navigator.language === 'zh-CN') {
this.i18.changeLanguage('zh_CN')
@@ -24,8 +28,8 @@ export class AppComponent implements OnInit{
this.i18.changeLanguage('en')
}
}
-
}
+
ngOnInit(): void {
this.getNamespaceList()
}
diff --git a/src/frontend/src/app/app.module.ts b/src/frontend/src/app/app.module.ts
index 01787f43..6c2f69f6 100644
--- a/src/frontend/src/app/app.module.ts
+++ b/src/frontend/src/app/app.module.ts
@@ -33,11 +33,11 @@ import { PolicyComponent } from './view/policy/policy.component';
import { CornScheduleComponent } from './components/corn-schedule/corn-schedule.component';
import { TimePickerComponent } from './components/time-picker/time-picker.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { AppService, createTranslateLoader } from './app.service';
+import { AppService } from './app.service';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ClusterLineComponent } from './view/report/cluster-line/cluster-line.component';
import { NamesapcePolarComponent } from './view/report/namesapce-polar/namesapce-polar.component';
import { NamesapceHistogramComponent } from './view/report/namesapce-histogram/namesapce-histogram.component'
-import { ShardTestModule } from 'src/app/shard/shard/shard.module';
import { DgFilterComponent } from './components/dg-filter/dg-filter.component';
import { HarborSettingPageComponent } from './view/setting/harbor-setting-page/harbor-setting-page.component';
import { PolicySettingPageComponent } from './view/policy/policy-setting-page/policy-setting-page.component';
@@ -171,7 +171,9 @@ ClarityIcons.addIcons(
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
- useFactory: createTranslateLoader,
+ useFactory: (http: HttpClient) => {
+ return new TranslateHttpLoader(http, '../assets/i18n/', '.json')
+ },
deps: [HttpClient]
},
}),
diff --git a/src/frontend/src/app/app.service.spec.ts b/src/frontend/src/app/app.service.spec.ts
index 55b56c2e..30e9d15f 100644
--- a/src/frontend/src/app/app.service.spec.ts
+++ b/src/frontend/src/app/app.service.spec.ts
@@ -16,7 +16,8 @@ describe('Service', () => {
imports: [
TranslateModule.forChild({
extend: true,
- }),
+ }),
+ HttpClientTestingModule
],
providers: [TranslateStore, TranslateService]
diff --git a/src/frontend/src/app/app.service.ts b/src/frontend/src/app/app.service.ts
index 1e82b2c0..08785ea0 100644
--- a/src/frontend/src/app/app.service.ts
+++ b/src/frontend/src/app/app.service.ts
@@ -6,7 +6,6 @@
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'
import { HttpClient } from '@angular/common/http';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@Injectable({
providedIn: 'root'
})
@@ -25,7 +24,4 @@ export class AppService {
localStorage.setItem('tsi-language', lang)
}
}
-export function createTranslateLoader(http: HttpClient) {
- return new TranslateHttpLoader(http, '../assets/i18n/', '.json')
-}
diff --git a/src/frontend/src/app/components/corn-schedule/corn-schedule.component.spec.ts b/src/frontend/src/app/components/corn-schedule/corn-schedule.component.spec.ts
index 056fac48..78ddad31 100644
--- a/src/frontend/src/app/components/corn-schedule/corn-schedule.component.spec.ts
+++ b/src/frontend/src/app/components/corn-schedule/corn-schedule.component.spec.ts
@@ -35,4 +35,24 @@ describe('CornScheduleComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ describe('CornScheduleComponent Function', () => {
+ it('getMultipleType', () => {
+ component.getMultipleType = 'day'
+ setTimeout(() => {
+ component.getMultipleType = 'day2'
+ }, 100);
+ });
+
+ it('setTimePicker', () => {
+ component.setTimePicker({hour: {value: 10}, minute: {value: 10}})
+ })
+
+ it('setTimePicker', () => {
+ component.setTimePicker({hour: {value: 10}, minute: {value: 10}})
+ })
+
+
+});
+
});
diff --git a/src/frontend/src/app/components/dg-filter/dg-filter.component.spec.ts b/src/frontend/src/app/components/dg-filter/dg-filter.component.spec.ts
index 2e3abda5..6a3ec0fe 100644
--- a/src/frontend/src/app/components/dg-filter/dg-filter.component.spec.ts
+++ b/src/frontend/src/app/components/dg-filter/dg-filter.component.spec.ts
@@ -1,4 +1,7 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AssessmentService } from 'src/app/service/assessment.service';
+import { ShardTestModule } from 'src/app/shard/shard/shard.module';
import { DgFilterComponent } from './dg-filter.component';
@@ -8,7 +11,10 @@ describe('DgFilterComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ DgFilterComponent ]
+ declarations: [ DgFilterComponent ],
+ imports: [ShardTestModule],
+ providers: [AssessmentService],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
diff --git a/src/frontend/src/app/components/header/header.component.html b/src/frontend/src/app/components/header/header.component.html
index 6ea2fc07..ea2462c4 100644
--- a/src/frontend/src/app/components/header/header.component.html
+++ b/src/frontend/src/app/components/header/header.component.html
@@ -3,7 +3,7 @@
SPDX-License-Identifier: Apache-2.0
-->
- 
+
+**Important: Make sure you provide all the information we ask you to provide, e.g., fill in each blank in below form.**
+
+
## Contribution Flow
@@ -35,7 +73,8 @@ This is a rough outline of what a contributor's workflow looks like:
* Push your changes to the topic branch in your fork
* Create a pull request containing that commit
-We follow the GitHub workflow and you can find more details on the [GitHub flow documentation](https://docs.github.com/en/get-started/quickstart/github-flow).
+We follow the GitHub workflow and you can find more details on the
+[GitHub flow documentation](https://docs.github.com/en/get-started/quickstart/github-flow).
Example:
```shell
@@ -82,31 +121,23 @@ Be sure to include any related GitHub issue references in the commit message. S
[GFM syntax](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) for referencing issues
and commits.
-
-
-
### Pull Request Checklist
Before submitting your pull request, we advise you to use the following:
-1. Check if your code changes will pass both code linting checks and unit tests.
+1. Make sure you code change brings no regression, e.g., you change must pass every github workflow item triggerred by your PR.
2. Ensure your commit messages are descriptive. We follow the conventions on [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/). Be sure to include any related GitHub issue references in the commit message. See [GFM syntax](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) for referencing issues and commits.
3. Check the commits and commits messages and ensure they are free from typos.
+4. Make sure you have involved new tests that can verify that your change does can solve the problem.
## Reporting Bugs and Creating Issues
For specifics on what to include in your report, please follow the guidelines in the issue and pull request templates when available.
When opening a new issue, try to roughly follow the commit message format conventions above.
-
-
## Ask for Help
The best way to reach us with a question when contributing is to ask on:
* The original GitHub issue
-* The developer mailing list
-
-
-
-
+* The developer mailing list: narrows@vmware.com
diff --git a/README.md b/README.md
index 6c280ae5..c9ad5c7a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
# Cloud Native Security Inspector (Project Narrows)
[](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/codeql.yml)
+[](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/cypress.yml)
Cloud Native Security Inspector is an open source cloud native runtime security tool. It allows end users to assess
diff --git a/docs/PORTAL-TEST.md b/docs/PORTAL-TEST.md
new file mode 100644
index 00000000..d250145a
--- /dev/null
+++ b/docs/PORTAL-TEST.md
@@ -0,0 +1,161 @@
+# Cloud Native Security Inspector Front-End Developer Testing Guide
+This is a project based on Jasmine and Karma for unit testing and Cypress e2e for testing the front end.
+
+Unit test
+============
+
+1. [Jasmine](https://jasmine.github.io/tutorials/your_first_suite) learns to use official documents.
+
+2. [Angular Testing](https://angular.io/guide/testing) Learning Documentation。
+
+3. When modifying components or creating new ones, synchronous unit testing of newly added code is required. The test code can be carried out according to the [policy component](../src/frontend/src/app/view/policy/policy.component.spec.ts) below.
+
+```ts
+describe('PolicyComponent', () => {
+ // The test content needs to be written into the modified function
+ let component: PolicyComponent;
+ let fixture: ComponentFixture