@instructure/emotion 10.19.2-snapshot-2 → 10.19.2-snapshot-4

package/es/__old-tests__/useTheme.test.js

@@ -0,0 +1,484 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { canvas, canvasHighContrast, canvasThemeLocal } from '@instructure/ui-themes';
+import { expect, mount, spy } from '@instructure/ui-test-utils';
+import { ThemeRegistry } from '@instructure/theme-registry';
+import { useTheme } from '../useTheme';
+import { InstUISettingsProvider } from '../InstUISettingsProvider';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+const defaultRegistry = ThemeRegistry.getRegistry();
+const ExampleComponent = props => {
+  const theme = useTheme();
+  props.callback(theme);
+  return null;
+};
+describe('useTheme hook', () => {
+  beforeEach(() => {
+    ThemeRegistry.clearRegistry();
+  });
+  afterEach(() => {
+    //this is needed to not mess up the global Theme Registry
+    ThemeRegistry.setRegistry(defaultRegistry);
+  });
+  describe('with using InstUISettingsProvider', () => {
+    it('should use default canvas theme when no "theme" is provided', async () => {
+      const callback = spy();
+      await mount(_jsx(InstUISettingsProvider, {
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWith(canvas);
+    });
+    it('should use global theme when no "theme" is provided', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWith(theme);
+    });
+    it('should default to canvas theme when no global theme is available and no theme is provided', async () => {
+      const callback = spy();
+      await mount(_jsx(InstUISettingsProvider, {
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWith(canvas);
+    });
+    it('should use provided theme when theme is provided', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvas);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: canvasHighContrast,
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWith(canvasHighContrast);
+    });
+    it('should override the default theme when no other theme is available', async () => {
+      const callback = spy();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: {
+          colors: {
+            primitives: {
+              white: 'red'
+            }
+          }
+        },
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWithMatch({
+        ...canvas,
+        colors: {
+          primitives: {
+            white: 'red'
+          }
+        }
+      });
+    });
+    it('should override the global theme if that is the only theme available', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: {
+          colors: {
+            primitives: {
+              white: 'red'
+            }
+          }
+        },
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            white: 'red'
+          }
+        }
+      });
+    });
+    it('should override the global theme with the "themeOverrides" option if that is the only theme available', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: {
+          themeOverrides: {
+            colors: {
+              primitives: {
+                white: 'red'
+              }
+            }
+          }
+        },
+        children: _jsx(ExampleComponent, {
+          callback: callback
+        })
+      }));
+      expect(callback).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            white: 'red'
+          }
+        }
+      });
+    });
+    it('should override the theme from context when provided', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: canvasHighContrast,
+        children: _jsx(InstUISettingsProvider, {
+          theme: {
+            themeOverrides: {
+              colors: {
+                primitives: {
+                  white: 'red'
+                }
+              }
+            }
+          },
+          children: _jsx(ExampleComponent, {
+            callback: callback
+          })
+        })
+      }));
+      expect(callback).to.have.been.calledWithMatch({
+        ...canvasHighContrast,
+        colors: {
+          primitives: {
+            white: 'red'
+          }
+        }
+      });
+    });
+    it('should use local themes correctly', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvas);
+      theme.use();
+      await mount(_jsx(InstUISettingsProvider, {
+        theme: canvasThemeLocal,
+        children: _jsx(InstUISettingsProvider, {
+          theme: {
+            themeOverrides: {
+              colors: {
+                primitives: {
+                  white: 'red'
+                }
+              }
+            }
+          },
+          children: _jsx(ExampleComponent, {
+            callback: callback
+          })
+        })
+      }));
+      expect(callback).to.have.been.calledWithMatch({
+        ...canvasThemeLocal,
+        colors: {
+          primitives: {
+            white: 'red'
+          }
+        }
+      });
+    });
+  });
+  describe('without using InstUISettingsProvider', () => {
+    it('should use theme from global ThemeRegistry', async () => {
+      const callback = spy();
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use();
+      await mount(_jsx(ExampleComponent, {
+        callback: callback
+      }));
+      expect(callback).to.have.been.calledWith(theme);
+    });
+    it('should use default "canvas" theme when no theme is used from ThemeRegistry', async () => {
+      const callback = spy();
+      await mount(_jsx(ExampleComponent, {
+        callback: callback
+      }));
+      expect(callback).to.have.been.calledWith(canvas);
+    });
+  });
+  describe('with InstUISettingsProvider and global theme', () => {
+    it('overrides should work correctly', async () => {
+      const _Array$fill$map = Array(6).fill(0).map(() => spy()),
+        _Array$fill$map2 = _slicedToArray(_Array$fill$map, 6),
+        cb1 = _Array$fill$map2[0],
+        cb2 = _Array$fill$map2[1],
+        cb3 = _Array$fill$map2[2],
+        cb4 = _Array$fill$map2[3],
+        cb5 = _Array$fill$map2[4],
+        cb6 = _Array$fill$map2[5];
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use({
+        overrides: {
+          colors: {
+            primitives: {
+              red12: 'red',
+              green12: 'yellow',
+              blue12: 'magenta'
+            }
+          }
+        }
+      });
+      await mount(_jsxs(_Fragment, {
+        children: [_jsx(ExampleComponent, {
+          callback: cb1
+        }), _jsxs(InstUISettingsProvider, {
+          theme: canvasHighContrast,
+          children: [_jsx(ExampleComponent, {
+            callback: cb2
+          }), _jsxs(InstUISettingsProvider, {
+            theme: canvas,
+            children: [_jsx(ExampleComponent, {
+              callback: cb3
+            }), _jsx(InstUISettingsProvider, {
+              theme: {
+                colors: {
+                  primitives: {
+                    red12: 'orange'
+                  }
+                },
+                themeOverrides: {
+                  colors: {
+                    primitives: {
+                      green12: 'olive'
+                    }
+                  }
+                }
+              },
+              children: _jsx(ExampleComponent, {
+                callback: cb4
+              })
+            })]
+          })]
+        }), _jsxs(InstUISettingsProvider, {
+          children: [_jsx(ExampleComponent, {
+            callback: cb5
+          }), _jsx(InstUISettingsProvider, {
+            theme: {
+              colors: {
+                primitives: {
+                  red12: 'brown'
+                }
+              },
+              themeOverrides: {
+                colors: {
+                  primitives: {
+                    green12: 'pink'
+                  }
+                }
+              }
+            },
+            children: _jsx(ExampleComponent, {
+              callback: cb6
+            })
+          })]
+        })]
+      }));
+      expect(cb1).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            red12: 'red',
+            green12: 'yellow',
+            blue12: 'magenta'
+          }
+        }
+      });
+      expect(cb2).to.have.been.calledWith(canvasHighContrast);
+      expect(cb3).to.have.been.calledWith(canvas);
+      expect(cb4).to.have.been.calledWithMatch({
+        ...canvas,
+        colors: {
+          primitives: {
+            red12: 'orange',
+            green12: 'olive'
+          }
+        }
+      });
+      expect(cb5).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            red12: 'red',
+            green12: 'yellow',
+            blue12: 'magenta'
+          }
+        }
+      });
+      expect(cb6).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            red12: 'brown',
+            green12: 'pink',
+            blue12: 'magenta'
+          }
+        }
+      });
+    });
+    it('local themes should work correctly', async () => {
+      const _Array$fill$map3 = Array(6).fill(0).map(() => spy()),
+        _Array$fill$map4 = _slicedToArray(_Array$fill$map3, 4),
+        cb1 = _Array$fill$map4[0],
+        cb2 = _Array$fill$map4[1],
+        cb3 = _Array$fill$map4[2],
+        cb4 = _Array$fill$map4[3];
+      const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+      theme.use({
+        overrides: {
+          colors: {
+            primitives: {
+              red12: 'red',
+              green12: 'yellow',
+              blue12: 'magenta'
+            }
+          }
+        }
+      });
+      await mount(_jsxs(_Fragment, {
+        children: [_jsx(ExampleComponent, {
+          callback: cb1
+        }), _jsxs(InstUISettingsProvider, {
+          theme: canvas,
+          children: [_jsx(ExampleComponent, {
+            callback: cb2
+          }), _jsxs(InstUISettingsProvider, {
+            theme: canvasThemeLocal,
+            children: [_jsx(ExampleComponent, {
+              callback: cb3
+            }), _jsx(InstUISettingsProvider, {
+              theme: {
+                colors: {
+                  primitives: {
+                    red12: 'orange'
+                  }
+                },
+                themeOverrides: {
+                  colors: {
+                    primitives: {
+                      green12: 'olive'
+                    }
+                  }
+                }
+              },
+              children: _jsx(ExampleComponent, {
+                callback: cb4
+              })
+            })]
+          })]
+        })]
+      }));
+      expect(cb1).to.have.been.calledWithMatch({
+        ...theme,
+        colors: {
+          primitives: {
+            red12: 'red',
+            green12: 'yellow',
+            blue12: 'magenta'
+          }
+        }
+      });
+      expect(cb2).to.have.been.calledWith(canvas);
+      expect(cb3).to.have.been.calledWith(canvasThemeLocal);
+      expect(cb4).to.have.been.calledWithMatch({
+        ...canvasThemeLocal,
+        colors: {
+          primitives: {
+            red12: 'orange',
+            green12: 'olive'
+          }
+        }
+      });
+    });
+  });
+  it('should work correctly when multiple React trees is used', async () => {
+    const callback1 = spy();
+    const callback2 = spy();
+    const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+    theme.use();
+
+    //first react tree
+    await mount(_jsx(ExampleComponent, {
+      callback: callback1
+    }));
+
+    //second react tree
+    await mount(_jsx(ExampleComponent, {
+      callback: callback2
+    }));
+    expect(callback1).to.have.been.calledWith(theme);
+    expect(callback2).to.have.been.calledWith(theme);
+  });
+  it('should work correctly when multiple React trees is used together with InstUISettingsProvider', async () => {
+    const callback1 = spy();
+    const callback2 = spy();
+    const callback3 = spy();
+    const theme = ThemeRegistry.registerTheme(canvasHighContrast);
+    theme.use();
+
+    //first react tree
+    await mount(_jsx(ExampleComponent, {
+      callback: callback1
+    }));
+
+    //second react tree
+    await mount(_jsx(InstUISettingsProvider, {
+      children: _jsx(ExampleComponent, {
+        callback: callback2
+      })
+    }));
+
+    //third react tree
+    await mount(_jsx(InstUISettingsProvider, {
+      theme: canvasHighContrast,
+      children: _jsx(ExampleComponent, {
+        callback: callback3
+      })
+    }));
+    expect(callback1).to.have.been.calledWith(theme);
+    expect(callback2).to.have.been.calledWith(theme);
+    expect(callback3).to.have.been.calledWith(canvasHighContrast);
+  });
+});