# test.govlab/quality/core/validators/css.viewport.validator.test.ts

> 27 lines of code and 0 definitions.

Tree: Codebase Testing
Language: typescript
Canonical: https://banes-lab.com/anatomy/testing#file-testing-test-govlab-quality-core-validators-css-viewport-validator-test-ts
Source text: https://banes-lab.com/source/testing/test.govlab/quality/core/validators/css.viewport.validator.test.ts.txt

Listed in [test.govlab/quality/core/validators](https://banes-lab.com/api/source/testing/test.govlab/quality/core/validators.md), after [test.govlab/quality/core/validators/css.validator.test.ts](https://banes-lab.com/source/testing/test.govlab/quality/core/validators/css.validator.test.ts.md) and before [test.govlab/quality/core/validators/dependency.validator.test.ts](https://banes-lab.com/source/testing/test.govlab/quality/core/validators/dependency.validator.test.ts.md).

## Contained in

- [test.govlab/quality/core/validators](https://banes-lab.com/anatomy/testing/folder-testing-test-govlab-quality-core-validators.md)

## Source

```typescript
import { describe, expect, it } from "vitest";
import { validateWith } from "./validation.fixture.ts";

const RULE = "css-mobile-imports";

describe("the css-mobile-imports validator", () => {
    it("flags an orphaned mobile file with no base", () => {
        const found = validateWith(RULE, [["styles/card-mobile.css", "@media (max-width:600px){.c{color:red}}"]]);
        expect(found).toHaveLength(1);
        expect(found[0]?.message).toContain("no base file");
    });

    it("flags a mobile file that no barrel imports", () => {
        const found = validateWith(RULE, [
            ["styles/card-mobile.css", "@media (max-width:600px){.c{color:red}}"],
            ["styles/card.css", ".c{}"],
            ["styles/index.css", "@import 'card.css';"],
        ]);
        expect(found).toHaveLength(1);
        expect(found[0]?.message).toContain("not @imported");
    });

    it("passes when base exists and mobile is imported", () => {
        const found = validateWith(RULE, [
            ["styles/card-mobile.css", "@media (max-width:600px){.c{}}"],
            ["styles/card.css", ".c{}"],
            ["styles/index.css", "@import 'card.css';\n@import 'card-mobile.css';"],
        ]);
        expect(found).toEqual([]);
    });
});
```