feat: utils/stores unit tests

frontend/tests/utils/stores/MediaPageStore.test.ts

@@ -0,0 +1,739 @@
+import { csrfToken, deleteRequest, getRequest, postRequest, putRequest } from '../../../src/static/js/utils/helpers';
+
+const MEDIA_ID = 'MEDIA_ID';
+const PLAYLIST_ID = 'PLAYLIST_ID';
+
+window.history.pushState({}, '', `/?m=${MEDIA_ID}&pl=${PLAYLIST_ID}`);
+
+import store from '../../../src/static/js/utils/stores/MediaPageStore';
+
+import { sampleGlobalMediaCMS, sampleMediaCMSConfig } from '../../tests-constants';
+
+jest.mock('../../../src/static/js/utils/classes/', () => ({
+    BrowserCache: jest.fn().mockImplementation(() => ({
+        get: jest.fn(),
+        set: jest.fn(),
+    })),
+}));
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    BrowserEvents: jest.fn().mockImplementation(() => ({
+        doc: jest.fn(),
+        win: jest.fn(),
+    })),
+    csrfToken: jest.fn(),
+    deleteRequest: jest.fn(),
+    exportStore: jest.fn((store) => store),
+    getRequest: jest.fn(),
+    postRequest: jest.fn(),
+    putRequest: jest.fn(),
+}));
+
+describe('utils/store', () => {
+    describe('MediaPageStore', () => {
+        const handler = store.actions_handler.bind(store);
+
+        const onLoadedViewerPlaylistData = jest.fn();
+        const onLoadedPagePlaylistData = jest.fn();
+        const onLoadedViewerPlaylistError = jest.fn();
+        const onLoadedVideoData = jest.fn();
+        const onLoadedImageData = jest.fn();
+        const onLoadedMediaData = jest.fn();
+        const onLoadedMediaError = jest.fn();
+        const onCommentsLoad = jest.fn();
+        const onUsersLoad = jest.fn();
+        const onPlaylistsLoad = jest.fn();
+        const onLikedMediaFailedRequest = jest.fn();
+        const onLikedMedia = jest.fn();
+        const onDislikedMediaFailedRequest = jest.fn();
+        const onDislikedMedia = jest.fn();
+        const onReportedMedia = jest.fn();
+        const onPlaylistCreationCompleted = jest.fn();
+        const onPlaylistCreationFailed = jest.fn();
+        const onMediaPlaylistAdditionCompleted = jest.fn();
+        const onMediaPlaylistAdditionFailed = jest.fn();
+        const onMediaPlaylistRemovalCompleted = jest.fn();
+        const onMediaPlaylistRemovalFailed = jest.fn();
+        const onCopiedMediaLink = jest.fn();
+        const onCopiedEmbedMediaCode = jest.fn();
+        const onMediaDelete = jest.fn();
+        const onMediaDeleteFail = jest.fn();
+        const onCommentDeleteFail = jest.fn();
+        const onCommentDelete = jest.fn();
+        const onCommentSubmitFail = jest.fn();
+        const onCommentSubmit = jest.fn();
+
+        store.on('loaded_viewer_playlist_data', onLoadedViewerPlaylistData);
+        store.on('loaded_page_playlist_data', onLoadedPagePlaylistData);
+        store.on('loaded_viewer_playlist_error', onLoadedViewerPlaylistError);
+        store.on('loaded_video_data', onLoadedVideoData);
+        store.on('loaded_image_data', onLoadedImageData);
+        store.on('loaded_media_data', onLoadedMediaData);
+        store.on('loaded_media_error', onLoadedMediaError);
+        store.on('comments_load', onCommentsLoad);
+        store.on('users_load', onUsersLoad);
+        store.on('playlists_load', onPlaylistsLoad);
+        store.on('liked_media_failed_request', onLikedMediaFailedRequest);
+        store.on('liked_media', onLikedMedia);
+        store.on('disliked_media_failed_request', onDislikedMediaFailedRequest);
+        store.on('disliked_media', onDislikedMedia);
+        store.on('reported_media', onReportedMedia);
+        store.on('playlist_creation_completed', onPlaylistCreationCompleted);
+        store.on('playlist_creation_failed', onPlaylistCreationFailed);
+        store.on('media_playlist_addition_completed', onMediaPlaylistAdditionCompleted);
+        store.on('media_playlist_addition_failed', onMediaPlaylistAdditionFailed);
+        store.on('media_playlist_removal_completed', onMediaPlaylistRemovalCompleted);
+        store.on('media_playlist_removal_failed', onMediaPlaylistRemovalFailed);
+        store.on('copied_media_link', onCopiedMediaLink);
+        store.on('copied_embed_media_code', onCopiedEmbedMediaCode);
+        store.on('media_delete', onMediaDelete);
+        store.on('media_delete_fail', onMediaDeleteFail);
+        store.on('comment_delete_fail', onCommentDeleteFail);
+        store.on('comment_delete', onCommentDelete);
+        store.on('comment_submit_fail', onCommentSubmitFail);
+        store.on('comment_submit', onCommentSubmit);
+
+        beforeAll(() => {
+            (globalThis as any).window.MediaCMS = {
+                // mediaId: MEDIA_ID, // @note: It doesn't belong in 'sampleGlobalMediaCMS, but it could be used
+                features: sampleGlobalMediaCMS.features,
+            };
+        });
+
+        afterAll(() => {
+            delete (globalThis as any).window.MediaCMS;
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        test('Validate initial values', () => {
+            expect(store.get('users')).toStrictEqual([]);
+            expect(store.get('playlists')).toStrictEqual([]);
+            expect(store.get('media-load-error-type')).toBe(null);
+            expect(store.get('media-load-error-message')).toBe(null);
+            expect(store.get('media-comments')).toStrictEqual([]);
+            expect(store.get('media-data')).toBe(null);
+            expect(store.get('media-id')).toBe(MEDIA_ID);
+            expect(store.get('media-url')).toBe('N/A');
+            expect(store.get('media-edit-subtitle-url')).toBe(null);
+            expect(store.get('media-likes')).toBe('N/A');
+            expect(store.get('media-dislikes')).toBe('N/A');
+            expect(store.get('media-summary')).toBe(null);
+            expect(store.get('media-categories')).toStrictEqual([]);
+            expect(store.get('media-tags')).toStrictEqual([]);
+            expect(store.get('media-type')).toBe(null);
+            expect(store.get('media-original-url')).toBe(null);
+            expect(store.get('media-thumbnail-url')).toBe(null);
+            expect(store.get('user-liked-media')).toBe(false);
+            expect(store.get('user-disliked-media')).toBe(false);
+            expect(store.get('media-author-thumbnail-url')).toBe(null);
+            expect(store.get('playlist-data')).toBe(null);
+            expect(store.get('playlist-id')).toBe(null);
+            expect(store.get('playlist-next-media-url')).toBe(null);
+            expect(store.get('playlist-previous-media-url')).toBe(null);
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            const MEDIA_DATA = {
+                add_subtitle_url: '/MEDIA_DATA_ADD_SUBTITLE_URL',
+                author_thumbnail: 'MEDIA_DATA_AUTHOR_THUMBNAIL',
+                categories_info: [
+                    { title: 'Art', url: '/search?c=Art' },
+                    { title: 'Documentary', url: '/search?c=Documentary' },
+                ],
+                likes: 12,
+                dislikes: 4,
+                media_type: 'video',
+                original_media_url: 'MEDIA_DATA_ORIGINAL_MEDIA_URL',
+                reported_times: 0,
+                summary: 'MEDIA_DATA_SUMMARY',
+                tags_info: [
+                    { title: 'and', url: '/search?t=and' },
+                    { title: 'behavior', url: '/search?t=behavior' },
+                ],
+                thumbnail_url: 'MEDIA_DATA_THUMBNAIL_URL',
+                url: '/MEDIA_DATA_URL',
+            };
+            const PLAYLIST_DATA = {
+                playlist_media: [
+                    { friendly_token: `${MEDIA_ID}_2`, url: '/PLAYLIT_MEDIA_URL_2' },
+                    { friendly_token: MEDIA_ID, url: '/PLAYLIT_MEDIA_URL_1' },
+                    { friendly_token: `${MEDIA_ID}_3`, url: '/PLAYLIT_MEDIA_URL_3' },
+                ],
+            };
+            const USER_PLAYLIST_DATA = { playlist_media: [{ url: 'm=PLAYLIST_MEDIA_ID' }] };
+
+            test('Action type: "LOAD_MEDIA_DATA"', () => {
+                const MEDIA_API_URL = `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}`;
+                const MEDIA_COMMENTS_API_URL = `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}/comments`;
+                const PLAYLIST_API_URL = `${sampleMediaCMSConfig.api.playlists}/${PLAYLIST_ID}`;
+                const USERS_API_URL = sampleMediaCMSConfig.api.users;
+                const USER_PLAYLISTS_API_URL = `${sampleMediaCMSConfig.api.user.playlists}${sampleMediaCMSConfig.member.username}`;
+                const USER_PLAYLIST_API_URL = `${sampleMediaCMSConfig.site.url}/${'PLAYLIST_API_URL'.replace(/^\//g, '')}`;
+
+                const MEDIA_COMMENTS_RESULTS = ['COMMENT_ID_1'];
+                const USERS_RESULTS = ['USER_ID_1'];
+                const USER_PLAYLISTS_RESULTS = [
+                    {
+                        url: `/${PLAYLIST_ID}`,
+                        user: sampleMediaCMSConfig.member.username,
+                        title: 'PLAYLIST_TITLE',
+                        description: 'PLAYLIST_DECRIPTION',
+                        add_date: 'PLAYLIST_ADD_DATE',
+                        api_url: 'PLAYLIST_API_URL',
+                    },
+                ];
+
+                (getRequest as jest.Mock).mockImplementation((url, _cache, successCallback, _failCallback) => {
+                    if (url === PLAYLIST_API_URL) {
+                        return successCallback({ data: PLAYLIST_DATA });
+                    }
+
+                    if (url === USER_PLAYLIST_API_URL) {
+                        return successCallback({ data: USER_PLAYLIST_DATA });
+                    }
+
+                    if (url === MEDIA_API_URL) {
+                        return successCallback({ data: MEDIA_DATA });
+                    }
+
+                    if (url === USERS_API_URL) {
+                        return successCallback({ data: { count: USERS_RESULTS.length, results: USERS_RESULTS } });
+                    }
+
+                    if (url === MEDIA_COMMENTS_API_URL) {
+                        return successCallback({
+                            data: { count: MEDIA_COMMENTS_RESULTS.length, results: MEDIA_COMMENTS_RESULTS },
+                        });
+                    }
+
+                    if (url === USER_PLAYLISTS_API_URL) {
+                        return successCallback({
+                            data: { count: USER_PLAYLISTS_RESULTS.length, results: USER_PLAYLISTS_RESULTS },
+                        });
+                    }
+                });
+
+                handler({ type: 'LOAD_MEDIA_DATA' });
+
+                expect(getRequest).toHaveBeenCalledTimes(6);
+
+                expect(getRequest).toHaveBeenCalledWith(
+                    PLAYLIST_API_URL,
+                    false,
+                    store.playlistDataResponse,
+                    store.playlistDataErrorResponse
+                );
+                expect(getRequest).toHaveBeenCalledWith(
+                    MEDIA_API_URL,
+                    false,
+                    store.dataResponse,
+                    store.dataErrorResponse
+                );
+                expect(getRequest).toHaveBeenCalledWith(MEDIA_COMMENTS_API_URL, false, store.commentsResponse);
+                expect(getRequest).toHaveBeenCalledWith(USERS_API_URL, false, store.usersResponse);
+                expect(getRequest).toHaveBeenCalledWith(USER_PLAYLISTS_API_URL, false, store.playlistsResponse);
+                expect(getRequest).toHaveBeenCalledWith(USER_PLAYLIST_API_URL, false, expect.any(Function));
+
+                expect(onLoadedViewerPlaylistData).toHaveBeenCalledTimes(1);
+                expect(onLoadedPagePlaylistData).toHaveBeenCalledTimes(1);
+                expect(onLoadedViewerPlaylistError).toHaveBeenCalledTimes(0);
+                expect(onLoadedVideoData).toHaveBeenCalledTimes(1);
+                expect(onLoadedImageData).toHaveBeenCalledTimes(0);
+                expect(onLoadedMediaData).toHaveBeenCalledTimes(1);
+                expect(onLoadedMediaError).toHaveBeenCalledTimes(0);
+                expect(onCommentsLoad).toHaveBeenCalledTimes(1);
+                expect(onUsersLoad).toHaveBeenCalledTimes(1);
+                expect(onPlaylistsLoad).toHaveBeenCalledTimes(1);
+                expect(onLikedMediaFailedRequest).toHaveBeenCalledTimes(0);
+                expect(onLikedMedia).toHaveBeenCalledTimes(0);
+                expect(onDislikedMediaFailedRequest).toHaveBeenCalledTimes(0);
+                expect(onDislikedMedia).toHaveBeenCalledTimes(0);
+                expect(onReportedMedia).toHaveBeenCalledTimes(0);
+                expect(onPlaylistCreationCompleted).toHaveBeenCalledTimes(0);
+                expect(onPlaylistCreationFailed).toHaveBeenCalledTimes(0);
+                expect(onMediaPlaylistAdditionCompleted).toHaveBeenCalledTimes(0);
+                expect(onMediaPlaylistAdditionFailed).toHaveBeenCalledTimes(0);
+                expect(onMediaPlaylistRemovalCompleted).toHaveBeenCalledTimes(0);
+                expect(onMediaPlaylistRemovalFailed).toHaveBeenCalledTimes(0);
+                expect(onCopiedMediaLink).toHaveBeenCalledTimes(0);
+                expect(onCopiedEmbedMediaCode).toHaveBeenCalledTimes(0);
+                expect(onMediaDelete).toHaveBeenCalledTimes(0);
+                expect(onMediaDeleteFail).toHaveBeenCalledTimes(0);
+                expect(onCommentDeleteFail).toHaveBeenCalledTimes(0);
+                expect(onCommentDelete).toHaveBeenCalledTimes(0);
+                expect(onCommentSubmitFail).toHaveBeenCalledTimes(0);
+                expect(onCommentSubmit).toHaveBeenCalledTimes(0);
+
+                expect(store.isVideo()).toBeTruthy();
+
+                expect(store.get('users')).toStrictEqual(USERS_RESULTS);
+                expect(store.get('playlists')).toStrictEqual([
+                    {
+                        playlist_id: PLAYLIST_ID,
+                        title: 'PLAYLIST_TITLE',
+                        description: 'PLAYLIST_DECRIPTION',
+                        add_date: 'PLAYLIST_ADD_DATE',
+                        media_list: ['PLAYLIST_MEDIA_ID'],
+                    },
+                ]);
+                expect(store.get('media-load-error-type')).toBe(null);
+                expect(store.get('media-load-error-message')).toBe(null);
+                expect(store.get('media-comments')).toStrictEqual(MEDIA_COMMENTS_RESULTS);
+                expect(store.get('media-data')).toBe(MEDIA_DATA);
+                expect(store.get('media-id')).toBe(MEDIA_ID);
+                expect(store.get('media-url')).toBe(MEDIA_DATA.url);
+                expect(store.get('media-edit-subtitle-url')).toBe(MEDIA_DATA.add_subtitle_url);
+                expect(store.get('media-likes')).toBe(MEDIA_DATA.likes);
+                expect(store.get('media-dislikes')).toBe(MEDIA_DATA.dislikes);
+                expect(store.get('media-summary')).toBe(MEDIA_DATA.summary);
+                expect(store.get('media-categories')).toStrictEqual(MEDIA_DATA.categories_info);
+                expect(store.get('media-tags')).toStrictEqual(MEDIA_DATA.tags_info);
+                expect(store.get('media-type')).toBe(MEDIA_DATA.media_type);
+                expect(store.get('media-original-url')).toBe(MEDIA_DATA.original_media_url);
+                expect(store.get('media-thumbnail-url')).toBe(MEDIA_DATA.thumbnail_url);
+                expect(store.get('user-liked-media')).toBe(false);
+                expect(store.get('user-disliked-media')).toBe(false);
+                expect(store.get('media-author-thumbnail-url')).toBe(`/${MEDIA_DATA.author_thumbnail}`);
+                expect(store.get('playlist-data')).toBe(PLAYLIST_DATA);
+                expect(store.get('playlist-id')).toBe(PLAYLIST_ID);
+                expect(store.get('playlist-next-media-url')).toBe(
+                    `${PLAYLIST_DATA.playlist_media[2].url}&pl=${PLAYLIST_ID}`
+                );
+                expect(store.get('playlist-previous-media-url')).toBe(
+                    `${PLAYLIST_DATA.playlist_media[0].url}&pl=${PLAYLIST_ID}`
+                );
+            });
+
+            test('Action type: "LIKE_MEDIA"', () => {
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock post request
+                (postRequest as jest.Mock).mockImplementation(
+                    (_url, _postData, _configData, _sync, successCallback, _failCallback) =>
+                        successCallback({ data: {} })
+                );
+
+                handler({ type: 'LIKE_MEDIA' });
+
+                // Verify postRequest was called with correct parameters
+                expect(postRequest).toHaveBeenCalledWith(
+                    `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}/actions`,
+                    { type: 'like' },
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.likeActionResponse,
+                    expect.any(Function)
+                );
+
+                expect(onLikedMedia).toHaveBeenCalledTimes(1);
+
+                expect(store.get('media-likes')).toBe(MEDIA_DATA.likes + 1);
+                expect(store.get('media-dislikes')).toBe(MEDIA_DATA.dislikes);
+                expect(store.get('user-liked-media')).toBe(true);
+                expect(store.get('user-disliked-media')).toBe(false);
+            });
+
+            test('Action type: "DISLIKE_MEDIA"', () => {
+                handler({ type: 'DISLIKE_MEDIA' });
+
+                expect(postRequest).toHaveBeenCalledTimes(0);
+                expect(onDislikedMedia).toHaveBeenCalledTimes(0);
+
+                expect(store.get('media-likes')).toBe(MEDIA_DATA.likes + 1);
+                expect(store.get('media-dislikes')).toBe(MEDIA_DATA.dislikes);
+                expect(store.get('user-liked-media')).toBe(true);
+                expect(store.get('user-disliked-media')).toBe(false);
+            });
+
+            test('Action type: "REPORT_MEDIA"', () => {
+                const REPORT_DESCRIPTION = 'REPORT_DESCRIPTION';
+
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock post request
+                (postRequest as jest.Mock).mockImplementation(
+                    (_url, _postData, _configData, _sync, successCallback, _failCallback) =>
+                        successCallback({ data: {} })
+                );
+
+                handler({ type: 'REPORT_MEDIA', reportDescription: REPORT_DESCRIPTION });
+
+                // Verify postRequest was called with correct parameters
+                expect(postRequest).toHaveBeenCalledWith(
+                    `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}/actions`,
+                    { type: 'report', extra_info: REPORT_DESCRIPTION },
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.reportActionResponse,
+                    store.reportActionResponse
+                );
+
+                expect(onReportedMedia).toHaveBeenCalledTimes(1);
+            });
+
+            test('Action type: "COPY_SHARE_LINK"', () => {
+                document.execCommand = jest.fn(); // @deprecated
+                const inputElement = document.createElement('input');
+                handler({ type: 'COPY_SHARE_LINK', inputElement });
+                expect(onCopiedMediaLink).toHaveBeenCalledTimes(1);
+                expect(document.execCommand).toHaveBeenCalledWith('copy');
+            });
+
+            test('Action type: "COPY_EMBED_MEDIA_CODE"', () => {
+                document.execCommand = jest.fn(); // @deprecated
+                const inputElement = document.createElement('input');
+                handler({ type: 'COPY_EMBED_MEDIA_CODE', inputElement });
+                expect(onCopiedEmbedMediaCode).toHaveBeenCalledTimes(1);
+                expect(document.execCommand).toHaveBeenCalledWith('copy');
+            });
+
+            describe('Action type: "REMOVE_MEDIA"', () => {
+                const mockCSRFtoken = 'test-csrf-token';
+
+                beforeEach(() => {
+                    // Mock the CSRF token
+                    (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                    jest.useFakeTimers();
+                });
+
+                afterEach(() => {
+                    // Verify deleteRequest was called with correct parameters
+                    expect(deleteRequest).toHaveBeenCalledWith(
+                        `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}`,
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        store.removeMediaResponse,
+                        store.removeMediaFail
+                    );
+
+                    // Fast-forward time
+                    jest.advanceTimersByTime(100);
+
+                    jest.useRealTimers();
+                });
+
+                test('Successful', () => {
+                    // Mock delete request
+                    (deleteRequest as jest.Mock).mockImplementation(
+                        (_url, _configData, _sync, successCallback, _failCallback) => successCallback({ status: 204 })
+                    );
+
+                    handler({ type: 'REMOVE_MEDIA' });
+
+                    expect(onMediaDelete).toHaveBeenCalledTimes(1);
+                    expect(onMediaDelete).toHaveBeenCalledWith(MEDIA_ID);
+                });
+
+                test('Failed', () => {
+                    // Mock delete request
+                    (deleteRequest as jest.Mock).mockImplementation(
+                        (_url, _configData, _sync, _successCallback, failCallback) => failCallback({})
+                    );
+
+                    handler({ type: 'REMOVE_MEDIA' });
+
+                    expect(onMediaDeleteFail).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            describe('Action type: "SUBMIT_COMMENT"', () => {
+                const COMMENT_TEXT = 'COMMENT_TEXT';
+                const COMMENT_UID = 'COMMENT_UID';
+
+                const mockCSRFtoken = 'test-csrf-token';
+
+                beforeEach(() => {
+                    // Mock the CSRF token
+                    (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                    jest.useFakeTimers();
+                });
+
+                afterEach(() => {
+                    // Verify postRequest was called with correct parameters
+                    expect(postRequest).toHaveBeenCalledWith(
+                        `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}/comments`,
+                        { text: COMMENT_TEXT },
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        store.submitCommentResponse,
+                        store.submitCommentFail
+                    );
+
+                    // Fast-forward time
+                    jest.advanceTimersByTime(100);
+
+                    jest.useRealTimers();
+                });
+
+                test('Successful', () => {
+                    // Mock post request
+                    (postRequest as jest.Mock).mockImplementation(
+                        (_url, _postData, _configData, _sync, successCallback, _failCallback) =>
+                            successCallback({ data: { uid: COMMENT_UID }, status: 201 })
+                    );
+
+                    handler({ type: 'SUBMIT_COMMENT', commentText: COMMENT_TEXT });
+
+                    expect(onCommentSubmit).toHaveBeenCalledTimes(1);
+                    expect(onCommentSubmit).toHaveBeenCalledWith(COMMENT_UID);
+                });
+
+                test('Failed', () => {
+                    // Mock post request
+                    (postRequest as jest.Mock).mockImplementation(
+                        (_url, _postData, _configData, _sync, _successCallback, failCallback) => failCallback()
+                    );
+
+                    handler({ type: 'SUBMIT_COMMENT', commentText: COMMENT_TEXT });
+
+                    expect(onCommentSubmitFail).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            describe('Action type: "DELETE_COMMENT"', () => {
+                const COMMENT_ID = 'COMMENT_ID';
+
+                const mockCSRFtoken = 'test-csrf-token';
+
+                beforeEach(() => {
+                    // Mock the CSRF token
+                    (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                    jest.useFakeTimers();
+                });
+
+                afterEach(() => {
+                    // Verify deleteRequest was called with correct parameters
+                    expect(deleteRequest).toHaveBeenCalledWith(
+                        `${sampleMediaCMSConfig.api.media}/${MEDIA_ID}/comments/${COMMENT_ID}`,
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        store.removeCommentResponse,
+                        store.removeCommentFail
+                    );
+
+                    // Fast-forward time
+                    jest.advanceTimersByTime(100);
+
+                    jest.useRealTimers();
+                });
+
+                test('Successful', () => {
+                    // Mock delete request
+                    (deleteRequest as jest.Mock).mockImplementation(
+                        (_url, _configData, _sync, successCallback, _failCallback) => successCallback({ status: 204 })
+                    );
+
+                    handler({ type: 'DELETE_COMMENT', commentId: COMMENT_ID });
+
+                    expect(onCommentDelete).toHaveBeenCalledTimes(1);
+                });
+
+                test('Failed', () => {
+                    // Mock delete request
+                    (deleteRequest as jest.Mock).mockImplementation(
+                        (_url, _configData, _sync, _successCallback, failCallback) => failCallback()
+                    );
+
+                    handler({ type: 'DELETE_COMMENT', commentId: COMMENT_ID });
+
+                    expect(onCommentDeleteFail).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            describe('Action type: "CREATE_PLAYLIST"', () => {
+                const NEW_PLAYLIST_DATA = {
+                    title: 'NEW_PLAYLIST_DATA_TITLE',
+                    description: 'NEW_PLAYLIST_DATA_DESCRIPTION',
+                };
+
+                const mockCSRFtoken = 'test-csrf-token';
+
+                beforeEach(() => {
+                    // Mock the CSRF token
+                    (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+                });
+
+                afterEach(() => {
+                    // Verify postRequest was called with correct parameters
+                    expect(postRequest).toHaveBeenCalledWith(
+                        sampleMediaCMSConfig.api.playlists,
+                        NEW_PLAYLIST_DATA,
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        expect.any(Function),
+                        expect.any(Function)
+                    );
+                });
+
+                test('Successful', () => {
+                    const NEW_PLAYLIST_RESPONSE_DATA = { uid: 'COMMENT_UID' };
+
+                    // Mock post request
+                    (postRequest as jest.Mock).mockImplementation(
+                        (_url, _postData, _configData, _sync, successCallback, _failCallback) =>
+                            successCallback({ data: NEW_PLAYLIST_RESPONSE_DATA, status: 201 })
+                    );
+
+                    handler({ type: 'CREATE_PLAYLIST', playlist_data: NEW_PLAYLIST_DATA });
+
+                    // Verify postRequest was called with correct parameters
+                    expect(postRequest).toHaveBeenCalledWith(
+                        sampleMediaCMSConfig.api.playlists,
+                        NEW_PLAYLIST_DATA,
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        expect.any(Function),
+                        expect.any(Function)
+                    );
+
+                    expect(onPlaylistCreationCompleted).toHaveBeenCalledTimes(1);
+                    expect(onPlaylistCreationCompleted).toHaveBeenCalledWith(NEW_PLAYLIST_RESPONSE_DATA);
+                });
+
+                test('Failed', () => {
+                    // Mock post request
+                    (postRequest as jest.Mock).mockImplementation(
+                        (_url, _postData, _configData, _sync, _successCallback, failCallback) => failCallback()
+                    );
+
+                    handler({ type: 'CREATE_PLAYLIST', playlist_data: NEW_PLAYLIST_DATA });
+
+                    expect(onPlaylistCreationFailed).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            describe('Action type: "ADD_MEDIA_TO_PLAYLIST"', () => {
+                const NEW_PLAYLIST_MEDIA_ID = 'NEW_PLAYLIST_MEDIA_ID';
+                const mockCSRFtoken = 'test-csrf-token';
+
+                beforeEach(() => {
+                    // Mock the CSRF token
+                    (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+                });
+
+                afterEach(() => {
+                    // Verify postRequest was called with correct parameters
+                    expect(putRequest).toHaveBeenCalledWith(
+                        `${sampleMediaCMSConfig.api.playlists}/${PLAYLIST_ID}`,
+                        { type: 'add', media_friendly_token: NEW_PLAYLIST_MEDIA_ID },
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        expect.any(Function),
+                        expect.any(Function)
+                    );
+                });
+
+                test('Successful', () => {
+                    // Mock put request
+                    (putRequest as jest.Mock).mockImplementation(
+                        (_url, _putData, _configData, _sync, successCallback, _failCallback) =>
+                            successCallback({ data: {} })
+                    );
+
+                    handler({
+                        type: 'ADD_MEDIA_TO_PLAYLIST',
+                        playlist_id: PLAYLIST_ID,
+                        media_id: NEW_PLAYLIST_MEDIA_ID,
+                    });
+
+                    expect(onMediaPlaylistAdditionCompleted).toHaveBeenCalledTimes(1);
+                });
+
+                test('Failed', () => {
+                    // Mock put request
+                    (putRequest as jest.Mock).mockImplementation(
+                        (_url, _putData, _configData, _sync, _successCallback, failCallback) => failCallback()
+                    );
+
+                    handler({
+                        type: 'ADD_MEDIA_TO_PLAYLIST',
+                        playlist_id: PLAYLIST_ID,
+                        media_id: NEW_PLAYLIST_MEDIA_ID,
+                    });
+
+                    expect(onMediaPlaylistAdditionFailed).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            describe('Action type: "REMOVE_MEDIA_FROM_PLAYLIST"', () => {
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                afterEach(() => {
+                    // Verify postRequest was called with correct parameters
+                    expect(putRequest).toHaveBeenCalledWith(
+                        `${sampleMediaCMSConfig.api.playlists}/${PLAYLIST_ID}`,
+                        { type: 'remove', media_friendly_token: MEDIA_ID },
+                        { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                        false,
+                        expect.any(Function),
+                        expect.any(Function)
+                    );
+                });
+
+                test('Successful', () => {
+                    // Mock put request
+                    (putRequest as jest.Mock).mockImplementation(
+                        (_url, _putData, _configData, _sync, successCallback, _failCallback) =>
+                            successCallback({ data: {} })
+                    );
+
+                    handler({ type: 'REMOVE_MEDIA_FROM_PLAYLIST', playlist_id: PLAYLIST_ID, media_id: MEDIA_ID });
+
+                    expect(onMediaPlaylistRemovalCompleted).toHaveBeenCalledTimes(1);
+                });
+
+                test('Failed', () => {
+                    // Mock put request
+                    (putRequest as jest.Mock).mockImplementation(
+                        (_url, _putData, _configData, _sync, _successCallback, failCallback) => failCallback()
+                    );
+
+                    handler({ type: 'REMOVE_MEDIA_FROM_PLAYLIST', playlist_id: PLAYLIST_ID, media_id: MEDIA_ID });
+
+                    expect(onMediaPlaylistRemovalFailed).toHaveBeenCalledTimes(1);
+                });
+            });
+
+            test('Action type: "APPEND_NEW_PLAYLIST"', () => {
+                const NEW_USER_PLAYLIST = {
+                    add_date: 'PLAYLIST_ADD_DATE_2',
+                    description: 'PLAYLIST_DECRIPTION_2',
+                    media_list: ['PLAYLIST_MEDIA_ID'],
+                    playlist_id: 'PLAYLIST_ID',
+                    title: 'PLAYLIST_TITLE_2',
+                };
+
+                handler({ type: 'APPEND_NEW_PLAYLIST', playlist_data: NEW_USER_PLAYLIST });
+
+                expect(onPlaylistsLoad).toHaveBeenCalledTimes(1);
+
+                expect(store.get('playlists')).toStrictEqual([
+                    {
+                        add_date: 'PLAYLIST_ADD_DATE',
+                        description: 'PLAYLIST_DECRIPTION',
+                        media_list: ['PLAYLIST_MEDIA_ID'],
+                        playlist_id: PLAYLIST_ID,
+                        title: 'PLAYLIST_TITLE',
+                    },
+                    NEW_USER_PLAYLIST,
+                ]);
+            });
+        });
+    });
+});

frontend/tests/utils/stores/PageStore.test.ts

@@ -0,0 +1,162 @@
+import { BrowserCache } from '../../../src/static/js/utils/classes';
+import store from '../../../src/static/js/utils/stores/PageStore';
+
+import { sampleMediaCMSConfig } from '../../tests-constants';
+
+jest.mock('../../../src/static/js/utils/classes/', () => ({
+    BrowserCache: jest.fn().mockImplementation(() => ({
+        get: (key: string) => (key === 'media-auto-play' ? false : undefined),
+        set: jest.fn(),
+    })),
+}));
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    BrowserEvents: jest.fn().mockImplementation(() => ({
+        doc: jest.fn(),
+        win: jest.fn(),
+    })),
+    exportStore: jest.fn((store) => store),
+}));
+
+describe('utils/store', () => {
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('PageStore', () => {
+        const handler = store.actions_handler.bind(store);
+
+        const onInit = jest.fn();
+        const onToggleAutoPlay = jest.fn();
+        const onAddNotification = jest.fn();
+
+        store.on('page_init', onInit);
+        store.on('switched_media_auto_play', onToggleAutoPlay);
+        store.on('added_notification', onAddNotification);
+
+        test('Validate initial values', () => {
+            // BrowserCache mock
+            expect(store.get('browser-cache').get('media-auto-play')).toBe(false);
+            expect(store.get('browser-cache').get('ANY')).toBe(undefined);
+
+            // Autoplay media files
+            expect(store.get('media-auto-play')).toBe(false);
+
+            // Configuration
+            expect(store.get('config-contents')).toStrictEqual(sampleMediaCMSConfig.contents);
+            expect(store.get('config-enabled')).toStrictEqual(sampleMediaCMSConfig.enabled);
+            expect(store.get('config-media-item')).toStrictEqual(sampleMediaCMSConfig.media.item);
+            expect(store.get('config-options')).toStrictEqual(sampleMediaCMSConfig.options);
+            expect(store.get('config-site')).toStrictEqual(sampleMediaCMSConfig.site);
+
+            // Playlists API path
+            expect(store.get('api-playlists')).toStrictEqual(sampleMediaCMSConfig.api.playlists);
+
+            // Notifications
+            expect(store.get('notifications')).toStrictEqual([]);
+            expect(store.get('notifications-size')).toBe(0);
+
+            expect(store.get('current-page')).toBe(undefined);
+        });
+
+        test('Trigger and validate browser events behavior', () => {
+            const docVisChange = jest.fn();
+            const winScroll = jest.fn();
+            const winResize = jest.fn();
+
+            store.on('document_visibility_change', docVisChange);
+            store.on('window_scroll', winScroll);
+            store.on('window_resize', winResize);
+
+            store.onDocumentVisibilityChange();
+            store.onWindowScroll();
+            store.onWindowResize();
+
+            expect(docVisChange).toHaveBeenCalled();
+            expect(winScroll).toHaveBeenCalled();
+            expect(winResize).toHaveBeenCalledTimes(1);
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            test('Action type: "INIT_PAGE"', () => {
+                handler({ type: 'INIT_PAGE', page: 'home' });
+                expect(onInit).toHaveBeenCalledTimes(1);
+                expect(store.get('current-page')).toBe('home');
+
+                handler({ type: 'INIT_PAGE', page: 'about' });
+                expect(onInit).toHaveBeenCalledTimes(2);
+                expect(store.get('current-page')).toBe('about');
+
+                handler({ type: 'INIT_PAGE', page: 'profile' });
+                expect(onInit).toHaveBeenCalledTimes(3);
+                expect(store.get('current-page')).toBe('profile');
+
+                expect(onInit).toHaveBeenCalledWith();
+
+                expect(onToggleAutoPlay).toHaveBeenCalledTimes(0);
+                expect(onAddNotification).toHaveBeenCalledTimes(0);
+            });
+
+            test('Action type: "TOGGLE_AUTO_PLAY"', () => {
+                const browserCacheInstance = (BrowserCache as jest.Mock).mock.results[0].value;
+                const browserCacheSetSpy = browserCacheInstance.set;
+
+                const initialValue = store.get('media-auto-play');
+
+                handler({ type: 'TOGGLE_AUTO_PLAY' });
+
+                expect(onToggleAutoPlay).toHaveBeenCalledWith();
+                expect(onToggleAutoPlay).toHaveBeenCalledTimes(1);
+
+                expect(store.get('media-auto-play')).toBe(!initialValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('media-auto-play', !initialValue);
+
+                browserCacheSetSpy.mockRestore();
+            });
+
+            test('Action type: "ADD_NOTIFICATION"', () => {
+                const notificationMsg1 = 'NOTIFICATION_MSG_1';
+                const notificationMsg2 = 'NOTIFICATION_MSG_2';
+                const invalidNotification = 44;
+
+                // Add notification
+                handler({ type: 'ADD_NOTIFICATION', notification: notificationMsg1 });
+                expect(onAddNotification).toHaveBeenCalledWith();
+                expect(onAddNotification).toHaveBeenCalledTimes(1);
+                expect(store.get('notifications-size')).toBe(1);
+
+                const currentNotifications = store.get('notifications');
+                expect(currentNotifications.length).toBe(1);
+                expect(typeof currentNotifications[0][0]).toBe('string');
+                expect(currentNotifications[0][1]).toBe(notificationMsg1);
+
+                expect(store.get('notifications-size')).toBe(0);
+                expect(store.get('notifications')).toStrictEqual([]);
+
+                // Add another notification
+                handler({ type: 'ADD_NOTIFICATION', notification: notificationMsg2 });
+
+                expect(onAddNotification).toHaveBeenCalledWith();
+                expect(onAddNotification).toHaveBeenCalledTimes(2);
+
+                expect(store.get('notifications-size')).toBe(1);
+                expect(store.get('notifications')[0][1]).toBe(notificationMsg2);
+
+                expect(store.get('notifications-size')).toBe(0);
+                expect(store.get('notifications')).toStrictEqual([]);
+
+                // Add invalid notification
+                handler({ type: 'ADD_NOTIFICATION', notification: invalidNotification });
+                expect(onAddNotification).toHaveBeenCalledWith();
+                expect(onAddNotification).toHaveBeenCalledTimes(3);
+
+                expect(store.get('notifications-size')).toBe(0);
+                expect(store.get('notifications')).toStrictEqual([]);
+            });
+        });
+    });
+});

frontend/tests/utils/stores/PlaylistPageStore.test.ts

@@ -0,0 +1,390 @@
+import {
+    publishedOnDate,
+    getRequest,
+    postRequest,
+    deleteRequest,
+    csrfToken,
+} from '../../../src/static/js/utils/helpers';
+import store from '../../../src/static/js/utils/stores/PlaylistPageStore';
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    publishedOnDate: jest.fn(),
+    exportStore: jest.fn((store) => store),
+    getRequest: jest.fn(),
+    postRequest: jest.fn(),
+    deleteRequest: jest.fn(),
+    csrfToken: jest.fn(),
+}));
+
+describe('utils/store', () => {
+    beforeAll(() => {
+        (globalThis as any).window.MediaCMS = { playlistId: null };
+    });
+
+    afterAll(() => {
+        delete (globalThis as any).window.MediaCMS;
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('PlaylistPageStore', () => {
+        const handler = store.actions_handler.bind(store);
+
+        const onLoadedPlaylistData = jest.fn();
+        const onLoadedPlaylistEerror = jest.fn();
+        const onLoadedMediaError = jest.fn();
+        const onPlaylistUpdateCompleted = jest.fn();
+        const onPlaylistUpdateFailed = jest.fn();
+        const onPlaylistRemovalCompleted = jest.fn();
+        const onPlaylistRemovalFailed = jest.fn();
+        const onSavedUpdated = jest.fn();
+        const onReorderedMediaInPlaylist = jest.fn();
+        const onRemovedMediaFromPlaylist = jest.fn();
+
+        store.on('loaded_playlist_data', onLoadedPlaylistData);
+        store.on('loaded_playlist_error', onLoadedPlaylistEerror);
+        store.on('loaded_media_error', onLoadedMediaError); // @todo: It doesn't get called
+        store.on('playlist_update_completed', onPlaylistUpdateCompleted);
+        store.on('playlist_update_failed', onPlaylistUpdateFailed);
+        store.on('playlist_removal_completed', onPlaylistRemovalCompleted);
+        store.on('playlist_removal_failed', onPlaylistRemovalFailed);
+        store.on('saved-updated', onSavedUpdated);
+        store.on('reordered_media_in_playlist', onReorderedMediaInPlaylist);
+        store.on('removed_media_from_playlist', onRemovedMediaFromPlaylist);
+
+        test('Validate initial values', () => {
+            expect(store.get('INVALID_TYPE')).toBe(null);
+            expect(store.get('playlistId')).toBe(null);
+            expect(store.get('logged-in-user-playlist')).toBe(false);
+            expect(store.get('playlist-media')).toStrictEqual([]);
+            expect(store.get('visibility')).toBe('public');
+            expect(store.get('visibility-icon')).toBe(null);
+            //     // expect(store.get('total-items')).toBe(0); // @todo: It throws error
+            expect(store.get('views-count')).toBe('N/A');
+            expect(store.get('title')).toBe(null);
+            expect(store.get('edit-link')).toBe('#');
+            expect(store.get('thumb')).toBe(null);
+            expect(store.get('description')).toBe(null);
+            expect(store.get('author-username')).toBe(null);
+            expect(store.get('author-name')).toBe(null);
+            expect(store.get('author-link')).toBe(null);
+            expect(store.get('author-thumb')).toBe(null);
+            expect(store.get('saved-playlist')).toBe(false);
+            expect(store.get('date-label')).toBe(null);
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            test('Action type: "LOAD_PLAYLIST_DATA" - failed', () => {
+                const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+                const loadDataSpy = jest.spyOn(store, 'loadData');
+
+                handler({ type: 'LOAD_PLAYLIST_DATA' });
+
+                expect(loadDataSpy).toHaveBeenCalledTimes(1);
+                expect(loadDataSpy).toHaveReturnedWith(false);
+
+                expect(warnSpy).toHaveBeenCalledTimes(1);
+                expect(warnSpy).toHaveBeenCalledWith('Invalid playlist id:', '');
+
+                expect(store.get('playlistId')).toBe(null);
+
+                loadDataSpy.mockRestore();
+                warnSpy.mockRestore();
+            });
+
+            test('Action type: "LOAD_PLAYLIST_DATA" - completed successful', () => {
+                const playlistId = 'PLAYLIST_ID_1';
+                window.history.pushState({}, '', `/playlists/${playlistId}`);
+
+                // Mock get request
+                const mockGetRequestResponse = {
+                    data: {
+                        add_date: Date.now(),
+                        description: 'DESCRIPTION',
+                        playlist_media: [],
+                        title: 'TITLE',
+                        user: 'USER',
+                        user_thumbnail_url: 'USER_THUMB_URL',
+                    },
+                };
+
+                (getRequest as jest.Mock).mockImplementation((_url, _cache, successCallback, _failCallback) =>
+                    successCallback(mockGetRequestResponse)
+                );
+
+                const loadDataSpy = jest.spyOn(store, 'loadData');
+                const dataResponseSpy = jest.spyOn(store, 'dataResponse');
+
+                handler({ type: 'LOAD_PLAYLIST_DATA' });
+
+                expect(store.get('playlistId')).toBe(playlistId);
+                expect(store.get('author-name')).toBe(mockGetRequestResponse.data.user);
+                expect(store.get('author-link')).toBe(`/user/${mockGetRequestResponse.data.user}`);
+                expect(store.get('author-thumb')).toBe(`/${mockGetRequestResponse.data.user_thumbnail_url}`);
+
+                expect(store.get('date-label')).toBe('Created on undefined');
+                expect(publishedOnDate).toHaveBeenCalledWith(new Date(mockGetRequestResponse.data.add_date), 3);
+
+                expect(loadDataSpy).toHaveBeenCalledTimes(1);
+                expect(loadDataSpy).toHaveReturnedWith(undefined);
+
+                expect(dataResponseSpy).toHaveBeenCalledTimes(1);
+                expect(dataResponseSpy).toHaveBeenCalledWith(mockGetRequestResponse);
+
+                // Verify getRequest was called with correct parameters
+                expect(getRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    false,
+                    store.dataResponse,
+                    store.dataErrorResponse
+                );
+
+                expect(onLoadedPlaylistData).toHaveBeenCalledTimes(1);
+                expect(onLoadedPlaylistData).toHaveBeenCalledWith();
+
+                loadDataSpy.mockRestore();
+                dataResponseSpy.mockRestore();
+            });
+
+            test('Action type: "LOAD_PLAYLIST_DATA" - completed with error', () => {
+                const playlistId = 'PLAYLIST_ID_2';
+                window.history.pushState({}, '', `/playlists/${playlistId}`);
+
+                // Mock get request
+                const mockGetRequestResponse = { type: 'private' };
+                (getRequest as jest.Mock).mockImplementation((_url, _cache, _successCallback, failCallback) =>
+                    failCallback(mockGetRequestResponse)
+                );
+
+                const loadDataSpy = jest.spyOn(store, 'loadData');
+                const dataErrorResponseSpy = jest.spyOn(store, 'dataErrorResponse');
+
+                handler({ type: 'LOAD_PLAYLIST_DATA' });
+
+                expect(store.get('playlistId')).toBe(playlistId);
+
+                expect(loadDataSpy).toHaveBeenCalledTimes(1);
+                expect(loadDataSpy).toHaveReturnedWith(undefined);
+
+                expect(dataErrorResponseSpy).toHaveBeenCalledTimes(1);
+                expect(dataErrorResponseSpy).toHaveBeenCalledWith(mockGetRequestResponse);
+
+                // Verify getRequest was called with correct parameters
+                expect(getRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    false,
+                    store.dataResponse,
+                    store.dataErrorResponse
+                );
+
+                expect(onLoadedPlaylistEerror).toHaveBeenCalledTimes(1);
+                expect(onLoadedPlaylistEerror).toHaveBeenCalledWith();
+
+                loadDataSpy.mockRestore();
+                dataErrorResponseSpy.mockRestore();
+            });
+
+            test('Action type: "TOGGLE_SAVE"', () => {
+                const initialValue = store.get('saved-playlist');
+
+                handler({ type: 'TOGGLE_SAVE' });
+
+                expect(onSavedUpdated).toHaveBeenCalledTimes(1);
+                expect(onSavedUpdated).toHaveBeenCalledWith();
+
+                expect(store.get('saved-playlist')).toBe(!initialValue);
+            });
+
+            test('Action type: "UPDATE_PLAYLIST" - failed', () => {
+                // Mock (updated) playlist data
+                const mockPlaylistData = { title: 'PLAYLIST_TITLE', description: 'PLAYLIST_DESCRIPTION' };
+
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock post request
+                (postRequest as jest.Mock).mockImplementation(
+                    (_url, _postData, _configData, _sync, _successCallback, failCallback) => failCallback()
+                );
+
+                const initialStoreData = {
+                    title: store.get('title'),
+                    description: store.get('description'),
+                };
+
+                expect(store.get('title')).toBe(initialStoreData.title);
+                expect(store.get('description')).toBe(initialStoreData.description);
+
+                handler({ type: 'UPDATE_PLAYLIST', playlist_data: mockPlaylistData });
+
+                expect(store.get('title')).toBe(initialStoreData.title);
+                expect(store.get('description')).toBe(initialStoreData.description);
+
+                // Verify postRequest was called with correct parameters
+                expect(postRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    mockPlaylistData,
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.onPlaylistUpdateCompleted,
+                    store.onPlaylistUpdateFailed
+                );
+
+                expect(onPlaylistUpdateFailed).toHaveBeenCalledWith();
+            });
+
+            test('Action type: "UPDATE_PLAYLIST" - successful', () => {
+                // Mock (updated) playlist data
+                const mockPlaylistData = { title: 'PLAYLIST_TITLE', description: 'PLAYLIST_DESCRIPTION' };
+
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock post request
+                (postRequest as jest.Mock).mockImplementation(
+                    (_url, _postData, _configData, _sync, successCallback, _failCallback) =>
+                        successCallback({ data: mockPlaylistData })
+                );
+
+                const initialStoreData = {
+                    title: store.get('title'),
+                    description: store.get('description'),
+                };
+
+                expect(store.get('title')).toBe(initialStoreData.title);
+                expect(store.get('description')).toBe(initialStoreData.description);
+
+                handler({ type: 'UPDATE_PLAYLIST', playlist_data: mockPlaylistData });
+
+                expect(store.get('title')).toBe(mockPlaylistData.title);
+                expect(store.get('description')).toBe(mockPlaylistData.description);
+
+                // Verify postRequest was called with correct parameters
+                expect(postRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    mockPlaylistData,
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.onPlaylistUpdateCompleted,
+                    store.onPlaylistUpdateFailed
+                );
+
+                expect(onPlaylistUpdateCompleted).toHaveBeenCalledWith(mockPlaylistData);
+            });
+
+            test('Action type: "REMOVE_PLAYLIST" - failed', () => {
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock delete request
+                (deleteRequest as jest.Mock).mockImplementation(
+                    (_url, _config, _sync, _successCallback, failCallback) => failCallback()
+                );
+
+                handler({ type: 'REMOVE_PLAYLIST' });
+
+                // Verify deleteRequest was called with correct parameters
+                expect(deleteRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.onPlaylistRemovalCompleted,
+                    store.onPlaylistRemovalFailed
+                );
+
+                expect(onPlaylistRemovalFailed).toHaveBeenCalledWith();
+            });
+
+            test('Action type: "REMOVE_PLAYLIST" - completed successful', () => {
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock delete request
+                const deleteRequestResponse = { status: 204 };
+                (deleteRequest as jest.Mock).mockImplementation(
+                    (_url, _config, _sync, successCallback, _failCallback) => successCallback(deleteRequestResponse)
+                );
+
+                handler({ type: 'REMOVE_PLAYLIST' });
+
+                // Verify deleteRequest was called with correct parameters
+                expect(deleteRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.onPlaylistRemovalCompleted,
+                    store.onPlaylistRemovalFailed
+                );
+
+                expect(onPlaylistRemovalCompleted).toHaveBeenCalledWith(deleteRequestResponse);
+            });
+
+            test('Action type: "REMOVE_PLAYLIST" - completed with invalid status code', () => {
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock delete request
+                const deleteRequestResponse = { status: 403 };
+                (deleteRequest as jest.Mock).mockImplementation(
+                    (_url, _config, _sync, successCallback, _failCallback) => successCallback(deleteRequestResponse)
+                );
+
+                handler({ type: 'REMOVE_PLAYLIST' });
+
+                // Verify deleteRequest was called with correct parameters
+                expect(deleteRequest).toHaveBeenCalledWith(
+                    store.playlistAPIUrl,
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.onPlaylistRemovalCompleted,
+                    store.onPlaylistRemovalFailed
+                );
+
+                expect(onPlaylistRemovalFailed).toHaveBeenCalledWith();
+            });
+
+            test('Action type: "PLAYLIST_MEDIA_REORDERED"', () => {
+                // Mock playlist media data
+                const mockPlaylistMedia = [
+                    { thumbnail_url: 'THUMB_URL_1', url: '?id=MEDIA_ID_1' },
+                    { thumbnail_url: 'THUMB_URL_2', url: '?id=MEDIA_ID_2' },
+                ];
+
+                handler({ type: 'PLAYLIST_MEDIA_REORDERED', playlist_media: mockPlaylistMedia });
+
+                expect(onReorderedMediaInPlaylist).toHaveBeenCalledWith();
+
+                expect(store.get('playlist-media')).toStrictEqual(mockPlaylistMedia);
+                expect(store.get('thumb')).toBe(mockPlaylistMedia[0].thumbnail_url);
+                expect(store.get('total-items')).toBe(mockPlaylistMedia.length);
+            });
+
+            test('Action type: "MEDIA_REMOVED_FROM_PLAYLIST"', () => {
+                // Mock playlist media data
+                const mockPlaylistMedia = [
+                    { thumbnail_url: 'THUMB_URL_1', url: '?id=MEDIA_ID_1' },
+                    { thumbnail_url: 'THUMB_URL_2', url: '?id=MEDIA_ID_2' },
+                ];
+
+                handler({ type: 'PLAYLIST_MEDIA_REORDERED', playlist_media: mockPlaylistMedia });
+
+                handler({ type: 'MEDIA_REMOVED_FROM_PLAYLIST', media_id: 'MEDIA_ID_2' });
+
+                expect(store.get('playlist-media')).toStrictEqual([mockPlaylistMedia[0]]);
+                expect(store.get('thumb')).toBe(mockPlaylistMedia[0].thumbnail_url);
+                expect(store.get('total-items')).toBe(mockPlaylistMedia.length - 1);
+            });
+        });
+    });
+});

frontend/tests/utils/stores/PlaylistViewStore.test.ts

@@ -0,0 +1,83 @@
+import { BrowserCache } from '../../../src/static/js/utils/classes/';
+import store from '../../../src/static/js/utils/stores/PlaylistViewStore';
+
+jest.mock('../../../src/static/js/utils/classes/', () => ({
+    BrowserCache: jest.fn().mockImplementation(() => ({
+        get: jest.fn(),
+        set: jest.fn(),
+    })),
+}));
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    BrowserEvents: jest.fn().mockImplementation(() => ({
+        doc: jest.fn(),
+        win: jest.fn(),
+    })),
+    exportStore: jest.fn((store) => store),
+}));
+
+describe('utils/store', () => {
+    describe('PlaylistViewStore', () => {
+        const browserCacheInstance = (BrowserCache as jest.Mock).mock.results[0].value;
+        const browserCacheSetSpy = browserCacheInstance.set;
+
+        const handler = store.actions_handler.bind(store);
+
+        const onLoopRepeatUpdated = jest.fn();
+        const onShuffleUpdated = jest.fn();
+        const onSavedUpdated = jest.fn();
+
+        store.on('loop-repeat-updated', onLoopRepeatUpdated);
+        store.on('shuffle-updated', onShuffleUpdated);
+        store.on('saved-updated', onSavedUpdated);
+
+        test('Validate initial values', () => {
+            expect(store.get('INVALID_TYPE')).toBe(null);
+            expect(store.get('logged-in-user-playlist')).toBe(false);
+            expect(store.get('enabled-loop')).toBe(undefined);
+            expect(store.get('enabled-shuffle')).toBe(undefined);
+            expect(store.get('saved-playlist')).toBe(false);
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            // @todo: Revisit the behavior of this action
+            test('Action type: "TOGGLE_LOOP"', () => {
+                handler({ type: 'TOGGLE_LOOP' });
+
+                expect(onLoopRepeatUpdated).toHaveBeenCalledTimes(1);
+                expect(onLoopRepeatUpdated).toHaveBeenCalledWith();
+
+                expect(store.get('enabled-loop')).toBe(undefined);
+
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('loopPlaylist[null]', true);
+            });
+
+            // @todo: Revisit the behavior of this action
+            test('Action type: "TOGGLE_SHUFFLE"', () => {
+                handler({ type: 'TOGGLE_SHUFFLE' });
+
+                expect(onShuffleUpdated).toHaveBeenCalledTimes(1);
+                expect(onShuffleUpdated).toHaveBeenCalledWith();
+
+                expect(store.get('enabled-shuffle')).toBe(undefined);
+
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('shufflePlaylist[null]', true);
+            });
+
+            test('Action type: "TOGGLE_SAVE"', () => {
+                const initialValue = store.get('saved-playlist');
+
+                handler({ type: 'TOGGLE_SAVE' });
+
+                expect(onSavedUpdated).toHaveBeenCalledTimes(1);
+                expect(onSavedUpdated).toHaveBeenCalledWith();
+
+                expect(store.get('saved-playlist')).toBe(!initialValue);
+            });
+        });
+    });
+});

frontend/tests/utils/stores/ProfilePageStore.test.ts

@@ -0,0 +1,168 @@
+import { getRequest, deleteRequest, csrfToken } from '../../../src/static/js/utils/helpers';
+import store from '../../../src/static/js/utils/stores/ProfilePageStore';
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => ({
+        ...jest.requireActual('../../tests-constants').sampleMediaCMSConfig,
+        api: { ...jest.requireActual('../../tests-constants').sampleMediaCMSConfig.api, users: '' },
+    })),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    getRequest: jest.fn(),
+    deleteRequest: jest.fn(),
+    csrfToken: jest.fn(),
+    exportStore: jest.fn((store) => store),
+}));
+
+describe('utils/store', () => {
+    const mockAuthorData = { username: 'testuser', name: 'Test User' };
+
+    beforeAll(() => {
+        (globalThis as any).window.MediaCMS = { profileId: mockAuthorData.username };
+    });
+
+    afterAll(() => {
+        delete (globalThis as any).window.MediaCMS;
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('ProfilePageStore', () => {
+        const handler = store.actions_handler.bind(store);
+
+        const onProfileDelete = jest.fn();
+        const onProfileDeleteFail = jest.fn();
+        const onLoadAuthorData = jest.fn();
+
+        beforeAll(() => {
+            store.on('profile_delete', onProfileDelete);
+            store.on('profile_delete_fail', onProfileDeleteFail);
+            store.on('load-author-data', onLoadAuthorData);
+        });
+
+        beforeEach(() => {
+            // Reset store state
+            store.authorData = null;
+            store.removingProfile = false;
+            store.authorQuery = undefined;
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            test('Action type: "REMOVE_PROFILE" - successful deletion', async () => {
+                // Set up author data
+                store.authorData = mockAuthorData;
+
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock delete request
+                (deleteRequest as jest.Mock).mockImplementation(
+                    (_url, _config, _sync, successCallback, _failCallback) => successCallback({ status: 204 })
+                );
+
+                handler({ type: 'REMOVE_PROFILE' });
+
+                // Verify deleteRequest was called with correct parameters
+                expect(deleteRequest).toHaveBeenCalledWith(
+                    '/testuser', // API URL constructed from config + username
+                    { headers: { 'X-CSRFToken': mockCSRFtoken } },
+                    false,
+                    store.removeProfileResponse,
+                    store.removeProfileFail
+                );
+
+                // Verify event was emitted
+                expect(onProfileDelete).toHaveBeenCalledWith(mockAuthorData.username);
+                expect(onProfileDelete).toHaveBeenCalledTimes(1);
+            });
+
+            test('Action type: "REMOVE_PROFILE" - deletion failure', async () => {
+                // Set up author data
+                store.authorData = mockAuthorData;
+
+                // Mock the CSRF token
+                const mockCSRFtoken = 'test-csrf-token';
+                (csrfToken as jest.Mock).mockReturnValue(mockCSRFtoken);
+
+                // Mock delete request
+                (deleteRequest as jest.Mock).mockImplementation(
+                    (_url, _config, _sync, _successCallback, failCallback) => failCallback.call(store)
+                );
+
+                handler({ type: 'REMOVE_PROFILE' });
+
+                // Wait for the setTimeout in removeProfileFail
+                await new Promise((resolve) => setTimeout(resolve, 150));
+
+                // Verify event was emitted
+                expect(onProfileDeleteFail).toHaveBeenCalledWith(mockAuthorData.username);
+                expect(onProfileDeleteFail).toHaveBeenCalledTimes(1);
+            });
+
+            test('Action type: "REMOVE_PROFILE" - prevents duplicate calls while removing', () => {
+                // Set up author data
+                store.authorData = mockAuthorData;
+
+                handler({ type: 'REMOVE_PROFILE' });
+                expect(deleteRequest).toHaveBeenCalledTimes(1);
+
+                store.removingProfile = true;
+                handler({ type: 'REMOVE_PROFILE' });
+                expect(deleteRequest).toHaveBeenCalledTimes(1);
+
+                store.removingProfile = false;
+                handler({ type: 'REMOVE_PROFILE' });
+                expect(deleteRequest).toHaveBeenCalledTimes(2);
+            });
+
+            test('Action type: "LOAD_AUTHOR_DATA"', async () => {
+                (getRequest as jest.Mock).mockImplementation((_url, _cache, successCallback, _failCallback) =>
+                    successCallback({ data: mockAuthorData })
+                );
+
+                handler({ type: 'LOAD_AUTHOR_DATA' });
+
+                // Verify getRequest was called with correct parameters
+                expect(getRequest).toHaveBeenCalledWith('/testuser', false, store.onDataLoad, store.onDataLoadFail);
+
+                // Verify event was emitted
+                expect(onLoadAuthorData).toHaveBeenCalledTimes(1);
+
+                // Verify author data was processed correctly
+                expect(store.get('author-data')).toStrictEqual(mockAuthorData);
+            });
+        });
+
+        describe('Getter methods', () => {
+            test('Validate initial values', () => {
+                expect(store.get('INVALID_TYPE')).toBe(undefined);
+                expect(store.get('author-data')).toBe(null);
+                expect(store.get('author-query')).toBe(null);
+            });
+
+            test('get("author-data") returns authorData', () => {
+                store.authorData = mockAuthorData;
+                expect(store.get('author-data')).toBe(mockAuthorData);
+            });
+
+            test('get("author-query") - without "aq" parameter in URL', () => {
+                window.history.pushState({}, '', '/path');
+                expect(store.get('author-query')).toBe(null);
+            });
+
+            test('get("author-query") - with "aq" parameter in URL', () => {
+                window.history.pushState({}, '', '/path?aq=AUTHOR_QUERY');
+                expect(store.get('author-query')).toBe('AUTHOR_QUERY');
+            });
+
+            test('get("author-query") - empty search string', () => {
+                window.history.pushState({}, '', '/path?aq');
+                expect(store.get('author-query')).toBe(null);
+            });
+        });
+    });
+});

frontend/tests/utils/stores/SearchFieldStore.test.ts

@@ -0,0 +1,64 @@
+const urlParams = { q: 'search_query', c: 'category_1', t: 'tag_1' };
+window.history.pushState({}, '', `/?q=${urlParams.q}&c=${urlParams.c}&t=${urlParams.t}`);
+
+import store from '../../../src/static/js/utils/stores/SearchFieldStore';
+import { getRequest } from '../../../src/static/js/utils/helpers';
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    exportStore: jest.fn((store) => store),
+    getRequest: jest.fn(),
+}));
+
+describe('utils/store', () => {
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('SearchFieldStore', () => {
+        const handler = store.actions_handler.bind(store);
+
+        const onLoadPredictions = jest.fn();
+
+        store.on('load_predictions', onLoadPredictions);
+
+        test('Validate initial values based on URL params', async () => {
+            expect(store.get('INVALID_TYPE')).toBe(null);
+            expect(store.get('search-query')).toBe(urlParams.q);
+            expect(store.get('search-categories')).toBe(urlParams.c);
+            expect(store.get('search-tags')).toBe(urlParams.t);
+        });
+
+        test('Action type: "Action type: "TOGGLE_VIEWER_MODE"', async () => {
+            const predictionsQuery_1 = 'predictions_query_1';
+            const predictionsQuery_2 = 'predictions_query_2';
+
+            const response_1 = { data: [{ title: 'Prediction 1' }, { title: 'Prediction 2' }] };
+            const response_2 = { data: [{ title: 'Prediction 3' }, { title: 'Prediction 4' }] };
+
+            (getRequest as jest.Mock)
+                .mockImplementationOnce((_url, _cache, successCallback, _failCallback) => successCallback(response_1))
+                .mockImplementationOnce((_url, _cache, successCallback, _failCallback) => successCallback(response_2));
+
+            handler({ type: 'REQUEST_PREDICTIONS', query: predictionsQuery_1 });
+            handler({ type: 'REQUEST_PREDICTIONS', query: predictionsQuery_2 });
+
+            expect(onLoadPredictions).toHaveBeenCalledTimes(2);
+
+            expect(onLoadPredictions).toHaveBeenNthCalledWith(
+                1,
+                predictionsQuery_1,
+                response_1.data.map(({ title }) => title)
+            );
+
+            expect(onLoadPredictions).toHaveBeenNthCalledWith(
+                2,
+                predictionsQuery_2,
+                response_2.data.map(({ title }) => title)
+            );
+        });
+    });
+});

frontend/tests/utils/stores/VideoViewerStore.test.ts

@@ -0,0 +1,147 @@
+import { BrowserCache } from '../../../src/static/js/utils/classes/';
+import store from '../../../src/static/js/utils/stores/VideoViewerStore';
+
+jest.mock('../../../src/static/js/utils/classes/', () => ({
+    BrowserCache: jest.fn().mockImplementation(() => ({
+        get: (key: string) => {
+            let result: any = undefined;
+            switch (key) {
+                case 'player-volume':
+                    result = 0.6;
+                    break;
+                case 'player-sound-muted':
+                    result = false;
+                    break;
+                case 'in-theater-mode':
+                    result = true;
+                    break;
+                case 'video-quality':
+                    result = 720;
+                    break;
+                case 'video-playback-speed':
+                    result = 2;
+                    break;
+            }
+            return result;
+        },
+        set: jest.fn(),
+    })),
+}));
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/helpers', () => ({
+    BrowserEvents: jest.fn().mockImplementation(() => ({
+        doc: jest.fn(),
+        win: jest.fn(),
+    })),
+    exportStore: jest.fn((store) => store),
+}));
+
+describe('utils/store', () => {
+    describe('VideoViewerStore', () => {
+        const browserCacheInstance = (BrowserCache as jest.Mock).mock.results[0].value;
+        const browserCacheSetSpy = browserCacheInstance.set;
+
+        const handler = store.actions_handler.bind(store);
+
+        const onChangedViewerMode = jest.fn();
+        const onChangedPlayerVolume = jest.fn();
+        const onChangedPlayerSoundMuted = jest.fn();
+        const onChangedVideoQuality = jest.fn();
+        const onChangedVideoPlaybackSpeed = jest.fn();
+
+        store.on('changed_viewer_mode', onChangedViewerMode);
+        store.on('changed_player_volume', onChangedPlayerVolume);
+        store.on('changed_player_sound_muted', onChangedPlayerSoundMuted);
+        store.on('changed_video_quality', onChangedVideoQuality);
+        store.on('changed_video_playback_speed', onChangedVideoPlaybackSpeed);
+
+        test('Validate initial values', () => {
+            expect(store.get('player-volume')).toBe(0.6);
+            expect(store.get('player-sound-muted')).toBe(false);
+            expect(store.get('in-theater-mode')).toBe(true);
+            expect(store.get('video-data')).toBe(undefined); // @todo: Revisit this behavior
+            expect(store.get('video-quality')).toBe(720);
+            expect(store.get('video-playback-speed')).toBe(2);
+        });
+
+        describe('Trigger and validate actions behavior', () => {
+            test('Action type: "TOGGLE_VIEWER_MODE"', () => {
+                const initialValue = store.get('in-theater-mode');
+
+                handler({ type: 'TOGGLE_VIEWER_MODE' });
+
+                expect(onChangedViewerMode).toHaveBeenCalledWith();
+                expect(onChangedViewerMode).toHaveBeenCalledTimes(1);
+
+                expect(store.get('in-theater-mode')).toBe(!initialValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('in-theater-mode', !initialValue);
+            });
+
+            test('Action type: "SET_VIEWER_MODE"', () => {
+                const initialValue = store.get('in-theater-mode');
+                const newValue = !initialValue;
+
+                handler({ type: 'SET_VIEWER_MODE', inTheaterMode: newValue });
+
+                expect(onChangedViewerMode).toHaveBeenCalledWith();
+                expect(onChangedViewerMode).toHaveBeenCalledTimes(2); // The first time called by 'TOGGLE_VIEWER_MODE' action.
+
+                expect(store.get('in-theater-mode')).toBe(newValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('in-theater-mode', newValue);
+            });
+
+            test('Action type: "SET_PLAYER_VOLUME"', () => {
+                const newValue = 0.3;
+
+                handler({ type: 'SET_PLAYER_VOLUME', playerVolume: newValue });
+
+                expect(onChangedPlayerVolume).toHaveBeenCalledWith();
+                expect(onChangedPlayerVolume).toHaveBeenCalledTimes(1);
+
+                expect(store.get('player-volume')).toBe(newValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('player-volume', newValue);
+            });
+
+            test('Action type: "SET_PLAYER_SOUND_MUTED"', () => {
+                const initialValue = store.get('player-sound-muted');
+                const newValue = !initialValue;
+
+                handler({ type: 'SET_PLAYER_SOUND_MUTED', playerSoundMuted: newValue });
+
+                expect(onChangedPlayerSoundMuted).toHaveBeenCalledWith();
+                expect(onChangedPlayerSoundMuted).toHaveBeenCalledTimes(1);
+
+                expect(store.get('player-sound-muted')).toBe(newValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('player-sound-muted', newValue);
+            });
+
+            test('Action type: "SET_VIDEO_QUALITY"', () => {
+                const newValue = 1080;
+
+                handler({ type: 'SET_VIDEO_QUALITY', quality: newValue });
+
+                expect(onChangedVideoQuality).toHaveBeenCalledWith();
+                expect(onChangedVideoQuality).toHaveBeenCalledTimes(1);
+
+                expect(store.get('video-quality')).toBe(newValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('video-quality', newValue);
+            });
+
+            test('Action type: "SET_VIDEO_PLAYBACK_SPEED"', () => {
+                const newValue = 1.5;
+
+                handler({ type: 'SET_VIDEO_PLAYBACK_SPEED', playbackSpeed: newValue });
+
+                expect(onChangedVideoPlaybackSpeed).toHaveBeenCalledWith();
+                expect(onChangedVideoPlaybackSpeed).toHaveBeenCalledTimes(1);
+
+                expect(store.get('video-playback-speed')).toBe(newValue);
+                expect(browserCacheSetSpy).toHaveBeenCalledWith('video-playback-speed', newValue);
+            });
+        });
+    });
+});