From ccd2353b37cf03d608bcb21858e4ba646305f62f Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Fri, 18 Jan 2019 10:30:49 -0500 Subject: [PATCH 1/4] fix(drawer): parentElement => parentNode --- packages/mdc-drawer/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdc-drawer/index.js b/packages/mdc-drawer/index.js index 2bf776431af..64d9fe253db 100644 --- a/packages/mdc-drawer/index.js +++ b/packages/mdc-drawer/index.js @@ -110,7 +110,7 @@ class MDCDrawer extends MDCComponent { if (this.root_.classList.contains(MODAL)) { const {SCRIM_SELECTOR} = MDCDismissibleDrawerFoundation.strings; - this.scrim_ = /** @type {!Element} */ (this.root_.parentElement.querySelector(SCRIM_SELECTOR)); + this.scrim_ = /** @type {!Element} */ (this.root_.parentNode.querySelector(SCRIM_SELECTOR)); this.handleScrimClick_ = () => /** @type {!MDCModalDrawerFoundation} */ (this.foundation_).handleScrimClick(); this.scrim_.addEventListener('click', this.handleScrimClick_); this.focusTrap_ = util.createFocusTrapInstance(this.root_, this.focusTrapFactory_); From e1abd1d35abd515029d75b3810d5224359094ef2 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Fri, 25 Jan 2019 15:57:18 -0500 Subject: [PATCH 2/4] fix(drawer): WIP unit test --- test/scss/feature-targeting.scss.rej | 7 +++ test/unit/mdc-drawer/mdc-drawer.test.js | 63 +++++++++++++++---------- 2 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 test/scss/feature-targeting.scss.rej diff --git a/test/scss/feature-targeting.scss.rej b/test/scss/feature-targeting.scss.rej new file mode 100644 index 00000000000..724d96e844e --- /dev/null +++ b/test/scss/feature-targeting.scss.rej @@ -0,0 +1,7 @@ +diff a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss (rejected hunks) +@@ -1,3 +1,5 @@ + @import "@material/feature-targeting/functions"; + @import "@material/button/mixins"; ++@import "@material/radio/mixins"; + @include mdc-button($query: mdc-feature-any()); ++@include mdc-radio($query: mdc-feature-any()); diff --git a/test/unit/mdc-drawer/mdc-drawer.test.js b/test/unit/mdc-drawer/mdc-drawer.test.js index e8e736afa6b..4983b5e4b1b 100644 --- a/test/unit/mdc-drawer/mdc-drawer.test.js +++ b/test/unit/mdc-drawer/mdc-drawer.test.js @@ -31,39 +31,47 @@ import {strings, cssClasses} from '../../../packages/mdc-drawer/constants'; import {MDCListFoundation} from '../../../packages/mdc-list/index'; import MDCDismissibleDrawerFoundation from '../../../packages/mdc-drawer/dismissible/foundation'; -function getFixture(variantClass) { - let scrimEl; - if (variantClass === cssClasses.MODAL) { - scrimEl = bel`
`; +function getFixture(options) { + let scrimEl = ''; + if (options.variantClass === cssClasses.MODAL) { + scrimEl = '
'; } - return bel` -
-
+ const htmlStructure = ` +
-
- +
+ +
${scrimEl} -
- `; + `; + + if (options.shadowRoot) { + const fragment = document.createDocumentFragment(); + fragment.appendChild(bel`${htmlStructure}`); + return fragment; + } else { + return bel`
${htmlStructure}
`; + } } -function setupTest(variantClass = cssClasses.DISMISSIBLE) { - const root = getFixture(variantClass); +const defaultSetupOptions = {variantClass: cssClasses.DISMISSIBLE, shadowRoot: false}; + +function setupTest(options = defaultSetupOptions) { + const root = getFixture(options); const drawer = root.querySelector('.mdc-drawer'); const component = new MDCDrawer(drawer); return {root, drawer, component}; } - -function setupTestWithMocks(variantClass = cssClasses.DISMISSIBLE) { - const root = getFixture(variantClass); +function setupTestWithMocks(options = defaultSetupOptions) { + const root = getFixture(options); const drawer = root.querySelector('.mdc-drawer'); const MockFoundationCtor = td.constructor(MDCDismissibleDrawerFoundation); const mockFoundation = new MockFoundationCtor(); @@ -83,7 +91,7 @@ function setupTestWithMocks(variantClass = cssClasses.DISMISSIBLE) { suite('MDCDrawer'); test('attachTo initializes and returns a MDCDrawer instance', () => { - const drawer = getFixture(cssClasses.DISMISSIBLE).querySelector('.mdc-drawer'); + const drawer = getFixture({variantClass: cssClasses.DISMISSIBLE}).querySelector('.mdc-drawer'); assert.isTrue(MDCDrawer.attachTo(drawer) instanceof MDCDrawer); }); @@ -119,8 +127,8 @@ test('transitionend event calls foundation.handleTransitionEnd method', () => { }); test('component should throw error when invalid variant class name is used or no variant specified', () => { - assert.throws(() => setupTest('mdc-drawer--test-invalid-variant'), Error); - assert.throws(() => setupTest(' '), Error); + assert.throws(() => setupTest({variantClass: 'mdc-drawer--test-invalid-variant'}), Error); + assert.throws(() => setupTest({variantClass: ' '}), Error); }); test('#destroy removes keydown event listener', () => { @@ -232,14 +240,14 @@ test('adapter#restoreFocus focus is not restored if saveFocus never called', () }); test('adapter#trapFocus traps focus on root element', () => { - const {component, mockFocusTrapInstance} = setupTestWithMocks(cssClasses.MODAL); + const {component, mockFocusTrapInstance} = setupTestWithMocks({variantClass: cssClasses.MODAL}); component.getDefaultFoundation().adapter_.trapFocus(); td.verify(mockFocusTrapInstance.activate()); }); test('adapter#releaseFocus releases focus on root element after trap focus', () => { - const {component, mockFocusTrapInstance} = setupTestWithMocks(cssClasses.MODAL); + const {component, mockFocusTrapInstance} = setupTestWithMocks({variantClass: cssClasses.MODAL}); component.getDefaultFoundation().adapter_.releaseFocus(); td.verify(mockFocusTrapInstance.deactivate()); @@ -276,3 +284,8 @@ test('adapter#focusActiveNavigationItem focuses on active navigation item', () = assert.equal(activedNavigationItemEl, document.activeElement); document.body.removeChild(root); }); + +test('#initialSyncWithDOM should not throw any errors when DOM rendered in DocumentFragment i.e., Shadow DOM', () => { + const {component} = setupTest({variantClass: cssClasses.MODAL, shadowRoot: true}); + assert.doesNotThrow(() => component.initialSyncWithDOM()); +}); From 3a73ac47030abdbb867e69112df675201ad08658 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Mon, 28 Jan 2019 11:05:42 -0500 Subject: [PATCH 3/4] fix(drawer): Fix getFixture in test file --- test/unit/mdc-drawer/mdc-drawer.test.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/test/unit/mdc-drawer/mdc-drawer.test.js b/test/unit/mdc-drawer/mdc-drawer.test.js index 4983b5e4b1b..a0779cdbd52 100644 --- a/test/unit/mdc-drawer/mdc-drawer.test.js +++ b/test/unit/mdc-drawer/mdc-drawer.test.js @@ -32,12 +32,7 @@ import {MDCListFoundation} from '../../../packages/mdc-list/index'; import MDCDismissibleDrawerFoundation from '../../../packages/mdc-drawer/dismissible/foundation'; function getFixture(options) { - let scrimEl = ''; - if (options.variantClass === cssClasses.MODAL) { - scrimEl = '
'; - } - - const htmlStructure = ` + const drawerEl = bel`
@@ -49,15 +44,23 @@ function getFixture(options) {
- ${scrimEl} `; + const scrimEl = bel`
`; + const isModal = options.variantClass === cssClasses.MODAL; if (options.shadowRoot) { const fragment = document.createDocumentFragment(); - fragment.appendChild(bel`${htmlStructure}`); + fragment.appendChild(drawerEl); + if (isModal) { + fragment.appendChild(scrimEl); + } return fragment; } else { - return bel`
${htmlStructure}
`; + return bel` +
+ ${drawerEl} + ${isModal ? scrimEl : ''} +
`; } } From d82f0ca8c139ce0f8a497264434264f155229a59 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Thu, 31 Jan 2019 11:44:54 -0500 Subject: [PATCH 4/4] Delete feature-targeting.scss.rej --- test/scss/feature-targeting.scss.rej | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 test/scss/feature-targeting.scss.rej diff --git a/test/scss/feature-targeting.scss.rej b/test/scss/feature-targeting.scss.rej deleted file mode 100644 index 724d96e844e..00000000000 --- a/test/scss/feature-targeting.scss.rej +++ /dev/null @@ -1,7 +0,0 @@ -diff a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss (rejected hunks) -@@ -1,3 +1,5 @@ - @import "@material/feature-targeting/functions"; - @import "@material/button/mixins"; -+@import "@material/radio/mixins"; - @include mdc-button($query: mdc-feature-any()); -+@include mdc-radio($query: mdc-feature-any());