Repository: NativeScript/NativeScript
File: tests/app/ui/styling/style-tests.ts (TypeScript)

Code before:
    TKUnit.assertEqual(result, expected, "Should resolve relative file to current directory");
}

export function test_resolveFileNameFromUrl_import_relative_file_parent_dir() {
    const importedFileExistsMock = (fileName: string) => (fileName.indexOf("views") !== -1);
    const importSource = "app/views/shared/main-page.css";
    const url = "../common.css";
    const appDirectory = "app";
    const expected = `${appDirectory}/views/common.css`;
    const result = resolveFileNameFromUrl(url, appDirectory, importedFileExistsMock, importSource);

    TKUnit.assertEqual(result, expected, "Should resolve relative file to parent directory");
}

export function test_resolveFileNameFromUrl_unexisting_file() {
    const fileDoesNotExistMock = (fileName: string) => false;
    const url = "~/theme/core.css";
    const appDirectory = "app";
    const result = resolveFileNameFromUrl(url, appDirectory, fileDoesNotExistMock);

    TKUnit.assertNull(result, "Shouldn't resolve unexisting file");
}

// <snippet module="ui/styling" title="styling">
// For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic.
// </snippet>


Review comment (bug):
The two tests above my test seemed to be flakey on my machine (they frequently failed while I was writing my test).
1. Doesn't `buildUIAndRunTest` reset everything each test?     So if so, what is the point of switching from `Label` to #test_checkAddRemoveCSS_Label?   (So I know for any future tests).


Code after:
    TKUnit.assertEqual(result, expected, "Should resolve relative file to current directory");
}

export function test_resolveFileNameFromUrl_import_relative_file_parent_dir() {
    const importedFileExistsMock = (fileName: string) => (fileName.indexOf("views") !== -1);
    const importSource = "app/views/shared/main-page.css";
    const url = "../common.css";
    const appDirectory = "app";
    const expected = `${appDirectory}/views/common.css`;
    const result = resolveFileNameFromUrl(url, appDirectory, importedFileExistsMock, importSource);

    TKUnit.assertEqual(result, expected, "Should resolve relative file to parent directory");
}

export function test_resolveFileNameFromUrl_unexisting_file() {
    const fileDoesNotExistMock = (fileName: string) => false;
    const url = "~/theme/core.css";
    const appDirectory = "app";
    const result = resolveFileNameFromUrl(url, appDirectory, fileDoesNotExistMock);

    TKUnit.assertNull(result, "Shouldn't resolve unexisting file");
}

export function test_checkAddRemoveCSS() {
    const css1 = "#test_checkAddRemoveCSS_label { color: #FF0000; }";
    const css2 = "#test_checkAddRemoveCSS_label { color: #00FF00; }";
    const label = new labelModule.Label();
    label.text = "color coming from updated rules";
    label.id = "test_checkAddRemoveCSS_label";

    helper.buildUIAndRunTest(label, function (views: Array<viewModule.View>) {
        const page = <pageModule.Page>views[1];

        // Add Red, we have to then trigger the page's CSS state change, for it to refresh the label's css with the new global rule
        addTaggedAdditionalCSS(css1, "red");
        page._onCssStateChange();
        helper.assertViewColor(label, "#FF0000");

        // Add Green (should override red)
        addTaggedAdditionalCSS(css2, "green");
        page._onCssStateChange();
        helper.assertViewColor(label, "#00FF00");

        // Remove Green (Should revert to red, since we removed the green rule)
        removeTaggedAdditionalCSS("green");
        page._onCssStateChange();
        helper.assertViewColor(label, "#FF0000");

        //Cleanup
        removeTaggedAdditionalCSS("red");
    });