Skip to content

Commit

Permalink
FD-3516 Updated test
Browse files Browse the repository at this point in the history
  • Loading branch information
@willemliufdmg
willemliufdmg committed Mar 8, 2023
1 parent d9fc7ce commit 1834a0a
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 95 deletions.
25 changes: 11 additions & 14 deletions __tests__/components/button/Dropdown.test.tsx
View file
Expand Up @@ -20,28 +20,26 @@ describe('Dropdown', () => {

expect(getByText('Knopje')).toBeTruthy();
expect(spy).toBeCalledTimes(0);
fireEvent.click(container.querySelector('button'));
fireEvent.click(container.querySelector('button')!);
expect(spy).toBeCalledTimes(1);
fireEvent.click(container.querySelector('button'));
fireEvent.click(container.querySelector('button')!);
expect(spy).toBeCalledTimes(2);
});

test('should show dropdown correctly', () => {
const { container, rerender, getByText } = render(
<Dropdown>Knopje</Dropdown>
);
const { container } = render(<Dropdown>Knopje</Dropdown>);

expect(
container
.querySelector('[aria-expanded]')
.querySelector('[aria-expanded]')!
.getAttribute('aria-expanded')
).toBe('false');

fireEvent.click(container.querySelector('button'));
fireEvent.click(container.querySelector('button')!);

expect(
container
.querySelector('[aria-expanded]')
.querySelector('[aria-expanded]')!
.getAttribute('aria-expanded')
).toBe('true');
});
Expand All @@ -58,11 +56,10 @@ describe('Dropdown', () => {

test('should have correct class name', () => {
const { container } = render(<Dropdown>Knopje</Dropdown>);
console.log(container.firstElementChild.classList);
// expect(
// container.firstElementChild?.classList.contains(
// getCssClassNames()[0]
// )
// ).toBeTruthy();
expect(
container.firstElementChild?.classList.contains(
getCssClassNames()[0]
)
).toBeTruthy();
});
});
132 changes: 84 additions & 48 deletions __tests__/components/button/__snapshots__/Dropdown.test.tsx.snap
View file
Expand Up @@ -30,40 +30,58 @@ exports[`Dropdown should handle sizes correctly 1`] = `
>
<ul>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Spotify
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Spotify
</span>
</span>
</span>
</a>
</li>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Apple Podcasts
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Apple Podcasts
</span>
</span>
</span>
</a>
</li>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Google Podcasts
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Google Podcasts
</span>
</span>
</span>
</a>
</li>
</ul>
</nav>
Expand Down Expand Up @@ -101,40 +119,58 @@ exports[`Dropdown should handle sizes correctly 2`] = `
>
<ul>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Spotify
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Spotify
</span>
</span>
</span>
</a>
</li>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Apple Podcasts
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Apple Podcasts
</span>
</span>
</span>
</a>
</li>
<li>
<span>
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<a
href="https://fd.nl"
rel="noopener noreferrer"
target="_blank"
>
<span>
Google Podcasts
<span
class="podcast-icon"
>
<test-file-stub />
</span>
<span>
Google Podcasts
</span>
</span>
</span>
</a>
</li>
</ul>
</nav>
Expand Down
64 changes: 32 additions & 32 deletions __tests__/components/card/__snapshots__/HorizontalCard4.test.tsx.snap
View file
Expand Up @@ -16,38 +16,38 @@ exports[`HorizontalCard4 should render is-read correctly 1`] = `
<img
class="image "
sizes="(min-width: 1080px) 244px, (min-width: 768px) 244px, 160px"
src="https://images.example.com/image.png?auto=format&ixlib=react-9.5.4"
srcset="https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=100 100w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=116 116w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=135 135w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=156 156w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=181 181w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=210 210w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=244 244w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=283 283w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=328 328w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=380 380w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=441 441w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=512 512w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=594 594w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=689 689w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=799 799w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=927 927w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=1075 1075w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=1247 1247w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=1446 1446w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=1678 1678w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=1946 1946w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=2257 2257w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=2619 2619w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=3038 3038w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=3524 3524w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=4087 4087w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=4741 4741w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=5500 5500w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=6380 6380w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=7401 7401w,
https://images.example.com/image.png?auto=format&ixlib=react-9.5.4&w=8192 8192w"
src="https://images.example.com/image.png?auto=format&ixlib=react-9.7.0"
srcset="https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=100 100w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=116 116w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=135 135w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=156 156w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=181 181w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=210 210w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=244 244w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=283 283w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=328 328w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=380 380w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=441 441w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=512 512w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=594 594w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=689 689w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=799 799w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=927 927w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=1075 1075w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=1247 1247w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=1446 1446w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=1678 1678w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=1946 1946w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=2257 2257w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=2619 2619w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=3038 3038w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=3524 3524w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=4087 4087w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=4741 4741w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=5500 5500w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=6380 6380w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=7401 7401w,
https://images.example.com/image.png?auto=format&ixlib=react-9.7.0&w=8192 8192w"
/>
<figcaption />
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/Dropdown.tsx
View file
Expand Up @@ -125,7 +125,7 @@ function Dropdown(props: Props) {
}

function getCssClassNames(): string[] {
return [styles.fdDropdown];
return [styles['fd-dropdown']];
}

export { Dropdown, getCssClassNames };

0 comments on commit 1834a0a

Please sign in to comment.