角度量角器拖放测试

Question

我正在尝试在我的 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>

但它也不起作用。我做错了什么，如何让量角器中的拖放工作？