我正在尝试在我的 Angular 应用中测试拖放功能,但它不起作用。
我的测试
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
markerNameInp = dbc.Input(
id="markerNameInp",
placeholder="Enter name..",
style={
"min-width": "150px",
"width": "15%",
"margin-right": "20px",
"display": "inline-block",
"margin-bottom": "10px",
},
value="test",
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
children=[
html.Div([markerNameInp]),
dbc.Button("Enter", id="enter", color="primary", className="mr-1"),
html.Div(id="output"),
],
)
@app.callback(
Output("output", "children"),
[Input("enter", "n_clicks")],
[State("markerNameInp", "value")]
)
def func(n_clicks, marker_value):
return dbc.Label(marker_value)
if __name__ == "__main__":
app.run_server(debug=True)
在我的 html 中,我有两个表,积压表包含 5 行,不包括测试运行时的标题。我正在尝试将行从我的待办事项表拖放到我的冲刺表
我的 html
it('should plan a sprint', async () => {
let backlog = await browser.driver.findElement(by.id("backlog"));
let sprint = await browser.driver.findElement(by.id("sprint"));
let backlogRows = await backlog.findElements(by.tagName("tr"));
for(let i = 2; i < 5; i++)
{
console.log(backlogRows[i]);
await browser.actions().dragAndDrop(backlogRows[i], sprint).mouseUp().perform();
}
});
我已经试过了
<div>
<div class="d-flex justify-content-around mt-5 mb-5" *ngIf="sprint | async">
<div class="w-10">
<main-button (click)="navigateToAllSprints()" [label]="'Sprints'"></main-button>
</div>
<div class="d-flex flex-column w-50">
<mat-slide-toggle
[(ngModel)]="isCurrentSprint"
(change)="handleCurrentSprint($event.source.checked)">
{{ isCurrentSprint ? "Close Sprint" : "Set as current sprint" }}
</mat-slide-toggle>
<span class="text-danger mt-3 text-center">{{ activeSprintErrorMessage }}</span>
</div>
<div class="w-10">
<main-button (click)="navigateToAllSprintDetails()" [label]="'Edit Details'"></main-button>
</div>
</div>
<div cdkDropListGroup
class="d-flex justify-content-around">
<div class="w-40" *ngIf="backlogDataSource?.userstories">
<h2>Backlog</h2>
<table
mat-table [dataSource]="backlogDataSource"
cdkDropList
[cdkDropListData]="backlogDataSource.userstories | async"
(cdkDropListDropped)="drop('backlog', $event)"
cdkDropListSortingDisabled = "false"
class="w-100"
id="backlog">
<!-- Assignee Column -->
<ng-container matColumnDef="assignee">
<th mat-header-cell *matHeaderCellDef class="w-10"> <h2>Assignee</h2> </th>
<td mat-cell *matCellDef="let userstory"> <p>{{userstory.assignee}}</p> </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="w-25"> <h2>Name</h2> </th>
<td mat-cell *matCellDef="let userstory"> <p class="truncate">{{userstory.name}}</p> </td>
</ng-container>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell text-center" colspan="5">No userstories found in the backlog</td>
</tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let userstory; columns: displayedColumns;"
routerLink="/project/{{projectId}}/userstory/{{userstory.id}}/details"
cdkDrag
[cdkDragData]=userstory>
</tr>
</table>
</div>
<div class="w-40" *ngIf="sprintDataSource?.userstories">
<h2>{{ (sprint | async)?.name }}</h2>
<table
mat-table [dataSource]="sprintDataSource"
cdkDropList
[cdkDropListData]="sprintDataSource.userstories | async"
(cdkDropListDropped)="drop(sprintName, $event)"
cdkDropListSortingDisabled = "false"
class="w-100"
id="sprint">
<!-- Assignee Column -->
<ng-container matColumnDef="assignee">
<th mat-header-cell *matHeaderCellDef class="w-10"> <h2>Assignee</h2> </th>
<td mat-cell *matCellDef="let userstory"> <p>{{userstory.assignee}}</p> </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="w-25"> <h2>Name</h2> </th>
<td mat-cell *matCellDef="let userstory"> <p class="truncate">{{userstory.name}}</p> </td>
</ng-container>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell text-center" colspan="5">No userstories found in this sprint</td>
</tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let userstory; columns: displayedColumns;"
routerLink="/project/{{projectId}}/userstory/{{userstory.id}}/details"
cdkDrag
[cdkDragData]=userstory>
</tr>
</table>
</div>
</div>
但它也不起作用。我做错了什么,如何让量角器中的拖放工作?