Skip to content

Add failing test case for container width change #599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add failing test case for container width change #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27a34c7
Add failing test case for conatiner width change
gwak Nov 29, 2024
e8561ec
Merge branch 'adopted-ember-addons:master' into repro-issue-container…
gwak Mar 5, 2025
4a1bcdb
Revert some changes on existing test in tes-app
gwak Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions test-app/app/controllers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default class ModifierController extends Controller {
{ fruit: 'lemon', day: 'Sunday' },
];

@tracked mutableRecords = ['Zero', 'One', 'Two', 'Three', 'Four'];

@action handleDragChange(reordered) {
this.records = reordered;
}
Expand Down Expand Up @@ -76,4 +78,24 @@ export default class ModifierController extends Controller {
set(this, 'model.itemsGrid2', newOrder);
set(this, 'model.dragged', draggedModel);
}

@action
updateMutable(newOrder, draggedMode) {
this.mutableRecords = newOrder;
}

@action
removeItemHorizontal(item) {
this.mutableRecords = this.mutableRecords.filter(
(record) => record !== item,
);
}

@action
addItemToHorizontal() {
this.mutableRecords = [
...this.mutableRecords,
`Item ${this.mutableRecords.length + 1}`,
];
}
}
36 changes: 36 additions & 0 deletions test-app/app/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,3 +295,39 @@
.word-break {
word-wrap: break-word;
}

.flex {
display: flex;
}

.flex-1 {
flex: 1;
}

.inline-flex {
display: inline-flex;
}

.align-items-center {
align-items: center;
}

.space-between {
justify-content: space-between;
}

.flex-column {
flex-direction: column;
}

.flex-row {
flex-direction: row;
}

.full-width {
width: 100%;
}

.mr-5 {
margin-right: 5px;
}
82 changes: 63 additions & 19 deletions test-app/app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,51 @@
{{~/each}}
</ol>
</section>


<section class='horizontal-demo'>
<h3 class='flex align-items-center'>Horizontal Mutable
&nbsp; &nbsp;<button type='button' {{on 'click' this.addItemToHorizontal}}>Add Item</button>
</h3>

<div class='flex align-items-center full-width'>
<ol
class='flex-1' data-test-horizontal-demo-group
{{sortable-group
this.mutableRecords
direction='x'
onChange=this.updateMutable
itemVisualClass=this.itemVisualClass
handleVisualClass=this.handleVisualClass
groupName='horizontal-add-1'
}}
>
{{#each this.mutableRecords as |item|~}}
<li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-1'}}>
<ItemPresenter @item={{item}} />
<button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x</button>
</li>
{{~/each}}
</ol>
<ol
data-test-horizontal-demo-group
{{sortable-group
direction='x'
onChange=this.updateMutable
itemVisualClass=this.itemVisualClass
handleVisualClass=this.handleVisualClass
groupName='horizontal-add-2'
}}>
{{#each this.mutableRecords as |item|~}}
<li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-2'}}>
<ItemPresenter @item={{item}} />
<button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x
</button>
</li>
{{~/each}}
</ol>
</div>
</section>

<section class="grid-demo">
<div class="row">
<div class="col">
Expand All @@ -77,13 +121,13 @@
<div class="row">
<div class="col">
<div class="row" data-test-grid-demo-group
{{sortable-group
direction='grid'
onChange=this.updateGrid
itemVisualClass=this.itemVisualClass
handleVisualClass=this.handleVisualClass
groupName='grid'
}}>
{{sortable-group
direction='grid'
onChange=this.updateGrid
itemVisualClass=this.itemVisualClass
handleVisualClass=this.handleVisualClass
groupName='grid'
}}>
{{#each @model.itemsGrid as |item|~}}
<div class="col-120" data-test-grid-demo-handle tabindex='0' {{sortable-item model=item groupName='grid'}}>
<div class="card">
Expand Down Expand Up @@ -123,18 +167,18 @@
{{! template-lint-disable table-groups}}
<table>
<thead>
<tr>
<th>&vArr;</th>
<th>Item</th>
</tr>
<tr>
<th>&vArr;</th>
<th>Item</th>
</tr>
</thead>
<tbody {{sortable-group onChange=this.update groupName='table'}}>
{{#each @model.items as |item|}}
<tr data-test-table-demo-item class='handle' {{sortable-item model=item groupName='table'}}>
<td><span data-test-table-demo-handle data-item={{item}} class='handle'>&vArr;</span></td>
<td>{{item}}</td>
</tr>
{{/each}}
{{#each @model.items as |item|}}
<tr data-test-table-demo-item class='handle' {{sortable-item model=item groupName='table'}}>
<td><span data-test-table-demo-handle data-item={{item}} class='handle'>&vArr;</span></td>
<td>{{item}}</td>
</tr>
{{/each}}
</tbody>
</table>
</section>
Expand Down Expand Up @@ -225,4 +269,4 @@
</ol>

</section>
</article>
</article>