Skip to content

Commit

Permalink
Dropdowns don't reflect URL parameters (#2843)
Browse files Browse the repository at this point in the history 
* Dropdowns doesn't reflex URL parameters

* Improve tests

* resolve feedbacks
  • Loading branch information
@xavierfacq
xavierfacq committed May 6, 2024
1 parent ab2b094 commit 7eb0f4a
Show file tree
Hide file tree
Showing 4 changed files with 471 additions and 111 deletions.
47 changes: 41 additions & 6 deletions src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
import { createRandomTemurinReleases, mockOsesAPI, mockArchesAPI } from '../../../__fixtures__/hooks';
import DownloadDropdowns from '..';
import queryString from 'query-string';
import * as detectOSModule from '../../../util/detectOS';

const Table = () => {
return (
Expand Down Expand Up @@ -72,39 +73,39 @@ describe('DownloadDropdowns component', () => {
);

await waitFor(() => {
expect(updater).toHaveBeenCalledTimes(1);
expect(updater).toHaveBeenCalled
});

let select;
let select:HTMLElement;

// Simulate a user using dropdowns
select = getByTestId('os-filter');
await act(async () => {
fireEvent.change(select, { target: { value: 'mock_linux' } });
});

expect(updater).toHaveBeenCalledTimes(2);
expect(updater).toHaveBeenCalled

select = getByTestId('arch-filter');
await act(async () => {
fireEvent.change(select, { target: { value: 'mock_x64' } });
});

expect(updater).toHaveBeenCalledTimes(3);
expect(updater).toHaveBeenCalled

select = getByTestId('package-type-filter');
await act(async () => {
fireEvent.change(select, { target: { value: 'mock_pkg' } });
});

expect(updater).toHaveBeenCalledTimes(4);
expect(updater).toHaveBeenCalled

select = getByTestId('version-filter');
await act(async () => {
fireEvent.change(select, { target: { value: 2 } });
});

expect(updater).toHaveBeenCalledTimes(5);
expect(updater).toHaveBeenCalled
expect(container).toMatchSnapshot();
});

Expand Down Expand Up @@ -224,4 +225,38 @@ describe('DownloadDropdowns component', () => {

expect(container).toMatchSnapshot();
});

it('renders correctly - marketplace fake LINUX', async () => {
vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.LINUX);

const { container } = render(
<DownloadDropdowns
updaterAction={updater}
marketplace={true}
Table={Table}
/>
);
await waitFor(() => {
expect(updater).toHaveBeenCalledTimes(1);
});

expect(container).toMatchSnapshot();
});

it('renders correctly - marketplace fake MAC', async () => {
vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.MAC);

const { container } = render(
<DownloadDropdowns
updaterAction={updater}
marketplace={true}
Table={Table}
/>
);
await waitFor(() => {
expect(updater).toHaveBeenCalledTimes(1);
});

expect(container).toMatchSnapshot();
});
});
291 changes: 291 additions & 0 deletions src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,297 @@ exports[`DownloadDropdowns component > renders correctly - marketplace 1`] = `
data-testid="version-filter"
id="version-filter"
>
<option
value="2"
>
2
</option>
<option
value="1"
>
1 - LTS
</option>
</select>
</div>
</div>
<div>
table
</div>
</div>
`;

exports[`DownloadDropdowns component > renders correctly - marketplace fake LINUX 1`] = `
<div>
<div>
vendor-selector
</div>
<div
class="input-group mb-5 row g-2"
>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="os"
>
Text
</label>
<select
aria-label="OS Filter"
class="form-select form-select-sm"
data-testid="os-filter"
id="os-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_linux"
>
Mock_linux
</option>
<option
value="mock_macos"
>
Mock_macos
</option>
<option
value="mock_windows"
>
Mock_windows
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="arch"
>
Text
</label>
<select
aria-label="Architecture Filter"
class="form-select form-select-sm"
data-testid="arch-filter"
id="arch-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_aarch64"
>
mock_aarch64
</option>
<option
value="mock_ppc64"
>
mock_ppc64
</option>
<option
value="mock_x64"
>
mock_x64
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="package-type"
>
Text
</label>
<select
aria-label="Package Type Filter"
class="form-select form-select-sm"
data-testid="package-type-filter"
id="package-type-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_pkg"
>
mock_pkg
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="version"
>
Text
</label>
<select
aria-label="Version Filter"
class="form-select form-select-sm"
data-testid="version-filter"
id="version-filter"
>
<option
value="2"
>
2
</option>
<option
value="1"
>
1 - LTS
</option>
</select>
</div>
</div>
<div>
table
</div>
</div>
`;

exports[`DownloadDropdowns component > renders correctly - marketplace fake MAC 1`] = `
<div>
<div>
vendor-selector
</div>
<div
class="input-group mb-5 row g-2"
>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="os"
>
Text
</label>
<select
aria-label="OS Filter"
class="form-select form-select-sm"
data-testid="os-filter"
id="os-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_linux"
>
Mock_linux
</option>
<option
value="mock_macos"
>
Mock_macos
</option>
<option
value="mock_windows"
>
Mock_windows
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="arch"
>
Text
</label>
<select
aria-label="Architecture Filter"
class="form-select form-select-sm"
data-testid="arch-filter"
id="arch-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_aarch64"
>
mock_aarch64
</option>
<option
value="mock_ppc64"
>
mock_ppc64
</option>
<option
value="mock_x64"
>
mock_x64
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="package-type"
>
Text
</label>
<select
aria-label="Package Type Filter"
class="form-select form-select-sm"
data-testid="package-type-filter"
id="package-type-filter"
>
<option
value="any"
>
Text
</option>
<option
value="mock_pkg"
>
mock_pkg
</option>
</select>
</div>
<div
class="input-group-prepend flex-colunm col-12 col-md-3"
>
<label
class="px-2 fw-bold"
for="version"
>
Text
</label>
<select
aria-label="Version Filter"
class="form-select form-select-sm"
data-testid="version-filter"
id="version-filter"
>
<option
value="2"
>
2
</option>
<option
value="1"
>
Expand Down
Loading

0 comments on commit 7eb0f4a

Please sign in to comment.