@@ -64,63 +64,66 @@ beforeEach(() => {
6464/**********************
6565 * Tests
6666 **********************/
67- it ( 'should swap burger icons and headerNav visibility when burgerImage is clicked' , ( ) => {
68- let { burgerIcon, burgerXIcon} = getNavIcons ( ) ;
69-
70- // Confirm initial state (headerNav style is '', button expanded is null, icon is burger)
71- expect ( headerNav . style . display ) . toBe ( "" ) ;
72- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBeNull ( ) ;
73- expect ( burgerIcon ) . not . toBeNull ( ) ;
74- expect ( burgerXIcon ) . toBeNull ( ) ;
75-
76- // Click burgerImage to open, re-grab our icon elements
77- burgerImage . click ( ) ;
78- ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
79-
80- // Confirm state now (headerNav style is flex, button expanded is true, icon is X)
81- expect ( headerNav . style . display ) . toBe ( 'flex' ) ;
82- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ;
83- expect ( burgerIcon ) . toBeNull ( ) ;
84- expect ( burgerXIcon ) . not . toBeNull ( ) ;
85-
86- // Click burgerImage to close, re-grab our icon elements
87- burgerImage . click ( ) ;
88- ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
89-
90- // Confirm state now (headerNav style is none, button expanded is false, icon is burger)
91- expect ( headerNav . style . display ) . toBe ( 'none' ) ;
92- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'false' ) ;
93- expect ( burgerIcon ) . not . toBeNull ( ) ;
94- expect ( burgerXIcon ) . toBeNull ( ) ;
67+ describe ( 'burger button' , ( ) => {
68+ it ( 'swaps burger icons and headerNav visibility when burgerImage is clicked' , ( ) => {
69+ let { burgerIcon, burgerXIcon} = getNavIcons ( ) ;
70+
71+ // Confirm initial state (headerNav style is '', button expanded is null, icon is burger)
72+ expect ( headerNav . style . display ) . toBe ( "" ) ;
73+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBeNull ( ) ;
74+ expect ( burgerIcon ) . not . toBeNull ( ) ;
75+ expect ( burgerXIcon ) . toBeNull ( ) ;
76+
77+ // Click burgerImage to open, re-grab our icon elements
78+ burgerImage . click ( ) ;
79+ ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
80+
81+ // Confirm state now (headerNav style is flex, button expanded is true, icon is X)
82+ expect ( headerNav . style . display ) . toBe ( 'flex' ) ;
83+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ;
84+ expect ( burgerIcon ) . toBeNull ( ) ;
85+ expect ( burgerXIcon ) . not . toBeNull ( ) ;
86+
87+ // Click burgerImage to close, re-grab our icon elements
88+ burgerImage . click ( ) ;
89+ ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
90+
91+ // Confirm state now (headerNav style is none, button expanded is false, icon is burger)
92+ expect ( headerNav . style . display ) . toBe ( 'none' ) ;
93+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'false' ) ;
94+ expect ( burgerIcon ) . not . toBeNull ( ) ;
95+ expect ( burgerXIcon ) . toBeNull ( ) ;
96+ } ) ;
9597} ) ;
9698
97- it ( 'should reset the navbar properties when resizing the window >767' , ( ) => {
98- let { burgerIcon, burgerXIcon} = getNavIcons ( ) ;
99-
100- // Confirm initial state (headerNav style is '', button expanded is null, icon is burger)
101- expect ( headerNav . style . display ) . toBe ( "" ) ;
102- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBeNull ( ) ;
103- expect ( burgerIcon ) . not . toBeNull ( ) ;
104- expect ( burgerXIcon ) . toBeNull ( ) ;
105-
106- // Click to update the style and icon
107- burgerImage . click ( ) ;
108- ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
109-
110- // Confirm state now (headerNav style is flex, button expanded is true, icon is X)
111- expect ( headerNav . style . display ) . toBe ( 'flex' ) ;
112- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ;
113- expect ( burgerIcon ) . toBeNull ( ) ;
114- expect ( burgerXIcon ) . not . toBeNull ( ) ;
115-
116- // Resize the Viewport
117- setViewportWidth ( DESKTOP_WIDTH ) ;
118- ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
119-
120- // Confirm state now (headerNav style is null, button is expanded, icon is burger)
121- expect ( headerNav . style . display ) . toBe ( '' ) ;
122- expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ; // doesn't get reset
123- expect ( burgerIcon ) . not . toBeNull ( ) ;
124- expect ( burgerXIcon ) . toBeNull ( ) ;
125-
126- } ) ;
99+ describe ( 'window resizing' , ( ) => {
100+ it ( 'resets the navbar properties when resizing the window >767' , ( ) => {
101+ let { burgerIcon, burgerXIcon} = getNavIcons ( ) ;
102+
103+ // Confirm initial state (headerNav style is '', button expanded is null, icon is burger)
104+ expect ( headerNav . style . display ) . toBe ( "" ) ;
105+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBeNull ( ) ;
106+ expect ( burgerIcon ) . not . toBeNull ( ) ;
107+ expect ( burgerXIcon ) . toBeNull ( ) ;
108+
109+ // Click to update the style and icon
110+ burgerImage . click ( ) ;
111+ ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
112+
113+ // Confirm state now (headerNav style is flex, button expanded is true, icon is X)
114+ expect ( headerNav . style . display ) . toBe ( 'flex' ) ;
115+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ;
116+ expect ( burgerIcon ) . toBeNull ( ) ;
117+ expect ( burgerXIcon ) . not . toBeNull ( ) ;
118+
119+ // Resize the Viewport
120+ setViewportWidth ( DESKTOP_WIDTH ) ;
121+ ( { burgerIcon, burgerXIcon} = getNavIcons ( ) ) ;
122+
123+ // Confirm state now (headerNav style is null, button is expanded, icon is burger)
124+ expect ( headerNav . style . display ) . toBe ( '' ) ;
125+ expect ( burgerImage . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ; // doesn't get reset
126+ expect ( burgerIcon ) . not . toBeNull ( ) ;
127+ expect ( burgerXIcon ) . toBeNull ( ) ;
128+ } ) ;
129+ } ) ;
0 commit comments