Adds mock condition for window.matchMedia for default case (prevents the test from setting delay to 0 when user has reduced motion set on their system). Removes code paths and mentions of attribute data-reduced-motion because including an escape hatch right now might be a bit confusing.

jamieshark · jamieshark · commit b07b9ba87a10 · 2021-06-01T16:08:44.000-05:00
diff --git a/README.md b/README.md
@@ -31,24 +31,6 @@ window.matchMedia('(prefers-reduced-motion)').matches === true
 
 If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.
 
-The data attribute `data-reduced-motion` can be used to override the window media value.
-
-```html
-<typing-effect
-  data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'
-  data-reduced-motion="true"> <!-- This will NOT animate -->
-  <span data-target="typing-effect.content"></span>
-  <span data-target="typing-effect.cursor">|</span>
-</typing-effect>
-
-<typing-effect
-  data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'
-  data-reduced-motion="false"> <!-- This WILL animate -->
-  <span data-target="typing-effect.content"></span>
-  <span data-target="typing-effect.cursor">|</span>
-</typing-effect>
-```
-
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].
diff --git a/src/index.ts b/src/index.ts
@@ -41,13 +41,7 @@ class TypingEffectElement extends HTMLElement {
   }
 
   get prefersReducedMotion(): boolean {
-    if (this.getAttribute('data-reduced-motion') === 'false') {
-      return false
-    } else if (this.getAttribute('data-reduced-motion') === 'true') {
-      return true
-    } else {
-      return window.matchMedia('(prefers-reduced-motion)').matches
-    }
+    return window.matchMedia('(prefers-reduced-motion)').matches
   }
 
   get characterDelay(): number {
diff --git a/test/test.js b/test/test.js
@@ -68,9 +68,23 @@ describe('typing-effect', function () {
   })
 
   describe('delay attributes', function () {
+    let realMatchMedia
+    before(() => {
+      realMatchMedia = window.matchMedia
+      window.matchMedia = mediaString => {
+        if (mediaString === '(prefers-reduced-motion)') {
+          return {matches: false}
+        }
+        return realMatchMedia(mediaString)
+      }
+    })
+
+    after(() => {
+      window.matchMedia = realMatchMedia
+    })
+
     it('uses defaults when no delays specified', function () {
       const typingEffectElement = document.createElement('typing-effect')
-      typingEffectElement.setAttribute('data-reduced-motion', false)
       document.body.append(typingEffectElement)
 
       assert.equal(typingEffectElement.characterDelay, 40)
@@ -102,16 +116,6 @@ describe('typing-effect', function () {
       assert.equal(typingEffectElement.characterDelay, 0)
       assert.equal(typingEffectElement.lineDelay, 0)
     })
-
-    it('uses data-reduced-motion attribute to override window media query', function () {
-      const typingEffectElement = document.createElement('typing-effect')
-      typingEffectElement.setAttribute('data-reduced-motion', false)
-      document.body.append(typingEffectElement)
-
-      assert.equal(window.matchMedia('(prefers-reduced-motion)').matches, true)
-      assert.equal(typingEffectElement.characterDelay, 40)
-      assert.equal(typingEffectElement.lineDelay, 40)
-    })
   })
 })
 

Original file line number	Diff line number	Diff line change
`@@ -41,13 +41,7 @@ class TypingEffectElement extends HTMLElement {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`get prefersReducedMotion(): boolean {`
`44`		`- if (this.getAttribute('data-reduced-motion') === 'false') {`
`45`		`- return false`
`46`		`- } else if (this.getAttribute('data-reduced-motion') === 'true') {`
`47`		`- return true`
`48`		`- } else {`
`49`		`- return window.matchMedia('(prefers-reduced-motion)').matches`
`50`		`- }`
	`44`	`+ return window.matchMedia('(prefers-reduced-motion)').matches`
`51`	`45`	`}`
`52`	`46`
`53`	`47`	`get characterDelay(): number {`