Skip to content

Commit

Permalink
fix(calendar): make all class names unique (#3119)
Browse files Browse the repository at this point in the history 
* fix(calendar): make all class names unique

Closes #2287

* Update calendar.component.spec.ts

* test(grid-filtering-ui): fix failing tests

* test(grid-filtering-ui): fix linting erros
  • Loading branch information
@kdinev
Simeon Simeonoff authored and kdinev committed Nov 23, 2018
1 parent 7dedaa6 commit d82baac
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 115 deletions.
16 changes: 8 additions & 8 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<ng-template let-result #defaultHeader>
<span class="date-text">{{ getFormattedDate().weekday }},&nbsp;</span>
<span class="date-text">{{ getFormattedDate().monthday }}</span>
<span>{{ getFormattedDate().weekday }},&nbsp;</span>
<span>{{ getFormattedDate().monthday }}</span>
</ng-template>

<ng-template let-result #defaultMonth>
<span (click)="activeViewYear()" class="date__el">
<span (click)="activeViewYear()" class="igx-calendar-picker__date">
{{ formattedMonth(viewDate) }}
</span>
<span (click)="activeViewDecade()" class="date__el">
<span (click)="activeViewDecade()" class="igx-calendar-picker__date">
{{ formattedYear(viewDate) }}
</span>
</ng-template>
Expand All @@ -21,15 +21,15 @@ <h2 class="igx-calendar__header-date">
</div>

<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
<div class="igx-calendar__body-picker">
<div class="prev" (click)="previousMonth()">
<div class="igx-calendar-picker">
<div class="igx-calendar-picker__prev" (click)="previousMonth()">
<igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
</div>
<div class="date">
<div>
<ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
</ng-container>
</div>
<div class="next" (click)="nextMonth()">
<div class="igx-calendar-picker__next" (click)="nextMonth()">
<igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,9 +246,9 @@ describe('IgxCalendar', () => {
year: 'numeric'
};
const defaultViews = { day: false, month: true, year: false };
const bodyMonth = dom.query(By.css('.date .date__el'));
const bodyMonth = dom.query(By.css('.igx-calendar-picker__date'));
const headerYear = dom.query(By.css('.igx-calendar__header-year'));
const bodyYear = dom.queryAll(By.css('.date .date__el'))[1];
const bodyYear = dom.queryAll(By.css('.igx-calendar-picker__date'))[1];
const headerWeekday = dom.queryAll(By.css('.igx-calendar__header-date span'))[0];
const headerDate = dom.queryAll(By.css('.igx-calendar__header-date span'))[1];

Expand Down Expand Up @@ -300,9 +300,9 @@ describe('IgxCalendar', () => {
fixture.componentInstance.model = new Date();
fixture.detectChanges();

const bodyMonth = dom.query(By.css('.date .date__el'));
const bodyMonth = dom.query(By.css('.igx-calendar-picker__date'));
const headerYear = dom.query(By.css('.igx-calendar__header-year'));
const bodyYear = dom.queryAll(By.css('.date .date__el'))[1];
const bodyYear = dom.queryAll(By.css('.igx-calendar-picker__date'))[1];
const headerWeekday = dom.queryAll(By.css('.igx-calendar__header-date span'))[0];
const headerDate = dom.queryAll(By.css('.igx-calendar__header-date span'))[1];
let bodyWeekday = dom.query(By.css('.igx-calendar__label'));
Expand Down Expand Up @@ -362,7 +362,7 @@ describe('IgxCalendar', () => {
});

it('Calendar DOM structure - year view | month view', () => {
const collection = dom.queryAll(By.css('.date__el'));
const collection = dom.queryAll(By.css('.igx-calendar-picker__date'));
const monthButton = collection[0];
const yearButton = collection[1];

Expand Down
36 changes: 16 additions & 20 deletions projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,26 +27,6 @@
@extend %cal-body-display !optional;
}

@include e(body-picker) {
@extend %cal-picker-display !optional;

@include b(date) {
@extend %cal-picker-date !optional;

@include e(el) {
@extend %cal-header-date-el--hover !optional;
}
}

@include b(prev) {
@extend %cal-picker-arrow !optional;
}

@include b(next) {
@extend %cal-picker-arrow !optional;
}
}

@include e(body-row) {
@extend %cal-row-display !optional;
}
Expand Down Expand Up @@ -166,3 +146,19 @@
}
}
}

@include b(igx-calendar-picker) {
@extend %cal-picker-display !optional;

@include e(date) {
@extend %cal-picker-date !optional;
}

@include e(prev) {
@extend %cal-picker-arrow !optional;
}

@include e(next) {
@extend %cal-picker-arrow !optional;
}
}
29 changes: 10 additions & 19 deletions projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,13 +242,6 @@
background: --var($theme, 'content-background');
overflow: hidden;
outline: none;

&[dir='rtl'] {
.prev,
.next {
@extend %cal-picker-arrow--rtl;
}
}
}

%cal-display--vertical {
Expand All @@ -275,7 +268,7 @@
display: flex;
margin: $cal-header-date-margin;

.date-text {
> span {
@include ellipsis();
}
}
Expand All @@ -284,14 +277,6 @@
flex-flow: column nowrap;
}

%cal-header-date-el--hover {
&:hover,
&:focus {
color: --var($theme, 'picker-text-hover-color');
cursor: pointer;
}
}

%cal-picker-display {
display: flex;
height: em(56px);
Expand All @@ -311,15 +296,21 @@
&:hover {
color: --var($theme, 'picker-arrow-hover-color');
}
}

%cal-picker-arrow--rtl {
transform: scaleX(-1);
[dir='rtl'] & {
transform: scaleX(-1);
}
}

%cal-picker-date {
color: --var($theme, 'picker-text-color');
text-align: center;

&:hover,
&:focus {
color: --var($theme, 'picker-text-hover-color');
cursor: pointer;
}
}

%cal-body-display {
Expand Down
133 changes: 70 additions & 63 deletions projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import { Calendar } from '../../calendar/calendar';
import { IgxInputDirective } from '../../directives/input/input.directive';
import { IgxGridComponent } from './grid.component';
import { IgxGridModule } from './index';
import { IgxFilteringOperand, IgxStringFilteringOperand,
FilteringExpressionsTree, FilteringLogic, IgxChipComponent } from '../../../public_api';
import {
IgxFilteringOperand, IgxStringFilteringOperand,
FilteringExpressionsTree, FilteringLogic, IgxChipComponent
} from '../../../public_api';
import { IgxButtonDirective } from '../../directives/button/button.directive';
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
Expand Down Expand Up @@ -1201,7 +1203,7 @@ describe('IgxGrid - Filtering actions', () => {
tick();

let calendar = fix.debugElement.query(By.css('igx-calendar'));
const monthView = calendar.queryAll(By.css('.date__el'))[0];
const monthView = calendar.queryAll(By.css('.igx-calendar-picker__date'))[0];
monthView.nativeElement.click();
fix.detectChanges();
tick();
Expand All @@ -1212,7 +1214,7 @@ describe('IgxGrid - Filtering actions', () => {
tick();

calendar = fix.debugElement.query(By.css('igx-calendar'));
const month = calendar.queryAll(By.css('.date__el'))[0];
const month = calendar.queryAll(By.css('.igx-calendar-picker__date'))[0];

expect(month.nativeElement.textContent.trim()).toEqual('Jan');
}));
Expand All @@ -1238,7 +1240,7 @@ describe('IgxGrid - Filtering actions', () => {
tick();

let calendar = fix.debugElement.query(By.css('igx-calendar'));
const monthView = calendar.queryAll(By.css('.date__el'))[1];
const monthView = calendar.queryAll(By.css('.igx-calendar-picker__date'))[1];
monthView.nativeElement.click();
fix.detectChanges();
tick();
Expand All @@ -1249,7 +1251,7 @@ describe('IgxGrid - Filtering actions', () => {
tick();

calendar = fix.debugElement.query(By.css('igx-calendar'));
const month = calendar.queryAll(By.css('.date__el'))[1];
const month = calendar.queryAll(By.css('.igx-calendar-picker__date'))[1];

const today = new Date(Date.now());

Expand Down Expand Up @@ -1525,28 +1527,28 @@ describe('IgxGrid - Filtering Row UI actions', () => {
// TODO - add new tests based on the test plan in the spec.

it('should render Filter chip for filterable columns and render empty cell for a column when filterable is set to false',
fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridFilteringComponent);
fix.detectChanges();
tick(100);
const grid = fix.componentInstance.grid;
grid.width = '1500px';
fix.detectChanges();
const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const filteringChips = fix.debugElement.queryAll(By.css('.igx-filtering-chips'));
expect(filteringCells.length).toBe(6);
expect(filteringChips.length).toBe(5);

let idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
expect(idCellChips.length).toBe(0);

grid.getColumnByName('ID').filterable = true;
fix.detectChanges();
tick(100);

idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
expect(idCellChips.length).toBe(1);
}));
fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridFilteringComponent);
fix.detectChanges();
tick(100);
const grid = fix.componentInstance.grid;
grid.width = '1500px';
fix.detectChanges();
const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const filteringChips = fix.debugElement.queryAll(By.css('.igx-filtering-chips'));
expect(filteringCells.length).toBe(6);
expect(filteringChips.length).toBe(5);

let idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
expect(idCellChips.length).toBe(0);

grid.getColumnByName('ID').filterable = true;
fix.detectChanges();
tick(100);

idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
expect(idCellChips.length).toBe(1);
}));

it('should render correct input and dropdown in filter row for different column types', fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridFilteringComponent);
Expand Down Expand Up @@ -1737,36 +1739,36 @@ describe('IgxGrid - Filtering Row UI actions', () => {
}));

it('should not render chip in header if condition that requires value is applied and then value is cleared in filter row.',
fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridFilteringComponent);
fix.detectChanges();
let filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const stringCellChip = filteringCells[1].query(By.css('igx-chip'));
const grid = fix.componentInstance.grid;
// filter string col
stringCellChip.nativeElement.click();
tick();
fix.detectChanges();
GridFunctions.filterBy('Starts With', 'I', fix);
// remote text from input
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
const input = filterUIRow.query(By.directive(IgxInputDirective));
input.nativeElement.value = null;
const exprList = filterUIRow.componentInstance.expressionsList;
exprList[0].expression.searchVal = null;
tick();
fix.detectChanges();
GridFunctions.closeFilterRow(fix);

// check no condition is applied
expect(grid.rowList.length).toEqual(8);

filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const stringCellText = filteringCells[1].query(By.css('igx-chip')).query(By.css('.igx-chip__content'));
expect(stringCellText.nativeElement.textContent).toBe('Filter');
}));

it('Should correctly update empty filter cells when scrolling horizontally.', async() => {
fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridFilteringComponent);
fix.detectChanges();
let filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const stringCellChip = filteringCells[1].query(By.css('igx-chip'));
const grid = fix.componentInstance.grid;
// filter string col
stringCellChip.nativeElement.click();
tick();
fix.detectChanges();
GridFunctions.filterBy('Starts With', 'I', fix);
// remote text from input
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
const input = filterUIRow.query(By.directive(IgxInputDirective));
input.nativeElement.value = null;
const exprList = filterUIRow.componentInstance.expressionsList;
exprList[0].expression.searchVal = null;
tick();
fix.detectChanges();
GridFunctions.closeFilterRow(fix);

// check no condition is applied
expect(grid.rowList.length).toEqual(8);

filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
const stringCellText = filteringCells[1].query(By.css('igx-chip')).query(By.css('.igx-chip__content'));
expect(stringCellText.nativeElement.textContent).toBe('Filter');
}));

it('Should correctly update empty filter cells when scrolling horizontally.', async () => {
const fix = TestBed.createComponent(IgxGridFilteringScrollComponent);
const grid = fix.componentInstance.grid;
fix.detectChanges();
Expand Down Expand Up @@ -1838,7 +1840,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
fix.detectChanges();

const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
const stringCellChip = initialChips[0].nativeElement;
const stringCellChip = initialChips[0].nativeElement;

stringCellChip.click();
fix.detectChanges();
Expand Down Expand Up @@ -2251,7 +2253,12 @@ describe('IgxGrid - Filtering Row UI actions', () => {
const grid = fix.componentInstance.grid;
fix.detectChanges();
grid.getColumnByName('ProductName').groupable = true;
grid.groupBy({fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()});
grid.groupBy({
fieldName: 'ProductName',
dir: SortingDirection.Asc,
ignoreCase: false,
strategy: DefaultSortingStrategy.instance()
});
fix.detectChanges();

const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
Expand Down Expand Up @@ -2475,7 +2482,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
export class CustomFilter extends IgxFilteringOperand {
private static _instance: CustomFilter;

private constructor () {
private constructor() {
super();
this.operations = [{
name: 'custom',
Expand Down Expand Up @@ -2786,7 +2793,7 @@ function isNextYear(date: Date, year: number): boolean {
function checkUIForType(type: string, elem: DebugElement) {
let expectedConditions;
let expectedInputType;
const isReadOnly = type === 'bool' ? true : false;
const isReadOnly = type === 'bool' ? true : false;
switch (type) {
case 'string':
expectedConditions = IgxStringFilteringOperand.instance().operations;
Expand All @@ -2803,7 +2810,7 @@ function checkUIForType(type: string, elem: DebugElement) {
case 'bool':
expectedConditions = IgxBooleanFilteringOperand.instance().operations;
expectedInputType = 'text';
break;
break;
}
GridFunctions.openFilterDD(elem);
const ddList = elem.query(By.css('div.igx-drop-down__list.igx-toggle'));
Expand Down

0 comments on commit d82baac

Please sign in to comment.