@react-md/core 1.0.0-next.1 → 1.0.0-next.3

package/src/snackbar/__tests__/Snackbar.tsx

@@ -16,12 +16,13 @@ const render = (
   ui: ReactElement,
   options?: ReactMDRenderOptions
 ): RenderResult => {
+  const manager = new ToastManager();
+  manager.addToast({ children: "Toast" });
+
   return rmdRender(ui, {
     ...options,
     wrapper: ({ children }) => (
-      <ToastManagerProvider manager={new ToastManager()}>
-        {children}
-      </ToastManagerProvider>
+      <ToastManagerProvider manager={manager}>{children}</ToastManagerProvider>
     ),
   });
 };
@@ -30,12 +31,12 @@ describe("Snackbar", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLDivElement>();
     const props = {
-      "aria-label": "Notifications",
+      "data-testid": "snackbar",
       ref,
     } as const;
     const { rerender } = render(<Snackbar {...props} />);
 
-    const snackbar = screen.getByRole("status", { name: "Notifications" });
+    const snackbar = screen.getByTestId("snackbar");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(snackbar);
     expect(snackbar).toMatchSnapshot();
@@ -60,8 +61,8 @@ describe("Snackbar", () => {
       "top-right",
     ];
 
-    const { rerender } = render(<Snackbar />);
-    const snackbar = screen.getByRole("status");
+    const { rerender } = render(<Snackbar data-testid="snackbar" />);
+    const snackbar = screen.getByTestId("snackbar");
     expect(snackbar).toMatchSnapshot();
 
     positions.forEach((position) => {
@@ -72,13 +73,13 @@ describe("Snackbar", () => {
   });
 
   it("should allow the portal behavior to be disabled", () => {
-    const { container, rerender } = render(<Snackbar />);
-    let snackbar = screen.getByRole("status");
+    const { container, rerender } = render(<Snackbar data-testid="snackbar" />);
+    let snackbar = screen.getByTestId("snackbar");
     expect(container).not.toContainElement(snackbar);
     expect(snackbar).toBeInTheDocument();
 
-    rerender(<Snackbar disablePortal />);
-    snackbar = screen.getByRole("status");
+    rerender(<Snackbar data-testid="snackbar" disablePortal />);
+    snackbar = screen.getByTestId("snackbar");
     expect(container).toContainElement(snackbar);
   });
 });

package/src/snackbar/__tests__/ToastManagerProvider.tsx

@@ -78,7 +78,7 @@ function SimpleTest(props: SimpleTestProps): ReactElement {
         Button
       </Button>
       {children}
-      <Snackbar {...snackbar} />
+      <Snackbar data-testid="snackbar" {...snackbar} />
     </>
   );
 }
@@ -101,21 +101,18 @@ describe("ToastManagerProvider", () => {
             <Button onClick={() => addToast({ children: "Hello, world!" })}>
               Button
             </Button>
-            <Snackbar />
+            <Snackbar data-testid="snackbar" />
           </>
         );
       }
 
       rmdRender(<Test />);
       const button = screen.getByRole("button", { name: "Button" });
-      const snackbar = screen.getByRole("status");
-      expect(snackbar).toBeInTheDocument();
+      expect(() => screen.getByTestId("snackbar")).toThrow();
 
       await user.click(button);
-      const message = snackbar.firstElementChild;
-      if (!message) {
-        throw new Error();
-      }
+      const snackbar = await screen.findByTestId("snackbar");
+      const message = await screen.findByRole("status");
 
       expect(snackbar).toMatchSnapshot();
 
@@ -126,20 +123,14 @@ describe("ToastManagerProvider", () => {
     });
 
     it("should allow toasts to be added outside of a react component (like redux)", async () => {
-      rmdRender(<Snackbar />);
-      const snackbar = screen.getByRole("status");
-      expect(snackbar).toBeInTheDocument();
-      expect(snackbar).toBeEmptyDOMElement();
+      rmdRender(<Snackbar data-testid="snackbar" />);
 
       act(() => {
         addToast({ toastId: "toast-id", children: "Fired outside of react!" });
       });
 
-      let toast = screen.getByText("Fired outside of react!");
+      let toast = await screen.findByRole("status");
       expect(toast).toBeInTheDocument();
-      await waitFor(() => {
-        expect(toast.parentElement).not.toHaveClass(ENTER_CLASS_NAME);
-      });
 
       act(() => {
         popToast();
@@ -150,8 +141,7 @@ describe("ToastManagerProvider", () => {
         addToast({ toastId: "toast-id", children: "Fired outside of react!" });
         addToast({ toastId: "toast-id-2", children: "Second toast" });
       });
-      toast = screen.getByText("Fired outside of react!");
-      expect(toast).toBeInTheDocument();
+      toast = await screen.findByRole("status");
 
       act(() => {
         removeToast("invalid-toast-id", false);
@@ -170,7 +160,7 @@ describe("ToastManagerProvider", () => {
         addToast({ children: "Toast" });
         clearToasts();
       });
-      expect(snackbar).toBeEmptyDOMElement();
+      expect(() => screen.getByTestId("snackbar")).toThrow();
     });
 
     it("should not add a toast to another toast manager", async () => {
@@ -185,21 +175,20 @@ describe("ToastManagerProvider", () => {
             <Button onClick={() => addToast({ children: "Global" })}>
               Global
             </Button>
-            <Snackbar />
+            <Snackbar data-testid="snackbar" />
           </>
         );
       }
 
       renderWithManager(<Test />);
-      const snackbar = screen.getByRole("status");
       const scopedAdd = screen.getByRole("button", { name: "Scoped" });
       const globalAdd = screen.getByRole("button", { name: "Global" });
 
       await user.click(globalAdd);
-      expect(snackbar).toBeEmptyDOMElement();
+      expect(() => screen.getByTestId("snackbar")).toThrow();
 
       await user.click(scopedAdd);
-      expect(snackbar).not.toBeEmptyDOMElement();
+      const snackbar = await screen.findByTestId("snackbar");
       expect(within(snackbar).getByText("Scoped")).toBeInTheDocument();
     });
   });
@@ -221,15 +210,10 @@ describe("ToastManagerProvider", () => {
       // eslint-disable-next-line testing-library/render-result-naming-convention
       const result = renderWithManager(<SimpleTest {...props} />);
       const button = screen.getByRole("button", { name: "Button" });
-      const snackbar = screen.getByRole("status");
-      expect(snackbar).toBeEmptyDOMElement();
 
       await user.click(button);
-      expect(snackbar).not.toBeEmptyDOMElement();
-      const message = snackbar.firstElementChild;
-      if (!message) {
-        throw new Error();
-      }
+      const snackbar = await screen.findByTestId("snackbar");
+      const message = await screen.findByRole("status");
 
       act(() => {
         jest.runOnlyPendingTimers();
@@ -331,15 +315,9 @@ describe("ToastManagerProvider", () => {
       const user = userEvent.setup({ delay: null });
       renderWithManager(<SimpleTest toast={{ toastId: "same-toast-id" }} />);
       const button = screen.getByRole("button", { name: "Button" });
-      const snackbar = screen.getByRole("status");
-      expect(snackbar).toBeEmptyDOMElement();
 
       await user.click(button);
-      expect(snackbar).not.toBeEmptyDOMElement();
-      const message = snackbar.firstElementChild;
-      if (!message) {
-        throw new Error();
-      }
+      const message = await screen.findByRole("status");
 
       act(() => {
         jest.runOnlyPendingTimers();
@@ -456,7 +434,7 @@ describe("ToastManagerProvider", () => {
           </>
         );
       }
-      const { user, message, snackbar } = await init({
+      const { user, message } = await init({
         children: <Children />,
       });
       act(() => {
@@ -474,8 +452,8 @@ describe("ToastManagerProvider", () => {
 
       const testFullFlow = async (button: HTMLElement): Promise<void> => {
         await user.click(button);
-        expect(snackbar).not.toBeEmptyDOMElement();
-        const nextMessage = snackbar.firstElementChild;
+        const snackbar = await screen.findByTestId("snackbar");
+        const nextMessage = within(snackbar).getByRole("status");
         expect(nextMessage).toHaveClass(ENTER_CLASS_NAME);
         act(() => {
           jest.runOnlyPendingTimers();
@@ -746,17 +724,17 @@ describe("ToastManagerProvider", () => {
             >
               Alert
             </Button>
-            <Snackbar />
+            <Snackbar data-testid="snackbar" />
           </>
         );
       }
 
       renderWithManager(<Test />);
-      const snackbar = screen.getByRole("status");
       const button = screen.getByRole("button", { name: "Alert" });
 
       await user.click(button);
 
+      const snackbar = screen.getByTestId("snackbar");
       const alert = screen.getByRole("alert");
       expect(snackbar).toMatchSnapshot();
 

package/src/snackbar/__tests__/__snapshots__/Snackbar.tsx.snap

@@ -2,75 +2,175 @@
 
 exports[`Snackbar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div
-  aria-label="Notifications"
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
-/>
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r1:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div
-  aria-label="Notifications"
   class="rmd-snackbar rmd-snackbar--bottom custom-class-name"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
   style="color: white;"
-/>
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r1:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  data-testid="snackbar"
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 3`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom rmd-snackbar--start"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 4`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom rmd-snackbar--end"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 5`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 6`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top rmd-snackbar--start"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 7`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top rmd-snackbar--end"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;

package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap

@@ -3,12 +3,13 @@
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -22,12 +23,13 @@ exports[`ToastManagerProvider default toast manager should work without needing
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -42,6 +44,7 @@ exports[`ToastManagerProvider toast queue should add a toast next in queue if a
 <div
   class="rmd-toast"
   id="toast-:ru:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -55,6 +58,7 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 <div
   class="rmd-toast"
   id="toast-:ri:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -67,8 +71,8 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--enter rmd-scale-transition--enter-active"
@@ -99,8 +103,8 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--exit rmd-scale-transition--exit-active"
@@ -131,12 +135,13 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1e:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -147,6 +152,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -157,6 +163,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -170,12 +177,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -186,6 +194,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -196,6 +205,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -209,12 +219,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 3`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -225,6 +236,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -235,6 +247,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -248,12 +261,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 4`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -264,6 +278,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1i:"
+    role="status"
   >
     <div
       class="rmd-toast-content"

package/src/snackbar/_snackbar.scss

@@ -60,43 +60,35 @@ $background-color: theme.get-default-color(
 ) !default;
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-toast-color,
-    value: $color,
-  ),
-  background-color: (
-    var: --rmd-toast-background-color,
-    value: $background-color,
-  ),
-  offset: (
-    var: --rmd-snackbar-offset,
-    value: 0,
-  ),
-);
+$variables: (background-color, color, offset);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "alert var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "snackbar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "alert var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "snackbar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(offset, 0);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-snackbar {